Update order when new collection is created

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

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);

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 };