oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed draw logic and removed unneeded react query code

Browse Source
This commit is contained in:
subnub
2025-01-07 09:56:55 -05:00
parent 7d1e44ad74
commit f3b45a532f
13 changed files with 92 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AddNewDropdown/AddNewDropdown.tsx
+4 -4
View File
@@ -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<AddNewDropdownProps> = (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<HTMLInputElement> = useRef(null);
@@ -32,7 +32,7 @@ const AddNewDropdown: React.FC<AddNewDropdownProps> = (props) => {
}
await createFolderAPI(folderName, params.id);
invalidateFoldersCache();
refetchFolders();
};
const handleUpload = (e: React.FormEvent<HTMLInputElement>) => {
src/components/ContextMenu/ContextMenu.tsx
+8 -8
View File
@@ -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<ContextMenuProps> = 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<ContextMenuProps> = memo((props) => {
};
const reloadItems = () => {
invalidateFilesCache();
invalidateQuickFilesCache();
invalidateFoldersCache();
refetchFiles();
refetchQuickFiles();
refetchFolders();
dispatch(resetSelected());
};
src/components/Dataform/Dataform.tsx
+7 -2
View File
@@ -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) {
src/components/Header/Header.tsx
+12 -13
View File
@@ -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 = () => {
</div>
{!isSettings && (
<div className="items-center flex desktopMode:hidden mr-4">
<a className="inline-flex items-center justify-center cursor-pointer">
{!drawerOpen && (
<MenuIcon
id="menu-icon"
onClick={toggleDrawerClick}
className="text-primary w-9"
/>
)}
{drawerOpen && (
<div className="inline-flex items-center justify-center cursor-pointer">
{drawerOpen ? (
<ChevronOutline
id="menu-icon"
onClick={closeDrawerClick}
className="text-primary w-9 rotate-90"
/>
) : (
<MenuIcon
id="menu-icon"
onClick={openDrawerClick}
className="text-primary w-9"
/>
)}
</a>
</div>
</div>
)}
<SearchBar />
src/components/LeftSection/LeftSection.tsx
+9 -9
View File
@@ -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);
src/components/MoverPopup/MoverPopup.tsx
+6 -6
View File
@@ -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);
src/components/MultiSelectBar/MultiSelectBar.tsx
+16 -16
View File
@@ -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();
};
src/components/ParentBar/ParentBar.tsx
+2 -2
View File
@@ -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();
src/components/SharePopup/SharePopup.tsx
+9 -9
View File
@@ -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);
src/hooks/files.ts
+10 -55
View File
@@ -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);
src/hooks/folders.ts
+3 -28
View File
@@ -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 };
src/hooks/utils.ts
+1 -2
View File
@@ -31,7 +31,7 @@ export const useClickOutOfBounds = (
const wrapperRef = useRef<HTMLDivElement>(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);
src/reducers/leftSection.ts
+5 -1
View File
@@ -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;