From 6a137858bf735ca440bcc3e2ace814d784cd76b8 Mon Sep 17 00:00:00 2001 From: subnub Date: Mon, 8 Jul 2024 09:29:17 -0400 Subject: [PATCH] finished most of the popup for file details and media --- backend/services/FolderService/index.ts | 38 ++--- src/components/ContextMenu/index.tsx | 7 +- src/components/FileInfoPopup/index.tsx | 153 ++++++++++++++++++ src/components/FileItem/index.tsx | 4 +- src/components/Files/index.tsx | 12 +- src/components/FolderItem/index.tsx | 14 +- src/components/Folders/index.tsx | 4 +- src/components/MainSection/index.tsx | 7 + src/components/MediaItem/index.tsx | 1 - src/components/ParentBar/index.jsx | 50 ------ .../ParentBar/{ParentBar.jsx => index.tsx} | 7 +- src/components/PhotoViewerPopup/index.tsx | 51 ++++-- src/components/QuickAccessItem/index.tsx | 1 - src/components/RightSection/index.tsx | 15 +- src/components/SearchBarItem/index.tsx | 4 +- 15 files changed, 231 insertions(+), 137 deletions(-) create mode 100644 src/components/FileInfoPopup/index.tsx delete mode 100644 src/components/ParentBar/index.jsx rename src/components/ParentBar/{ParentBar.jsx => index.tsx} (87%) diff --git a/backend/services/FolderService/index.ts b/backend/services/FolderService/index.ts index 8d9aa0c..afb4450 100644 --- a/backend/services/FolderService/index.ts +++ b/backend/services/FolderService/index.ts @@ -20,9 +20,8 @@ class FolderService { createFolder = async (userID: string, name: string, parent: string) => { const newFolderParentList = []; if (parent && parent !== "/") { - const parentFolder = ( - await utilsFolder.getFolderInfo(parent, userID) - ).toObject() as FolderInterface | null; + const parentFolder = await utilsFolder.getFolderInfo(parent, userID); + if (!parentFolder) throw new Error("Parent not found"); newFolderParentList.push( ...parentFolder.parentList, @@ -47,32 +46,8 @@ class FolderService { }; getFolderInfo = async (userID: string, folderID: string) => { - let currentFolder = await utilsFolder.getFolderInfo(folderID, userID); - + const currentFolder = await utilsFolder.getFolderInfo(folderID, userID); if (!currentFolder) throw new NotFoundError("Folder Info Not Found Error"); - - const parentID = currentFolder.parent; - - let parentName = ""; - - if (parentID === "/") { - parentName = "Home"; - } else { - const parentFolder = await utilsFolder.getFolderInfo(parentID, userID); - - if (parentFolder) { - parentName = parentFolder.name; - } else { - parentName = "Unknown"; - } - } - - const folderName = currentFolder.name; - - currentFolder = { ...currentFolder._doc, parentName, folderName }; - // Must Use ._doc here, or the destucturing/spreading - // Will add a bunch of unneeded variables to the object. - return currentFolder; }; @@ -98,6 +73,8 @@ class FolderService { userID ); + if (!currentFolder) throw new NotFoundError("Folder Info Not Found"); + folderIDList.push(currentFolder._id); folderNameList.push(currentFolder.name); } @@ -174,6 +151,8 @@ class FolderService { const folder = await utilsFolder.getFolderInfo(id, userID); + if (!folder) throw new NotFoundError("Folder Info Not Found"); + const subFolders = await this.getFolderList(user, { parent: id }); //folderService.getFolderList(user._id, {parent: id}) let folderList: any[] = []; @@ -245,6 +224,9 @@ class FolderService { if (parentID.length !== 1) { const parentFile = await utilsFolder.getFolderInfo(parentID, userID); + + if (!parentFile) throw new NotFoundError("Parent Folder Info Not Found"); + parentList = parentFile.parentList; parentList.push(parentID); } diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx index b24f242..48631fe 100644 --- a/src/components/ContextMenu/index.tsx +++ b/src/components/ContextMenu/index.tsx @@ -41,11 +41,10 @@ export interface ContextMenuProps { Y: number; }; folderMode?: boolean; - quickItemMode: boolean; - file?: FileInterface; - folder?: FolderInterface; + quickItemMode?: boolean; + file?: FileInterface | null; + folder?: FolderInterface | null; stopPropagation?: () => void; - gridMode: boolean; } const ContextMenu: React.FC = memo((props) => { diff --git a/src/components/FileInfoPopup/index.tsx b/src/components/FileInfoPopup/index.tsx new file mode 100644 index 0000000..56f4888 --- /dev/null +++ b/src/components/FileInfoPopup/index.tsx @@ -0,0 +1,153 @@ +import { memo, useCallback, useMemo } from "react"; +import { useAppDispatch, useAppSelector } from "../../hooks/store"; +import { downloadFileAPI } from "../../api/filesAPI"; +import CloseIcon from "../../icons/CloseIcon"; +import ActionsIcon from "../../icons/ActionsIcon"; +import { useContextMenu } from "../../hooks/contextMenu"; +import ContextMenu from "../ContextMenu"; +import { resetPopupSelect } from "../../reducers/selected"; +import { getFileColor, getFileExtension } from "../../utils/files"; +import bytes from "bytes"; +import moment from "moment"; + +const FileInfoPopup = memo(() => { + const file = useAppSelector((state) => state.selected.popupModal.file)!; + const dispatch = useAppDispatch(); + const { + onContextMenu, + closeContextMenu, + onTouchStart, + onTouchMove, + onTouchEnd, + clickStopPropagation, + ...contextMenuState + } = useContextMenu(); + + const fileExtension = useMemo( + () => getFileExtension(file.filename, 3), + [file.filename] + ); + + const imageColor = useMemo( + () => getFileColor(file.filename), + [file.filename] + ); + + const formattedDate = useMemo(() => { + return moment(file.uploadDate).format("L"); + }, [file.uploadDate, moment]); + + const fileSize = useMemo(() => { + return bytes(file.metadata.size); + }, [file.metadata.size, bytes]); + + const closePhotoViewer = useCallback(() => { + dispatch(resetPopupSelect()); + }, [resetPopupSelect]); + + const downloadItem = () => { + downloadFileAPI(file._id); + }; + + return ( +
+ {contextMenuState.selected && ( +
+ +
+ )} + +
+
+ +
+ + {fileExtension} + +
+ +

+ {file.filename} +

+
+
+
+ +
+ +
+ +
+
+
+
+
+ + Type + + + {fileExtension} + +
+
+ + Size + + + {fileSize} + +
+
+ + Created + + + {formattedDate} + +
+
+ + Access + + + {file.metadata.link ? "Public" : "Private"} + +
+
+ + Download + + +
+
+
+ ); +}); + +export default FileInfoPopup; diff --git a/src/components/FileItem/index.tsx b/src/components/FileItem/index.tsx index efe23ba..d945999 100644 --- a/src/components/FileItem/index.tsx +++ b/src/components/FileItem/index.tsx @@ -33,7 +33,7 @@ const FileItem: React.FC = memo((props) => { const multiSelectMode = useAppSelector( (state) => state.selected.multiSelectMode ); - const listView = useSelector((state) => state.filter.listView); + const listView = useAppSelector((state) => state.filter.listView); const { image, hasThumbnail, imageOnError } = useThumbnail( file.metadata.hasThumbnail, file.metadata.thumbnailID @@ -148,7 +148,6 @@ const FileItem: React.FC = memo((props) => { {contextMenuState.selected && (
= memo((props) => { {contextMenuState.selected && (
{
1 - ? "justify-center xs:justify-normal" - : "justify-normal" + files?.pages[0]?.length === 1 + ? "justify-normal" + : "justify-center xs:justify-normal" )} > {files?.pages.map((filePage, index) => ( diff --git a/src/components/FolderItem/index.tsx b/src/components/FolderItem/index.tsx index db56feb..9e51d96 100644 --- a/src/components/FolderItem/index.tsx +++ b/src/components/FolderItem/index.tsx @@ -1,10 +1,8 @@ -import React, { memo, useCallback, useMemo, useRef } from "react"; +import React, { memo, useCallback, useRef } from "react"; import ContextMenu from "../ContextMenu"; import { useContextMenu } from "../../hooks/contextMenu"; import classNames from "classnames"; -import { useDispatch, useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; -import { startSetSelectedItem } from "../../actions/selectedItem"; import mobilecheck from "../../utils/mobileCheck"; import moment from "moment"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; @@ -84,14 +82,7 @@ const FolderItem: React.FC = memo((props) => { lastSelected.current = Date.now(); }, - [ - startSetSelectedItem, - mobilecheck, - navigate, - folder._id, - elementSelected, - multiSelectMode, - ] + [mobilecheck, navigate, folder._id, elementSelected, multiSelectMode] ); return ( @@ -111,7 +102,6 @@ const FolderItem: React.FC = memo((props) => { {contextMenuState.selected && (
{ const moverID = useAppSelector((state) => state.mover.id); @@ -25,6 +26,12 @@ const MainSection = memo(() => { ) : undefined} + {selectedItem?.file && + !selectedItem.file.metadata.isVideo && + !selectedItem.file.metadata.hasThumbnail ? ( + + ) : undefined} + {moverID.length === 0 ? undefined : }
diff --git a/src/components/MediaItem/index.tsx b/src/components/MediaItem/index.tsx index f97ec6c..8d2b952 100644 --- a/src/components/MediaItem/index.tsx +++ b/src/components/MediaItem/index.tsx @@ -98,7 +98,6 @@ const MediaItem: React.FC = memo(({ file }) => { {contextMenuState.selected && (
{ - const id = - this.props.parentList.length !== 0 - ? this.props.parentList[this.props.parentList.length - 1] - : ""; - const url = - env.uploadMode === "drive" - ? `/folder-google/${id}` - : env.uploadMode === "s3" - ? `/folder-personal/${id}` - : `/folder/${id}`; - - if (id.length === 0) return; - - this.props.navigate(url); - }; - - homeClick = () => { - this.props.navigate("/home"); - }; - - render() { - return ( - - ); - } -} - -const connectStoreToProp = (state) => ({ - parentNameList: state.parent.parentNameList, - parentList: state.parent.parentList, -}); - -export default connect(connectStoreToProp)(withNavigate(ParentBarContainer)); diff --git a/src/components/ParentBar/ParentBar.jsx b/src/components/ParentBar/index.tsx similarity index 87% rename from src/components/ParentBar/ParentBar.jsx rename to src/components/ParentBar/index.tsx index 6eca721..ef2846e 100644 --- a/src/components/ParentBar/ParentBar.jsx +++ b/src/components/ParentBar/index.tsx @@ -1,11 +1,10 @@ -import React, { memo, useMemo } from "react"; -import { useNavigate, useParams } from "react-router-dom"; +import React, { memo } from "react"; +import { useNavigate } from "react-router-dom"; import { useUtils } from "../../hooks/utils"; import { useFolder } from "../../hooks/folders"; -import Spinner from "../Spinner"; const ParentBar = memo(() => { - const { data: folder, isLoading } = useFolder(); + const { data: folder } = useFolder(); console.log("folder", folder); const navigate = useNavigate(); const { isHome, isTrash } = useUtils(); diff --git a/src/components/PhotoViewerPopup/index.tsx b/src/components/PhotoViewerPopup/index.tsx index 52defc5..5cf0c05 100644 --- a/src/components/PhotoViewerPopup/index.tsx +++ b/src/components/PhotoViewerPopup/index.tsx @@ -16,6 +16,7 @@ import CircleRightIcon from "../../icons/CircleRightIcon"; import { useFiles, useQuickFiles } from "../../hooks/files"; import { FileInterface } from "../../types/file"; import { InfiniteData } from "react-query"; +import { getFileColor, getFileExtension } from "../../utils/files"; const PhotoViewerPopup = memo(() => { const [image, setImage] = useState(""); @@ -38,6 +39,16 @@ const PhotoViewerPopup = memo(() => { ...contextMenuState } = useContextMenu(); + const fileExtension = useMemo( + () => getFileExtension(file.filename, 3), + [file.filename] + ); + + const imageColor = useMemo( + () => getFileColor(file.filename), + [file.filename] + ); + console.log("rerender"); const outOfBoundsClick = useCallback( @@ -229,7 +240,6 @@ const PhotoViewerPopup = memo(() => { {contextMenuState.selected && (
{ )}
-
- +
+ +
+ + {fileExtension} + +
+ +

+ {file.filename} +

+
+
+ +
-
- +
+ +
diff --git a/src/components/QuickAccessItem/index.tsx b/src/components/QuickAccessItem/index.tsx index 51503d8..c855a7c 100644 --- a/src/components/QuickAccessItem/index.tsx +++ b/src/components/QuickAccessItem/index.tsx @@ -116,7 +116,6 @@ const QuickAccessItem = memo((props: QuickAccessItemProps) => { {contextMenuState.selected && (
{ @@ -72,7 +70,7 @@ const RightSection = memo(() => { }; const openItem = () => { if (selectedItem.file) { - dispatch(setPopupFile({ showPopup: true, ...selectedItem.file })); + dispatch(setPopupSelect({ type: "file", file: selectedItem.file })); } else if (!isTrash) { navigate(`/folder/${selectedItem.id}`); } else { @@ -163,14 +161,14 @@ const RightSection = memo(() => {