moved improvements

2024-08-04 03:51:56 -04:00
parent c648b9bfc6
commit f0c2bbd42d
8 changed files with 116 additions and 49 deletions
@@ -14,9 +14,14 @@ import FolderIcon from "../../icons/FolderIcon";
 const MoverPopup = () => {
  const [search, setSearch] = useState("");
  const [debouncedSearch, setDebouncedSearch] = useState("");
-  const [parent, setParent] = useState("/");
-  const [parentList, setParentList] = useState(["/"]);
-  const [selectedFolderID, setSelectedFolderID] = useState("");
+  const [parent, setParent] = useState<FolderInterface | null>(null);
+  const [parentList, setParentList] = useState<FolderInterface[]>([]);
+  const [selectedFolder, setSelectedFolder] = useState<FolderInterface | null>(
+    null
+  );
+  const multiSelectMode = useAppSelector(
+    (state) => state.selected.multiSelectMode
+  );
  const file = useAppSelector((state) => state.selected.moveModal.file);
  const folder = useAppSelector((state) => state.selected.moveModal.folder);
  const dispatch = useAppDispatch();
@@ -26,7 +31,7 @@ const MoverPopup = () => {
  });

  const { data: folderList, isLoading: isLoadingFolders } = useMoveFolders(
-    parent,
+    parent?._id || "/",
    debouncedSearch,
    folder?._id
  );
@@ -43,33 +48,34 @@ const MoverPopup = () => {
    };
  }, [search, debouncedSetSearchText]);

