diff --git a/src/components/ContextMenu/index.jsx b/src/components/ContextMenu/index.jsx index cb0ded8..bc939a4 100644 --- a/src/components/ContextMenu/index.jsx +++ b/src/components/ContextMenu/index.jsx @@ -39,7 +39,7 @@ const ContextMenu = (props) => { const { isTrash } = useUtils(); const dispatch = useAppDispatch(); const liClassname = - "flex w-full px-[20px] py-[12px] items-center font-normal text-[#637381] justify-start no-underline transition-all duration-400 ease-in-out text- hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium"; + "flex w-full px-[20px] py-[12px] items-center font-normal text-[#637381] justify-start no-underline animate hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium"; const spanClassname = "flex items-center justify-center mr-[18px]"; const renameItem = async () => { diff --git a/src/components/Dataform/index.jsx b/src/components/Dataform/index.jsx index 050764f..cf9d68c 100644 --- a/src/components/Dataform/index.jsx +++ b/src/components/Dataform/index.jsx @@ -1,6 +1,6 @@ import QuickAccess from "../QuickAccess"; import Folders from "../Folders"; -import { useFiles } from "../../hooks/files"; +import { useFiles, useQuickFiles } from "../../hooks/files"; import { useInfiniteScroll } from "../../hooks/infiniteScroll"; import Files from "../Files"; import { memo, useCallback, useEffect, useRef, useState } from "react"; @@ -12,18 +12,24 @@ import { useParams } from "react-router-dom"; import classNames from "classnames"; import { useDragAndDrop } from "../../hooks/utils"; import MultiSelectBar from "../MultiSelectBar"; +import { useFolders } from "../../hooks/folders"; const DataForm = memo(() => { const { fetchNextPage: filesFetchNextPage, isFetchingNextPage, data: fileList, + isLoading: isLoadingFiles, } = useFiles(); + const { isLoading: isLoadingFolders } = useFolders(); + const { isLoading: isLoadingQuickItems } = useQuickFiles(); const dispatch = useAppDispatch(); const { sentinelRef, reachedIntersect } = useInfiniteScroll(); const [initialLoad, setInitialLoad] = useState(true); const params = useParams(); + const isLoading = isLoadingFiles || isLoadingFolders || isLoadingQuickItems; + useEffect(() => { if (initialLoad) { setInitialLoad(false); @@ -53,22 +59,35 @@ const DataForm = memo(() => { return (
- + {!isLoading && ( +
+ - + - + - + +
+ )} + + {isLoading && ( +
+ +
+ )}
diff --git a/src/components/Files/index.jsx b/src/components/Files/index.jsx index 627c4aa..423325e 100644 --- a/src/components/Files/index.jsx +++ b/src/components/Files/index.jsx @@ -10,7 +10,7 @@ import { useParams } from "react-router-dom"; import classNames from "classnames"; const Files = memo(() => { - const { data: files } = useFiles(); + const { data: files } = useFiles(false); const parent = useSelector((state) => state.parent.parent); const listView = useSelector((state) => state.filter.listView); // TODO: Fix loading diff --git a/src/components/Folders/index.jsx b/src/components/Folders/index.jsx index 4873722..edeb30a 100644 --- a/src/components/Folders/index.jsx +++ b/src/components/Folders/index.jsx @@ -8,7 +8,7 @@ import classNames from "classnames"; import { useUtils } from "../../hooks/utils"; const Folders = memo(() => { - const { data: folders } = useFolders(); + const { data: folders } = useFolders(false); const { isHome } = useUtils(); const sortBy = useSelector((state) => state.filter.sortBy); const dispatch = useDispatch(); diff --git a/src/components/LeftSection/LeftSection.jsx b/src/components/LeftSection/LeftSection.jsx index 9ec65c5..88833c8 100644 --- a/src/components/LeftSection/LeftSection.jsx +++ b/src/components/LeftSection/LeftSection.jsx @@ -81,13 +81,13 @@ const LeftSection = (props) => {
-
diff --git a/src/components/QuickAccess/index.jsx b/src/components/QuickAccess/index.jsx index 120bd7d..7e5bb11 100644 --- a/src/components/QuickAccess/index.jsx +++ b/src/components/QuickAccess/index.jsx @@ -7,7 +7,7 @@ import { useParams } from "react-router-dom"; import { useUtils } from "../../hooks/utils"; const QuickAccess = memo(() => { - const { data: quickfilesList } = useQuickFiles(); + const { data: quickfilesList } = useQuickFiles(false); const [quickAccessExpanded, setQuickAccessExpanded] = useState(false); const { isHome } = useUtils(); diff --git a/src/hooks/files.ts b/src/hooks/files.ts index 35190b8..e828aff 100644 --- a/src/hooks/files.ts +++ b/src/hooks/files.ts @@ -16,7 +16,7 @@ import { useSelector } from "react-redux"; import { useAppSelector } from "./store"; import { useUtils } from "./utils"; -export const useFiles = () => { +export const useFiles = (enabled = true) => { const params = useParams(); // TODO: Remove any const sortBy = useSelector((state: any) => state.filter.sortBy); @@ -42,6 +42,7 @@ export const useFiles = () => { startAtName: lastElement.filename, }; }, + enabled, } ); @@ -77,8 +78,10 @@ export const useFilesClient = () => { return { ...filesReactClientQuery, invalidateFilesCache }; }; -export const useQuickFiles = () => { - const quickFilesQuery = useQuery("quickFiles", getQuickFilesListAPI); +export const useQuickFiles = (enabled = true) => { + const quickFilesQuery = useQuery("quickFiles", getQuickFilesListAPI, { + enabled, + }); return { ...quickFilesQuery }; }; diff --git a/src/hooks/folders.ts b/src/hooks/folders.ts index 284a032..01fb9e0 100644 --- a/src/hooks/folders.ts +++ b/src/hooks/folders.ts @@ -4,7 +4,7 @@ import { getFolderInfoAPI, getFoldersListAPI } from "../api/foldersAPI"; import { useSelector } from "react-redux"; import { useUtils } from "./utils"; -export const useFolders = () => { +export const useFolders = (enabled = true) => { const params = useParams(); const sortBy = useSelector((state: any) => state.filter.sortBy); const { isTrash } = useUtils(); @@ -19,7 +19,8 @@ export const useFolders = () => { trashMode: isTrash, }, ], - getFoldersListAPI + getFoldersListAPI, + { enabled } ); return { ...foldersReactQuery }; diff --git a/src/icons/DownloadIcon.tsx b/src/icons/DownloadIcon.tsx index d34da92..ddf882f 100644 --- a/src/icons/DownloadIcon.tsx +++ b/src/icons/DownloadIcon.tsx @@ -1,8 +1,6 @@ -interface DownloadIconProps { - className?: string; -} +type DownloadIconType = React.SVGAttributes; -const DownloadIcon = (props: DownloadIconProps) => { +const DownloadIcon: React.FC = (props) => { return ( { viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + {...props} > ; -const HomeListIcon = (props: HomeListIconProps) => { +const HomeListIcon: React.FC = (props) => { return ( { viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + {...props} > void; -} +type MoveIconType = React.SVGAttributes; -const Moveicon = (props: MoveiconProps) => { +const Moveicon: React.FC = (props) => { return ( { viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} - onClick={props.onClick} + {...props} > ; -const MultiSelectIcon = (props: MultiSelectIconProps) => { +const MultiSelectIcon: React.FC = (props) => { return ( ; -const PlayIcon = (props: PlayIconProps) => { +const PlayIcon: React.FC = (props) => { return ( - + play diff --git a/src/icons/RenameIcon.tsx b/src/icons/RenameIcon.tsx index a5096c2..c71a3e2 100644 --- a/src/icons/RenameIcon.tsx +++ b/src/icons/RenameIcon.tsx @@ -1,8 +1,6 @@ -interface RenameIconProps { - className?: string; -} +type RenameIconType = React.SVGAttributes; -const RenameIcon = (props: RenameIconProps) => { +const RenameIcon: React.FC = (props) => { return ( { viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + {...props} > void; -} +type RestoreIconType = React.SVGAttributes; -const RestoreIcon = (props: RestoreIconProps) => { +const RestoreIcon: React.FC = (props) => { return ( restore ; -const ShareIcon = (props: ShareIconProps) => { +const ShareIcon: React.FC = (props) => { return ( { viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} + {...props} > void; -} +import React from "react"; -const TrashIcon = (props: TrashIconProps) => { +type TrashIconType = React.SVGAttributes; + +const TrashIcon: React.FC = (props) => { return ( { viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg" - className={props.className} - onClick={props.onClick} + {...props} > { }); return result.value; }; + +export const trashItemsPopup = async () => { + const result = await Swal.fire({ + title: "Move to trash?", + text: "Items in the trash will eventually be deleted.", + icon: "warning", + showCancelButton: true, + confirmButtonColor: "#3085d6", + cancelButtonColor: "#d33", + confirmButtonText: "Yes", + }); + return result.value; +};