diff --git a/src/components/AddNewDropdown/AddNewDropdown.tsx b/src/components/AddNewDropdown/AddNewDropdown.tsx index ef22293..c2852e6 100644 --- a/src/components/AddNewDropdown/AddNewDropdown.tsx +++ b/src/components/AddNewDropdown/AddNewDropdown.tsx @@ -3,7 +3,7 @@ import { createFolderAPI } from "../../api/foldersAPI"; import { useFoldersClient } from "../../hooks/folders"; import { useClickOutOfBounds } from "../../hooks/utils"; import { showCreateFolderPopup } from "../../popups/folder"; -import { RefObject, useRef } from "react"; +import React, { RefObject, useRef } from "react"; import { useUploader } from "../../hooks/files"; import UploadFileIcon from "../../icons/UploadFileIcon"; import CreateFolderIcon from "../../icons/CreateFolderIcon"; @@ -31,7 +31,7 @@ const AddNewDropdown: React.FC = (props) => { invalidateFoldersCache(); }; - const handleUpload = (e: any) => { + const handleUpload = (e: React.FormEvent) => { e.preventDefault(); props.closeDropdown(); diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx index 35c3801..32c4d86 100644 --- a/src/components/ContextMenu/ContextMenu.tsx +++ b/src/components/ContextMenu/ContextMenu.tsx @@ -259,23 +259,28 @@ const ContextMenu: React.FC = memo((props) => { const selectItemMultiSelect = () => { closeContext(); + if (folderMode && folder) { dispatch( - setMultiSelectMode({ - type: "folder", - id: folder._id, - file: null, - folder: folder, - }) + setMultiSelectMode([ + { + type: "folder", + id: folder._id, + file: null, + folder: folder, + }, + ]) ); } else if (!folderMode && file) { dispatch( - setMultiSelectMode({ - type: quickItemMode ? "quick-item" : "file", - id: file._id, - file: file, - folder: null, - }) + setMultiSelectMode([ + { + type: quickItemMode ? "quick-item" : "file", + id: file._id, + file: file, + folder: null, + }, + ]) ); } }; diff --git a/src/components/FileItem/FileItem.tsx b/src/components/FileItem/FileItem.tsx index 01ddefd..cc219ba 100644 --- a/src/components/FileItem/FileItem.tsx +++ b/src/components/FileItem/FileItem.tsx @@ -66,18 +66,19 @@ const FileItem: React.FC = memo((props) => { [file.uploadDate] ); - // TODO: See if we can memoize this - const fileClick = (e: any) => { + const fileClick = (e: React.MouseEvent) => { const multiSelectKey = e.metaKey || e.ctrlKey; if (multiSelectMode || multiSelectKey) { dispatch( - setMultiSelectMode({ - type: "file", - id: file._id, - file: file, - folder: null, - }) + setMultiSelectMode([ + { + type: "file", + id: file._id, + file: file, + folder: null, + }, + ]) ); return; } diff --git a/src/components/FolderItem/FolderItem.tsx b/src/components/FolderItem/FolderItem.tsx index 4125786..3d31bb5 100644 --- a/src/components/FolderItem/FolderItem.tsx +++ b/src/components/FolderItem/FolderItem.tsx @@ -42,16 +42,18 @@ const FolderItem: React.FC = memo((props) => { } = useContextMenu(); const folderClick = useCallback( - (e: any) => { + (e: React.MouseEvent) => { const multiSelectKey = e.metaKey || e.ctrlKey; if (multiSelectMode || multiSelectKey) { dispatch( - setMultiSelectMode({ - type: "folder", - id: folder._id, - file: null, - folder: folder, - }) + setMultiSelectMode([ + { + type: "folder", + id: folder._id, + file: null, + folder: folder, + }, + ]) ); return; } diff --git a/src/components/MediaItem/MediaItem.tsx b/src/components/MediaItem/MediaItem.tsx index 136ae2b..50ad018 100644 --- a/src/components/MediaItem/MediaItem.tsx +++ b/src/components/MediaItem/MediaItem.tsx @@ -44,16 +44,18 @@ const MediaItem: React.FC = memo(({ file }) => { const { data: thumbnail } = useThumbnail(file.metadata.thumbnailID); // TODO: See if we can memoize this and remove any - const mediaItemClick = (e: any) => { + const mediaItemClick = (e: React.MouseEvent) => { const multiSelectKey = e.metaKey || e.ctrlKey; if (multiSelectMode || multiSelectKey) { dispatch( - setMultiSelectMode({ - type: "file", - id: file._id, - file: file, - folder: null, - }) + setMultiSelectMode([ + { + type: "file", + id: file._id, + file: file, + folder: null, + }, + ]) ); return; } diff --git a/src/components/MoverPopup/MoverPopup.tsx b/src/components/MoverPopup/MoverPopup.tsx index 265c081..54ab2be 100644 --- a/src/components/MoverPopup/MoverPopup.tsx +++ b/src/components/MoverPopup/MoverPopup.tsx @@ -158,8 +158,9 @@ const MoverPopup = () => { setSelectedFolder(parentList[parentList.length - 1]); }; - const closeMoverModal = (e: any) => { - if (e.target.id !== "outer-wrapper") return; + const closeMoverModal = (e: React.MouseEvent) => { + const target = e.target as HTMLElement; + if (target.id !== "outer-wrapper") return; dispatch(resetMoveModal()); }; diff --git a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx b/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx index d8772d8..66ac3e4 100644 --- a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx +++ b/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx @@ -216,11 +216,6 @@ const PhotoViewerPopup: React.FC = memo((props) => { dispatch(resetPopupSelect()); }, [resetPopupSelect]); - const outterWrapperClick = (e: any) => { - if (e.target.id !== "outer-wrapper") return; - closePhotoViewer(); - }; - useEffect(() => { if (file.metadata.isVideo) { getVideo(); diff --git a/src/components/QuickAccessItem/QuickAccessItem.tsx b/src/components/QuickAccessItem/QuickAccessItem.tsx index 7bdd3b0..712d2a3 100644 --- a/src/components/QuickAccessItem/QuickAccessItem.tsx +++ b/src/components/QuickAccessItem/QuickAccessItem.tsx @@ -58,17 +58,18 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => { [file.filename] ); - // TODO: See if we can memoize this and remove any - const quickItemClick = (e: any) => { + const quickItemClick = (e: React.MouseEvent) => { const multiSelectKey = e.metaKey || e.ctrlKey; if (multiSelectMode || multiSelectKey) { dispatch( - setMultiSelectMode({ - type: "quick-item", - id: file._id, - file: file, - folder: null, - }) + setMultiSelectMode([ + { + type: "quick-item", + id: file._id, + file: file, + folder: null, + }, + ]) ); return; } diff --git a/src/hooks/files.ts b/src/hooks/files.ts index 79b2ed4..6743128 100644 --- a/src/hooks/files.ts +++ b/src/hooks/files.ts @@ -15,8 +15,6 @@ import { getSuggestedListAPI, uploadFileAPI, } from "../api/filesAPI"; -import { useCallback, useEffect, useRef, useState } from "react"; -import { useSelector } from "react-redux"; import { useAppDispatch, useAppSelector } from "./store"; import { useUtils } from "./utils"; import { FileInterface } from "../types/file"; @@ -82,7 +80,7 @@ export const useFiles = (enabled = true) => { export const useFilesClient = () => { const params = useParams(); // TODO: Remove any - const sortBy = useSelector((state: any) => state.filter.sortBy); + const sortBy = useAppSelector((state) => state.filter.sortBy); const filesReactClientQuery = useQueryClient(); const { isTrash, isMedia } = useUtils(); const limit = isMedia ? 100 : 50; diff --git a/src/hooks/folders.ts b/src/hooks/folders.ts index ccdc4dc..bc9b23d 100644 --- a/src/hooks/folders.ts +++ b/src/hooks/folders.ts @@ -5,13 +5,13 @@ import { getFoldersListAPI, getMoveFolderListAPI, } from "../api/foldersAPI"; -import { useSelector } from "react-redux"; import { useUtils } from "./utils"; import { FolderInterface } from "../types/folders"; +import { useAppSelector } from "./store"; export const useFolders = (enabled = true) => { const params = useParams(); - const sortBy = useSelector((state: any) => state.filter.sortBy); + const sortBy = useAppSelector((state) => state.filter.sortBy); const { isTrash } = useUtils(); const foldersReactQuery: UseQueryResult = useQuery( [ @@ -33,7 +33,7 @@ export const useFolders = (enabled = true) => { export const useFoldersClient = () => { const params = useParams(); - const sortBy = useSelector((state: any) => state.filter.sortBy); + const sortBy = useAppSelector((state) => state.filter.sortBy); const foldersReactClientQuery = useQueryClient(); const { isTrash } = useUtils(); diff --git a/src/reducers/selected.ts b/src/reducers/selected.ts index 306c736..660c388 100644 --- a/src/reducers/selected.ts +++ b/src/reducers/selected.ts @@ -64,26 +64,37 @@ const selectedSlice = createSlice({ state.mainSection = action.payload; }, resetSelected: () => initialState, - setMultiSelectMode: (state, action: PayloadAction) => { + setMultiSelectMode: (state, action: PayloadAction) => { + const currentSelection = state.mainSection; state.mainSection = { type: "", id: "", file: null, folder: null }; - if ( - state.multiSelectMap[action.payload.id] && - state.multiSelectMap[action.payload.id].type !== action.payload.type - ) { - state.multiSelectMode = true; - state.multiSelectMap[action.payload.id] = action.payload; - } else if (state.multiSelectMap[action.payload.id]) { - delete state.multiSelectMap[action.payload.id]; - const newCount = state.multiSelectCount - 1; - if (newCount === 0) { - state.multiSelectMode = false; - } - state.multiSelectCount = newCount; - } else { - state.multiSelectMode = true; - state.multiSelectMap[action.payload.id] = action.payload; + + const selects = action.payload; + + if (currentSelection.id !== "") { + state.multiSelectMap[currentSelection.id] = currentSelection; state.multiSelectCount++; } + + for (const select of selects) { + if ( + state.multiSelectMap[select.id] && + state.multiSelectMap[select.id].type !== select.type + ) { + state.multiSelectMode = true; + state.multiSelectMap[select.id] = select; + } else if (state.multiSelectMap[select.id]) { + delete state.multiSelectMap[select.id]; + const newCount = state.multiSelectCount - 1; + if (newCount === 0) { + state.multiSelectMode = false; + } + state.multiSelectCount = newCount; + } else { + state.multiSelectMode = true; + state.multiSelectMap[select.id] = select; + state.multiSelectCount++; + } + } }, resetMultiSelect: (state) => { state.multiSelectMode = false; diff --git a/src/types/file.ts b/src/types/file.ts index 5fe65b0..aacc84b 100644 --- a/src/types/file.ts +++ b/src/types/file.ts @@ -4,7 +4,6 @@ export interface FileInterface { chunkSize: number; uploadDate: string; filename: string; - lastErrorObject: { updatedExisting: any }; metadata: { owner: string; parent: string;