-  const onFolderClick = (folderID: string) => {
+  const onFolderClick = (folder: FolderInterface) => {
    const currentDate = Date.now();

    if (
-      lastSelected.current.folderID === folderID &&
+      lastSelected.current.folderID === folder._id &&
      currentDate - lastSelected.current.timestamp < 1500
    ) {
      setSearch("");
      setDebouncedSearch("");
-      setParentList([...parentList, folderID]);
-      setParent(folderID);
-      setSelectedFolderID("");
+      setParentList([...parentList, folder]);
+      setParent(folder);
+      setSelectedFolder(folder);
    } else {
-      setSelectedFolderID(folderID);
+      setSelectedFolder(folder);
    }

    lastSelected.current.timestamp = Date.now();
-    lastSelected.current.folderID = folderID;
+    lastSelected.current.folderID = folder._id;
  };

  const onBackClick = () => {
+    if (!parent) return;
    setSearch("");
    setDebouncedSearch("");
    const newParentList = parentList.slice(0, parentList.length - 1);
-    if (newParentList.length <= 1) {
-      setParent("/");
-      setParentList(["/"]);
+    if (newParentList.length === 0) {
+      setParent(null);
+      setParentList([]);
    } else {
      setParentList(newParentList);
      setParent(newParentList[newParentList.length - 1]);
@@ -77,50 +83,90 @@ const MoverPopup = () => {
  };

  const moveText = useMemo(() => {
-    if (selectedFolderID) {
+    if (selectedFolder?._id) {
      return "Move to selected folder";
-    } else if (parent === "/") {
+    } else if (!parent) {
      return "Move home";
    } else {
      return "Move here";
    }
-  }, [selectedFolderID, parent]);
+  }, [selectedFolder?._id, parent?._id]);
+
+  const headerText = useMemo(() => {
+    if (parent) {
+      return parent.name;
+    } else {
+      return "Home";
+    }
+  }, [selectedFolder?.name, parent?._id]);

  const onHomeClick = () => {
    setSearch("");
    setDebouncedSearch("");
-    setParent("/");
-    setParentList(["/"]);
-    setSelectedFolderID("");
+    setParent(null);
+    setParentList([]);
+    setSelectedFolder(null);
+  };
+
+  const onMoveClick = () => {
+    const moveTo = selectedFolder?._id
+      ? selectedFolder?._id
+      : parent?._id || "/";
+    if (file) {
+    } else if (folder) {
+    }
+    console.log("move to", moveTo);
+  };
+
+  const closeMoverModal = (e: any) => {
+    if (e.target.id !== "outer-wrapper") return;
+    dispatch(resetMoveModal());
  };

  return (
-    <div className="w-screen h-screen bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col">
+    <div
+      className="w-screen h-screen bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col"
+      id="outer-wrapper"
+      onClick={closeMoverModal}
+    >
      <div className="absolute top-[20px] flex justify-between w-full">
        <div>
          <CloseIcon
-            className="w-[25px] h-[25px] cursor-pointer"
+            className="w-6 h-6 cursor-pointer"
            onClick={() => dispatch(resetMoveModal())}
          />
        </div>
      </div>
      <div className="bg-white w-full max-w-[500px] p-4 rounded-md">
-        <div className="flex flex-row items-center">
+        <div
+          className={classNames("flex flex-row items-center", {
+            "justify-between": multiSelectMode,
+          })}
+        >
          <ArrowBackIcon
-            className="w-7 h-7 cursor-pointer mr-2"
+            className={classNames("w-7 h-7 cursor-pointer mr-2", {
+              "opacity-50": !parent,
+            })}
            onClick={onBackClick}
          />
-          <input
-            className="w-full py-2 px-3 text-black border border-gray-primary rounded-md text-sm outline-none"
-            placeholder="Search"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-          />
+          {!multiSelectMode && (
+            <input
+              className="w-full py-2 px-3 text-black border border-gray-primary rounded-md text-sm outline-none"
+              placeholder="Search"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          )}
          <HomeIconOutline
            className="w-7 h-7 cursor-pointer ml-2"
            onClick={onHomeClick}
          />
        </div>
+        <div>
+          <p className="text-lg mt-2 mb-2 max-w-[75%] text-ellipsis overflow-hidden">
+            {headerText}
+          </p>
+        </div>
        <div className="flex flex-col overflow-y-scroll h-[230px]">
          {!isLoadingFolders && (
            <React.Fragment>
@@ -130,17 +176,18 @@ const MoverPopup = () => {
                    "p-2 border-b border-[#ebe9f9] rounded-md mt-1 flex flex-row items-center",
                    {
                      "bg-primary text-white hover:bg-primary-hover":
-                        selectedFolderID === folder._id,
-                      "hover:bg-white-hover": selectedFolderID !== folder._id,
+                        selectedFolder?._id === folder._id,
+                      "hover:bg-white-hover":
+                        selectedFolder?._id !== folder._id,
                    }
                  )}
                  key={folder._id}
-                  onClick={() => onFolderClick(folder._id)}
+                  onClick={() => onFolderClick(folder)}
                >
                  <FolderIcon
                    className={classNames("w-5 h-5 mr-2 select-none", {
-                      "text-white": selectedFolderID === folder._id,
-                      "text-primary": selectedFolderID !== folder._id,
+                      "text-white": selectedFolder?._id === folder._id,
+                      "text-primary": selectedFolder?._id !== folder._id,
                    })}
                  />
                  <p className="max-w-[75%] text-ellipsis overflow-hidden select-none">
@@ -161,6 +208,7 @@ const MoverPopup = () => {
            className={classNames(
              "bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-md"
            )}
+            onClick={onMoveClick}
          >
            {moveText}
          </button>
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
-import { resetMultiSelect } from "../../reducers/selected";
+import { resetMultiSelect, setMoveModal } from "../../reducers/selected";
 import {
  deleteMultiAPI,
  restoreMultiAPI,
@@ -122,6 +122,10 @@ const MultiSelectBar: React.FC = () => {
    closeMultiSelect();
  };

+  const moveItems = () => {
+    dispatch(setMoveModal({ type: "multi-select", file: null, folder: null }));
+  };
+
  if (!multiSelectMode) return <div></div>;

  return (
@@ -141,13 +145,13 @@ const MultiSelectBar: React.FC = () => {
            {!isTrash && (
              <React.Fragment>
                <TrashIcon
-                  className="ml-4 cursor-pointer"
+                  className="ml-4 cursor-pointer w-5 h-5"
                  onClick={trashItems}
                />
                {!isMedia && (
                  <Moveicon
-                    className="ml-4 cursor-pointer"
-                    onClick={() => {}}
+                    className="ml-4 cursor-pointer w-5 h-5"
+                    onClick={moveItems}
                  />
                )}
              </React.Fragment>
@@ -155,11 +159,11 @@ const MultiSelectBar: React.FC = () => {
            {isTrash && (
              <React.Fragment>
                <RestoreIcon
-                  className="ml-4 cursor-pointer h-[20px] w-[20px]"
+                  className="ml-4 cursor-pointer w-5 h-5"
                  onClick={restoreItems}
                />
                <TrashIcon
-                  className="ml-4 cursor-pointer text-red-500"
+                  className="ml-4 cursor-pointer text-red-500 w-5 h-5"
                  onClick={deleteItems}
                />
              </React.Fragment>