diff --git a/src/components/FileInfoPopup/FileInfoPopup.tsx b/src/components/FileInfoPopup/FileInfoPopup.tsx index d2b8c6d..f1fe028 100644 --- a/src/components/FileInfoPopup/FileInfoPopup.tsx +++ b/src/components/FileInfoPopup/FileInfoPopup.tsx @@ -9,6 +9,13 @@ import { resetPopupSelect } from "../../reducers/selected"; import { getFileColor, getFileExtension } from "../../utils/files"; import bytes from "bytes"; import dayjs from "dayjs"; +import LockIcon from "../../icons/LockIcon"; +import OneIcon from "../../icons/OneIcon"; +import PublicIcon from "../../icons/PublicIcon"; +import StorageIcon from "../../icons/StorageIcon"; +import CalendarIcon from "../../icons/CalendarIcon"; +import DownloadIcon from "../../icons/DownloadIcon"; +import { toast } from "react-toastify"; const FileInfoPopup = () => { const file = useAppSelector((state) => state.selected.popupModal.file)!; @@ -52,6 +59,21 @@ const FileInfoPopup = () => { dispatch(resetPopupSelect()); }; + const permissionText = (() => { + if (file.metadata.linkType === "one") { + return `Temporary`; + } else if (file.metadata.linkType === "public") { + return "Public"; + } else { + return "Private"; + } + })(); + + const copyName = () => { + navigator.clipboard.writeText(file.filename); + toast.success("Filename Copied"); + }; + useEffect(() => { const handleBack = () => { dispatch(resetPopupSelect()); @@ -79,7 +101,6 @@ const FileInfoPopup = () => { /> )} -
{
-
-
- Type - {fileExtension} -
-
- Size - {fileSize} -
-
- Created - {formattedDate} -
-
- Access - - {file.metadata.link ? "Public" : "Private"} - -
-
- +
+ + +
+

File details

+
+
+ {!file.metadata.linkType && } + {file.metadata.linkType === "one" && ( + + )} + {file.metadata.linkType === "public" && ( + + )} +

{permissionText}

+
+
+ +

{fileSize}

+
+
+ +

{formattedDate}

+
+
+ +
diff --git a/src/components/RightSection/RightSection.tsx b/src/components/RightSection/RightSection.tsx index 7ef299f..48334dd 100644 --- a/src/components/RightSection/RightSection.tsx +++ b/src/components/RightSection/RightSection.tsx @@ -1,23 +1,16 @@ import bytes from "bytes"; import { memo, useMemo } from "react"; -import ContextMenu from "../ContextMenu/ContextMenu"; import classNames from "classnames"; import { useDispatch } from "react-redux"; import { getFileColor, getFileExtension } from "../../utils/files"; -import { useContextMenu } from "../../hooks/contextMenu"; -import { useNavigate } from "react-router-dom"; import { useAppSelector } from "../../hooks/store"; -import { resetSelected, setPopupSelect } from "../../reducers/selected"; -import { useUtils } from "../../hooks/utils"; +import { resetSelected } from "../../reducers/selected"; import CloseIcon from "../../icons/CloseIcon"; import FileDetailsIcon from "../../icons/FileDetailsIcon"; -import ActionsIcon from "../../icons/ActionsIcon"; import dayjs from "dayjs"; const RightSection = memo(() => { const selectedItem = useAppSelector((state) => state.selected.mainSection); - const { isTrash } = useUtils(); - const navigate = useNavigate(); const dispatch = useDispatch(); const formattedName = useMemo(() => { @@ -55,30 +48,10 @@ const RightSection = memo(() => { return getFileExtension(selectedItem.file.filename); })(); - const { - onContextMenu, - closeContextMenu, - onTouchStart, - onTouchMove, - onTouchEnd, - clickStopPropagation, - ...contextMenuState - } = useContextMenu(); - const reset = () => { dispatch(resetSelected()); }; - const openItem = () => { - if (selectedItem.file) { - dispatch(setPopupSelect({ type: "file", file: selectedItem.file })); - } else if (!isTrash) { - navigate(`/folder/${selectedItem.id}`); - } else { - navigate(`/folder-trash/${selectedItem.id}`); - } - }; - const bannerBackgroundColor = (() => { if (selectedItem.file) { return getFileColor(selectedItem.file.filename); @@ -180,35 +153,7 @@ const RightSection = memo(() => { -
- - Open - -
- - - -
-
- {contextMenuState.selected && ( -
- -
- )} )} diff --git a/src/components/SharePopup/SharePopup.tsx b/src/components/SharePopup/SharePopup.tsx index 67409ab..53f0779 100644 --- a/src/components/SharePopup/SharePopup.tsx +++ b/src/components/SharePopup/SharePopup.tsx @@ -15,7 +15,6 @@ import { setShareModal, } from "../../reducers/selected"; import { toast } from "react-toastify"; -import dayjs from "dayjs"; import LockIcon from "../../icons/LockIcon"; import OneIcon from "../../icons/OneIcon"; import PublicIcon from "../../icons/PublicIcon"; @@ -35,13 +34,6 @@ const SharePopup = memo(() => { const fileExtension = getFileExtension(file.filename, 3); - const formattedDate = useMemo( - () => dayjs(file.uploadDate).format("MM/DD/YYYY"), - [file.uploadDate] - ); - - const fileSize = bytes(file.length); - const makePublic = async () => { try { setUpdating(true); diff --git a/src/icons/CalendarIcon.tsx b/src/icons/CalendarIcon.tsx new file mode 100644 index 0000000..45288dc --- /dev/null +++ b/src/icons/CalendarIcon.tsx @@ -0,0 +1,17 @@ +type CalendarIconType = React.SVGAttributes; + +const CalendarIcon: React.FC = (props) => { + return ( + + calendar-range + + + ); +}; + +export default CalendarIcon; diff --git a/src/icons/StorageIcon.tsx b/src/icons/StorageIcon.tsx new file mode 100644 index 0000000..047b477 --- /dev/null +++ b/src/icons/StorageIcon.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +type StorageIconType = React.SVGAttributes; + +const StorageIcon: React.FC = (props) => { + return ( + + database-outline + + + ); +}; + +export default StorageIcon;