chore(frontend): hooks and utils migrations to TS

frontend/package.json

@@ -122,6 +122,7 @@
     "@types/chart.js": "^2.9.41",
     "@types/dompurify": "^3.0.5",
     "@types/react-test-renderer": "^18.3.0",
+    "@types/slug": "^5.0.9",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "combine-react-intl-messages": "^4.0.0",
     "jest-canvas-mock": "^2.5.2",

frontend/src/components/comments/commentInput.js → frontend/src/components/comments/commentInput.tsx

@@ -17,6 +17,7 @@ import { htmlFromMarkdown, formatUserNamesToLink } from '../../utils/htmlFromMar
 import { iconConfig } from './editorIconConfig';
 import messages from './messages';
 import { CurrentUserAvatar } from '../user/avatar';
+import { RootStore } from '../../store';
 
 function CommentInputField({
   comment,
@@ -29,16 +30,27 @@ function CommentInputField({
   isShowUserPicture = false,
   placeholderMsg = messages.leaveAComment,
   markdownTextareaProps = {},
-}: Object) {
-  const token = useSelector((state) => state.auth.token);
+}: {
+  comment: string;
+  setComment: (comment: string) => void;
+  contributors: string[] | undefined;
+  enableHashtagPaste?: boolean;
+  isShowTabNavs?: boolean;
+  isShowFooter?: boolean;
+  enableContributorsHashtag?: boolean;
+  isShowUserPicture?: boolean;
+  placeholderMsg?: any;
+  markdownTextareaProps?: any;
+}) {
+  const token = useSelector((state: RootStore) => state.auth.token);
   const textareaRef = useRef();
   const isBundle = useRef(false);
   const [isShowPreview, setIsShowPreview] = useState(false);
 
-  const appendImgToComment = (url) => setComment(`${comment}\n![image](${url})\n`);
+  const appendImgToComment = (url: string) => setComment(`${comment}\n![image](${url})\n`);
   const [uploadError, uploading, onDrop] = useOnDrop(appendImgToComment);
   const { fileRejections, getRootProps, getInputProps } = useDropzone({
-    onDrop,
+    onDrop: onDrop ?? undefined,
     ...DROPZONE_SETTINGS,
   });
   const [fileuploadError, fileuploading, uploadImg] = useUploadImage();
@@ -95,18 +107,16 @@ function CommentInputField({
           <div className="pv3-ns ph3 ph3-m bg-grey-light dib">
             <span
               role="button"
-              className={`pointer db dib-ns pb1 bb bw1 ${
-                !isShowPreview ? 'b--blue-dark' : 'b--grey-light'
-              }`}
+              className={`pointer db dib-ns pb1 bb bw1 ${!isShowPreview ? 'b--blue-dark' : 'b--grey-light'
+                }`}
               onClick={() => setIsShowPreview(false)}
             >
               <FormattedMessage {...messages.write} />
             </span>
             <span
               role="button"
-              className={`pointer ml3 db dib-ns pb1 bb bw1 ${
-                isShowPreview ? 'b--blue-dark' : 'b--grey-light'
-              }`}
+              className={`pointer ml3 db dib-ns pb1 bb bw1 ${isShowPreview ? 'b--blue-dark' : 'b--grey-light'
+                }`}
               onClick={() => setIsShowPreview(true)}
             >
               <FormattedMessage {...messages.preview} />

frontend/src/hooks/UseUploadImage.js → frontend/src/hooks/UseUploadImage.ts

@@ -3,12 +3,13 @@ import { useSelector } from 'react-redux';
 
 import { pushToLocalJSONAPI } from '../network/genericJSONRequest';
 import { slugifyFileName } from '../utils/slugifyFileName';
+import { RootStore } from '../store';
 
 export const useUploadImage = () => {
   const [uploading, setUploading] = useState(false);
   const [uploadError, setUploadError] = useState(null);
 
-  const uploadImg = useCallback((file, updateFn, token) => {
+  const uploadImg = useCallback((file: File, updateFn: any, token: string) => {
     if (file && updateFn && token) {
       const promise = new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -25,6 +26,7 @@ export const useUploadImage = () => {
         (result) => {
           const payload = JSON.stringify({
             mime: file.type,
+            // @ts-expect-error TS Migrations
             data: result.split('base64,')[1],
             filename: slugifyFileName(file.name, file.type),
           });
@@ -49,12 +51,14 @@ export const useUploadImage = () => {
   return [uploadError, uploading, uploadImg];
 };
 
-export const useOnDrop = (appendImgToComment) => {
-  const token = useSelector((state) => state.auth.token);
+export const useOnDrop = (appendImgToComment: string) => {
+  const token = useSelector((state: RootStore) => state.auth.token);
   const [uploadError, uploading, uploadImg] = useUploadImage();
 
   const onDrop = useCallback(
+    // @ts-expect-error TS Migrations
     (acceptedFiles) => {
+      // @ts-expect-error TS Migrations
       acceptedFiles.forEach(async (file) => await uploadImg(file, appendImgToComment, token));
     },
     [token, uploadImg, appendImgToComment],

frontend/src/utils/slugifyFileName.js → frontend/src/utils/slugifyFileName.ts

@@ -1,6 +1,6 @@
 import slug from 'slug';
 
-export const slugifyFileName = (name, mimetype) => {
+export const slugifyFileName = (name: string, mimetype: string) => {
   // slugify file names in order to avoid problems on the markdown
   if (name.lastIndexOf('.') === -1) {
     name = `${name}.${mimetype.split('/')[1]}`;

frontend/yarn.lock

@@ -4079,6 +4079,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/slug@^5.0.9":
+  version "5.0.9"
+  resolved "https://registry.yarnpkg.com/@types/slug/-/slug-5.0.9.tgz#e5b213a9d7797d40d362ba85e2a7bbcd4df4ed40"
+  integrity sha512-6Yp8BSplP35Esa/wOG1wLNKiqXevpQTEF/RcL/NV6BBQaMmZh4YlDwCgrrFSoUE4xAGvnKd5c+lkQJmPrBAzfQ==
+
 "@types/sockjs@^0.3.33":
   version "0.3.36"
   resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.36.tgz#ce322cf07bcc119d4cbf7f88954f3a3bd0f67535"