added more hooks

2024-06-22 03:46:42 -04:00
parent ecca46c73e
commit 4cccd43677
11 changed files with 430 additions and 357 deletions
@@ -1,91 +1,124 @@
 import classNames from "classnames";
 import React from "react";
+import Swal from "sweetalert2";
+import { deleteFile, renameFile } from "../../api/filesAPI";
+import { useFiles, useQuickFiles } from "../../hooks/files";

-class NewContextMenu extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+const NewContextMenu = (props) => {
+  const { invalidateFilesCache } = useFiles();
+  const { invalidateQuickFilesCache } = useQuickFiles();
+  const liClassname =
+    "flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium";
+  const spanClassname = "inline-flex mr-[18px]";

-  render() {
-    return (
-      // settings__folder__margin
-      <div
-        onClick={this.props.stopPropagation}
-        ref={this.props.wrapperRef}
-        className={classNames(
-          "fixed min-w-[215px] bg-white shadow-[0px_2px_4px_rgba(0,0,0,0.15),_inset_0px_1px_0px_#f5f7fa] rounded-[4px] mt-[-5px] z-[2] animate-very-long",
-          this.props.contextSelected ? "opacity-100" : "opacity-0"
-        )}
-        style={
-          this.props.contextSelected
-            ? {
-                display: "block",
-                left: `${this.props.contextSelected.width}px`,
-                top: `${this.props.contextSelected.height}px`,
-              }
-            : { display: "none" }
-        }
-      >
-        <ul className="p-0 list-none m-0 ">
-          <li className="flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium">
-            <a onClick={this.props.startRenameFile} className="flex">
-              <span className="inline-flex mr-[18px]">
-                <img src="/assets/filesetting1.svg" alt="setting" />
-              </span>
-              Rename
-            </a>
-          </li>
-          {!this.props.folderMode ? (
-            <li className="flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium">
-              <a
-                onClick={this.props.startShareFile}
-                className="flex"
-                data-modal="share__modal"
-              >
-                <span
-                  className="inline-flex mr-[18px]
+  const renameItem = async () => {
+    if (!props.folderMode) {
+      const { value: filename } = await Swal.fire({
+        title: "Enter A File Name",
+        input: "text",
+        inputValue: props.file.filename,
+        showCancelButton: true,
+        inputValidator: (value) => {
+          if (!value) {
+            return "Please Enter a Name";
+          }
+        },
+      });
+      await renameFile(props.file._id, filename);
+      invalidateFilesCache();
+      invalidateQuickFilesCache();
+    }
+  };
+
+  const deleteItem = async () => {
+    if (!props.folderMode) {
+      const result = await Swal.fire({
+        title: "Confirm Deletion",
+        text: "You cannot undo this action",
+        icon: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#3085d6",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Yes, delete",
+      });
+
+      if (result.value) {
+        await deleteFile(props.file._id);
+        invalidateFilesCache();
+        invalidateQuickFilesCache();
+      }
+    }
+  };
+
+  return (
+    <div
+      onClick={props.stopPropagation}
+      ref={props.wrapperRef}
+      className={classNames(
+        "fixed min-w-[215px] bg-white shadow-[0px_2px_4px_rgba(0,0,0,0.15),_inset_0px_1px_0px_#f5f7fa] rounded-[4px] mt-[-5px] z-[2] animate-very-long",
+        props.contextSelected.selected ? "opacity-100" : "opacity-0"
+      )}
+      style={
+        props.contextSelected.selected
+          ? {
+              display: "block",
+              left: `${props.contextSelected.X}px`,
+              top: `${props.contextSelected.Y}px`,
+            }
+          : { display: "none" }
+      }
+    >
+      <ul className="p-0 list-none m-0 ">
+        <li onClick={renameItem} className={liClassname}>
+          <a className="flex">
+            <span className={spanClassname}>
+              <img src="/assets/filesetting1.svg" alt="setting" />
+            </span>
+            Rename
+          </a>
+        </li>
+        {!props.folderMode ? (
+          <li onClick={props.startShareFile} className={liClassname}>
+            <a className="flex" data-modal="share__modal">
+              <span
+                className="inline-flex mr-[18px]
 "
-                >
-                  <img src="/assets/filesetting2.svg" alt="setting" />
-                </span>
-                Share
-              </a>
-            </li>
-          ) : undefined}
-          {!this.props.folderMode ? (
-            <li className="flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium">
-              <a onClick={this.props.startFileDownload} className="flex">
-                <span className="inline-flex mr-[18px]">
-                  <img src="/assets/filesetting3.svg" alt="setting" />
-                </span>
-                Download
-              </a>
-            </li>
-          ) : undefined}
-          <li className="flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium">
-            <a
-              onClick={this.props.startMovingFile}
-              className="flex"
-              data-modal="destination__modal"
-            >
-              <span className="inline-flex mr-[18px]">
-                <img src="/assets/filesetting4.svg" alt="setting" />
-              </span>{" "}
-              Move
-            </a>
-          </li>
-          <li className="flex w-full px-[20px] py-[12px] items-center font-normal justify-start no-underline transition-all duration-400 ease-in-out hover:bg-[#f6f5fd] hover:text-[#3c85ee] hover:font-medium">
-            <a onClick={this.props.startDeleteFile} className="flex">
-              <span className="inline-flex mr-[18px]">
-                <img src="/assets/filesetting5.svg" alt="setting" />
+              >
+                <img src="/assets/filesetting2.svg" alt="setting" />
              </span>
-              Delete
+              Share
            </a>
          </li>
-        </ul>
-      </div>
-    );
-  }
-}
+        ) : undefined}
+        {!props.folderMode ? (
+          <li onClick={props.startFileDownload} className={liClassname}>
+            <a className="flex">
+              <span className={spanClassname}>
+                <img src="/assets/filesetting3.svg" alt="setting" />
+              </span>
+              Download
+            </a>
+          </li>
+        ) : undefined}
+        <li onClick={props.startMovingFile} className={liClassname}>
+          <a className="flex" data-modal="destination__modal">
+            <span className={spanClassname}>
+              <img src="/assets/filesetting4.svg" alt="setting" />
+            </span>{" "}
+            Move
+          </a>
+        </li>
+        <li onClick={deleteItem} className={liClassname}>
+          <a className="flex">
+            <span className={spanClassname}>
+              <img src="/assets/filesetting5.svg" alt="setting" />
+            </span>
+            Delete
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+};

 export default NewContextMenu;
