diff --git a/src/components/AddNewDropdown/AddNewDropdown.tsx b/src/components/AddNewDropdown/AddNewDropdown.tsx index 396981e..df23cb7 100644 --- a/src/components/AddNewDropdown/AddNewDropdown.tsx +++ b/src/components/AddNewDropdown/AddNewDropdown.tsx @@ -1,6 +1,5 @@ import { useParams } from "react-router-dom"; -import { createFolderAPI, uploadFolderAPI } from "../../api/foldersAPI"; -import { useFoldersClient } from "../../hooks/folders"; +import { createFolderAPI } from "../../api/foldersAPI"; import { useClickOutOfBounds } from "../../hooks/utils"; import { showCreateFolderPopup } from "../../popups/folder"; import React, { RefObject, useEffect, useRef, useState } from "react"; @@ -9,6 +8,7 @@ import UploadFileIcon from "../../icons/UploadFileIcon"; import CreateFolderIcon from "../../icons/CreateFolderIcon"; import FolderUploadIcon from "../../icons/FolderUploadIcon"; import Swal from "sweetalert2"; +import { useFolders } from "../../hooks/folders"; interface AddNewDropdownProps { closeDropdown: () => void; @@ -16,7 +16,7 @@ interface AddNewDropdownProps { const AddNewDropdown: React.FC = (props) => { const params = useParams(); - const { invalidateFoldersCache } = useFoldersClient(); + const { refetch: refetchFolders } = useFolders(false); const [supportsWebkitDirectory, setSupportsWebkitDirectory] = useState(false); const { wrapperRef } = useClickOutOfBounds(props.closeDropdown); const uploadRef: RefObject = useRef(null); @@ -32,7 +32,7 @@ const AddNewDropdown: React.FC = (props) => { } await createFolderAPI(folderName, params.id); - invalidateFoldersCache(); + refetchFolders(); }; const handleUpload = (e: React.FormEvent) => { diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx index 7c3ea88..350e16c 100644 --- a/src/components/ContextMenu/ContextMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -6,8 +6,7 @@ import { trashFileAPI, restoreFileAPI, } from "../../api/filesAPI"; -import { useFilesClient, useQuickFilesClient } from "../../hooks/files"; -import { useFoldersClient } from "../../hooks/folders"; +import { useFiles, useQuickFiles } from "../../hooks/files"; import { deleteFolderAPI, downloadZIPAPI, @@ -40,6 +39,7 @@ import { FileInterface } from "../../types/file"; import { FolderInterface } from "../../types/folders"; import { toast } from "react-toastify"; import { deleteFolderPopup, renameFolderPopup } from "../../popups/folder"; +import { useFolders } from "../../hooks/folders"; export interface ContextMenuProps { closeContext: () => void; @@ -61,9 +61,9 @@ const ContextMenu: React.FC = memo((props) => { Y: 0, set: false, }); - const { invalidateFilesCache } = useFilesClient(); - const { invalidateFoldersCache } = useFoldersClient(); - const { invalidateQuickFilesCache } = useQuickFilesClient(); + const { refetch: refetchFiles } = useFiles(false); + const { refetch: refetchFolders } = useFolders(false); + const { refetch: refetchQuickFiles } = useQuickFiles(false); const { closeContext, contextSelected, @@ -230,9 +230,9 @@ const ContextMenu: React.FC = memo((props) => { }; const reloadItems = () => { - invalidateFilesCache(); - invalidateQuickFilesCache(); - invalidateFoldersCache(); + refetchFiles(); + refetchQuickFiles(); + refetchFolders(); dispatch(resetSelected()); }; diff --git a/src/components/Dataform/Dataform.tsx b/src/components/Dataform/Dataform.tsx index cffa3c5..939ad14 100644 --- a/src/components/Dataform/Dataform.tsx +++ b/src/components/Dataform/Dataform.tsx @@ -10,7 +10,7 @@ import { useParams } from "react-router-dom"; import classNames from "classnames"; import { useDragAndDrop } from "../../hooks/utils"; import MultiSelectBar from "../MultiSelectBar/MultiSelectBar"; -import { useFolders } from "../../hooks/folders"; +import { useFolder, useFolders } from "../../hooks/folders"; import { removeNavigationMap } from "../../reducers/selected"; const DataForm = memo( @@ -21,6 +21,7 @@ const DataForm = memo( data: fileList, isLoading: isLoadingFiles, } = useFiles(); + const { isLoading: isLoadingFolder } = useFolder(true); const { isLoading: isLoadingFolders } = useFolders(); const { isLoading: isLoadingQuickItems } = useQuickFiles(); const dispatch = useAppDispatch(); @@ -32,7 +33,11 @@ const DataForm = memo( return state.selected.navigationMap[window.location.pathname]; }); - const isLoading = isLoadingFiles || isLoadingFolders || isLoadingQuickItems; + const isLoading = + isLoadingFiles || + isLoadingFolders || + isLoadingQuickItems || + isLoadingFolder; useEffect(() => { if (initialLoad) { diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 22cf5b5..1dfe854 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom"; import SearchBar from "../SearchBar/SearchBar"; import MenuIcon from "../../icons/MenuIcon"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; -import { closeDrawer, toggleDrawer } from "../../reducers/leftSection"; +import { closeDrawer, openDrawer } from "../../reducers/leftSection"; import { useUtils } from "../../hooks/utils"; import ChevronOutline from "../../icons/ChevronOutline"; import SettingsIconSolid from "../../icons/SettingsIconSolid"; @@ -13,8 +13,8 @@ const Header = () => { const dispatch = useAppDispatch(); const navigate = useNavigate(); - const toggleDrawerClick = () => { - dispatch(toggleDrawer()); + const openDrawerClick = () => { + dispatch(openDrawer()); }; const closeDrawerClick = () => { @@ -37,22 +37,21 @@ const Header = () => { {!isSettings && ( )} diff --git a/src/components/LeftSection/LeftSection.tsx b/src/components/LeftSection/LeftSection.tsx index 39b81e5..5176513 100644 --- a/src/components/LeftSection/LeftSection.tsx +++ b/src/components/LeftSection/LeftSection.tsx @@ -82,20 +82,20 @@ const LeftSection = ({ }; const closeDrawerEvent = useCallback( - (e: any) => { - if ( - !e || - !leftSectionOpen || - e.target.id === "search-bar" || - e.target.id === "menu-icon" || - e.target.id === "header" - ) { + (e: MouseEvent | TouchEvent) => { + if (!leftSectionOpen) return; + + const target = e.target as HTMLElement; + + const idsToIgnore = ["search-bar", "menu-icon", "header"]; + + if (!target || idsToIgnore.includes(target.id)) { return; } dispatch(closeDrawer()); }, - [closeDrawer, leftSectionOpen] + [leftSectionOpen] ); const { wrapperRef } = useClickOutOfBounds(closeDrawerEvent, leftSectionOpen); diff --git a/src/components/MoverPopup/MoverPopup.tsx b/src/components/MoverPopup/MoverPopup.tsx index 2f7ec70..2036fde 100644 --- a/src/components/MoverPopup/MoverPopup.tsx +++ b/src/components/MoverPopup/MoverPopup.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useMemo, useRef, useState } from "react"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; -import { useFoldersClient, useMoveFolders } from "../../hooks/folders"; +import { useFolders, useMoveFolders } from "../../hooks/folders"; import { FolderInterface } from "../../types/folders"; import CloseIcon from "../../icons/CloseIcon"; import { resetMoveModal } from "../../reducers/selected"; @@ -12,7 +12,7 @@ import classNames from "classnames"; import FolderIcon from "../../icons/FolderIcon"; import { toast } from "react-toastify"; import { moveFileAPI } from "../../api/filesAPI"; -import { useFilesClient } from "../../hooks/files"; +import { useFiles } from "../../hooks/files"; import { moveFolderAPI } from "../../api/foldersAPI"; const MoverPopup = () => { @@ -30,8 +30,8 @@ const MoverPopup = () => { const file = useAppSelector((state) => state.selected.moveModal.file); const folder = useAppSelector((state) => state.selected.moveModal.folder); const dispatch = useAppDispatch(); - const { invalidateFilesCache } = useFilesClient(); - const { invalidateFoldersCache } = useFoldersClient(); + const { refetch: refetchFiles } = useFiles(false); + const { refetch: refetchFolders } = useFolders(false); const lastSelected = useRef({ timestamp: 0, folderID: "", @@ -137,7 +137,7 @@ const MoverPopup = () => { success: "File Moved", error: "Error Moving File", }); - invalidateFilesCache(); + refetchFiles(); dispatch(resetMoveModal()); } else if (folder) { await toast.promise(moveFolderAPI(folder._id, moveTo), { @@ -145,7 +145,7 @@ const MoverPopup = () => { success: "Folder Moved", error: "Error Moving Folder", }); - invalidateFoldersCache(); + refetchFolders(); dispatch(resetMoveModal()); } console.log("move to", moveTo); diff --git a/src/components/MultiSelectBar/MultiSelectBar.tsx b/src/components/MultiSelectBar/MultiSelectBar.tsx index 1755b59..a1bdc63 100644 --- a/src/components/MultiSelectBar/MultiSelectBar.tsx +++ b/src/components/MultiSelectBar/MultiSelectBar.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useRef } from "react"; +import React, { useCallback, useEffect } from "react"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; import { resetMultiSelect, setMoveModal } from "../../reducers/selected"; import { @@ -6,8 +6,7 @@ import { restoreMultiAPI, trashMultiAPI, } from "../../api/filesAPI"; -import { useFilesClient, useQuickFilesClient } from "../../hooks/files"; -import { useFoldersClient } from "../../hooks/folders"; +import { useFiles, useQuickFiles } from "../../hooks/files"; import TrashIcon from "../../icons/TrashIcon"; import Moveicon from "../../icons/MoveIcon"; import { @@ -22,10 +21,11 @@ import DownloadIcon from "../../icons/DownloadIcon"; import { downloadZIPAPI } from "../../api/foldersAPI"; import CloseIcon from "../../icons/CloseIcon"; import { useLocation } from "react-router-dom"; +import { useFolders } from "../../hooks/folders"; const MultiSelectBar: React.FC = () => { const dispatch = useAppDispatch(); - const ignoreFirstMount = useRef(true); + // const ignoreFirstMount = useRef(true); const multiSelectMode = useAppSelector( (state) => state.selected.multiSelectMode ); @@ -35,9 +35,9 @@ const MultiSelectBar: React.FC = () => { const multiSelectCount = useAppSelector( (state) => state.selected.multiSelectCount ); - const { invalidateFilesCache } = useFilesClient(); - const { invalidateFoldersCache } = useFoldersClient(); - const { invalidateQuickFilesCache } = useQuickFilesClient(); + const { refetch: refetchFiles } = useFiles(false); + const { refetch: refetchFolders } = useFolders(false); + const { refetch: refetchQuickFiles } = useQuickFiles(false); const { isTrash, isMedia } = useUtils(); @@ -87,9 +87,9 @@ const MultiSelectBar: React.FC = () => { success: "Trashed", error: "Error Trashing", }); - invalidateFilesCache(); - invalidateFoldersCache(); - invalidateQuickFilesCache(); + refetchFiles(); + refetchFolders(); + refetchQuickFiles(); closeMultiSelect(); } catch (e) { console.log("Error Trashing Items", e); @@ -107,9 +107,9 @@ const MultiSelectBar: React.FC = () => { success: "Deleted", error: "Error Deleting", }); - invalidateFilesCache(); - invalidateFoldersCache(); - invalidateQuickFilesCache(); + refetchFiles(); + refetchFolders(); + refetchQuickFiles(); closeMultiSelect(); } catch (e) { console.log("Error Deleting Items", e); @@ -126,9 +126,9 @@ const MultiSelectBar: React.FC = () => { success: "Restored", error: "Error Restoring", }); - invalidateFilesCache(); - invalidateFoldersCache(); - invalidateQuickFilesCache(); + refetchFiles(); + refetchFolders(); + refetchQuickFiles(); closeMultiSelect(); }; diff --git a/src/components/ParentBar/ParentBar.tsx b/src/components/ParentBar/ParentBar.tsx index 98e20cd..9868894 100644 --- a/src/components/ParentBar/ParentBar.tsx +++ b/src/components/ParentBar/ParentBar.tsx @@ -1,11 +1,11 @@ -import React, { memo } from "react"; +import { memo } from "react"; import { useNavigate } from "react-router-dom"; import { useUtils } from "../../hooks/utils"; import { useFolder } from "../../hooks/folders"; import SpacerIcon from "../../icons/SpacerIcon"; const ParentBar = memo(() => { - const { data: folder } = useFolder(); + const { data: folder } = useFolder(false); const navigate = useNavigate(); const { isHome, isTrash } = useUtils(); diff --git a/src/components/SharePopup/SharePopup.tsx b/src/components/SharePopup/SharePopup.tsx index 14da939..9835046 100644 --- a/src/components/SharePopup/SharePopup.tsx +++ b/src/components/SharePopup/SharePopup.tsx @@ -14,7 +14,7 @@ import { makePublicAPI, removeLinkAPI, } from "../../api/filesAPI"; -import { useFilesClient, useQuickFilesClient } from "../../hooks/files"; +import { useFiles, useQuickFiles } from "../../hooks/files"; import { resetShareModal, setMainSelect, @@ -27,8 +27,8 @@ const SharePopup = memo(() => { const [updating, setUpdating] = useState(false); const [shareLink, setShareLink] = useState(""); const dispatch = useAppDispatch(); - const { invalidateFilesCache } = useFilesClient(); - const { invalidateQuickFilesCache } = useQuickFilesClient(); + const { refetch: refetchFiles } = useFiles(false); + const { refetch: refetchQuickFiles } = useQuickFiles(false); const imageColor = getFileColor(file.filename); @@ -63,8 +63,8 @@ const SharePopup = memo(() => { }) ); dispatch(setShareModal(updatedFile)); - invalidateFilesCache(); - invalidateQuickFilesCache(); + refetchFiles(); + refetchQuickFiles(); } catch (e) { console.log("Error making file public", e); } finally { @@ -94,8 +94,8 @@ const SharePopup = memo(() => { }) ); dispatch(setShareModal(updatedFile)); - invalidateFilesCache(); - invalidateQuickFilesCache(); + refetchFiles(); + refetchQuickFiles(); } catch (e) { console.log("Error making file public", e); } finally { @@ -122,8 +122,8 @@ const SharePopup = memo(() => { }) ); dispatch(setShareModal(updatedFile)); - invalidateFilesCache(); - invalidateQuickFilesCache(); + refetchFiles(); + refetchQuickFiles(); setShareLink(""); } catch (e) { console.log("Error removing link", e); diff --git a/src/hooks/files.ts b/src/hooks/files.ts index ffb0a68..28a584e 100644 --- a/src/hooks/files.ts +++ b/src/hooks/files.ts @@ -1,10 +1,8 @@ import { - QueryFunctionContext, UseInfiniteQueryResult, UseQueryResult, useInfiniteQuery, useQuery, - useQueryClient, } from "react-query"; import { useParams } from "react-router-dom"; import { @@ -25,7 +23,7 @@ import { import { debounce } from "lodash"; import { addUpload, editUpload } from "../reducers/uploader"; import { uploadFolderAPI } from "../api/foldersAPI"; -import { useFoldersClient } from "./folders"; +import { useFolders } from "./folders"; export const useFiles = (enabled = true) => { const params = useParams(); @@ -75,38 +73,7 @@ export const useFiles = (enabled = true) => { } ); - const testFunction = () => { - console.log("this is a test function"); - }; - - return { ...filesReactQuery, testFunction }; -}; - -export const useFilesClient = () => { - const params = useParams(); - // TODO: Remove any - const sortBy = useAppSelector((state) => state.filter.sortBy); - const filesReactClientQuery = useQueryClient(); - const { isTrash, isMedia } = useUtils(); - const limit = isMedia ? 100 : 50; - - const invalidateFilesCache = () => { - filesReactClientQuery.invalidateQueries({ - queryKey: [ - "files", - { - parent: params.id || "/", - search: params.query || "", - sortBy, - limit, - trashMode: isTrash, - mediaMode: isMedia, - }, - ], - }); - }; - - return { ...filesReactClientQuery, invalidateFilesCache }; + return { ...filesReactQuery }; }; export const useQuickFiles = (enabled = true) => { @@ -123,18 +90,6 @@ export const useQuickFiles = (enabled = true) => { return { ...quickFilesQuery }; }; -export const useQuickFilesClient = () => { - const quickFilesReactClientQuery = useQueryClient(); - - const invalidateQuickFilesCache = () => { - quickFilesReactClientQuery.invalidateQueries({ - queryKey: "quickFiles", - }); - }; - - return { ...quickFilesReactClientQuery, invalidateQuickFilesCache }; -}; - export const useSearchSuggestions = (searchText: string) => { const { isTrash, isMedia } = useUtils(); const searchQuery = useQuery( @@ -156,9 +111,9 @@ export const useSearchSuggestions = (searchText: string) => { export const useUploader = () => { const dispatch = useAppDispatch(); const params = useParams(); - const { invalidateFilesCache } = useFilesClient(); - const { invalidateQuickFilesCache } = useQuickFilesClient(); - const { invalidateFoldersCache } = useFoldersClient(); + const { refetch: refetchFiles } = useFiles(false); + const { refetch: refetchQuickFiles } = useQuickFiles(false); + const { refetch: refetchFolders } = useFolders(false); const debounceDispatch = debounce(dispatch, 200); @@ -225,8 +180,8 @@ export const useUploader = () => { }) ); removeFileUploadCancelToken(currentID); - invalidateFilesCache(); - invalidateQuickFilesCache(); + refetchFiles(); + refetchQuickFiles(); }) .catch((e) => { console.log("Error uploading file", e); @@ -311,9 +266,9 @@ export const useUploader = () => { }) ); removeFileUploadCancelToken(currentID); - invalidateFilesCache(); - invalidateQuickFilesCache(); - invalidateFoldersCache(); + refetchFiles(); + refetchQuickFiles(); + refetchFolders(); }) .catch((e) => { console.log("Error uploading folder", e); diff --git a/src/hooks/folders.ts b/src/hooks/folders.ts index 030f08f..05da9c6 100644 --- a/src/hooks/folders.ts +++ b/src/hooks/folders.ts @@ -31,33 +31,7 @@ export const useFolders = (enabled = true) => { return { ...foldersReactQuery }; }; -export const useFoldersClient = () => { - const params = useParams(); - const sortBy = useAppSelector((state) => state.filter.sortBy); - const foldersReactClientQuery = useQueryClient(); - const { isTrash } = useUtils(); - - const invalidateFoldersCache = () => { - foldersReactClientQuery.invalidateQueries({ - queryKey: [ - "folders", - { - parent: params.id || "/", - search: params.query || "", - sortBy, - limit: undefined, - trashMode: isTrash, - }, - ], - }); - }; - return { - ...foldersReactClientQuery, - invalidateFoldersCache, - }; -}; - -export const useFolder = () => { +export const useFolder = (enabled = true) => { const params = useParams(); const folderQuery = useQuery( [ @@ -66,7 +40,8 @@ export const useFolder = () => { id: params.id, }, ], - getFolderInfoAPI + getFolderInfoAPI, + { enabled } ); return { ...folderQuery }; diff --git a/src/hooks/utils.ts b/src/hooks/utils.ts index fac92fa..4a1e77c 100644 --- a/src/hooks/utils.ts +++ b/src/hooks/utils.ts @@ -31,7 +31,7 @@ export const useClickOutOfBounds = ( const wrapperRef = useRef(null); // TODO: Remove this any const outOfBoundsClickCheck = useCallback( - (e: any) => { + (e: MouseEvent | TouchEvent) => { if (wrapperRef && !wrapperRef.current?.contains(e.target as Node)) { outOfBoundsCallback(e); } @@ -40,7 +40,6 @@ export const useClickOutOfBounds = ( ); useEffect(() => { - console.log("useeffect"); if (shouldCheck) { document.addEventListener("mousedown", outOfBoundsClickCheck); document.addEventListener("touchstart", outOfBoundsClickCheck); diff --git a/src/reducers/leftSection.ts b/src/reducers/leftSection.ts index e3288d8..7bb7a2b 100644 --- a/src/reducers/leftSection.ts +++ b/src/reducers/leftSection.ts @@ -14,9 +14,13 @@ const leftSectionSlice = createSlice({ closeDrawer: (state) => { state.drawOpen = false; }, + openDrawer: (state) => { + state.drawOpen = true; + }, }, }); -export const { toggleDrawer, closeDrawer } = leftSectionSlice.actions; +export const { toggleDrawer, closeDrawer, openDrawer } = + leftSectionSlice.actions; export default leftSectionSlice.reducer;