From 1e507880646b51869592e3a0ab6e26c7465487b0 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Sun, 19 May 2024 19:11:17 -0500
Subject: [PATCH] made change on menu item page

---
 .../src/app/menu-items/edit/[id]/page.js      | 38 ++++---------------
 .../src/app/menu-items/new/page.js            | 27 ++-----------
 .../src/components/layout/MenuItemForm.js     | 34 +++++++++++++++++
 3 files changed, 45 insertions(+), 54 deletions(-)
 create mode 100644 donutshop_ecommerce/src/components/layout/MenuItemForm.js

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 cb443b2..daa9209 100644
--- a/donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js
+++ b/donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js
@@ -4,33 +4,28 @@ import useProfile from '../../../../components/UseProfile';
 import { redirect, useParams } from 'next/navigation'
 import Link from 'next/link'
 import UserTab from '../../../../components/layout/UserTab';
-import EditImage from '../../../../components/layout/EditImage';
+import MenuItemForm from '../../../../components/layout/MenuItemForm';
+import toast from 'react-hot-toast';
 
 const EditMenuItemPage = () => {
     const {loading, data} = useProfile();
-    const [menuImg, setMenuImg] = useState('');
-    const [itemName, setItemName] = useState('');
-    const [description, setDescription] = useState('');
-    const [basePrice, setBasePrice] = useState('');
     const [goToItems, setGoToItems] = useState(false);
+    const [menuItem, setMenuItem] = useState(null);
     const {id} = useParams();
-
+    
 
     useEffect(() => {
         fetch('/api/menu-items').then(res => {
             res.json().then(items => {
                 const item = items.find(i => i._id === id);
-                setMenuImg(item.menuImg);
-                setItemName(item.itemName);
-                setDescription(item.description);
-                setBasePrice(item.basePrice);
+                setMenuItem(item);
             })
         })
     }, [])
 
-    async function handleMenuFormSubmit(ev){
+    async function handleMenuFormSubmit(ev, data){
         ev.preventDefault();
-        const data = {menuImg, itemName, description, basePrice, _id:id};
+        data = {...data, _id:id};
         const menuSavingPromise = new Promise(async (resolve, reject) => {
             const response = await fetch('/api/menu-items', {
                 method: 'PUT',
@@ -67,24 +62,7 @@ const EditMenuItemPage = () => {
     <div className='mb-10'>
         <UserTab isAdmin={true}/>
         <div className='px-5 max-w-md mx-auto mt-10'>
-            <form className='mt-10' onSubmit={handleMenuFormSubmit}>
-                <div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto mb-5'>
-                    <EditImage link={menuImg} setLink={setMenuImg}/>
-                </div>
-                <div>
-                    <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Item name</label>
-                    <input type='text' placeholder='Enter items name' value={itemName} onChange={ev => setItemName(ev.target.value)}/>
-                </div>
-                <div>
-                    <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Description</label>
-                    <input type='text' placeholder='Enter discription' value={description} onChange={ev => setDescription(ev.target.value)}/>
-                </div>
-                <div>
-                    <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Price</label>
-                    <input type='text' placeholder='Enter base price' value={basePrice} onChange={ev => setBasePrice(ev.target.value)}/>
-                </div>
-                <button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
-            </form>
+            <MenuItemForm menuItem={menuItem} handleMenuFormSubmit={handleMenuFormSubmit}/>
             <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/app/menu-items/new/page.js b/donutshop_ecommerce/src/app/menu-items/new/page.js
index 00d1f33..c8075dd 100644
--- a/donutshop_ecommerce/src/app/menu-items/new/page.js
+++ b/donutshop_ecommerce/src/app/menu-items/new/page.js
@@ -6,18 +6,14 @@ import toast from 'react-hot-toast'
 import useProfile from '../../../components/UseProfile'
 import Link from 'next/link'
 import { redirect } from 'next/navigation'
+import MenuItemForm from '../../../components/layout/MenuItemForm'
 
 const NewMenuItemPage = () => {
     const {loading, data} = useProfile();
-    const [menuImg, setMenuImg] = useState('');
-    const [itemName, setItemName] = useState('');
-    const [description, setDescription] = useState('');
-    const [basePrice, setBasePrice] = useState('');
     const [goToItems, setGoToItems] = useState(false)
 
-    async function handleMenuFormSubmit(ev){
+    async function handleMenuFormSubmit(ev, data){
         ev.preventDefault();
-        const data = {menuImg, itemName, description, basePrice,};
         const menuSavingPromise = new Promise(async (resolve, reject) => {
             const response = await fetch('/api/menu-items', {
                 method: 'POST',
@@ -54,24 +50,7 @@ const NewMenuItemPage = () => {
     <div className='mb-10'>
         <UserTab isAdmin={true}/>
         <div className='px-5 max-w-md mx-auto mt-10'>
-            <form className='mt-10' onSubmit={handleMenuFormSubmit}>
-                <div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto mb-5'>
-                    <EditImage link={menuImg} setLink={setMenuImg}/>
-                </div>
-                <div>
-                    <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Item name</label>
-                    <input type='text' placeholder='Enter items name' value={itemName} onChange={ev => setItemName(ev.target.value)}/>
-                </div>
-                <div>
-                    <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Description</label>
-                    <input type='text' placeholder='Enter discription' value={description} onChange={ev => setDescription(ev.target.value)}/>
-                </div>
-                <div>
-                    <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Price</label>
-                    <input type='text' placeholder='Enter base price' value={basePrice} onChange={ev => setBasePrice(ev.target.value)}/>
-                </div>
-                <button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
-            </form>
+            <MenuItemForm menuItem={null} handleMenuFormSubmit={handleMenuFormSubmit}/>
             <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
new file mode 100644
index 0000000..f5432c3
--- /dev/null
+++ b/donutshop_ecommerce/src/components/layout/MenuItemForm.js
@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import EditImage from './EditImage';
+
+const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
+    const [menuImg, setMenuImg] = useState(menuItem?.menuImg || '');
+    const [itemName, setItemName] = useState(menuItem?.itemName || '');
+    const [description, setDescription] = useState(menuItem?.description || '');
+    const [basePrice, setBasePrice] = useState(menuItem?.basePrice || '');
+
+
+
+  return (
+    <form className='mt-10' onSubmit={ev => handleMenuFormSubmit(ev, {menuImg, itemName, description, basePrice})}>
+        <div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto mb-5'>
+            <EditImage link={menuImg} setLink={setMenuImg}/>
+        </div>
+        <div>
+            <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Item name</label>
+            <input type='text' placeholder='Enter items name' value={itemName} onChange={ev => setItemName(ev.target.value)}/>
+        </div>
+        <div>
+            <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Description</label>
+            <input type='text' placeholder='Enter discription' value={description} onChange={ev => setDescription(ev.target.value)}/>
+        </div>
+        <div>
+            <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Price</label>
+            <input type='text' placeholder='Enter base price' value={basePrice} onChange={ev => setBasePrice(ev.target.value)}/>
+        </div>
+        <button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
+    </form>
+  )
+}
+
+export default MenuItemForm
\ No newline at end of file