@@ -1,73 +1,73 @@
 import React from "react";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
 import { setShareSelected } from "../../actions/selectedItem";
 import NewContextMenu from "./NewContextMenu";

 class NewContextMenuContainer extends React.Component {
+  constructor(props) {
+    super(props);

-    constructor(props) {
-        super(props);
+    this.wrapperRef = React.createRef();
+  }

-        this.wrapperRef = React.createRef();
+  componentDidMount = () => {
+    document.addEventListener("mousedown", this.handleClickOutside);
+  };
+
+  componentWillUnmount = () => {
+    document.removeEventListener("mousedown", this.handleClickOutside);
+  };
+
+  componentDidUpdate = () => {};
+
+  handleClickOutside = () => {
+    if (
+      this.props.contextSelected.selected &&
+      this.wrapperRef &&
+      !this.wrapperRef.current.contains(event.target)
+    ) {
+      this.props.closeContext();
    }
+  };

-    componentDidMount = () => {
+  startFileDownload = () => {
+    console.log("start download file", this.props.file._id);
+    this.props.downloadFile(this.props.file._id, this.props.file);
+  };

-        document.addEventListener("mousedown", this.handleClickOutside)
-    }
+  startRenameFile = async (e) => {
+    console.log("rename file click");
+    this.props.changeEditNameMode();
+  };

-    componentWillUnmount = () => {
+  startDeleteFile = async () => {
+    this.props.changeDeleteMode();
+  };

-        document.removeEventListener("mousedown", this.handleClickOutside)
-    }
+  startShareFile = () => {
+    this.props.dispatch(setShareSelected({ ...this.props.file }));
+  };

-    componentDidUpdate = () => {
-    }
-
-    handleClickOutside = () => {
-        if (this.props.contextSelected && this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
-            this.props.closeContext();
-        } 
-    }
-
-    startFileDownload = () => {
-        console.log("start download file", this.props.file._id);
-        this.props.downloadFile(this.props.file._id, this.props.file)
-    }
-
-    startRenameFile = async(e) => {
-        console.log("rename file click")
-        this.props.changeEditNameMode();
-    }
-
-    startDeleteFile = async() => {
-        this.props.changeDeleteMode()
-    }
-
-    startShareFile = () => {
-        this.props.dispatch(setShareSelected({...this.props.file}))
-    }
-
-
-    stopPropagation = (e) => {
-        e.stopPropagation()
-        if (this.props.quickItemMode || this.props.gridMode) this.props.closeContext();
-    }
-
-    render() {
-       
-        return <NewContextMenu 
-                    wrapperRef={this.wrapperRef}
-                    stopPropagation={this.stopPropagation}
-                    startRenameFile={this.startRenameFile}
-                    startShareFile={this.startShareFile}
-                    startFileDownload={this.startFileDownload}
-                    startDeleteFile={this.startDeleteFile}
-                    state={this.state}
-                    {...this.props}
-                    />
-    }
+  stopPropagation = (e) => {
+    e.stopPropagation();
+    if (this.props.quickItemMode || this.props.gridMode)
+      this.props.closeContext();
+  };

+  render() {
+    return (
+      <NewContextMenu
+        wrapperRef={this.wrapperRef}
+        stopPropagation={this.stopPropagation}
+        startRenameFile={this.startRenameFile}
+        startShareFile={this.startShareFile}
+        startFileDownload={this.startFileDownload}
+        startDeleteFile={this.startDeleteFile}
+        state={this.state}
+        {...this.props}
+      />
+    );
+  }
 }

-export default connect()(NewContextMenuContainer);
+export default connect()(NewContextMenuContainer);