updated menu item route and created edit item page
This commit is contained in:
parent
2bf5c86db9
commit
ab72a322ef
2 changed files with 104 additions and 0 deletions
|
@ -9,6 +9,14 @@ export async function POST(req){
|
||||||
return Response.json(menuItemDoc)
|
return Response.json(menuItemDoc)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function PUT(req){
|
||||||
|
mongoose.connect(process.env.MONGO_URL)
|
||||||
|
const {_id, ...data} = await req.json();
|
||||||
|
await MenuItem.findByIdAndUpdate(_id, data);
|
||||||
|
|
||||||
|
return Response.json(true)
|
||||||
|
}
|
||||||
|
|
||||||
export async function GET(){
|
export async function GET(){
|
||||||
mongoose.connect(process.env.MONGO_URL)
|
mongoose.connect(process.env.MONGO_URL)
|
||||||
return Response.json(
|
return Response.json(
|
||||||
|
|
96
donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js
Normal file
96
donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js
Normal file
|
@ -0,0 +1,96 @@
|
||||||
|
"use client"
|
||||||
|
import React, { useEffect, useState } from 'react'
|
||||||
|
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';
|
||||||
|
|
||||||
|
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 {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);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
async function handleMenuFormSubmit(ev){
|
||||||
|
ev.preventDefault();
|
||||||
|
const data = {menuImg, itemName, description, basePrice, _id:id};
|
||||||
|
const menuSavingPromise = new Promise(async (resolve, reject) => {
|
||||||
|
const response = await fetch('/api/menu-items', {
|
||||||
|
method: 'PUT',
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
headers: {'Content-Type': 'application/json'}
|
||||||
|
});
|
||||||
|
if(response.ok)
|
||||||
|
resolve();
|
||||||
|
else
|
||||||
|
reject();
|
||||||
|
});
|
||||||
|
await toast.promise(menuSavingPromise, {
|
||||||
|
loading: 'Saving...',
|
||||||
|
success: 'Menu is saved',
|
||||||
|
error: 'Fail to save menu!',
|
||||||
|
});
|
||||||
|
|
||||||
|
setGoToItems(true)
|
||||||
|
}
|
||||||
|
if(goToItems){
|
||||||
|
return redirect('/menu-items')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if(loading){
|
||||||
|
return <p className='flex justify-center items-center'>Loading...</p>
|
||||||
|
}
|
||||||
|
if(!data.admin){
|
||||||
|
return <p className='flex justify-center items-center'>Please login as an admin</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EditMenuItemPage
|
Loading…
Add table
Reference in a new issue