fix: delete collection with memes

Author: Shobhit-Nagpal

prisma/schema.prisma

@@ -33,7 +33,7 @@ model Meme {
 model Collection {
   id    String    @id @default(auto()) @map("_id") @db.ObjectId
   name  String
-  memes MemeCollection[] 
+  memes MemeCollection[]
   madeById String
   madeBy User @relation(fields: [madeById], references: [userId])
 }
@@ -43,7 +43,7 @@ model MemeCollection {
   memeId String   @db.ObjectId
   meme  Meme @relation(fields: [memeId], references: [id])
   collectionId String   @db.ObjectId
-  collection  Collection @relation(fields: [collectionId], references: [id])
+  collection  Collection @relation(fields: [collectionId], references: [id], onDelete: Cascade)
   createdAt    DateTime @default(now())
   updatedAt    DateTime @updatedAt
 

src/app/dashboard/collections/[id]/_components/delete-collection.tsx

@@ -37,8 +37,8 @@ export function DeleteCollection({ collectionId }: DeleteCollectionProps) {
       });
       if (res.ok) {
         toast({
-          title: "Meme deleted",
-          description: "The meme has been deleted",
+          title: "Collection deleted!",
+          description: "Collection was successfully deleted",
         });
         await refreshCollections();
         router.push("/dashboard/collections");

src/components/save-meme.tsx

@@ -13,7 +13,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { FolderOpen } from "lucide-react";
+import { FolderOpen, Loader2 } from "lucide-react";
 import { useUser } from "@clerk/nextjs";
 import { Collection } from "@prisma/client";
 import { getCollections } from "@/app/_actions";
@@ -172,7 +172,7 @@ export default function SaveMeme({ src, name, memeId }: MemeProps) {
               className={`p-2 cursor-pointer dark:hover:bg-primary hover:bg-gray-100 rounded ${
                 selectedCollection?.id === collection.id
                   ? "bg-primary text-white hover:bg-primary/80 hover:text-white"
-                 : ""
+                  : ""
               }`}
               onClick={() => {
                 if (selectedCollection?.id !== collection.id) {
@@ -188,7 +188,14 @@ export default function SaveMeme({ src, name, memeId }: MemeProps) {
         </ScrollArea>
         <DialogFooter>
           <Button onClick={handleSaveMeme} disabled={loading}>
-            {loading ? "Saving..." : "Save meme"}
+            {loading ? (
+              <span className="flex items-center justify-center">
+                <Loader2 className="mr-2 animate-spin" />
+                Saving
+              </span>
+            ) : (
+              "Save meme"
+            )}
           </Button>
         </DialogFooter>
       </>
@@ -198,7 +205,10 @@ export default function SaveMeme({ src, name, memeId }: MemeProps) {
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
-        <Button variant="secondary" className="bg-gray-600 hover:bg-gray-800 text-white focus:bg-gray-900">
+        <Button
+          variant="secondary"
+          className="bg-gray-600 hover:bg-gray-800 text-white focus:bg-gray-900"
+        >
           <FolderOpen className="mr-2" /> Save to Collection
         </Button>
       </DialogTrigger>