diff --git a/donutshop_ecommerce/src/app/users/[id]/page.js b/donutshop_ecommerce/src/app/users/[id]/page.js index ec81751..f3172d2 100644 --- a/donutshop_ecommerce/src/app/users/[id]/page.js +++ b/donutshop_ecommerce/src/app/users/[id]/page.js @@ -4,6 +4,7 @@ import UserTab from '../../../components/layout/UserTab' import useProfile from '../../../components/UseProfile'; import UserForm from '../../../components/layout/UserForm'; import { useParams } from 'next/navigation'; +import toast from 'react-hot-toast'; const EditUsersPage = () => { const {data, loading} = useProfile(); @@ -19,13 +20,26 @@ const EditUsersPage = () => { }) }, []) - function handleSaveButton(ev, data){ + async function handleSaveButton(ev, data){ ev.preventDefault(); - fetch('/api/profile', { - method: 'PUT', - headers: {'Content-Type':'application/json'}, - body: JSON.stringify({...data, _id:id}), + const promise = new Promise(async (resolve, reject) => { + const response = await fetch('/api/profile', { + method: 'PUT', + headers: {'Content-Type':'application/json'}, + body: JSON.stringify({...data, _id:id}), + }) + if(response.ok){ + resolve(); + } else { + reject(); + } + }); + await toast.promise(promise, { + loading: 'Saving...', + success: 'Profile is saved', + error: 'Fail to saved your prodile', }) + } diff --git a/donutshop_ecommerce/src/components/layout/MenuItemForm.js b/donutshop_ecommerce/src/components/layout/MenuItemForm.js index 9d867c8..225bce2 100644 --- a/donutshop_ecommerce/src/components/layout/MenuItemForm.js +++ b/donutshop_ecommerce/src/components/layout/MenuItemForm.js @@ -41,7 +41,7 @@ const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
- setDescription(ev.target.value)}/> + setDescription(ev.target.value)}/>
diff --git a/donutshop_ecommerce/src/components/layout/UserForm.js b/donutshop_ecommerce/src/components/layout/UserForm.js index 7ae9ab8..349c88e 100644 --- a/donutshop_ecommerce/src/components/layout/UserForm.js +++ b/donutshop_ecommerce/src/components/layout/UserForm.js @@ -1,6 +1,7 @@ "use client" import React, { useState } from 'react' import EditImage from '../../components/layout/EditImage' +import useProfile from '../UseProfile'; const UserForm = ({user, onSave}) => { const [userName, setUserName] = useState(user?.name || ''); @@ -11,6 +12,8 @@ const UserForm = ({user, onSave}) => { const [stateProvince, setStateProvince] = useState(user?.stateProvince || ''); const [zipCode, setZipCode] = useState(user?.zipCode || ''); const [country, setCountry] = useState(user?.country || ''); + const [admin, setAdmin] = useState(user?.admin || false); + const {data:loginAsUser} = useProfile(); return ( @@ -18,7 +21,7 @@ const UserForm = ({user, onSave}) => {
-
onSave(ev, {name:userName, image, phoneNumber, streetAddress, city, stateProvince, zipCode, country,})}> + onSave(ev, {name:userName, image, phoneNumber, streetAddress, city, stateProvince, zipCode, country, admin,})}>
setUserName(ev.target.value)}/> @@ -53,6 +56,12 @@ const UserForm = ({user, onSave}) => { setCountry(ev.target.value)}/>
+ {loginAsUser.admin && ( +
+ + setAdmin(ev.target.checked)}/> +
+ )}