add: edit collection name

Author: Shobhit-Nagpal

src/app/api/collection/[id]/route.ts

@@ -98,9 +98,6 @@ export async function POST(
         id: params.id,
         madeById: user.id,
       },
-      include: {
-        memes: true,
-      },
     });
 
     if (!collection) {
@@ -111,6 +108,7 @@ export async function POST(
     }
 
     const { collectionId, memeId } = await req.json();
+
     if (!collectionId || !memeId) {
       return NextResponse.json(
         { message: "No collection id or meme id" },
@@ -143,7 +141,7 @@ export async function POST(
 
     return NextResponse.json(
       { message: "Saved meme to collection successfully" },
-      { status: 200 },
+      { status: 201 },
     );
   } catch (err: any) {
     console.error(err);
@@ -153,3 +151,62 @@ export async function POST(
     );
   }
 }
+
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: { id: string } },
+) {
+  try {
+    const user = await currentUser();
+    if (!user) {
+      return NextResponse.json(
+        { message: "User not authenticated" },
+        { status: 401 },
+      );
+    }
+
+    if (!params.id) {
+      return NextResponse.json(
+        { message: "No collection id" },
+        { status: 400 },
+      );
+    }
+
+    const collection = await prisma.collection.findUnique({
+      where: {
+        id: params.id,
+        madeById: user.id,
+      },
+    });
+
+    if (!collection) {
+      return NextResponse.json(
+        { message: "Collection not found" },
+        { status: 404 },
+      );
+    }
+
+    const { collectionName } = await req.json();
+
+    await prisma.collection.update({
+      where: {
+        id: params.id,
+        madeById: user.id,
+      },
+      data: {
+        name: collectionName,
+      },
+    });
+
+    return NextResponse.json(
+      { message: "Edited collection successfully" },
+      { status: 200 },
+    );
+  } catch (err) {
+    console.error(err);
+    return NextResponse.json(
+      { message: "Internal Server error" },
+      { status: 500 },
+    );
+  }
+}

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

@@ -0,0 +1,129 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Edit, FolderPlusIcon, Loader2 } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { useToast } from "@/components/ui/use-toast";
+import { useEffect, useState } from "react";
+import { useDashboardCtx } from "@/context/DashboardContext";
+import { Button } from "@/components/ui/button";
+
+interface EditCollectionProps {
+  collectionId: string;
+  name: string;
+}
+
+const collectionFormSchema = z.object({
+  name: z.string().min(3, {
+    message: "Name must be at least 3 characters",
+  }),
+});
+
+export function EditCollection({ name, collectionId }: EditCollectionProps) {
+  const { toast } = useToast();
+  const { refreshCollectionWithMemes } = useDashboardCtx();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
+  const collectionForm = useForm<z.infer<typeof collectionFormSchema>>({
+    resolver: zodResolver(collectionFormSchema),
+    defaultValues: {
+      name,
+    },
+  });
+
+  async function onSubmit(values: z.infer<typeof collectionFormSchema>) {
+    setLoading(true);
+    try {
+      const req = await fetch(`/api/collection/${collectionId}`, {
+        method: "PATCH",
+        body: JSON.stringify({
+          collectionName: values.name,
+        }),
+      });
+      console.log(req.status)
+      if (req.status === 200) {
+        await refreshCollectionWithMemes();
+        return toast({
+          title: "Edit collection!",
+          description: `${name} was renamed to ${values.name} successfully.`,
+        });
+      }
+    } catch (err: any) {
+      console.error(err);
+      return toast({
+        title: "Uh oh! Couldn't create collection",
+        description: err.message,
+        variant: "destructive",
+      });
+    } finally {
+      setOpen(false);
+      setLoading(false);
+      collectionForm.reset();
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost">
+          <Edit className="h-5 w-5" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit collection</DialogTitle>
+          <DialogDescription>
+            Edit this collection&apos;s name
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...collectionForm}>
+          <form onSubmit={collectionForm.handleSubmit(onSubmit)}>
+            <FormField
+              control={collectionForm.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="w-full flex flex-col items-center justify-center">
+                  <FormControl>
+                    <Input
+                      className="col-span-3"
+                      placeholder="Twitter"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter className="mt-6">
+              <Button type="submit" disabled={loading}>
+                {!loading ? (
+                  "Edit"
+                ) : (
+                  <span className="flex items-center">
+                    <Loader2 className="mr-2 animate-spin" /> Editing
+                  </span>
+                )}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/app/dashboard/collections/[id]/page.tsx

@@ -3,18 +3,23 @@ import React, { useEffect } from "react";
 import { useLoadingCtx } from "@/context/LoadingContext";
 import Loader from "@/components/loader";
 import Link from "next/link";
-import { ChevronLeft, Edit } from "lucide-react";
+import { ChevronLeft } from "lucide-react";
 import Image from "next/image";
 import MoreInfo from "./_components/more-info";
 import { useDashboardCtx } from "@/context/DashboardContext";
 import { DeleteCollection } from "./_components/delete-collection";
+import { EditCollection } from "./_components/edit-collection";
 
 export default function CollectionPage({ params }: { params: { id: string } }) {
-  const { loading, setLoading } = useLoadingCtx();
+  const { loading } = useLoadingCtx();
   const { collectionWithMemes, getCollectionById } = useDashboardCtx();
 
   useEffect(() => {
-    getCollectionById(params.id);
+    async function getCollection() {
+      await getCollectionById(params.id);
+    }
+
+    getCollection();
   }, []);
 
   return (
@@ -44,7 +49,10 @@ export default function CollectionPage({ params }: { params: { id: string } }) {
               <h1 className="text-2xl font-bold text-gray-800 dark:text-white">
                 {collectionWithMemes.name}
               </h1>
-              <Edit />
+              <EditCollection
+                collectionId={collectionWithMemes.id}
+                name={collectionWithMemes.name}
+              />
               <DeleteCollection collectionId={collectionWithMemes.id} />
             </div>
             <Link

src/context/DashboardContext.tsx

@@ -17,8 +17,8 @@ type DashboardContextType = {
   collections: Collection[];
   refreshCollections: () => Promise<void>;
   collectionWithMemes: CollectionWithMemes | undefined;
-  getCollectionById: (id: string) => void;
-  refreshCollectionWithMemes: () => void;
+  getCollectionById: (id: string) => Promise<void>;
+  refreshCollectionWithMemes: () => Promise<void>;
 };
 
 const DashboardContext = createContext<DashboardContextType | undefined>(