From 9751b5ca8460b2e06c88598d1b1fff33e95e04ab Mon Sep 17 00:00:00 2001
From: subnub <kyle.hoell@gmail.com>
Date: Sun, 7 Jul 2024 19:27:28 -0400
Subject: [PATCH] made more FE files TS

---
 backend/controllers/file.ts                   |  3 --
 backend/controllers/folder.ts                 | 39 ++-------------
 backend/express-routers/folder.ts             |  4 +-
 src/api/foldersAPI.ts                         |  3 +-
 src/components/AddNewDropdown/index.tsx       | 12 +++--
 .../ContextMenu/{index.jsx => index.tsx}      | 49 +++++++++++++------
 .../Dataform/{index.jsx => index.tsx}         |  5 +-
 .../FileItem/{index.jsx => index.tsx}         | 14 ++++--
 src/components/Files/{index.jsx => index.tsx} |  6 +--
 .../FolderItem/{index.jsx => index.tsx}       | 15 ++++--
 .../Folders/{index.jsx => index.tsx}          |  8 +--
 .../LeftSection/{index.jsx => index.tsx}      |  6 +--
 .../MainSection/{index.jsx => index.tsx}      |  0
 .../QuickAccess/{index.jsx => index.tsx}      |  6 +--
 src/hooks/contextMenu.ts                      |  4 +-
 15 files changed, 83 insertions(+), 91 deletions(-)
 rename src/components/ContextMenu/{index.jsx => index.tsx} (88%)
 rename src/components/Dataform/{index.jsx => index.tsx} (96%)
 rename src/components/FileItem/{index.jsx => index.tsx} (96%)
 rename src/components/Files/{index.jsx => index.tsx} (95%)
 rename src/components/FolderItem/{index.jsx => index.tsx} (93%)
 rename src/components/Folders/{index.jsx => index.tsx} (96%)
 rename src/components/LeftSection/{index.jsx => index.tsx} (97%)
 rename src/components/MainSection/{index.jsx => index.tsx} (100%)
 rename src/components/QuickAccess/{index.jsx => index.tsx} (94%)

diff --git a/backend/controllers/file.ts b/backend/controllers/file.ts
index 27b926d..d4fef9d 100644
--- a/backend/controllers/file.ts
+++ b/backend/controllers/file.ts
@@ -20,9 +20,6 @@ import NotAuthorizedError from "../utils/NotAuthorizedError";
 import createThumbnail from "../services/ChunkService/utils/createImageThumbnail";
 
 const fileService = new FileService();
