added list item optimizations

src/components/FileItem/index.jsx

@@ -1,6 +1,6 @@
 import capitalize from "../../utils/capitalize";
 import moment from "moment";
-import React, { useMemo, useRef } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import ContextMenu from "../ContextMenu";
 import mobilecheck from "../../utils/mobileCheck";
 import { useContextMenu } from "../../hooks/contextMenu";
@@ -12,10 +12,10 @@ import { startSetSelectedItem } from "../../actions/selectedItem";
 import { setPopupFile } from "../../actions/popupFile";
 import bytes from "bytes";
 
-const FileItem = (props) => {
+const FileItem = React.memo((props) => {
   const { file } = props;
-  const currentSelectedItem = useSelector(
-    (state) => state.selectedItem.selected
+  const elementSelected = useSelector(
+    (state) => state.selectedItem.selected === file._id
   );
   const listView = useSelector((state) => state.filter.listView);
   const { image, hasThumbnail, imageOnError } = useThumbnail(
@@ -42,12 +42,8 @@ const FileItem = (props) => {
     () => getFileColor(file.filename),
     [file.filename]
   );
-  const elementSelected = useMemo(
-    () => file._id === currentSelectedItem,
-    [file._id, currentSelectedItem]
-  );
 
-  const fileClick = () => {
+  const fileClick = useCallback(() => {
     const currentDate = Date.now();
 
     if (!elementSelected) {
@@ -61,7 +57,7 @@ const FileItem = (props) => {
     }
 
     lastSelected.current = Date.now();
-  };
+  }, [startSetSelectedItem, dispatch, setPopupFile, mobilecheck, file._id]);
 
   if (listView) {
     return (
@@ -185,7 +181,7 @@ const FileItem = (props) => {
           ) : (
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
               version="1.1"
               width="150"
               height="150"
@@ -230,6 +226,6 @@ const FileItem = (props) => {
       </div>
     );
   }
-};
+});
 
 export default FileItem;

src/components/Files/index.jsx

@@ -94,34 +94,39 @@ const Files = () => {
           </div>
         ) : (
           <table className="w-full" style={loading ? { display: "none" } : {}}>
-            <tr>
-              <th>
-                <div className="flex flex-row items-center mb-2 ml-4">
-                  <p className="text-[#212b36] text-sm font-medium">Name</p>
-                </div>
-              </th>
-              <th className="hidden fileListShowDetails:table-cell">
-                <p className="text-[#212b36] text-sm font-medium mb-2">Size</p>
-              </th>
-              <th className="hidden fileListShowDetails:table-cell">
-                <p className="text-[#212b36] text-sm font-medium mb-2">
-                  Created
-                </p>
-              </th>
-              <th>
-                <p className="text-[#212b36] text-sm font-medium mb-2">
-                  Actions
-                </p>
-              </th>
-            </tr>
-
-            {files?.pages.map((filePage, index) => (
-              <React.Fragment key={index}>
-                {filePage.map((file) => (
-                  <FileItem file={file} key={file._id} />
-                ))}
-              </React.Fragment>
-            ))}
+            <thead>
+              <tr>
+                <th>
+                  <div className="flex flex-row items-center mb-2 ml-4">
+                    <p className="text-[#212b36] text-sm font-medium">Name</p>
+                  </div>
+                </th>
+                <th className="hidden fileListShowDetails:table-cell">
+                  <p className="text-[#212b36] text-sm font-medium mb-2">
+                    Size
+                  </p>
+                </th>
+                <th className="hidden fileListShowDetails:table-cell">
+                  <p className="text-[#212b36] text-sm font-medium mb-2">
+                    Created
+                  </p>
+                </th>
+                <th>
+                  <p className="text-[#212b36] text-sm font-medium mb-2">
+                    Actions
+                  </p>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {files?.pages.map((filePage, index) => (
+                <React.Fragment key={index}>
+                  {filePage.map((file) => (
+                    <FileItem file={file} key={file._id} />
+                  ))}
+                </React.Fragment>
+              ))}
+            </tbody>
           </table>
         )}
 

src/components/FolderItem/index.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import ContextMenu from "../ContextMenu";
 import { useContextMenu } from "../../hooks/contextMenu";
 import classNames from "classnames";
@@ -8,10 +8,10 @@ import { startSetSelectedItem } from "../../actions/selectedItem";
 import mobilecheck from "../../utils/mobileCheck";
 import moment from "moment";
 
-const FolderItem = (props) => {
+const FolderItem = React.memo((props) => {
   const { folder } = props;
-  const currentSelectedItem = useSelector(
-    (state) => state.selectedItem.selected
+  const elementSelected = useSelector(
+    (state) => state.selectedItem.selected === folder._id
   );
   const lastSelected = useRef(0);
   const navigate = useNavigate();
@@ -26,12 +26,7 @@ const FolderItem = (props) => {
     ...contextMenuState
   } = useContextMenu();
 
-  const elementSelected = useMemo(
-    () => props.folder._id === currentSelectedItem,
-    [props.folder._id, currentSelectedItem]
-  );
-
-  const folderClick = () => {
+  const folderClick = useCallback(() => {
     const currentDate = Date.now();
 
     if (!elementSelected) {
@@ -45,7 +40,7 @@ const FolderItem = (props) => {
     }
 
     lastSelected.current = Date.now();
-  };
+  }, [dispatch, startSetSelectedItem, mobilecheck, navigate, folder._id]);
 
   return (
     <div
@@ -113,6 +108,6 @@ const FolderItem = (props) => {
       </p>
     </div>
   );
-};
+});
 
 export default FolderItem;

src/components/FolderTreeStorage/FolderTreeStorage.jsx

@@ -30,7 +30,13 @@ const FolderTreeStorage = (props) => (
       <div className="folder-tree__storage-subview-box">
         {props.state.open && props.state.folders.length !== 0
           ? props.state.folders.map((folder) => {
-              return <FolderTreeStorageSub folder={folder} type={props.type} />;
+              return (
+                <FolderTreeStorageSub
+                  key={folder._id}
+                  folder={folder}
+                  type={props.type}
+                />
+              );
             })
           : undefined}
       </div>

src/components/Folders/index.jsx

@@ -9,7 +9,6 @@ const Folder = () => {
   const sortBy = useSelector((state) => state.filter.sortBy);
   const parent = useSelector((state) => state.parent.parent);
   const dispatch = useDispatch();
-  console.log("rerenderfolder", sortBy);
 
   const switchOrderSortBy = useCallback(() => {
     let newSortBy = "";
@@ -35,7 +34,6 @@ const Folder = () => {
         break;
       }
     }
-    console.log("new sortBy", newSortBy);
 
     dispatch(setSortBy(newSortBy));
   }, [setSortBy, dispatch]);

src/components/Homepage/Homepage2.jsx

@@ -1,37 +1,19 @@
 import Header from "../Header";
-import LeftSection from "../LeftSection";
 import MainSection from "../MainSection";
 import Uploader from "../Uploader";
 import React from "react";
-import PhotoViewer from "../PhotoViewer";
 import UploadOverlay from "../UploadOverlay";
 import HomepageSpinner from "../HomepageSpinner";
 import MobileContextMenuContainer from "../MobileContextMenu";
 import ShareModelWrapper from "../ShareModelWrapper";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
-import { useSelector } from "react-redux";
-import { useInfiniteQuery, useQuery } from "react-query";
-import { getFilesList } from "../../api/filesAPI";
-import { getFoldersList } from "../../api/foldersAPI";
-import { useFiles } from "../../hooks/files";
 
 const Homepage2 = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const params = useParams();
-  const photoID = useSelector((state) => state.photoViewer.id);
-  useFiles();
-
-  const goHome = () => {
-    navigate("/home");
-  };
-
   return (
     <div>
       <HomepageSpinner />
 
       <div className="">
-        <Header goHome={goHome} />
+        <Header />
         <div className="flex space-between">
           <MainSection />
           <Uploader />

src/components/MainSection/index.jsx

@@ -119,26 +119,18 @@ class MainSectionContainer extends React.Component {
   };
 
   componentDidUpdate = () => {
-    console.log("main updated");
-
     // console.log("update ID main", getUpdateSettingsID());
-
     // if (this.lastSettingsUpdateID !== getUpdateSettingsID()) {
     //     console.log("Settings Update!");
     //     this.getSettings();
     // }
-
     // this.lastSettingsUpdateID = getUpdateSettingsID();
-
     // console.log("update settings id", updateSettingsID);
-
     // console.log("Main Section Updated", this.props.resetSettingsMain);
-
     // if (this.lastSettingsUpdateID !== this.props.resetSettingsMain) {
     //     console.log("Settings Update!");
     //     this.getSettings();
     // }
-
     // this.lastSettingsUpdateID = this.props.resetSettingsMain;
   };
 

src/components/QuickAccessItem/index.jsx

@@ -1,6 +1,6 @@
 import capitalize from "../../utils/capitalize";
 import moment from "moment";
-import React, { useMemo, useRef } from "react";
+import React, { memo, useMemo, useRef } from "react";
 import ContextMenu from "../ContextMenu";
 import classNames from "classnames";
 import { getFileColor, getFileExtension } from "../../utils/files";
@@ -11,10 +11,10 @@ import mobilecheck from "../../utils/mobileCheck";
 import { startSetSelectedItem } from "../../actions/selectedItem";
 import { setPopupFile } from "../../actions/popupFile";
 
-const QuickAccessItem = (props) => {
+const QuickAccessItem = memo((props) => {
   const { file } = props;
-  const currentSelectedItem = useSelector(
-    (state) => state.selectedItem.selected
+  const elementSelected = useSelector(
+    (state) => state.selectedItem.selected === `quick-${file._id}`
   );
   const { image, hasThumbnail, imageOnError } = useThumbnail(
     file.metadata.hasThumbnail,
@@ -43,11 +43,6 @@ const QuickAccessItem = (props) => {
     [file.filename]
   );
 
-  const elementSelected = useMemo(
-    () => `quick-${file._id}` === currentSelectedItem,
-    [file._id, currentSelectedItem]
-  );
-
   const quickItemClick = () => {
     const currentDate = Date.now();
 
@@ -104,7 +99,7 @@ const QuickAccessItem = (props) => {
         ) : (
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
             version="1.1"
             width="150"
             height="150"
@@ -148,6 +143,6 @@ const QuickAccessItem = (props) => {
       </div>
     </div>
   );
-};
+});
 
 export default QuickAccessItem;

src/components/RightSection/RightSection.jsx

@@ -12,7 +12,7 @@ class RightSection extends React.Component {
   render() {
     return (
       <div
-        onClicks={this.props.closeContext}
+        onClick={this.props.closeContext}
         ref={this.props.rightSectionRef}
         style={
           this.props.rightSectionMode === ""

src/components/UploadStorageSwitcher/UploadStorageSwitcher.jsx

@@ -1,13 +1,35 @@
 import React from "react";
 
 const UploadStorageSwitcher = (props) => (
-    <div className="upload-switcher__wrapper">
-        {props.state.options.length !== 0 ? 
-        <select className="upload-switcher__select" value={props.storageSwitcher === "" ? props.state.value : props.storageSwitcher} onChange={props.changeUploadSwitcher}>
-            {props.state.options.map((currentOption) => <option disabled={props.storageSwitcher === "" ? false : props.storageSwitcher !== currentOption.type} value={currentOption.type}>{currentOption.name}</option>)}
-        </select> :
-        <p>No Storage Accounts</p>}
-    </div>
-)
+  <div className="upload-switcher__wrapper">
+    {props.state.options.length !== 0 ? (
+      <select
+        className="upload-switcher__select"
+        value={
+          props.storageSwitcher === ""
+            ? props.state.value
+            : props.storageSwitcher
+        }
+        onChange={props.changeUploadSwitcher}
+      >
+        {props.state.options.map((currentOption, index) => (
+          <option
+            key={index}
+            disabled={
+              props.storageSwitcher === ""
+                ? false
+                : props.storageSwitcher !== currentOption.type
+            }
+            value={currentOption.type}
+          >
+            {currentOption.name}
+          </option>
+        ))}
+      </select>
+    ) : (
+      <p>No Storage Accounts</p>
+    )}
+  </div>
+);
 
-export default UploadStorageSwitcher;
+export default UploadStorageSwitcher;