From 7fd9f5b8069117fc77f85edfd64a9aecb2efc237 Mon Sep 17 00:00:00 2001
From: Isaac Wise <iamisaacwise2006@gmail.com>
Date: Thu, 22 Feb 2024 02:24:10 -0600
Subject: [PATCH] Update order when new collection is created

---
 components/CollectionListing.tsx                  | 11 +++++------
 components/ModalContent/NewCollectionModal.tsx    | 10 +++++++++-
 lib/api/controllers/collections/postCollection.ts | 12 ++++++++++++
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/components/CollectionListing.tsx b/components/CollectionListing.tsx
index 0d14f60..5bf81a8 100644
--- a/components/CollectionListing.tsx
+++ b/components/CollectionListing.tsx
@@ -3,7 +3,7 @@ import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { ForwardedRef, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { DragDropContext, Draggable, DraggableProvided, Droppable } from "react-beautiful-dnd";
 
 type Props = {
@@ -14,24 +14,23 @@ const CollectionSelection = ({ links }: Props) => {
   const { collections } = useCollectionStore();
   const { account, updateAccount } = useAccountStore();
   // Use local state to store the collection order so we don't have to wait for a response from the API to update the UI
-  const [localCollectionOrder, setLocalCollectionOrder] = useState(account.collectionOrder || []);
+  const [localCollectionOrder, setLocalCollectionOrder] = useState<number[] | []>([]);
   const [active, setActive] = useState("");
   const router = useRouter();
 
   useEffect(() => {
     setActive(router.asPath);
+    setLocalCollectionOrder(account.collectionOrder || []);
 
-    if (account.collectionOrder?.length === 0) {
+    if (!account.collectionOrder || account.collectionOrder.length === 0) {
       updateAccount({
         ...account,
         collectionOrder: collections
           .filter((e) => e.parentId === null) // Filter out collections with non-null parentId
           .map((e) => e.id as number), // Use "as number" to assert that e.id is a number
       });
-
-      setLocalCollectionOrder(collections.filter((e) => e.parentId === null).map((e) => e.id as number));
     }
-  }, [router, collections]);
+  }, [router, collections, account]);
 
   return (
     <DragDropContext
diff --git a/components/ModalContent/NewCollectionModal.tsx b/components/ModalContent/NewCollectionModal.tsx
index 7c73500..80bf7c3 100644
--- a/components/ModalContent/NewCollectionModal.tsx
+++ b/components/ModalContent/NewCollectionModal.tsx
@@ -6,6 +6,8 @@ import { HexColorPicker } from "react-colorful";
 import { Collection } from "@prisma/client";
 import Modal from "../Modal";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import useAccountStore from "@/store/account";
+import { useSession } from "next-auth/react";
 
 type Props = {
   onClose: Function;
@@ -21,6 +23,8 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
   } as Partial<Collection>;
 
   const [collection, setCollection] = useState<Partial<Collection>>(initial);
+  const { setAccount } = useAccountStore();
+  const { data } = useSession();
 
   useEffect(() => {
     setCollection(initial);
@@ -42,7 +46,11 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
 
     if (response.ok) {
       toast.success("Created!");
-      onClose();
+      if (response.data) {
+        // If the collection was created successfully, we need to get the new collection order
+        setAccount(data?.user.id as number);
+        onClose();
+      }
     } else toast.error(response.data as string);
 
     setSubmitLoader(false);
diff --git a/lib/api/controllers/collections/postCollection.ts b/lib/api/controllers/collections/postCollection.ts
index 94f4763..6b41ea1 100644
--- a/lib/api/controllers/collections/postCollection.ts
+++ b/lib/api/controllers/collections/postCollection.ts
@@ -67,6 +67,18 @@ export default async function postCollection(
     },
   });
 
+  await prisma.user.update({
+    where: {
+      id: userId,
+    },
+    data: {
+      collectionOrder: {
+        push: newCollection.id,
+      },
+    },
+  });
+
+
   createFolder({ filePath: `archives/${newCollection.id}` });
 
   return { response: newCollection, status: 200 };