From 3650864a2a6179c8dcf10314268b5c4574cda28a Mon Sep 17 00:00:00 2001
From: subnub <kyle.hoell@gmail.com>
Date: Thu, 20 Feb 2025 19:07:29 -0500
Subject: [PATCH] added animations

---
 .../middleware/folders/folder-middleware.ts    |  1 -
 src/components/ContextMenu/ContextMenu.tsx     | 17 ++++++++++++++---
 src/components/FileInfoPopup/FileInfoPopup.tsx | 18 ++++++++++++++----
 src/components/MoverPopup/MoverPopup.tsx       | 13 +++++++++++--
 src/components/SharePopup/SharePopup.tsx       | 13 +++++++++++--
 src/styles/styles.scss                         |  4 ++++
 6 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/backend/middleware/folders/folder-middleware.ts b/backend/middleware/folders/folder-middleware.ts
index 5d4707a..9e1f69f 100644
--- a/backend/middleware/folders/folder-middleware.ts
+++ b/backend/middleware/folders/folder-middleware.ts
@@ -10,7 +10,6 @@ export const moveFolderListValidationRules = [
   query("folderIDs")
     .optional()
     .isArray()
-    .isLength({ min: 1 })
     .withMessage("FolderIDs must be an array of strings"),
   middlewareValidationFunction,
 ];
diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
index dcd8296..08ffb71 100644
--- a/src/components/ContextMenu/ContextMenu.tsx
+++ b/src/components/ContextMenu/ContextMenu.tsx
@@ -11,6 +11,7 @@ import { FileInterface } from "../../types/file";
 import { useNavigate } from "react-router-dom";
 import { useActions } from "../../hooks/actions";
 import { FolderInterface } from "../../types/folders";
