diff --git a/backend/middleware/auth.ts b/backend/middleware/auth.ts index 5499a11..7c0821c 100644 --- a/backend/middleware/auth.ts +++ b/backend/middleware/auth.ts @@ -46,8 +46,6 @@ const auth = async (req: RequestType, res: Response, next: NextFunction) => { console.log("\nAuthorization Middleware Error:", e.message); } - console.log("Error Authenticating", e); - res.status(401).send("Error Authenticating"); } }; diff --git a/src/components/DownloadPage/DownloadPage.tsx b/src/components/DownloadPage/DownloadPage.tsx index 5c633e2..f63a70a 100644 --- a/src/components/DownloadPage/DownloadPage.tsx +++ b/src/components/DownloadPage/DownloadPage.tsx @@ -1,6 +1,5 @@ -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; -import axios from "../../axiosInterceptor"; import { downloadPublicFileAPI, getPublicFileInfoAPI, @@ -26,13 +25,13 @@ const PublicDownloadPage = () => { console.log("Error getting publicfile info", e); toast.error("Error getting public file"); } - }, [params.id, params.tempToken, getPublicFileInfoAPI]); + }, [params.id, params.tempToken]); - const downloadItem = useCallback(() => { + const downloadItem = () => { const id = params.id!; const tempToken = params.tempToken!; downloadPublicFileAPI(id, tempToken); - }, [params.id, params.tempToken, downloadPublicFileAPI]); + }; useEffect(() => { getFile(); diff --git a/src/components/FileInfoPopup/FileInfoPopup.tsx b/src/components/FileInfoPopup/FileInfoPopup.tsx index 3118b32..287b426 100644 --- a/src/components/FileInfoPopup/FileInfoPopup.tsx +++ b/src/components/FileInfoPopup/FileInfoPopup.tsx @@ -1,4 +1,4 @@ -import { memo, useCallback, useMemo } from "react"; +import { useMemo } from "react"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; import { downloadFileAPI } from "../../api/filesAPI"; import CloseIcon from "../../icons/CloseIcon"; @@ -10,7 +10,7 @@ import { getFileColor, getFileExtension } from "../../utils/files"; import bytes from "bytes"; import moment from "moment"; -const FileInfoPopup = memo(() => { +const FileInfoPopup = () => { const file = useAppSelector((state) => state.selected.popupModal.file)!; const dispatch = useAppDispatch(); const { @@ -23,34 +23,32 @@ const FileInfoPopup = memo(() => { ...contextMenuState } = useContextMenu(); - const fileExtension = useMemo( - () => getFileExtension(file.filename, 3), - [file.filename] + const fileExtension = getFileExtension(file.filename, 3); + + const imageColor = getFileColor(file.filename); + + const formattedDate = useMemo( + () => moment(file.uploadDate).format("L"), + [file.uploadDate] ); - const imageColor = useMemo( - () => getFileColor(file.filename), - [file.filename] - ); + const fileSize = bytes(file.metadata.size); - const formattedDate = useMemo(() => { - return moment(file.uploadDate).format("L"); - }, [file.uploadDate, moment]); - - const fileSize = useMemo(() => { - return bytes(file.metadata.size); - }, [file.metadata.size, bytes]); - - const closePhotoViewer = useCallback(() => { + const closePhotoViewer = () => { dispatch(resetPopupSelect()); - }, [resetPopupSelect]); + }; const downloadItem = () => { downloadFileAPI(file._id); }; - const outterWrapperClick = (e: any) => { - if (e.target.id !== "outer-wrapper" || contextMenuState.selected) return; + const outterWrapperClick = (e: React.MouseEvent) => { + if ( + (e.target as HTMLDivElement).id !== "outer-wrapper" || + contextMenuState.selected + ) { + return; + } dispatch(resetPopupSelect()); }; @@ -136,6 +134,6 @@ const FileInfoPopup = memo(() => { ); -}); +}; export default FileInfoPopup; diff --git a/src/components/FileItem/FileItem.tsx b/src/components/FileItem/FileItem.tsx index 65e735e..66fbf36 100644 --- a/src/components/FileItem/FileItem.tsx +++ b/src/components/FileItem/FileItem.tsx @@ -49,20 +49,11 @@ const FileItem: React.FC = memo((props) => { clickStopPropagation, ...contextMenuState } = useContextMenu(); - const fileExtension = useMemo( - () => getFileExtension(file.filename, listView ? 3 : 4), - [file.filename] - ); + const fileExtension = getFileExtension(file.filename, listView ? 3 : 4); - const imageColor = useMemo( - () => getFileColor(file.filename), - [file.filename] - ); + const imageColor = getFileColor(file.filename); - const formattedFilename = useMemo( - () => capitalize(file.filename), - [file.filename] - ); + const formattedFilename = capitalize(file.filename); const formattedCreatedDate = useMemo( () => moment(file.uploadDate).format("MM/DD/YY hh:mma"), diff --git a/src/components/Files/Files.tsx b/src/components/Files/Files.tsx index ffe10a7..4262bc7 100644 --- a/src/components/Files/Files.tsx +++ b/src/components/Files/Files.tsx @@ -1,6 +1,6 @@ import { useFiles } from "../../hooks/files"; import { useUtils } from "../../hooks/utils"; -import React, { memo, useMemo } from "react"; +import React, { memo } from "react"; import FileItem from "../FileItem/FileItem"; import ParentBar from "../ParentBar/ParentBar"; import classNames from "classnames"; diff --git a/src/components/Folders/Folders.tsx b/src/components/Folders/Folders.tsx index 20992ff..775b727 100644 --- a/src/components/Folders/Folders.tsx +++ b/src/components/Folders/Folders.tsx @@ -1,6 +1,6 @@ import { useFolders } from "../../hooks/folders"; import FolderItem from "../FolderItem/FolderItem"; -import { memo, useCallback, useMemo } from "react"; +import { memo, useCallback } from "react"; import classNames from "classnames"; import { useUtils } from "../../hooks/utils"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; @@ -9,7 +9,7 @@ import { setSortBy } from "../../reducers/filter"; const Folders = memo( ({ scrollDivRef }: { scrollDivRef: React.RefObject }) => { const { data: folders } = useFolders(false); - const { isHome, isTrash, isSearch } = useUtils(); + const { isTrash, isSearch } = useUtils(); const sortBy = useAppSelector((state) => state.filter.sortBy); const dispatch = useAppDispatch(); @@ -66,7 +66,7 @@ const Folders = memo( [sortBy] ); - const title = useMemo(() => { + const title = (() => { if (isTrash) { return "Trash"; } else if (isSearch) { @@ -74,7 +74,7 @@ const Folders = memo( } else { return folders?.length === 0 ? "No Folders" : "Folders"; } - }, [isHome, isTrash, isSearch, folders?.length]); + })(); return (
diff --git a/src/components/LoginPage/LoginPage.tsx b/src/components/LoginPage/LoginPage.tsx index 26804c7..397e329 100755 --- a/src/components/LoginPage/LoginPage.tsx +++ b/src/components/LoginPage/LoginPage.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { createAccountAPI, getUserAPI, @@ -11,7 +11,6 @@ import { useAppDispatch } from "../../hooks/store"; import { capitalize } from "lodash"; import AlertIcon from "../../icons/AlertIcon"; import Spinner from "../Spinner/Spinner"; -import classNames from "classnames"; import { toast, ToastContainer } from "react-toastify"; import Swal from "sweetalert2"; @@ -113,7 +112,7 @@ const LoginPage = () => { } }; - const isSubmitDisabled = useMemo(() => { + const isSubmitDisabled = (() => { switch (mode) { case "login": return !email || !password; @@ -124,7 +123,7 @@ const LoginPage = () => { default: return false; } - }, [email, password, verifyPassword, mode]); + })(); const onSubmit = (e: any) => { e.preventDefault(); @@ -137,7 +136,7 @@ const LoginPage = () => { } }; - const headerTitle = useMemo(() => { + const headerTitle = (() => { switch (mode) { case "login": return "Login to your account"; @@ -148,9 +147,9 @@ const LoginPage = () => { default: return "Login to your account"; } - }, [mode]); + })(); - const validationError = useMemo(() => { + const validationError = (() => { if (mode === "login" || mode === "reset") return ""; if (mode === "create") { @@ -158,7 +157,7 @@ const LoginPage = () => { } return ""; - }, [mode, email, password, verifyPassword]); + })(); useEffect(() => { const loggedIn = window.localStorage.getItem("hasPreviouslyLoggedIn"); diff --git a/src/components/Medias/Medias.tsx b/src/components/Medias/Medias.tsx index 169dc13..6171e64 100644 --- a/src/components/Medias/Medias.tsx +++ b/src/components/Medias/Medias.tsx @@ -1,5 +1,5 @@ import classNames from "classnames"; -import React, { memo, useCallback, useEffect, useMemo, useState } from "react"; +import React, { memo, useCallback, useEffect, useState } from "react"; import MediaItem from "../MediaItem/MediaItem"; import { useFiles } from "../../hooks/files"; import MultiSelectBar from "../MultiSelectBar/MultiSelectBar"; @@ -80,7 +80,7 @@ const Medias = memo( dispatch(setMediaFilter(value)); }; - const title = useMemo(() => { + const title = (() => { if (mediaFilter === "all") { return "Photos and Videos"; } else if (mediaFilter === "photos") { @@ -88,7 +88,7 @@ const Medias = memo( } else if (mediaFilter === "videos") { return "Videos"; } - }, [mediaFilter]); + })(); return (
{ } }; - const moveText = useMemo(() => { + const moveText = (() => { if (selectedFolder?._id && selectedFolder?.name) { return `Move to ${selectedFolder.name}`; } else if (!parent) { @@ -106,21 +106,15 @@ const MoverPopup = () => { const lastParent = parentList[parentList.length - 1]; return `Move to ${lastParent.name}`; } - }, [ - selectedFolder?._id, - selectedFolder?.name, - parent?._id, - parentList[parentList.length - 1], - parentList.length, - ]); + })(); - const headerText = useMemo(() => { + const headerText = (() => { if (parent) { return parent.name; } else { return "Home"; } - }, [selectedFolder?.name, parent?._id]); + })(); const onHomeClick = () => { setSearch(""); @@ -256,7 +250,7 @@ const MoverPopup = () => { )}
-

+

{moveText}

diff --git a/src/components/MultiSelectBar/MultiSelectBar.tsx b/src/components/MultiSelectBar/MultiSelectBar.tsx index 3770481..565b933 100644 --- a/src/components/MultiSelectBar/MultiSelectBar.tsx +++ b/src/components/MultiSelectBar/MultiSelectBar.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useRef } from "react"; +import React, { useCallback, useEffect, useRef } from "react"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; import { resetMultiSelect, setMoveModal } from "../../reducers/selected"; import { diff --git a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx b/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx index 696ae85..ee55b1f 100644 --- a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx +++ b/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx @@ -1,4 +1,4 @@ -import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { memo, useCallback, useEffect, useRef, useState } from "react"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; import { deleteVideoTokenAPI, getVideoTokenAPI } from "../../api/filesAPI"; import CloseIcon from "../../icons/CloseIcon"; @@ -49,15 +49,9 @@ const PhotoViewerPopup: React.FC = memo((props) => { ...contextMenuState } = useContextMenu(); - const fileExtension = useMemo( - () => getFileExtension(file.filename, 3), - [file.filename] - ); + const fileExtension = getFileExtension(file.filename, 3); - const imageColor = useMemo( - () => getFileColor(file.filename), - [file.filename] - ); + const imageColor = getFileColor(file.filename); const getVideo = useCallback(async () => { try { diff --git a/src/components/QuickAccess/QuickAccess.tsx b/src/components/QuickAccess/QuickAccess.tsx index 9a9fda7..6339957 100644 --- a/src/components/QuickAccess/QuickAccess.tsx +++ b/src/components/QuickAccess/QuickAccess.tsx @@ -1,9 +1,7 @@ -import { useSelector } from "react-redux"; import QuickAccessItem from "../QuickAccessItem/QuickAccessItem"; -import React, { memo, useMemo, useState } from "react"; +import { memo, useState } from "react"; import { useQuickFiles } from "../../hooks/files"; import classNames from "classnames"; -import { useParams } from "react-router-dom"; import { useUtils } from "../../hooks/utils"; import ChevronOutline from "../../icons/ChevronOutline"; diff --git a/src/components/QuickAccessItem/QuickAccessItem.tsx b/src/components/QuickAccessItem/QuickAccessItem.tsx index 80d0953..20cf1f0 100644 --- a/src/components/QuickAccessItem/QuickAccessItem.tsx +++ b/src/components/QuickAccessItem/QuickAccessItem.tsx @@ -52,15 +52,13 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => { ...contextMenuState } = useContextMenu(); - const fileExtension = useMemo( - () => getFileExtension(file.filename), - [file.filename] - ); - - const imageColor = useMemo( - () => getFileColor(file.filename), - [file.filename] + const fileExtension = getFileExtension(file.filename); + const imageColor = getFileColor(file.filename); + const formattedDate = useMemo( + () => moment(file.uploadDate).format("MM/DD/YY hh:mma"), + [file.uploadDate] ); + const formattedFilename = capitalize(file.filename); const quickItemClick = (e: React.MouseEvent) => { const multiSelectKey = e.metaKey || e.ctrlKey; @@ -188,7 +186,7 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => { : "text-[#212b36]" )} > - {capitalize(file.filename)} + {formattedFilename}

{ : "text-[#637381]" )} > - Created {moment(file.uploadDate).format("MM/DD/YY hh:mma")} + Created {formattedDate}
diff --git a/src/components/RightSection/RightSection.tsx b/src/components/RightSection/RightSection.tsx index 72598cf..df06aa1 100644 --- a/src/components/RightSection/RightSection.tsx +++ b/src/components/RightSection/RightSection.tsx @@ -46,17 +46,14 @@ const RightSection = memo(() => { const date = selectedItem.file?.uploadDate || selectedItem.folder?.createdAt; return moment(date).format("L"); - }, [selectedItem?.file?.uploadDate, selectedItem.folder?.createdAt, moment]); + }, [selectedItem?.file?.uploadDate, selectedItem.folder?.createdAt]); - const fileSize = useMemo(() => { - if (!selectedItem.file?.length) return 0; - return bytes(selectedItem.file.length); - }, [selectedItem?.file?.length, bytes]); + const fileSize = bytes(selectedItem.file?.length || 0); - const fileExtension = useMemo(() => { + const fileExtension = (() => { if (!selectedItem?.file?.filename) return null; return getFileExtension(selectedItem.file.filename); - }, [selectedItem?.file?.filename, getFileExtension]); + })(); const { onContextMenu, @@ -71,6 +68,7 @@ const RightSection = memo(() => { const reset = () => { dispatch(resetSelected()); }; + const openItem = () => { if (selectedItem.file) { dispatch(setPopupSelect({ type: "file", file: selectedItem.file })); @@ -81,7 +79,7 @@ const RightSection = memo(() => { } }; - const bannerBackgroundColor = useMemo(() => { + const bannerBackgroundColor = (() => { if (selectedItem.file) { return getFileColor(selectedItem.file.filename); } else if (selectedItem.folder) { @@ -89,9 +87,9 @@ const RightSection = memo(() => { } else { return "#3c85ee"; } - }, [selectedItem.file?.filename, selectedItem.folder?.name]); + })(); - const bannerText = useMemo(() => { + const bannerText = (() => { if (selectedItem.file) { return getFileExtension(selectedItem.file.filename); } else if (selectedItem.folder) { @@ -99,7 +97,7 @@ const RightSection = memo(() => { } else { return ""; } - }, [selectedItem.file?.filename, selectedItem.folder?.name]); + })(); return (
{ setShowSuggestions(true); }; - const searchTextPlaceholder = useMemo(() => { + const searchTextPlaceholder = (() => { if (isMedia) { return "Search Media"; } else if (isTrash) { @@ -103,7 +103,7 @@ const SearchBar = memo(() => { } else { return "Search"; } - }, [isMedia, isTrash]); + })(); return (
{ const { type, folder, file, fileClick, folderClick } = props; - const fileExtension = useMemo( - () => getFileExtension(file?.filename || "", 3), - [file?.filename] - ); - const imageColor = useMemo( - () => getFileColor(file?.filename || ""), - [file?.filename] - ); + const fileExtension = file ? getFileExtension(file.filename, 3) : ""; + + const imageColor = file ? getFileColor(file.filename) : ""; if (type === "folder" && folder) { return ( diff --git a/src/components/SettingsPage/SettingsChangePasswordPopup.tsx b/src/components/SettingsPage/SettingsChangePasswordPopup.tsx index 7352d01..cadbcfa 100644 --- a/src/components/SettingsPage/SettingsChangePasswordPopup.tsx +++ b/src/components/SettingsPage/SettingsChangePasswordPopup.tsx @@ -1,4 +1,4 @@ -import { useMemo, useState } from "react"; +import { useState } from "react"; import CloseIcon from "../../icons/CloseIcon"; import classNames from "classnames"; import { toast } from "react-toastify"; @@ -16,7 +16,7 @@ const SettingsChangePasswordPopup: React.FC< const [verifyNewPassword, setVerifyNewPassword] = useState(""); const [loadingChangePassword, setLoadingChangePassword] = useState(false); - const inputDisabled = useMemo(() => { + const inputDisabled = (() => { if ( loadingChangePassword || currentPassword.length === 0 || @@ -35,9 +35,9 @@ const SettingsChangePasswordPopup: React.FC< } return false; - }, [currentPassword, newPassword, verifyNewPassword, loadingChangePassword]); + })(); - const errorMessage = useMemo(() => { + const errorMessage = (() => { if (newPassword.length === 0) { return ""; } @@ -51,7 +51,7 @@ const SettingsChangePasswordPopup: React.FC< } return ""; - }, [newPassword, verifyNewPassword]); + })(); const submitPasswordChange = async (e: any) => { e.preventDefault(); diff --git a/src/components/SharePopup/SharePopup.tsx b/src/components/SharePopup/SharePopup.tsx index 20e6335..14da939 100644 --- a/src/components/SharePopup/SharePopup.tsx +++ b/src/components/SharePopup/SharePopup.tsx @@ -21,7 +21,6 @@ import { setShareModal, } from "../../reducers/selected"; import { toast } from "react-toastify"; -import getBackendURL from "../../utils/getBackendURL"; const SharePopup = memo(() => { const file = useAppSelector((state) => state.selected.shareModal.file)!; @@ -31,23 +30,16 @@ const SharePopup = memo(() => { const { invalidateFilesCache } = useFilesClient(); const { invalidateQuickFilesCache } = useQuickFilesClient(); - const imageColor = useMemo( - () => getFileColor(file.filename), - [file.filename] + const imageColor = getFileColor(file.filename); + + const fileExtension = getFileExtension(file.filename, 3); + + const formattedDate = useMemo( + () => moment(file.uploadDate).format("MM/DD/YYYY"), + [file.uploadDate] ); - const fileExtension = useMemo( - () => getFileExtension(file.filename, 3), - [file.filename] - ); - - const formattedDate = useMemo(() => { - return moment(file.uploadDate).format("MM/DD/YYYY"); - }, [file.uploadDate, moment]); - - const fileSize = useMemo(() => { - return bytes(file.length); - }, [file.length, bytes]); + const fileSize = bytes(file.length); const makePublic = async () => { try { @@ -156,11 +148,9 @@ const SharePopup = memo(() => { useEffect(() => { if (!file.metadata.link) return; - const url = `${getBackendURL()}/public-download/${file._id}/${ - file.metadata.link - }`; + const url = `${window.location.origin}/public-download/${file._id}/${file.metadata.link}`; setShareLink(url); - }, [file.metadata.link]); + }, [file._id, file.metadata.link]); return (
{ const dispatch = useAppDispatch(); const toggleMinimize = () => { - setMinimized(!minimized); + setMinimized((val) => !val); }; const uploadTitle = useMemo(() => { diff --git a/src/hooks/utils.ts b/src/hooks/utils.ts index a46c9f4..fac92fa 100644 --- a/src/hooks/utils.ts +++ b/src/hooks/utils.ts @@ -1,39 +1,25 @@ -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { useLocation } from "react-router-dom"; export const useUtils = () => { const location = useLocation(); - const isHome = useMemo(() => { - return location.pathname === "/home"; - }, [location.pathname]); + const isHome = location.pathname === "/home"; - const isTrash = useMemo(() => { - return ( - location.pathname === "/trash" || - location.pathname.includes("/folder-trash") || - location.pathname.includes("/search-trash") - ); - }, [location.pathname]); + const isTrash = + location.pathname === "/trash" || + location.pathname.includes("/folder-trash") || + location.pathname.includes("/search-trash"); - const isMedia = useMemo(() => { - return ( - location.pathname === "/media" || - location.pathname.includes("/search-media") - ); - }, [location.pathname]); + const isMedia = + location.pathname === "/media" || + location.pathname.includes("/search-media"); - const isSettings = useMemo(() => { - return location.pathname === "/settings"; - }, [location.pathname]); + const isSettings = location.pathname === "/settings"; - const isHomeFolder = useMemo(() => { - return location.pathname.includes("/folder/"); - }, [location.pathname]); + const isHomeFolder = location.pathname.includes("/folder/"); - const isSearch = useMemo(() => { - return location.pathname.includes("/search/"); - }, [location.pathname]); + const isSearch = location.pathname.includes("/search/"); return { isHome, isTrash, isMedia, isSettings, isHomeFolder, isSearch }; };