Merge pull request #86 from MemoriterApp/drag-and-drop

Drag and drop
MemoriterApp · Jul 6, 2023 · 44a8c4e · 44a8c4e
2 parents 746ee98 + 75c9232
commit 44a8c4e
Show file tree

Hide file tree

Showing 7 changed files with 337 additions and 204 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,9 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "@dnd-kit/core": "^6.0.8",
+        "@dnd-kit/sortable": "^7.0.2",
+        "@dnd-kit/utilities": "^3.2.1",
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
         "@reduxjs/toolkit": "^1.9.1",

diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
@@ -52,8 +52,16 @@ const Layout = forwardRef(
     useEffect(() => {
       async function getFolder() {
         const allFolders = await getFolders(auth.currentUser.uid); // returns all folders from firebase
-        setFolders(allFolders);
-        onUpdateFolders(allFolders);
+        setFolders(
+          allFolders.sort(function (a: Type.Folder, b: Type.Folder) {
+            return a.pos - b.pos;
+          })
+        );
+        onUpdateFolders(
+          allFolders.sort(function (a: Type.Folder, b: Type.Folder) {
+            return a.pos - b.pos;
+          })
+        );
       }
       getFolder();
     }, []);
@@ -63,14 +71,8 @@ const Layout = forwardRef(
       onAddFolder(title: string) {
         addFolder(title);
       },
-      onPosUp(id: string, pos: number) {
-        posUp(id, pos);
-      },
-      onPosDown(id: string, pos: number) {
-        posDown(id, pos);
-      },
-      onFolderPositionAdjust(id: string, pos: number) {
-        folderPositionAdjust(id, pos);
+      onChangeFolderPosition(event: any) {
+        changeFolderPosition(event);
       },
       onChangeFolderIcon(id: string, icon: string) {
         changeFolderIcon(id, icon);
@@ -103,64 +105,52 @@ const Layout = forwardRef(
       onUpdateFolders(allFolders);
     };
 
-    const posUp = async (id: string, pos: number) => {
-      const newPosUp = { pos: pos - 1 };
-      await updateFolder(id, newPosUp);
+    const changeFolderPosition = (event: any) => {
+      const { active, over } = event;
+      const activeIndex = folders.findIndex((folder: Type.Folder) => folder._id === active.id);
+      const overIndex = folders.findIndex((folder: Type.Folder) => folder._id === over.id);
 
-      const updatedFolders = folders.map((folder: Type.Folder) =>
-        folder._id === id
-          ? { ...folder, pos: folder.pos - 1 }
-          : folder.pos === pos - 1
-          ? (sessionStorage.setItem('newPosFolder', folder._id), { ...folder, pos: folder.pos + 1 })
-          : folder
-      );
-      setFolders(updatedFolders);
-      onUpdateFolders(updatedFolders);
-    };
-    const posDown = async (id: string, pos: number) => {
-      const newPosDown = { pos: pos + 1 };
-      await updateFolder(id, newPosDown);
+      if (activeIndex !== overIndex) {
+        const updatedFolders = [...folders];
+        const [removed] = updatedFolders.splice(activeIndex, 1);
+        updatedFolders.splice(overIndex, 0, removed);
 
-      const updatedFolders = folders.map((folder: Type.Folder) =>
-        folder._id === id
-          ? { ...folder, pos: folder.pos + 1 }
-          : folder.pos === pos + 1
-          ? (sessionStorage.setItem('newPosFolder', folder._id.toString()),
-            { ...folder, pos: folder.pos - 1 })
-          : folder
-      );
-      setFolders(updatedFolders);
-      onUpdateFolders(updatedFolders);
-    };
-    const folderPositionAdjust = async (id: string, pos: any) => {
-      const newPosition = { pos: pos };
-      await updateFolder(id, newPosition);
+        const updatedFoldersWithPositions = updatedFolders.map(
+          (folder: Type.Folder, index: number) => ({
+            ...folder,
+            pos: index + 1,
+          })
+        );
 
-      const updatedFolders = folders.map((folder: Type.Folder) =>
-        folder._id === id ? { ...folder, pos: pos } : folder
-      );
-      setFolders(updatedFolders);
-      onUpdateFolders(updatedFolders);
+        // Update new positions in the database
+        updatedFoldersWithPositions.forEach(async (folder: Type.Folder) => {
+          await updateFolder(folder._id, { pos: folder.pos });
+        });
+
+        setFolders(updatedFoldersWithPositions);
+        onUpdateFolders(updatedFoldersWithPositions);
+      }
     };
 
+    console.log(folders);
+
     const editFolder = async (id: string, title: any) => {
       if (id === window.location.pathname.replace('/topic/', '')) {
         onUpdateCurrentFolder({ id: id, title: title, favorite: true });
       }
 
-      const newTitle = { title: title };
-      await updateFolder(id, newTitle);
+      await updateFolder(id, { title: title });
 
       const updatedFolders = folders.map((folder: Type.Folder) =>
         folder._id === id ? { ...folder, title: title } : folder
       );
+
       setFolders(updatedFolders);
       onUpdateFolders(updatedFolders);
     };
 
     const changeFolderIcon = async (id: string, icon: any) => {
-      const newIcon = { icon: icon };
-      await updateFolder(id, newIcon);
+      await updateFolder(id, { icon: icon });
 
       const updatedFolders = folders.map((folder: Type.Folder) =>
         folder._id === id ? { ...folder, icon: icon } : folder
@@ -229,7 +219,6 @@ const Layout = forwardRef(
         onUpdateFolders(updatedFolders);
       }
 
-
       const flashcards = await getFlashcards(oldFolder._id);
       flashcards.forEach(async (flashcard) => {
         await removeFlashcard(flashcard._id);

diff --git a/src/images/drag-handle.svg b/src/images/drag-handle.svg
diff --git a/src/pages/home-stuff/folder-stuff/folder/folder.css b/src/pages/home-stuff/folder-stuff/folder/folder.css
@@ -61,6 +61,7 @@
     border-radius: 3px;
     transition: background-color 200ms;
 }
+
 .folder:hover {
     background-color: var(--color-hover);
 }
@@ -77,9 +78,11 @@
     cursor: pointer;
     transition: background-color 200ms;
 }
+
 .folder-icon:hover {
     background-color: var(--color-hover-icon);
 }
+
 .folder-icon img {
     position: relative;
     left: 50%;
@@ -231,11 +234,13 @@ em-emoji-picker {
     --font-size: 16px;
     --color-border: var(--color-hover);
 }
+
 #dark em-emoji-picker {
     --rgb-color: 255, 255, 255;
     --rgb-background: 32, 32, 32;
     --rgb-input: 56, 56, 56, 0.75;
 }
+
 #light em-emoji-picker {
     --rgb-color: 0, 0, 0;
     --rgb-background: 238, 238, 238;
@@ -248,4 +253,17 @@ em-emoji-picker {
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 3;
+}
+
+.drag-image {
+    position: absolute;
+    cursor: grab;
+    background-color: #807d7d;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    right: 50px;
+    margin-top: -32px;
+    display: inline-block;
+    vertical-align: middle;
 }