started switching over to typescript more and also started new redux changes

src/components/Dataform/index.jsx

@@ -22,10 +22,10 @@ const DataForm = memo(() => {
     } else if (!fileList) {
       return;
     }
-    if (reachedIntersect) {
+    if (reachedIntersect && !isFetchingNextPage) {
       filesFetchNextPage();
     }
-  }, [reachedIntersect, initialLoad]);
+  }, [reachedIntersect, initialLoad, isFetchingNextPage]);
 
   return (
     <div className="w-full p-[65px_40px] overflow-y-scroll">

src/components/FileItem/index.jsx

@@ -11,18 +11,21 @@ import { getFileColor, getFileExtension } from "../../utils/files";
 import { startSetSelectedItem } from "../../actions/selectedItem";
 import { setPopupFile } from "../../actions/popupFile";
 import bytes from "bytes";
+import { useAppDispatch, useAppSelector } from "../../hooks/store";
+import { setMainSelect } from "../../reducers/selected";
 
 const FileItem = React.memo((props) => {
   const { file } = props;
-  const elementSelected = useSelector(
-    (state) => state.selectedItem.selected === file._id
-  );
+  const elementSelected = useAppSelector((state) => {
+    if (state.selected.mainSection.type !== "file") return false;
+    return state.selected.mainSection.id === file._id;
+  });
   const listView = useSelector((state) => state.filter.listView);
   const { image, hasThumbnail, imageOnError } = useThumbnail(
     file.metadata.hasThumbnail,
     file.metadata.thumbnailID
   );
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const lastSelected = useRef(0);
   const {
     onContextMenu,
@@ -58,7 +61,9 @@ const FileItem = React.memo((props) => {
     const currentDate = Date.now();
 
     if (!elementSelected) {
-      dispatch(startSetSelectedItem(file._id, true, false));
+      dispatch(
+        setMainSelect({ file, id: file._id, type: "file", folder: null })
+      );
       lastSelected.current = Date.now();
       return;
     }

src/components/FolderItem/index.jsx

@@ -7,15 +7,18 @@ 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";
+import { setMainSelect } from "../../reducers/selected";
 
 const FolderItem = React.memo((props) => {
   const { folder } = props;
-  const elementSelected = useSelector(
-    (state) => state.selectedItem.selected === folder._id
-  );
+  const elementSelected = useAppSelector((state) => {
+    if (state.selected.mainSection.type !== "folder") return false;
+    return state.selected.mainSection.id === folder._id;
+  });
   const lastSelected = useRef(0);
   const navigate = useNavigate();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const {
     onContextMenu,
     closeContextMenu,
@@ -30,7 +33,14 @@ const FolderItem = React.memo((props) => {
     const currentDate = Date.now();
 
     if (!elementSelected) {
-      dispatch(startSetSelectedItem(folder._id, false, false));
+      dispatch(
+        setMainSelect({
+          file: null,
+          id: folder._id,
+          type: "folder",
+          folder: folder,
+        })
+      );
       lastSelected.current = Date.now();
       return;
     }
@@ -113,7 +123,7 @@ const FolderItem = React.memo((props) => {
             elementSelected ? "text-white" : "text-black"
           )}
         >
-          {props.folder.name}
+          {folder.name}
         </p>
         <span
           className={classNames(

src/components/Folders/index.jsx

@@ -5,9 +5,11 @@ import FolderItem from "../FolderItem";
 import { memo, useCallback, useEffect } from "react";
 import ParentBar from "../ParentBar";
 import classNames from "classnames";
+import { useUtils } from "../../hooks/utils";
 
 const Folders = memo(() => {
   const { data: folders } = useFolders();
+  const { isHome } = useUtils();
   const sortBy = useSelector((state) => state.filter.sortBy);
   const dispatch = useDispatch();
 
@@ -67,7 +69,12 @@ const Folders = memo(() => {
   return (
     <div className="mt-8">
       <div className="flex flex-row mb-[20px] justify-between text-[#212b36] items-center">
-        <h2 className="m-0 text-[22px] font-medium">
+        <h2
+          className={classNames(
+            "m-0 text-[22px] font-medium",
+            isHome ? "block" : "invisible"
+          )}
+        >
           {folders?.length === 0 ? "No Folders" : "Folders"}
         </h2>
         <div className="flex flex-row items-center">

src/components/LeftSection/LeftSection.jsx

@@ -14,7 +14,7 @@ class LeftSection extends React.Component {
   render() {
     return (
       <div
-        className="menu__block p-6 hidden mobileMode:block border-r"
+        className="menu__block p-6 hidden mobileMode:block border-r w-[270px] min-w-[270px]"
         ref={this.props.leftSectionRef}
         style={
           this.props.leftSectionMode === ""
@@ -96,10 +96,6 @@ class LeftSection extends React.Component {
               </li>
             </ul>
           </div>
-          <UploadStorageSwitcher />
-          <div className="folder__structure">
-            <FolderTree />
-          </div>
           <div
             className={
               this.props.state.hideFolderTree

src/components/ParentBar/ParentBar.jsx

@@ -36,7 +36,7 @@ const ParentBar = memo(() => {
           className="text-[#637381] text-[18px] leading-[21px] font-medium m-0 no-underline animate cursor-pointer"
           onClick={goHome}
         >
-          myDrive
+          Home
         </a>
         <span className="inline-flex m-[0px_10px]">
           <img src="/assets/spacer.svg" alt="spacer" />

src/components/PopupWindow/PopupWindow.jsx

@@ -111,69 +111,6 @@ class PopupWindow extends React.Component {
         />
       </div>
     );
-
-    return (
-      <div className="popup-window" ref={this.props.wrapperRef}>
-        <h3 className="popup-window__title">
-          {capitalize(this.props.popupFile.filename)}
-        </h3>
-
-        {!this.props.popupFile.metadata.isVideo ? (
-          <div className="popup-window__image__wrapper">
-            {!this.props.popupFile.metadata.hasThumbnail ? (
-              <h3 className="popup-window__subtitle">No Preview Available</h3>
-            ) : undefined}
-
-            {!this.props.popupFile.metadata.hasThumbnail ? (
-              <img
-                className={this.props.state.imageClassname}
-                src={this.props.state.image}
-              />
-            ) : (
-              <img
-                className={this.props.state.imageClassname}
-                onClick={this.props.setPhotoViewerWindow}
-                src={this.props.state.image}
-                onError={this.props.thumbnailOnError}
-              />
-            )}
-
-            <div className={this.props.state.spinnerClassname}>
-              {!this.props.popupFile.metadata.hasThumbnail ? undefined : (
-                <Spinner />
-              )}
-            </div>
-          </div>
-        ) : (
-          <video
-            className="popup-window__video"
-            src={this.props.state.video}
-            ref={this.props.video}
-            type="video/mp4"
-            controls
-          >
-            Your browser does not support the video tag.
-          </video>
-        )}
-
-        <button
-          className="button popup-window__button"
-          onClick={() =>
-            this.props.downloadFile(
-              this.props.popupFile._id,
-              this.props.popupFile
-            )
-          }
-        >
-          Download
-        </button>
-        <img
-          className="popup-window__close-button"
-          onClick={this.props.hidePopupWindow}
-          src="/images/close_icon.png"
-        />
-      </div>
-    );
   }
 }
 

src/components/QuickAccessItem/index.tsx

@@ -0,0 +1,165 @@
+import capitalize from "../../utils/capitalize";
+import moment from "moment";
+import React, { memo, useMemo, useRef } from "react";
+import ContextMenu from "../ContextMenu";
+import classNames from "classnames";
+import { getFileColor, getFileExtension } from "../../utils/files";
+import { useThumbnail } from "../../hooks/files";
+import { useContextMenu } from "../../hooks/contextMenu";
+import { useDispatch, useSelector } from "react-redux";
+import mobilecheck from "../../utils/mobileCheck";
+import { startSetSelectedItem } from "../../actions/selectedItem";
+import { setPopupFile } from "../../actions/popupFile";
+import { FileInterface } from "../../types/file";
+import { useAppDispatch, useAppSelector } from "../../hooks/store";
+import { setMainSelect } from "../../reducers/selected";
+
+interface QuickAccessItemProps {
+  file: FileInterface;
+}
+
+const QuickAccessItem = memo((props: QuickAccessItemProps) => {
+  const { file } = props;
+  const elementSelected = useAppSelector((state) => {
+    if (state.selected.mainSection.type !== "quick-item") return false;
+    return state.selected.mainSection.id === file._id;
+  });
+  console.log("ele selected 2", elementSelected);
+  const { image, hasThumbnail, imageOnError } = useThumbnail(
+    file.metadata.hasThumbnail,
+    file.metadata.thumbnailID
+  );
+  const dispatch = useAppDispatch();
+  const lastSelected = useRef(0);
+
+  const {
+    onContextMenu,
+    closeContextMenu,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    clickStopPropagation,
+    ...contextMenuState
+  } = useContextMenu();
+
+  const fileExtension = useMemo(
+    () => getFileExtension(file.filename),
+    [file.filename]
+  );
+
+  const imageColor = useMemo(
+    () => getFileColor(file.filename),
+    [file.filename]
+  );
+
+  // TODO: See if we can memoize this
+  const quickItemClick = () => {
+    const currentDate = Date.now();
+
+    if (!elementSelected) {
+      // dispatch(startSetSelectedItem(file._id, true, true));
+      dispatch(
+        setMainSelect({ file, id: file._id, type: "quick-item", folder: null })
+      );
+      lastSelected.current = Date.now();
+      return;
+    }
+
+    const isMobile = mobilecheck();
+
+    if (isMobile || currentDate - lastSelected.current < 1500) {
+      dispatch(setPopupFile({ showPopup: true, ...file }));
+    }
+
+    lastSelected.current = Date.now();
+  };
+
+  return (
+    <div
+      className={classNames(
+        "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer flex items-center justify-center flex-col h-[125px] sm:h-[150px] animiate hover:border-[#3c85ee] overflow-hidden",
+        elementSelected ? "border-[#3c85ee]" : "border-[#ebe9f9]"
+      )}
+      onClick={quickItemClick}
+      onContextMenu={onContextMenu}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+    >
+      {contextMenuState.selected && (
+        <div onClick={clickStopPropagation}>
+          <ContextMenu
+            gridMode={true}
+            quickItemMode={true}
+            contextSelected={contextMenuState}
+            closeContext={closeContextMenu}
+            file={file}
+          />
+        </div>
+      )}
+      <div
+        className={classNames(
+          "inline-flex items-center w-full bg-white relative",
+          {
+            "mt-2": !hasThumbnail,
+          }
+        )}
+      >
+        {hasThumbnail ? (
+          <img
+            className="w-full min-h-[88px] max-h-[88px] h-full flex object-cover"
+            src={image}
+            onError={imageOnError}
+          />
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            version="1.1"
+            width="150"
+            height="150"
+            viewBox="0 0 24 24"
+            className="w-full min-h-[80px] max-h-[80px] h-full flex"
+          >
+            <path
+              d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"
+              fill={imageColor}
+            />
+          </svg>
+        )}
+        {!hasThumbnail && (
+          <div className="w-full h-full absolute flex justify-center items-center text-white mt-3">
+            <p className="text-sm">{fileExtension}</p>
+          </div>
+        )}
+      </div>
+      <div
+        className={classNames(
+          "p-3 overflow-hidden text-ellipsis block w-full animate",
+          elementSelected
+            ? "bg-[#3c85ee] text-white"
+            : "bg-white text-[#637381]"
+        )}
+      >
+        <p
+          className={classNames(
+            "m-0 text-[14px] leading-[16px] font-normal max-w-full overflow-hidden text-ellipsis whitespace-nowrap animate",
+            elementSelected ? "text-white" : "text-[#212b36]"
+          )}
+        >
+          {capitalize(file.filename)}
+        </p>
+        <span
+          className={classNames(
+            "text-[#637381] font-normal max-w-full whitespace-nowrap text-xs animate hidden sm:block mt-1",
+            elementSelected ? "text-white" : "text-[#637381]"
+          )}
+        >
+          Created {moment(file.uploadDate).format("MM/DD/YY hh:mma")}
+        </span>
+      </div>
+    </div>
+  );
+});
+
+export default QuickAccessItem;

src/components/QuickAccessItem/index2.jsx

@@ -10,6 +10,7 @@ import { useDispatch, useSelector } from "react-redux";
 import mobilecheck from "../../utils/mobileCheck";
 import { startSetSelectedItem } from "../../actions/selectedItem";
 import { setPopupFile } from "../../actions/popupFile";
+import { useAppSelector } from "../../hooks/store";
 
 const QuickAccessItem = memo((props) => {
   const { file } = props;

src/components/RightSection/index.tsx

@@ -9,15 +9,17 @@ import { getFileExtension } from "../../utils/files";
 import { useContextMenu } from "../../hooks/contextMenu";
 import { setPopupFile } from "../../actions/popupFile";
 import { useNavigate } from "react-router-dom";
+import { useAppSelector } from "../../hooks/store";
+import { resetSelected } from "../../reducers/selected";
 
 const RightSection = memo(() => {
-  const selectedItem = useSelector((state) => state.selectedItem);
+  const selectedItem = useAppSelector((state) => state.selected.mainSection);
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const formattedName = useMemo(() => {
-    if (!selectedItem) return "";
-    const name = selectedItem.name;
+    if (!selectedItem.id) return "";
+    const name = selectedItem.file?.filename || selectedItem.folder?.name || "";
     const maxLength = 66;
     const ellipsis = "...";
     if (name.length <= maxLength) {
@@ -31,22 +33,27 @@ const RightSection = memo(() => {
     const end = name.slice(-endLength);
 
     return `${start}${ellipsis}${end}`;
-  }, [selectedItem?.name, selectedItem?.file]);
+  }, [
+    selectedItem?.id,
+    selectedItem?.file?.filename,
+    selectedItem?.folder?.name,
+  ]);
 
-  const formattedDate = useMemo(
-    () => moment(selectedItem.date).format("L"),
-    [selectedItem?.date, moment]
-  );
+  const formattedDate = useMemo(() => {
+    const date =
+      selectedItem.file?.uploadDate || selectedItem.folder?.createdAt;
+    return moment(date).format("L");
+  }, [selectedItem?.file?.uploadDate, selectedItem.folder?.createdAt, moment]);
 
   const fileSize = useMemo(() => {
-    if (!selectedItem || !selectedItem.size) return 0;
-    return bytes(selectedItem.size);
-  }, [selectedItem?.size, bytes]);
+    if (!selectedItem.file?.length) return 0;
+    return bytes(selectedItem.file.length);
+  }, [selectedItem?.file?.length, bytes]);
 
   const fileExtension = useMemo(() => {
-    if (!selectedItem?.file) return null;
-    return getFileExtension(selectedItem.name);
-  }, [selectedItem?.file, selectedItem?.name, getFileExtension]);
+    if (!selectedItem?.file?.filename) return null;
+    return getFileExtension(selectedItem.file.filename);
+  }, [selectedItem?.file?.filename, getFileExtension]);
 
   const {
     onContextMenu,
@@ -58,24 +65,24 @@ const RightSection = memo(() => {
     ...contextMenuState
   } = useContextMenu();
 
-  const resetSelected = () => {
-    dispatch(resetSelectedItem());
+  const reset = () => {
+    dispatch(resetSelected());
   };
-  const openItem = (e) => {
+  const openItem = () => {
     if (selectedItem.file) {
-      dispatch(setPopupFile({ showPopup: true, ...selectedItem.data }));
+      dispatch(setPopupFile({ showPopup: true, ...selectedItem.file }));
     } else {
-      navigate(`/folder/${selectedItem.data._id}`);
+      navigate(`/folder/${selectedItem.id}`);
     }
   };
   return (
     <div
       className={classNames(
         "!hidden mobileMode:!flex min-w-[260px] max-w-[260px] border-l border-[#e8eef2] p-[25px] bg-white right-0 justify-center relative",
-        selectedItem.name === "" ? "flex justify-center items-center" : ""
+        selectedItem.id === "" ? "flex justify-center items-center" : ""
       )}
     >
-      {selectedItem.name === "" ? (
+      {selectedItem.id === "" ? (
         <div className="flex flex-col justify-center items-center text-center">
           <span>
             <img src="/assets/filedetailsicon.svg" alt="filedetailsicon" />
@@ -97,7 +104,7 @@ const RightSection = memo(() => {
             <img
               className="w-[30px] h-[30px] ml-8 cursor-pointer absolute right-3"
               src="/images/close_icon.png"
-              onClick={resetSelected}
+              onClick={reset}
             />
           </div>
 
@@ -112,13 +119,13 @@ const RightSection = memo(() => {
                 Type
               </span>
               <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
-                {selectedItem.size ? fileExtension : "Folder"}
+                {selectedItem.file ? fileExtension : "Folder"}
               </span>
             </div>
             <div
               className="flex mb-[7px] justify-start"
               style={
-                !selectedItem.size ? { display: "none" } : { display: "flex" }
+                !selectedItem.file ? { display: "none" } : { display: "flex" }
               }
             >
               <span className="text-[#637381] text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
@@ -136,29 +143,17 @@ const RightSection = memo(() => {
                 {formattedDate}
               </span>
             </div>
-            <div className="flex mb-[7px] justify-start">
-              <span className="text-[#637381] text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
-                Location
-              </span>
-              <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
-                {selectedItem.drive
-                  ? "Google Drive"
-                  : selectedItem.personalFile
-                  ? "Amazon S3"
-                  : "myDrive"}
-              </span>
-            </div>
             <div
               className="flex mb-[7px] justify-start"
               style={
-                !selectedItem.size ? { display: "none" } : { display: "flex" }
+                !selectedItem.file ? { display: "none" } : { display: "flex" }
               }
             >
               <span className="text-[#637381] text-[13px] font-normal mr-[35px] leading-[20px] min-w-[50px]">
-                Privacy
+                Access
               </span>
               <span className="text-[#212b36] text-[13px] font-normal leading-[20px]">
-                {selectedItem.link ? "Public" : "Only you"}
+                {selectedItem.file?.metadata.link ? "Public" : "Private"}
               </span>
             </div>
           </div>
@@ -172,6 +167,7 @@ const RightSection = memo(() => {
             <div className="ml-[15px] px-[20px]">
               <a
                 className="w-[40px] h-[40px] rounded-[4px] inline-flex items-center justify-center border border-[#919eab] text-[#919eab] no-underline animate"
+                // @ts-ignore
                 onClick={onContextMenu}
               >
                 <i className="fas fa-ellipsis-h" aria-hidden="true"></i>
@@ -185,8 +181,8 @@ const RightSection = memo(() => {
                 contextSelected={contextMenuState}
                 closeContext={closeContextMenu}
                 folderMode={!selectedItem.file}
-                file={selectedItem.data}
-                folder={selectedItem.data}
+                file={selectedItem.file}
+                folder={selectedItem.folder}
               />
             </div>
           )}