-const storageActions =
-  env.dbType === "s3" ? new S3Actions() : new FilesystemActions();
-
 type userAccessType = {
   _id: string;
   emailVerified: boolean;
diff --git a/backend/controllers/folder.ts b/backend/controllers/folder.ts
index 1424c37..3f5b927 100644
--- a/backend/controllers/folder.ts
+++ b/backend/controllers/folder.ts
@@ -1,7 +1,6 @@
 import FolderService from "../services/FolderService";
 import { Request, Response } from "express";
-import FileSystemService from "../services/ChunkService/FileSystemService";
-import S3Service from "../services/ChunkService/S3Service";
+import ChunkService from "../services/ChunkService";
 
 const folderService = new FolderService();
 
@@ -17,14 +16,10 @@ interface RequestType extends Request {
   encryptedToken?: string;
 }
 
-type ChunkServiceType = FileSystemService | S3Service;
+const chunkService = new ChunkService();
 
 class FolderController {
-  chunkService: ChunkServiceType;
-
-  constructor(chunkService: ChunkServiceType) {
-    this.chunkService = chunkService;
-  }
+  constructor() {}
 
   createFolder = async (req: RequestType, res: Response) => {
     if (!req.user) {
@@ -57,7 +52,7 @@ class FolderController {
       const folderID = req.body.id;
       const parentList = req.body.parentList;
 
-      await this.chunkService.deleteFolder(userID, folderID, parentList);
+      await chunkService.deleteFolder(userID, folderID);
 
       res.send();
     } catch (e: unknown) {
@@ -90,30 +85,6 @@ class FolderController {
     }
   };
 
-  deletePersonalFolder = async (req: RequestType, res: Response) => {
-    if (!req.user) {
-      return;
-    }
-
-    try {
-      const userID = req.user._id;
-      const folderID = req.body.id;
-      const parentList = req.body.parentList;
-
-      const s3Service = new S3Service();
-
-      await s3Service.deleteFolder(userID, folderID, parentList);
-
-      res.send();
-    } catch (e: unknown) {
-      if (e instanceof Error) {
-        console.log("\nDelete Personal Folder Error Folder Route:", e.message);
-      }
-
-      res.status(500).send("Server error deleting personal folder");
-    }
-  };
-
   deleteAll = async (req: RequestType, res: Response) => {
     if (!req.user) {
       return;
@@ -122,7 +93,7 @@ class FolderController {
     try {
       const userID = req.user._id;
 
-      await this.chunkService.deleteAll(userID);
+      await chunkService.deleteAll(userID);
 
       res.send();
     } catch (e: unknown) {
diff --git a/backend/express-routers/folder.ts b/backend/express-routers/folder.ts
index 339c9c3..a72b754 100644
--- a/backend/express-routers/folder.ts
+++ b/backend/express-routers/folder.ts
@@ -9,10 +9,10 @@ let folderController: FolderController;
 
 if (env.dbType === "fs") {
   const fileSystemService = new FileSystemService();
-  folderController = new FolderController(fileSystemService);
+  folderController = new FolderController();
 } else {
   const s3Service = new S3Service();
-  folderController = new FolderController(s3Service);
+  folderController = new FolderController();
 }
 
 const router = Router();
diff --git a/src/api/foldersAPI.ts b/src/api/foldersAPI.ts
index 6f476c7..39cd120 100644
--- a/src/api/foldersAPI.ts
+++ b/src/api/foldersAPI.ts
@@ -72,11 +72,10 @@ export const restoreFolderAPI = async (folderID: string) => {
 
 // DELETE
 
-export const deleteFolder = async (folderID: string, parentList: string[]) => {
+export const deleteFolder = async (folderID: string) => {
   const response = await axios.delete("/folder-service/remove", {
     data: {
       id: folderID,
-      parentList,
     },
   });
   return response.data;
diff --git a/src/components/AddNewDropdown/index.tsx b/src/components/AddNewDropdown/index.tsx
index 2e794cd..204fa90 100644
--- a/src/components/AddNewDropdown/index.tsx
+++ b/src/components/AddNewDropdown/index.tsx
@@ -7,7 +7,11 @@ import { useAppDispatch } from "../../hooks/store";
 import { startAddFile } from "../../actions/files";
 import { useRef } from "react";
 
-const AddNewDropdown = (props: any) => {
+interface AddNewDropdownProps {
+  closeDropdown: () => void;
+}
+
+const AddNewDropdown: React.FC<AddNewDropdownProps> = (props) => {
   const params = useParams();
   const { invalidateFoldersCache } = useFoldersClient();
   const { wrapperRef } = useClickOutOfBounds(props.closeDropdown);
@@ -44,15 +48,13 @@ const AddNewDropdown = (props: any) => {
           <div>
             <input
               className="w-full top-0 bg-red-500 h-[41px] mt-[3px] cursor-pointer absolute opacity-0"
+              // @ts-ignore
               ref={uploadRef}
               type="file"
               multiple={true}
               onChange={handleUpload}
             />
-            <a
-              onClick={props.showUploadOverlay}
-              className="flex items-center bg-white justify-start p-[12px_20px] transition-all duration-400 ease-in-out no-underline rounded-[5px] overflow-hidden text-[#0E1C71] text-[15px] leading-[18px]"
-            >
+            <a className="flex items-center bg-white justify-start p-[12px_20px] transition-all duration-400 ease-in-out no-underline rounded-[5px] overflow-hidden text-[#0E1C71] text-[15px] leading-[18px]">
               <span className="inline-flex min-w-[30px]">
                 <img
                   className="max-w-full h-auto"
diff --git a/src/components/ContextMenu/index.jsx b/src/components/ContextMenu/index.tsx
similarity index 88%
rename from src/components/ContextMenu/index.jsx
rename to src/components/ContextMenu/index.tsx
index 5222415..b24f242 100644
--- a/src/components/ContextMenu/index.jsx
+++ b/src/components/ContextMenu/index.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { useEffect, useRef } from "react";
+import React, { memo, useEffect, useRef } from "react";
 import Swal from "sweetalert2";
 import {
   deleteFileAPI,
@@ -30,8 +30,25 @@ import DownloadIcon from "../../icons/DownloadIcon";
 import MoveIcon from "../../icons/MoveIcon";
 import RestoreIcon from "../../icons/RestoreIcon";
 import { restoreItemPopup } from "../../popups/file";
+import { FileInterface } from "../../types/file";
+import { FolderInterface } from "../../types/folders";
 
-const ContextMenu = (props) => {
+export interface ContextMenuProps {
+  closeContext: () => void;
+  contextSelected: {
+    selected: boolean;
+    X: number;
+    Y: number;
+  };
+  folderMode?: boolean;
+  quickItemMode: boolean;
+  file?: FileInterface;
+  folder?: FolderInterface;
+  stopPropagation?: () => void;
+  gridMode: boolean;
+}
+
+const ContextMenu: React.FC<ContextMenuProps> = memo((props) => {
   const { invalidateFilesCache } = useFilesClient();
   const { invalidateFoldersCache } = useFoldersClient();
   const { invalidateQuickFilesCache } = useQuickFilesClient();
@@ -44,7 +61,7 @@ const ContextMenu = (props) => {
 
   const renameItem = async () => {
     props.closeContext();
-    if (!props.folderMode) {
+    if (!props.folderMode && props.file) {
       const { value: filename } = await Swal.fire({
         title: "Enter A File Name",
         input: "text",
@@ -59,7 +76,7 @@ const ContextMenu = (props) => {
       await renameFileAPI(props.file._id, filename);
       invalidateFilesCache();
       invalidateQuickFilesCache();
-    } else {
+    } else if (props.folderMode && props.folder) {
       const { value: folderName } = await Swal.fire({
         title: "Enter A folder Name",
         input: "text",
@@ -83,7 +100,7 @@ const ContextMenu = (props) => {
 
   const trashItem = async () => {
     props.closeContext();
-    if (!props.folderMode) {
+    if (!props.folderMode && props.file) {
       const result = await Swal.fire({
         title: "Move to trash?",
         text: "Items in the trash will eventually be deleted.",
@@ -100,7 +117,7 @@ const ContextMenu = (props) => {
         invalidateQuickFilesCache();
         dispatch(resetSelected());
       }
-    } else {
+    } else if (props.folderMode && props.folder) {
       const result = await Swal.fire({
         title: "Move to trash?",
         text: "Items in the trash will eventually be deleted.",
@@ -120,7 +137,7 @@ const ContextMenu = (props) => {
 
   const deleteItem = async () => {
     props.closeContext();
-    if (!props.folderMode) {
+    if (!props.folderMode && props.file) {
       const result = await Swal.fire({
         title: "Delete file?",
         text: "You will not be able to recover this file.",
@@ -137,7 +154,7 @@ const ContextMenu = (props) => {
         invalidateQuickFilesCache();
         dispatch(resetSelected());
       }
-    } else {
+    } else if (props.folderMode && props.folder) {
       const result = await Swal.fire({
         title: "Delete folder?",
         text: "You will not be able to recover this folder.",
@@ -159,10 +176,10 @@ const ContextMenu = (props) => {
     props.closeContext();
     const result = await restoreItemPopup();
     if (!result) return;
-    if (!props.folderMode) {
+    if (!props.folderMode && props.file) {
       await restoreFileAPI(props.file._id);
       invalidateFilesCache();
-    } else {
+    } else if (props.folderMode && props.folder) {
       await restoreFolderAPI(props.folder._id);
       invalidateFoldersCache();
     }
@@ -170,9 +187,9 @@ const ContextMenu = (props) => {
 
   const openMoveItemModal = async () => {
     props.closeContext();
-    if (!props.folderMode) {
+    if (!props.folderMode && props.file) {
       dispatch(setMoverID(props.file._id, props.file.metadata.parent, true));
-    } else {
+    } else if (props.folderMode && props.folder) {
       dispatch(setMoverID(props.folder._id, props.folder.parent, false));
     }
   };
@@ -184,12 +201,12 @@ const ContextMenu = (props) => {
 
   const downloadItem = () => {
     props.closeContext();
-    downloadFileAPI(props.file._id);
+    if (props.file) downloadFileAPI(props.file._id);
   };
 
   const selectItemMultiSelect = () => {
     props.closeContext();
-    if (props.folderMode) {
+    if (props.folderMode && props.folder) {
       dispatch(
         setMultiSelectMode({
           type: "folder",
@@ -198,7 +215,7 @@ const ContextMenu = (props) => {
           folder: props.folder,
         })
       );
-    } else {
+    } else if (!props.folderMode && props.file) {
       dispatch(
         setMultiSelectMode({
           type: props.quickItemMode ? "quick-item" : "file",
@@ -313,6 +330,6 @@ const ContextMenu = (props) => {
       </ul>
     </div>
   );
-};
+});
 
 export default ContextMenu;
diff --git a/src/components/Dataform/index.jsx b/src/components/Dataform/index.tsx
similarity index 96%
rename from src/components/Dataform/index.jsx
rename to src/components/Dataform/index.tsx
index d62570a..f100710 100644
--- a/src/components/Dataform/index.jsx
+++ b/src/components/Dataform/index.tsx
@@ -13,6 +13,7 @@ import classNames from "classnames";
 import { useDragAndDrop } from "../../hooks/utils";
 import MultiSelectBar from "../MultiSelectBar";
 import { useFolders } from "../../hooks/folders";
+import { FileInterface } from "../../types/file";
 
 const DataForm = memo(() => {
   const {
@@ -43,7 +44,7 @@ const DataForm = memo(() => {
   }, [reachedIntersect, initialLoad, isFetchingNextPage]);
 
   const addFile = useCallback(
-    (file) => {
+    (file: FileInterface) => {
       dispatch(startAddFile(file, params.id));
     },
     [params.id]
@@ -90,7 +91,7 @@ const DataForm = memo(() => {
           <SpinnerPage />
         </div>
       )}
-
+      {/* @ts-ignore  */}
       <div ref={sentinelRef} className="h-1"></div>
 
       {/* TODO: Change this spinner name */}
diff --git a/src/components/FileItem/index.jsx b/src/components/FileItem/index.tsx
similarity index 96%
rename from src/components/FileItem/index.jsx
rename to src/components/FileItem/index.tsx
index b317d41..74aea55 100644
--- a/src/components/FileItem/index.jsx
+++ b/src/components/FileItem/index.tsx
@@ -1,6 +1,6 @@
 import capitalize from "../../utils/capitalize";
 import moment from "moment";
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { memo, useCallback, useMemo, useRef } from "react";
 import ContextMenu from "../ContextMenu";
 import mobilecheck from "../../utils/mobileCheck";
 import { useContextMenu } from "../../hooks/contextMenu";
@@ -16,8 +16,13 @@ import { setMainSelect, setMultiSelectMode } from "../../reducers/selected";
 import PlayButtonIcon from "../../icons/PlayIcon";
 import { setPopupSelect } from "../../reducers/selected";
 import ActionsIcon from "../../icons/ActionsIcon";
+import { FileInterface } from "../../types/file";
 
-const FileItem = React.memo((props) => {
+interface FileItemProps {
+  file: FileInterface;
+}
+
+const FileItem: React.FC<FileItemProps> = memo((props) => {
   const { file } = props;
   const elementSelected = useAppSelector((state) => {
     if (state.selected.mainSection.type !== "file") return false;
@@ -68,10 +73,10 @@ const FileItem = React.memo((props) => {
   );
 
   // TODO: See if we can memoize this
-  const fileClick = (e) => {
+  const fileClick = (e: any) => {
     const multiSelectKey = e.metaKey || e.ctrlKey;
 
-    if (multiSelectMode | multiSelectKey) {
+    if (multiSelectMode || multiSelectKey) {
       dispatch(
         setMultiSelectMode({
           type: "file",
@@ -158,6 +163,7 @@ const FileItem = React.memo((props) => {
             )}
 
             {/* <ContextMenu parent={props.metadata.parent} contextSelected={props.state.contextSelected} closeContext={props.closeContext} downloadFile={props.downloadFile} file={props} changeEditNameMode={props.changeEditNameMode} closeEditNameMode={props.closeEditNameMode} changeDeleteMode={props.changeDeleteMode} startMovingFile={props.startMovingFile}/> */}
+
             <a onClick={onContextMenu}>
               <ActionsIcon
                 className={classNames(
diff --git a/src/components/Files/index.jsx b/src/components/Files/index.tsx
similarity index 95%
rename from src/components/Files/index.jsx
rename to src/components/Files/index.tsx
index c8ce929..45f617c 100644
--- a/src/components/Files/index.jsx
+++ b/src/components/Files/index.tsx
@@ -11,11 +11,7 @@ import classNames from "classnames";
 
 const Files = memo(() => {
   const { data: files } = useFiles(false);
-  const parent = useSelector((state) => state.parent.parent);
   const listView = useSelector((state) => state.filter.listView);
-  // TODO: Fix loading
-  const loading = useSelector((state) => state.main.loading);
-  const loadingMore = useSelector((state) => state.main.loadingMoreItems);
   const search = useSelector((state) => state.filter.search);
   const { isHome } = useUtils();
 
@@ -115,7 +111,7 @@ const Files = memo(() => {
             ))}
           </div>
         ) : (
-          <table className="w-full" style={loading ? { display: "none" } : {}}>
+          <table className="w-full">
             <thead>
               <tr>
                 <th>
diff --git a/src/components/FolderItem/index.jsx b/src/components/FolderItem/index.tsx
similarity index 93%
rename from src/components/FolderItem/index.jsx
rename to src/components/FolderItem/index.tsx
index 4febcb2..db56feb 100644
--- a/src/components/FolderItem/index.jsx
+++ b/src/components/FolderItem/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { memo, useCallback, useMemo, useRef } from "react";
 import ContextMenu from "../ContextMenu";
 import { useContextMenu } from "../../hooks/contextMenu";
 import classNames from "classnames";
@@ -10,8 +10,13 @@ import moment from "moment";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { setMainSelect, setMultiSelectMode } from "../../reducers/selected";
 import { useUtils } from "../../hooks/utils";
+import { FolderInterface } from "../../types/folders";
 
-const FolderItem = React.memo((props) => {
+interface FolderItemProps {
+  folder: FolderInterface;
+}
+
+const FolderItem: React.FC<FolderItemProps> = memo((props) => {
   const { folder } = props;
   const elementSelected = useAppSelector((state) => {
     if (state.selected.mainSection.type !== "folder") return false;
@@ -39,7 +44,7 @@ const FolderItem = React.memo((props) => {
   } = useContextMenu();
 
   const folderClick = useCallback(
-    (e) => {
+    (e: any) => {
       const multiSelectKey = e.metaKey || e.ctrlKey;
       if (multiSelectMode || multiSelectKey) {
         dispatch(
@@ -108,10 +113,10 @@ const FolderItem = React.memo((props) => {
           <ContextMenu
             gridMode={true}
             folderMode={true}
-            quickItemMode={props.folder.parent !== "/"}
+            quickItemMode={folder.parent !== "/"}
             contextSelected={contextMenuState}
             closeContext={closeContextMenu}
-            folder={props.folder}
+            folder={folder}
           />
         </div>
       )}
diff --git a/src/components/Folders/index.jsx b/src/components/Folders/index.tsx
similarity index 96%
rename from src/components/Folders/index.jsx
rename to src/components/Folders/index.tsx
index f9d1aa7..73fa0b9 100644
--- a/src/components/Folders/index.jsx
+++ b/src/components/Folders/index.tsx
@@ -42,7 +42,7 @@ const Folders = memo(() => {
   }, [sortBy]);
 
   const switchTypeOrderBy = useCallback(
-    (e) => {
+    (e: any) => {
       const value = e.target.value;
 
       let newSortBy = "date_desc";
@@ -117,9 +117,9 @@ const Folders = memo(() => {
       <div
         className={classNames(
           "grid grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
-          folders?.length > 1
-            ? "justify-center xs:justify-normal"
-            : "justify-normal"
+          folders?.length === 1
+            ? "justify-normal"
+            : "justify-center xs:justify-normal"
         )}
       >
         {folders?.map((folder) => (
diff --git a/src/components/LeftSection/index.jsx b/src/components/LeftSection/index.tsx
similarity index 97%
rename from src/components/LeftSection/index.jsx
rename to src/components/LeftSection/index.tsx
index 13f5541..6bee52e 100644
--- a/src/components/LeftSection/index.jsx
+++ b/src/components/LeftSection/index.tsx
@@ -54,7 +54,7 @@ const LeftSection = (props) => {
   };
 
   const closeDrawerEvent = useCallback(
-    (e) => {
+    (e: any) => {
       console.log("close", e?.target.id);
       if (
         !e ||
@@ -99,9 +99,7 @@ const LeftSection = (props) => {
               </span>
             </a>
             {/* TODO: Remove this props */}
-            {isDropdownOpen && (
-              <AddNewDropdown closeDropdown={closeDropdown} {...props} />
-            )}
+            {isDropdownOpen && <AddNewDropdown closeDropdown={closeDropdown} />}
           </div>
           <div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] rounded-md">
             <ul onClick={goHome} className="m-0 list-none p-0 cursor-pointer">
diff --git a/src/components/MainSection/index.jsx b/src/components/MainSection/index.tsx
similarity index 100%
rename from src/components/MainSection/index.jsx
rename to src/components/MainSection/index.tsx
diff --git a/src/components/QuickAccess/index.jsx b/src/components/QuickAccess/index.tsx
similarity index 94%
rename from src/components/QuickAccess/index.jsx
rename to src/components/QuickAccess/index.tsx
index 0701602..78f9a10 100644
--- a/src/components/QuickAccess/index.jsx
+++ b/src/components/QuickAccess/index.tsx
@@ -40,9 +40,9 @@ const QuickAccess = memo(() => {
       <div
         className={classNames(
           "grid animate-movement grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
-          quickfilesList?.length > 1
-            ? "justify-center xs:justify-normal"
-            : "justify-normal",
+          quickfilesList?.length === 1
+            ? "justify-normal"
+            : "justify-center xs:justify-normal",
           {
             "max-h-36 sm:max-h-40": !quickAccessExpanded,
             "max-h-[720px] sm:max-h-[665px] quickAccessOne:max-h-[1000px] quickAccessTwo:max-h-[660px] quickAccessThree:max-h-[490px]":
diff --git a/src/hooks/contextMenu.ts b/src/hooks/contextMenu.ts
index 6cf48fb..8241c47 100644
--- a/src/hooks/contextMenu.ts
+++ b/src/hooks/contextMenu.ts
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { MouseEventHandler, useRef, useState } from "react";
 
 export const useContextMenu = () => {
   // 215 X 240
@@ -9,7 +9,7 @@ export const useContextMenu = () => {
   });
   const lastTouched = useRef(0);
 
-  const onContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
+  const onContextMenu = (e: any) => {
     if (e) e.stopPropagation();
     if (e) e.preventDefault();