+import classNames from "classnames";
 
 export interface ContextMenuProps {
   closeContext: () => void;
@@ -33,6 +34,7 @@ const ContextMenu: React.FC<ContextMenuProps> = memo((props) => {
     Y: 0,
     set: false,
   });
+  const [animate, setAnimate] = useState(false);
   const {
     closeContext,
     contextSelected,
@@ -134,6 +136,10 @@ const ContextMenu: React.FC<ContextMenuProps> = memo((props) => {
     }
   };
 
+  useEffect(() => {
+    setAnimate(true);
+  }, []);
+
   const outterWrapperClick = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     if ((e.target as HTMLDivElement).id !== "context-wrapper") {
@@ -151,15 +157,20 @@ const ContextMenu: React.FC<ContextMenuProps> = memo((props) => {
       <div
         onClick={stopPropagation}
         ref={wrapperRef}
-        className="fixed min-w-[215px] bg-white shadow-lg rounded-md z-50"
+        className={classNames(
+          "fixed min-w-[215px] bg-white shadow-lg rounded-md z-50 animate-movement",
+          {
+            "opacity-0": !animate,
+            "opacity-100": animate,
+          }
+        )}
         style={
           fixedCoords.set
             ? {
-                display: "block",
                 left: `${fixedCoords.X}px`,
                 top: `${fixedCoords.Y}px`,
               }
-            : { opacity: 0 }
+            : {}
         }
       >
         <div>
diff --git a/src/components/FileInfoPopup/FileInfoPopup.tsx b/src/components/FileInfoPopup/FileInfoPopup.tsx
index f1fe028..6523326 100644
--- a/src/components/FileInfoPopup/FileInfoPopup.tsx
+++ b/src/components/FileInfoPopup/FileInfoPopup.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { downloadFileAPI } from "../../api/filesAPI";
 import CloseIcon from "../../icons/CloseIcon";
@@ -29,6 +29,7 @@ const FileInfoPopup = () => {
     clickStopPropagation,
     ...contextMenuState
   } = useContextMenu();
+  const [animate, setAnimate] = useState(false);
 
   const fileExtension = getFileExtension(file.filename, 3);
 
@@ -42,7 +43,8 @@ const FileInfoPopup = () => {
   const fileSize = bytes(file.metadata.size);
 
   const closePhotoViewer = () => {
-    dispatch(resetPopupSelect());
+    setAnimate(false);
+    setTimeout(() => dispatch(resetPopupSelect()), 200);
   };
 
   const downloadItem = () => {
@@ -56,7 +58,8 @@ const FileInfoPopup = () => {
     ) {
       return;
     }
-    dispatch(resetPopupSelect());
+    setAnimate(false);
+    setTimeout(() => dispatch(resetPopupSelect()), 200);
   };
 
   const permissionText = (() => {
@@ -74,6 +77,10 @@ const FileInfoPopup = () => {
     toast.success("Filename Copied");
   };
 
+  useEffect(() => {
+    setAnimate(true);
+  }, []);
+
   useEffect(() => {
     const handleBack = () => {
       dispatch(resetPopupSelect());
@@ -136,7 +143,10 @@ const FileInfoPopup = () => {
           </div>
         </div>
       </div>
-      <div className="w-[90%] sm:w-[500px] p-6 bg-white rounded-md">
+      <div
+        className="w-[90%] sm:w-[500px] p-6 bg-white rounded-md animate-easy"
+        style={{ marginTop: !animate ? "calc(100vh + 350px" : 0 }}
+      >
         <div className="bg-light-primary p-6 rounded-md flex items-center space-x-2">
           <input
             className="rounded-md w-full text-xs h-10 p-2"
diff --git a/src/components/MoverPopup/MoverPopup.tsx b/src/components/MoverPopup/MoverPopup.tsx
index 6d73acf..ef350cd 100644
--- a/src/components/MoverPopup/MoverPopup.tsx
+++ b/src/components/MoverPopup/MoverPopup.tsx
@@ -23,6 +23,7 @@ const MoverPopup = () => {
   const [selectedFolder, setSelectedFolder] = useState<FolderInterface | null>(
     null
   );
+  const [animate, setAnimate] = useState(false);
   const multiSelectMode = useAppSelector(
     (state) => state.selected.multiSelectMode
   );
@@ -119,6 +120,10 @@ const MoverPopup = () => {
     }
   })();
 
+  useEffect(() => {
+    setAnimate(true);
+  }, []);
+
   const onHomeClick = () => {
     setSearch("");
     setDebouncedSearch("");
@@ -175,7 +180,8 @@ const MoverPopup = () => {
   const closeMoverModal = (e: React.MouseEvent<HTMLElement>) => {
     const target = e.target as HTMLElement;
     if (target.id !== "outer-wrapper") return;
-    dispatch(resetMoveModal());
+    setAnimate(false);
+    setTimeout(() => dispatch(resetMoveModal()), 200);
   };
 
   return (
@@ -192,7 +198,10 @@ const MoverPopup = () => {
           />
         </div>
       </div>
-      <div className="bg-white w-full max-w-[500px] p-4 rounded-md">
+      <div
+        className="bg-white w-full max-w-[500px] p-4 rounded-md animate-easy"
+        style={{ marginTop: !animate ? "calc(100vh + 480px" : 0 }}
+      >
         <div
           className={classNames("flex flex-row items-center", {
             "justify-between": multiSelectMode,
diff --git a/src/components/SharePopup/SharePopup.tsx b/src/components/SharePopup/SharePopup.tsx
index 53f0779..bd770b1 100644
--- a/src/components/SharePopup/SharePopup.tsx
+++ b/src/components/SharePopup/SharePopup.tsx
@@ -29,6 +29,7 @@ const SharePopup = memo(() => {
   const dispatch = useAppDispatch();
   const { refetch: refetchFiles } = useFiles(false);
   const { refetch: refetchQuickFiles } = useQuickFiles(false);
+  const [animate, setAnimate] = useState(false);
 
   const imageColor = getFileColor(file.filename);
 
@@ -126,7 +127,8 @@ const SharePopup = memo(() => {
   };
 
   const closeShareModal = () => {
-    dispatch(resetShareModal());
+    setAnimate(false);
+    setTimeout(() => dispatch(resetShareModal()), 200);
   };
 
   const outterWrapperClick = (e: any) => {
@@ -160,6 +162,10 @@ const SharePopup = memo(() => {
     setShareType(file.metadata.linkType ? file.metadata.linkType : "private");
   }, [file._id, file.metadata.link, file.metadata.linkType]);
 
+  useEffect(() => {
+    setAnimate(true);
+  }, []);
+
   const handleSelectChange = async (value: string) => {
     if (value === "private") {
       await removeLink();
@@ -207,7 +213,10 @@ const SharePopup = memo(() => {
           </div>
         </div>
       </div>
-      <div className="w-[90%] sm:w-[500px] p-6 bg-white rounded-md">
+      <div
+        className="w-[90%] sm:w-[500px] p-6 bg-white rounded-md animate-easy"
+        style={{ marginTop: !animate ? "calc(100vh + 340px" : 0 }}
+      >
         <p>Share file</p>
         <div className="bg-light-primary p-6 rounded-md mt-4 flex items-center space-x-2">
           <input
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index f634a3e..81fa2e4 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -10,6 +10,10 @@
   transition: 0.2s ease all;
 }
 
+.animate-easy {
+  transition: 0.3s ease all;
+}
+
 .animate-movement {
   transition: 0.4s ease all;
 }