added more hooks

src/components/QuickAccessItem/QuickAccessItem.jsx

@@ -1,117 +1,79 @@
 import capitalize from "../../utils/capitalize";
 import moment from "moment";
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import NewContextMenu from "../NewContextMenu";
 import classNames from "classnames";
+import { getFileColor, getFileExtension } from "../../utils/files";
+import { useThumbnail } from "../../hooks/files";
+import { useContextMenu } from "../../hooks/contextMenu";
 
 const QuickAccessItem = (props) => {
-  const fileExtension = useMemo(() => {
-    const filenameSplit = props.filename.split(".");
+  const { image, hasThumbnail, imageOnError } = useThumbnail(
+    props.metadata.hasThumbnail,
+    props.metadata.thumbnailID
+  );
 
-    if (filenameSplit.length > 1) {
-      let extension = filenameSplit[filenameSplit.length - 1];
+  const { onContextMenu, closeContextMenu, ...contextMenuState } =
+    useContextMenu();
 
-      if (extension.length > 4)
-        extension =
-          extension.substring(0, 3) +
-          extension.substring(extension.length - 1, extension.length);
+  const fileExtension = useMemo(
+    () => getFileExtension(props.filename),
+    [props.filename]
+  );
 
-      return extension.toUpperCase();
-    } else {
-      return "UNK";
-    }
-  }, [props.filename]);
-
-  const imageColor = useMemo(() => {
-    const letter = fileExtension.substring(0, 1).toUpperCase();
-
-    const colorObj = {
-      A: "#e53935",
-      B: "#d81b60",
-      C: "#8e24aa",
-      D: "#5e35b1",
-      E: "#3949ab",
-      F: "#1e88e5",
-      G: "#039be5",
-      H: "#00acc1",
-      I: "#00897b",
-      J: "#43a047",
-      K: "#fdd835",
-      L: "#ffb300",
-      M: "#fb8c00",
-      N: "#f4511e",
-      O: "#d32f2f",
-      P: "#c2185b",
-      Q: "#7b1fa2",
-      R: "#512da8",
-      S: "#303f9f",
-      T: "#1976d2",
-      U: "#0288d1",
-      V: "#0097a7",
-      W: "#0097a7",
-      X: "#00796b",
-      Y: "#388e3c",
-      Z: "#fbc02d",
-    };
-
-    if (colorObj[letter]) {
-      return colorObj[letter];
-    } else {
-      return "#03a9f4";
-    }
-  }, [props.filename]);
+  const imageColor = useMemo(
+    () => getFileColor(props.filename),
+    [props.filename]
+  );
 
   const elementSelected = useMemo(
     () => `quick-${props._id}` === props.selected,
     [props._id, props.selected]
   );
 
-  console.log("thumbnail", props.state);
-
   return (
     <div
       className={classNames(
         "border rounded-md o transition-all duration-400 ease-in-out cursor-pointer w-48 flex items-center justify-center flex-col h-[150px] animiate hover:border-[#3c85ee] overflow-hidden",
-        {
-          "border-[#3c85ee]": elementSelected,
-          "border-[#ebe9f9]": !elementSelected,
-        }
+        elementSelected ? "border-[#3c85ee]" : "border-[#ebe9f9]"
       )}
       onClick={() => {
         props.fileClick(props._id, props, true);
       }}
-      onContextMenu={props.selectContext}
+      onContextMenu={onContextMenu}
       onTouchStart={props.onTouchStart}
       onTouchEnd={props.onTouchEnd}
       onTouchMove={props.onTouchMove}
     >
-      <div onClick={props.clickStopPropagation}>
-        <NewContextMenu
-          gridMode={true}
-          quickItemMode={true}
-          contextSelected={props.state.contextSelected}
-          closeContext={props.closeContext}
-          downloadFile={props.downloadFile}
-          file={props}
-          changeEditNameMode={props.changeEditNameMode}
-          closeEditNameMode={props.closeEditNameMode}
-          changeDeleteMode={props.changeDeleteMode}
-          startMovingFile={props.startMovingFile}
-        />
-      </div>
+      {contextMenuState.selected && (
+        <div onClick={props.clickStopPropagation}>
+          <NewContextMenu
+            gridMode={true}
+            quickItemMode={true}
+            contextSelected={contextMenuState}
+            closeContext={closeContextMenu}
+            downloadFile={props.downloadFile}
+            file={props}
+            changeEditNameMode={props.changeEditNameMode}
+            closeEditNameMode={props.closeEditNameMode}
+            changeDeleteMode={props.changeDeleteMode}
+            startMovingFile={props.startMovingFile}
+          />
+        </div>
+      )}
       <div
         className={classNames(
           "inline-flex items-center w-full bg-white relative",
           {
-            "mt-2": !props.state.hasThumbnail,
+            "mt-2": !hasThumbnail,
           }
         )}
       >
-        {props.state.hasThumbnail ? (
+        {hasThumbnail ? (
           <img
             className="w-full min-h-[88px] max-h-[88px] h-full flex object-cover"
-            src={props.state.image}
-            onError={props.thumbnailOnError}
+            src={image}
+            onError={imageOnError}
           />
         ) : (
           <svg
@@ -129,7 +91,7 @@ const QuickAccessItem = (props) => {
             />
           </svg>
         )}
-        {!props.state.hasThumbnail && (
+        {!hasThumbnail && (
           <div className="w-full h-full absolute flex justify-center items-center text-white mt-3">
             <p className="text-sm">{fileExtension}</p>
           </div>

src/components/QuickAccessItem/index.jsx

@@ -25,7 +25,6 @@ class QuickAccessItemContainer extends React.Component {
     this.lastTouch = 0;
 
     this.state = {
-      contextMenuPos: {},
       image: "/images/file-svg.svg",
       imageClassname: "noSelect file__item-no-thumbnail",
       contextSelected: false,
@@ -33,99 +32,6 @@ class QuickAccessItemContainer extends React.Component {
     };
   }
 
-  componentDidMount = () => {
-    const hasThumbnail = this.props.metadata.hasThumbnail;
-    console.log("has", hasThumbnail);
-
-    if (hasThumbnail && !this.failedToLoad) {
-      this.getThumbnail();
-    }
-  };
-
-  closeContext = () => {
-    this.setState(() => {
-      return {
-        ...this.state,
-        contextSelected: false,
-      };
-    });
-  };
-
-  selectContext = (e) => {
-    if (e) e.stopPropagation();
-    if (e) e.preventDefault();
-
-    if (mobilecheck()) {
-      this.props.dispatch(setMobileContextMenu(true, this.props));
-      return;
-    }
-
-    this.setState(() => {
-      return {
-        ...this.state,
-        contextSelected: {
-          width: e.clientX,
-          height: e.clientY,
-        },
-      };
-    });
-  };
-
-  getThumbnail = async () => {
-    const thumbnailID = this.props.metadata.thumbnailID;
-    const imageClassname = "noSelect";
-
-    // GOOGLE DRIVE IMAGE
-    if (this.props.metadata.drive) {
-      return await this.setState(() => ({
-        ...this.state,
-        image: this.props.metadata.thumbnailID,
-        imageClassname: imageClassname,
-      }));
-    }
-
-    const config = {
-      responseType: "arraybuffer",
-    };
-
-    await this.setState(() => ({
-      ...this.state,
-      image: "/images/file-svg.svg",
-      imageClassname: "noSelect file__item-no-thumbnail",
-    }));
-
-    const url = `http://localhost:5173/api/file-service/thumbnail/${thumbnailID}`;
-
-    axios
-      .get(url, config)
-      .then((results) => {
-        const imgFile = new Blob([results.data]);
-        const imgUrl = URL.createObjectURL(imgFile);
-        console.log("got image");
-
-        this.setState(() => ({
-          ...this.state,
-          image: imgUrl,
-          imageClassname: imageClassname,
-          hasThumbnail: true,
-        }));
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  thumbnailOnError = (e) => {
-    console.log("thumbnail on error", e);
-
-    this.setState(() => ({
-      ...this.state,
-      image: "/images/file-svg.svg",
-      imageClassname: "noSelect file__item-no-thumbnail",
-      hasThumbnail: false,
-    }));
-  };
-
   onTouchStart = () => {
     const date = new Date();
     this.lastTouch = date.getTime();
@@ -146,43 +52,10 @@ class QuickAccessItemContainer extends React.Component {
     this.lastTouch = 0;
 
     if (difference > 500) {
-      this.selectContext();
+      // this.selectContext();
     }
   };
 
-  getContextMenu = (e) => {
-    if (e) e.preventDefault();
-
-    const isMobile = mobileCheck();
-
-    const windowX = window.innerWidth;
-    const windowY = window.innerHeight;
-
-    let styleObj = { right: 0, left: 0, top: "-3px", bottom: 0 };
-
-    if (isMobile) {
-      styleObj = { bottom: 0, left: "2px" };
-    } else {
-      const clientY = e.nativeEvent.clientY;
-      const clientX = e.nativeEvent.clientX;
-
-      if (clientX > windowX / 2) {
-        styleObj = { ...styleObj, left: "unset", right: 0 };
-      } else {
-        styleObj = { ...styleObj, left: 0, right: "unset" };
-      }
-    }
-
-    this.setState(() => ({
-      ...this.state,
-      contextMenuPos: styleObj,
-    }));
-
-    this.props.dispatch(setSelected("quick-" + this.props._id));
-    this.props.dispatch(setRightSelected("quick-" + this.props._id));
-    this.props.dispatch(setLastSelected(0));
-  };
-
   changeEditNameMode = async () => {
     let inputValue = this.props.filename;
 
@@ -257,17 +130,13 @@ class QuickAccessItemContainer extends React.Component {
   render() {
     return (
       <QuickAccessItem
-        getContextMenu={this.getContextMenu}
         onTouchStart={this.onTouchStart}
         onTouchMove={this.onTouchMove}
         onTouchEnd={this.onTouchEnd}
-        closeContext={this.closeContext}
-        selectContext={this.selectContext}
         changeEditNameMode={this.changeEditNameMode}
         closeEditNameMode={this.closeEditNameMode}
         changeDeleteMode={this.changeDeleteMode}
         startMovingFile={this.startMovingFile}
-        thumbnailOnError={this.thumbnailOnError}
         state={this.state}
         {...this.props}
       />