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

cleaned up some types and improved multi select

Browse Source
This commit is contained in:
subnub
2024-10-18 23:15:38 -04:00
parent 65557a8019
commit 7137be2cbc
12 changed files with 90 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AddNewDropdown/AddNewDropdown.tsx
+2 -2
View File
@@ -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<AddNewDropdownProps> = (props) => {
invalidateFoldersCache();
};
const handleUpload = (e: any) => {
const handleUpload = (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
props.closeDropdown();
src/components/ContextMenu/ContextMenu.tsx
+17 -12
View File
@@ -259,23 +259,28 @@ const ContextMenu: React.FC<ContextMenuProps> = 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,
},
])
);
}
};
src/components/FileItem/FileItem.tsx
+9 -8
View File
@@ -66,18 +66,19 @@ const FileItem: React.FC<FileItemProps> = memo((props) => {
[file.uploadDate]
);
// TODO: See if we can memoize this
const fileClick = (e: any) => {
const fileClick = (e: React.MouseEvent<HTMLDivElement, 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;
}
src/components/FolderItem/FolderItem.tsx
+9 -7
View File
@@ -42,16 +42,18 @@ const FolderItem: React.FC<FolderItemProps> = memo((props) => {
} = useContextMenu();
const folderClick = useCallback(
(e: any) => {
(e: React.MouseEvent<HTMLDivElement, 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;
}
src/components/MediaItem/MediaItem.tsx
+9 -7
View File
@@ -44,16 +44,18 @@ const MediaItem: React.FC<MediaItemType> = 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<HTMLDivElement, 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;
}
src/components/MoverPopup/MoverPopup.tsx
+3 -2
View File
@@ -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<HTMLElement>) => {
const target = e.target as HTMLElement;
if (target.id !== "outer-wrapper") return;
dispatch(resetMoveModal());
};
src/components/PhotoViewerPopup/PhotoViewerPopup.tsx
-5
View File
@@ -216,11 +216,6 @@ const PhotoViewerPopup: React.FC<PhotoViewerPopupProps> = memo((props) => {
dispatch(resetPopupSelect());
}, [resetPopupSelect]);
const outterWrapperClick = (e: any) => {
if (e.target.id !== "outer-wrapper") return;
closePhotoViewer();
};
useEffect(() => {
if (file.metadata.isVideo) {
getVideo();
src/components/QuickAccessItem/QuickAccessItem.tsx
+9 -8
View File
@@ -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<HTMLDivElement, 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;
}
src/hooks/files.ts
+1 -3
View File
@@ -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;
src/hooks/folders.ts
+3 -3
View File
@@ -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<FolderInterface[]> = 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();
src/reducers/selected.ts
+28 -17
View File
@@ -64,26 +64,37 @@ const selectedSlice = createSlice({
state.mainSection = action.payload;
},
resetSelected: () => initialState,
setMultiSelectMode: (state, action: PayloadAction<MainSecionType>) => {
setMultiSelectMode: (state, action: PayloadAction<MainSecionType[]>) => {
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;
src/types/file.ts
-1
View File
@@ -4,7 +4,6 @@ export interface FileInterface {
chunkSize: number;
uploadDate: string;
filename: string;
lastErrorObject: { updatedExisting: any };
metadata: {
owner: string;
parent: string;