From 6cc29217878b85f42e06833a8303d80f7ee6751d Mon Sep 17 00:00:00 2001 From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Date: Fri, 23 Apr 2021 13:32:15 +0200 Subject: [PATCH 1/7] Move file refactoring (#967) * modal ready * bulk move * refactor moveFile * close correctly * rename files to move * remove husky Co-authored-by: tanmoy12 --- .../Modules/FileBrowsers/MoveFileModal.tsx | 84 +++++--------- .../FileBrowsers/views/FileSystemItemRow.tsx | 11 +- .../FileBrowsers/views/FilesTable.view.tsx | 109 +++++++++--------- .../files-ui/src/Contexts/DriveContext.tsx | 2 +- 4 files changed, 88 insertions(+), 118 deletions(-) diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx index aaa5c55af6..f86700c1a9 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx @@ -1,26 +1,10 @@ -import { - createStyles, - makeStyles, - useMediaQuery -} from "@chainsafe/common-theme" +import { createStyles, makeStyles, useMediaQuery } from "@chainsafe/common-theme" import React, { useState, useEffect, useCallback } from "react" import CustomModal from "../../Elements/CustomModal" import CustomButton from "../../Elements/CustomButton" import { Trans } from "@lingui/macro" -import { - useDrive, - DirectoryContentResponse, - FileSystemItem -} from "../../../Contexts/DriveContext" -import { - Button, - FolderIcon, - Grid, - ITreeNodeProps, - ScrollbarWrapper, - TreeView, - Typography -} from "@chainsafe/common-components" +import { useDrive, DirectoryContentResponse, FileSystemItem } from "../../../Contexts/DriveContext" +import { Button, FolderIcon, Grid, ITreeNodeProps, ScrollbarWrapper, TreeView, Typography } from "@chainsafe/common-components" import { getPathWithFile } from "../../../Utils/pathUtils" import { CSFTheme } from "../../../Themes/types" @@ -80,20 +64,15 @@ const useStyles = makeStyles( interface IMoveFileModuleProps { currentPath?: string - fileData?: FileSystemItem | FileSystemItem[] + filesToMove: FileSystemItem[] modalOpen: boolean - close: () => void + onClose: () => void + onCancel: () => void } -const MoveFileModule: React.FC = ({ - currentPath, - fileData, - modalOpen, - close -}: IMoveFileModuleProps) => { +const MoveFileModule = ({ currentPath, filesToMove, modalOpen, onClose, onCancel }: IMoveFileModuleProps) => { const classes = useStyles() - - const { moveFile, getFolderTree, moveFiles } = useDrive() + const { getFolderTree, moveFiles } = useDrive() const [movingFile, setMovingFile] = useState(false) const [movePath, setMovePath] = useState(undefined) const [folderTree, setFolderTree] = useState([]) @@ -137,29 +116,19 @@ const MoveFileModule: React.FC = ({ } }, [modalOpen, getFolderTreeData]) - const onMoveFile = async () => { - if (fileData && movePath) { - try { - setMovingFile(true) - if (Array.isArray(fileData)) { - await moveFiles( - fileData.map((file) => ({ - path: `${currentPath}${file.name}`, - new_path: getPathWithFile(movePath, file.name) - })) - ) - } else { - await moveFile({ - path: `${currentPath}${fileData.name}`, - new_path: getPathWithFile(movePath, fileData.name) - }) - } + const onMoveFile = () => { + if (movePath) { + setMovingFile(true) - setMovingFile(false) - close() - } catch { - setMovingFile(false) - } + moveFiles( + filesToMove.map((file) => ({ + path: `${currentPath}${file.name}`, + new_path: getPathWithFile(movePath, file.name) + })) + ) + .then(onClose) + .catch(console.error) + .finally(() => setMovingFile(false)) } } @@ -168,9 +137,7 @@ const MoveFileModule: React.FC = ({ return ( = ({ maxHeight={200} >
- {folderTree.length ? - } selectedId={movePath} onSelectNode={(path: string) => setMovePath(path)} - /> : No folders + /> + : No folders }
@@ -216,7 +184,7 @@ const MoveFileModule: React.FC = ({ className={classes.paddedContainer} > close()} + onClick={onCancel} size="medium" className={classes.cancelButton} variant={desktop ? "outline" : "gray"} diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItemRow.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItemRow.tsx index 94dfd7fc90..20ddf3fa70 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItemRow.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItemRow.tsx @@ -67,7 +67,6 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => }, folderIcon: { "& svg": { - // TODO: FILL fill: palette.additional.gray[9] } }, @@ -174,13 +173,13 @@ interface IFileSystemItemRowProps { renameSchema: any handleRename?: (path: string, newPath: string) => Promise handleMove?: (path: string, newPath: string) => Promise - deleteFile?: (cid: string) => void + deleteFile?: () => void recoverFile?: (cid: string) => void viewFolder?: (cid: string) => void downloadFile?: (cid: string) => Promise handleUploadOnDrop?: (files: File[], fileItems: DataTransferItemList, path: string,) => void setPreviewFileIndex: (fileIndex: number | undefined) => void - setMoveFileData: (moveFileData: { modal: boolean; fileData: FileSystemItem | FileSystemItem[] }) => void + moveFile?: () => void setFileInfoPath: (path: string) => void itemOperations: FileOperation[] resetSelectedFiles: () => void @@ -204,7 +203,7 @@ const FileSystemItemRow: React.FC = ({ viewFolder, handleUploadOnDrop, setPreviewFileIndex, - setMoveFileData, + moveFile, setFileInfoPath, handleSelect, itemOperations, @@ -246,7 +245,7 @@ const FileSystemItemRow: React.FC = ({ ), - onClick: () => deleteFile && deleteFile(cid) + onClick: () => deleteFile && deleteFile() }, download: { contents: ( @@ -268,7 +267,7 @@ const FileSystemItemRow: React.FC = ({ ), - onClick: () => setMoveFileData({ modal: true, fileData: file }) + onClick: () => moveFile && moveFile() }, share: { contents: ( diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx index d30e772c25..f33f2a7fe9 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesTable.view.tsx @@ -270,7 +270,7 @@ const FilesTableView = ({ const [editing, setEditing] = useState() const [direction, setDirection] = useState("descend") const [column, setColumn] = useState<"name" | "size" | "date_uploaded">("name") - const [selected, setSelected] = useState([]) + const [selectedCids, setSelectedCids] = useState([]) const [previewFileIndex, setPreviewFileIndex] = useState() const items: FileSystemItem[] = useMemo(() => { switch (direction) { @@ -338,6 +338,16 @@ const FilesTableView = ({ } }, [sourceFiles, direction, column]) + const files = useMemo( + () => items.filter((i) => !i.isFolder) + , [items] + ) + + const selectedFiles = useMemo( + () => files.filter((file) => selectedCids.includes(file.cid)) + , [files, selectedCids] + ) + const handleSortToggle = ( targetColumn: "name" | "size" | "date_uploaded" ) => { @@ -353,10 +363,6 @@ const FilesTableView = ({ } } - const files = useMemo(() => { - return items.filter((i) => !i.isFolder) - }, [items]) - // Previews const setNextPreview = () => { if ( @@ -380,18 +386,18 @@ const FilesTableView = ({ // Selection logic const handleSelect = useCallback((cid: string) => { - if (selected.includes(cid)) { - setSelected(selected.filter((selectedCid: string) => selectedCid !== cid)) + if (selectedCids.includes(cid)) { + setSelectedCids(selectedCids.filter((selectedCid: string) => selectedCid !== cid)) } else { - setSelected([...selected, cid]) + setSelectedCids([...selectedCids, cid]) } - }, [selected]) + }, [selectedCids]) const toggleAll = () => { - if (selected.length === items.length) { - setSelected([]) + if (selectedCids.length === items.length) { + setSelectedCids([]) } else { - setSelected([...items.map((file: FileSystemItem) => file.cid)]) + setSelectedCids([...items.map((file: FileSystemItem) => file.cid)]) } } @@ -427,11 +433,9 @@ const FilesTableView = ({ // Modals const [createFolderModalOpen, setCreateFolderModalOpen] = useState(false) - const [uploadModalOpen, setUploadModalOpen] = useState(false) - const [moveFileData, setMoveFileData] = useState< - { modal: boolean; fileData: FileSystemItem | FileSystemItem[] } | undefined - >(undefined) - const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) + const [isUploadModalOpen, setIsUploadModalOpen] = useState(false) + const [isMoveFileModalOpen, setIsMoveFileModalOpen] = useState(false) + const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false) const [isDeletingFiles, setIsDeletingFiles] = useState(false) const [fileInfoPath, setFileInfoPath] = useState( undefined @@ -450,8 +454,8 @@ const FilesTableView = ({ "rename", "share" ] - for (let i = 0; i < selected.length; i++) { - const contentType = items.find((item) => item.cid === selected[i]) + for (let i = 0; i < selectedCids.length; i++) { + const contentType = items.find((item) => item.cid === selectedCids[i]) ?.content_type if (contentType) { @@ -492,20 +496,20 @@ const FilesTableView = ({ } setValidBulkOps(filteredList) } - }, [selected, items, bulkOperations]) + }, [selectedCids, items, bulkOperations]) const handleDeleteFiles = useCallback(() => { if(!deleteFiles) return setIsDeletingFiles(true) - deleteFiles(selected) + deleteFiles(selectedCids) .catch(console.error) .finally(() => { setIsDeletingFiles(false) - setSelected([]) - setIsDeleteDialogOpen(false) + setSelectedCids([]) + setIsDeleteModalOpen(false) }) - }, [deleteFiles, selected]) + }, [deleteFiles, selectedCids]) const getItemOperations = useCallback((contentType: string) => { const result = Object.keys(itemOperations).reduce((acc: FileOperation[], item: string) => { @@ -519,8 +523,8 @@ const FilesTableView = ({ return [...new Set(result)] }, [itemOperations]) - const resetSelectedFiles = useCallback(() => { - setSelected([]) + const resetSelectedCids = useCallback(() => { + setSelectedCids([]) }, []) return ( @@ -528,7 +532,7 @@ const FilesTableView = ({ className={clsx(classes.root, { droppable: isOverUploadable && allowDropUpload })} - ref={!uploadModalOpen && allowDropUpload ? dropBrowserRef : null} + ref={!isUploadModalOpen && allowDropUpload ? dropBrowserRef : null} >
- {selected.length > 0 && validBulkOps.length > 0 && ( + {selectedCids.length > 0 && validBulkOps.length > 0 && (
{validBulkOps.indexOf("move") >= 0 && (