From e64e9abe00b006692853de9e81b6a192586a4d56 Mon Sep 17 00:00:00 2001 From: JoltCode Date: Wed, 21 Aug 2024 22:25:01 +0100 Subject: [PATCH] chore(frontend): hooks and utils migrations to TS --- frontend/package.json | 1 + .../{commentInput.js => commentInput.tsx} | 30 ++++++++++++------- .../{UseUploadImage.js => UseUploadImage.ts} | 10 +++++-- ...{slugifyFileName.js => slugifyFileName.ts} | 2 +- frontend/yarn.lock | 5 ++++ 5 files changed, 34 insertions(+), 14 deletions(-) rename frontend/src/components/comments/{commentInput.js => commentInput.tsx} (88%) rename frontend/src/hooks/{UseUploadImage.js => UseUploadImage.ts} (83%) rename frontend/src/utils/{slugifyFileName.js => slugifyFileName.ts} (80%) diff --git a/frontend/package.json b/frontend/package.json index 232ef42094..2cdc9bffce 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/components/comments/commentInput.js b/frontend/src/components/comments/commentInput.tsx similarity index 88% rename from frontend/src/components/comments/commentInput.js rename to frontend/src/components/comments/commentInput.tsx index 96be48c554..27fd752a23 100644 --- a/frontend/src/components/comments/commentInput.js +++ b/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({
setIsShowPreview(false)} > setIsShowPreview(true)} > diff --git a/frontend/src/hooks/UseUploadImage.js b/frontend/src/hooks/UseUploadImage.ts similarity index 83% rename from frontend/src/hooks/UseUploadImage.js rename to frontend/src/hooks/UseUploadImage.ts index 55ba8fc58e..82720711df 100644 --- a/frontend/src/hooks/UseUploadImage.js +++ b/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], diff --git a/frontend/src/utils/slugifyFileName.js b/frontend/src/utils/slugifyFileName.ts similarity index 80% rename from frontend/src/utils/slugifyFileName.js rename to frontend/src/utils/slugifyFileName.ts index bb5e69484b..19d70f42d3 100644 --- a/frontend/src/utils/slugifyFileName.js +++ b/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]}`; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index e2abcad2bd..98fbaa982a 100644 --- a/frontend/yarn.lock +++ b/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"