From a070e9a9c2dc7d4ca4efaa5f2e7b362bf84e5860 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Mon, 20 May 2024 16:52:52 -0500
Subject: [PATCH] added delete item & category functionality

---
 .../src/app/api/categories/route.js           |  9 +++++++
 .../src/app/api/menu-items/route.js           |  9 +++++++
 .../src/app/categories/page.js                | 27 ++++++++++++++++---
 .../src/app/menu-items/edit/[id]/page.js      | 20 ++++++++++++++
 .../src/components/layout/MenuItemForm.js     |  3 ++-
 5 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/donutshop_ecommerce/src/app/api/categories/route.js b/donutshop_ecommerce/src/app/api/categories/route.js
index 856a195..4e23686 100644
--- a/donutshop_ecommerce/src/app/api/categories/route.js
+++ b/donutshop_ecommerce/src/app/api/categories/route.js
@@ -22,4 +22,13 @@ export async function GET(){
     return Response.json(
         await Category.find()
     )
+}
+
+export async function DELETE(req){
+    mongoose.connect(process.env.MONGO_URL)
+    const url = new URL(req.url);
+    const _id = url.searchParams.get('_id');
+    await Category.deleteOne({_id})
+
+    return Response.json(true)
 }
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/app/api/menu-items/route.js b/donutshop_ecommerce/src/app/api/menu-items/route.js
index 2a70373..87d7236 100644
--- a/donutshop_ecommerce/src/app/api/menu-items/route.js
+++ b/donutshop_ecommerce/src/app/api/menu-items/route.js
@@ -22,4 +22,13 @@ export async function GET(){
     return Response.json(
         await MenuItem.find()
     )
+}
+
+export async function DELETE(req){
+    mongoose.connect(process.env.MONGO_URL)
+    const url = new URL(req.url);
+    const _id = url.searchParams.get('_id');
+    await MenuItem.deleteOne({_id})
+
+    return Response.json(true)
 }
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/app/categories/page.js b/donutshop_ecommerce/src/app/categories/page.js
index 0c976e5..83724e7 100644
--- a/donutshop_ecommerce/src/app/categories/page.js
+++ b/donutshop_ecommerce/src/app/categories/page.js
@@ -51,7 +51,28 @@ const CategoriesPage = () => {
             loading: editCategory ? 'Updating...' : 'Creating...',
             success: editCategory ? 'A category is updated' : 'A new category is created',
             error: editCategory ? 'Fail to update category' : 'Fail to create a new category',
+        });
+
+    }
+
+    async function handleDeleteCategory(_id){
+        const promise = new Promise(async (resolve, reject) => {
+            const response = await fetch('/api/categories?_id='+_id, {
+                method: 'DELETE',
+            })
+            if(response.ok){
+                resolve();
+            }
+            else{
+                reject();
+            }    
         })
+        await toast.promise(promise, {
+            loading: 'Deleting...',
+            success: 'A category is deleted',
+            error: 'Fail to delete!',
+        });
+        fetchCategories();
     }
 
     
@@ -89,10 +110,10 @@ const CategoriesPage = () => {
             <label className='-mb-1 text-gray-700 font-semibold text-sm'>Categories</label>
             {categories?.length > 0 && categories.map(c => (
                 <div className='w-full p-2 flex justify-between my-2 rounded-md outline-none border border-[#DCA0AE] duration-300'>
-                    <p onClick={() => {setEditCategory(c); setCategoryName(c.name)}} className='cursor-pointer hover:text-gray-600'>{c.name}</p>
+                    <p>{c.name}</p>
                     <div className='flex gap-2'>
-                        <button type='button' className='text-green-600 hover:opacity-60'><LiaEditSolid/></button>
-                        <button type='button' className='text-red-600 hover:opacity-60'><IoTrashOutline/></button>
+                        <button type='button' onClick={() => {setEditCategory(c); setCategoryName(c.name)}} className='text-green-600 hover:opacity-60'><LiaEditSolid/></button>
+                        <button type='button' onClick={() => handleDeleteCategory(c._id)} className='text-red-600 hover:opacity-60'><IoTrashOutline/></button>
                     </div>
                 </div>
             ))}
diff --git a/donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js b/donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js
index daa9209..0a6b300 100644
--- a/donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js
+++ b/donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js
@@ -45,6 +45,25 @@ const EditMenuItemPage = () => {
 
         setGoToItems(true) 
     }
+    async function handleDeleteMenuItem(){
+        const promise = new Promise(async (resolve, reject) => {
+            const response = await fetch('/api/menu-items?_id='+id, {
+                method: 'DELETE',
+            });
+            if(response.ok)
+                resolve();
+            else
+                reject();
+        });
+        await toast.promise(promise, {
+            loading: 'Deleting...',
+            success: 'An item is deleted',
+            error: 'Fail to delete an item!',
+        }); 
+        setGoToItems(true)
+    }
+
+
     if(goToItems){
         return redirect('/menu-items')
     }
@@ -63,6 +82,7 @@ const EditMenuItemPage = () => {
         <UserTab isAdmin={true}/>
         <div className='px-5 max-w-md mx-auto mt-10'>
             <MenuItemForm menuItem={menuItem} handleMenuFormSubmit={handleMenuFormSubmit}/>
+            <button onClick={handleDeleteMenuItem} className='w-full bg-pink-700 text-white p-2 rounded-md hover:opacity-80 duration-300 mt-2'>Delete</button>
             <div className='max-w-md mx-auto mt-2'>
                 <Link href={'/menu-items'} className='w-full p-2 flex justify-center items-center my-2 rounded-md outline-none border border-[#DCA0AE] hover:opacity-60 duration-300'>Show all menu items</Link>
             </div>
diff --git a/donutshop_ecommerce/src/components/layout/MenuItemForm.js b/donutshop_ecommerce/src/components/layout/MenuItemForm.js
index 81e8ec5..a4cf748 100644
--- a/donutshop_ecommerce/src/components/layout/MenuItemForm.js
+++ b/donutshop_ecommerce/src/components/layout/MenuItemForm.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import EditImage from './EditImage';
 import MenuItemProps from './MenuItemProps'
+import toast from 'react-hot-toast';
 
 
 const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
@@ -30,7 +31,7 @@ const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
             <input type='text' placeholder='Enter base price' value={basePrice} onChange={ev => setBasePrice(ev.target.value)}/>
         </div>
         <MenuItemProps props={sizes} setProps={setSizes}/>
-        <button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
+        <button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>   
     </form>
   )
 }