fully added support for sub-collections

components/ModalContent/NewCollectionModal.tsx

@@ -5,17 +5,20 @@ import toast from "react-hot-toast";
 import { HexColorPicker } from "react-colorful";
 import { Collection } from "@prisma/client";
 import Modal from "../Modal";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 
 type Props = {
   onClose: Function;
+  parent?: CollectionIncludingMembersAndLinkCount;
 };
 
-export default function NewCollectionModal({ onClose }: Props) {
+export default function NewCollectionModal({ onClose, parent }: Props) {
   const initial = {
+    parentId: parent?.id,
     name: "",
     description: "",
     color: "#0ea5e9",
-  };
+  } as Partial<Collection>;
 
   const [collection, setCollection] = useState<Partial<Collection>>(initial);
 
@@ -47,7 +50,14 @@ export default function NewCollectionModal({ onClose }: Props) {
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Create a New Collection</p>
+      {parent?.id ? (
+        <>
+          <p className="text-xl font-thin">New Sub-Collection</p>
+          <p className="capitalize text-sm">For {parent.name}</p>
+        </>
+      ) : (
+        <p className="text-xl font-thin">Create a New Collection</p>
+      )}
 
       <div className="divider mb-3 mt-1"></div>
 

lib/api/controllers/collections/postCollection.ts

@@ -48,7 +48,10 @@ export default async function postCollection(
   const checkIfCollectionExists = findCollection?.collections[0];
 
   if (checkIfCollectionExists)
-    return { response: "Collection already exists.", status: 400 };
+    return {
+      response: "Oops! There's already a Collection with that name.",
+      status: 400,
+    };
 
   const newCollection = await prisma.collection.create({
     data: {

pages/collections/[id].tsx

@@ -25,6 +25,7 @@ import CardView from "@/components/LinkViews/Layouts/CardView";
 import ListView from "@/components/LinkViews/Layouts/ListView";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import Link from "next/link";
+import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
 
 export default function Index() {
   const { settings } = useLocalSettingsStore();
@@ -83,6 +84,7 @@ export default function Index() {
   }, [activeCollection]);
 
   const [editCollectionModal, setEditCollectionModal] = useState(false);
+  const [newCollectionModal, setNewCollectionModal] = useState(false);
   const [editCollectionSharingModal, setEditCollectionSharingModal] =
     useState(false);
   const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
@@ -112,45 +114,15 @@ export default function Index() {
       >
         {activeCollection && (
           <div className="flex gap-3 items-start justify-between">
-            <div>
-              <div className="flex items-center gap-2">
-                <i
-                  className="bi-folder-fill text-3xl drop-shadow"
-                  style={{ color: activeCollection?.color }}
-                ></i>
+            <div className="flex items-center gap-2">
+              <i
+                className="bi-folder-fill text-3xl drop-shadow"
+                style={{ color: activeCollection?.color }}
+              ></i>
 
-                <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
-                  {activeCollection?.name}
-                </p>
-              </div>
-
-              {collections.some((e) => e.parentId === activeCollection.id) ? (
-                <details className="mt-2 mb-2">
-                  <summary className="text-sm cursor-pointer select-none">
-                    View Sub-Collections
-                  </summary>
-
-                  <div className="flex gap-3 mt-1 pl-3 ml-1 border-l border-neutral-content">
-                    {collections
-                      .filter((e) => e.parentId === activeCollection?.id)
-                      .map((e, i) => {
-                        return (
-                          <Link
-                            key={i}
-                            className="flex gap-1 items-center btn btn-ghost btn-sm"
-                            href={`/collections/${e.id}`}
-                          >
-                            <i
-                              className="bi-folder-fill text-2xl drop-shadow"
-                              style={{ color: e.color }}
-                            ></i>
-                            <p className="text-xs">{e.name}</p>
-                          </Link>
-                        );
-                      })}
-                  </div>
-                </details>
-              ) : undefined}
+              <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
+                {activeCollection?.name}
+              </p>
             </div>
 
             <div className="dropdown dropdown-bottom dropdown-end mt-2">
@@ -191,6 +163,20 @@ export default function Index() {
                       : "View Team"}
                   </div>
                 </li>
+                {permissions === true ? (
+                  <li>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => {
+                        (document?.activeElement as HTMLElement)?.blur();
+                        setNewCollectionModal(true);
+                      }}
+                    >
+                      Create Sub-Collection
+                    </div>
+                  </li>
+                ) : undefined}
                 <li>
                   <div
                     role="button"
@@ -318,6 +304,12 @@ export default function Index() {
               activeCollection={activeCollection}
             />
           ) : undefined}
+          {newCollectionModal ? (
+            <NewCollectionModal
+              onClose={() => setNewCollectionModal(false)}
+              parent={activeCollection}
+            />
+          ) : undefined}
           {deleteCollectionModal ? (
             <DeleteCollectionModal
               onClose={() => setDeleteCollectionModal(false)}