updated code

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',
         })
+        
     }
 
 

donutshop_ecommerce/src/components/layout/MenuItemForm.js

@@ -41,7 +41,7 @@ const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
         </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)}/>
+            <input type='text' placeholder='Enter description' value={description} onChange={ev => setDescription(ev.target.value)}/>
         </div>
         <div>
             <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Price</label>

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}) => {
         <div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto'>
           <EditImage link={image} setLink={setImage}/>
         </div>
-        <form className='mt-5 text-sm sm:text-base flex flex-col gap-0 sm:gap-1' onSubmit={ev => onSave(ev, {name:userName, image, phoneNumber, streetAddress, city, stateProvince, zipCode, country,})}>
+        <form className='mt-5 text-sm sm:text-base flex flex-col gap-0 sm:gap-1' onSubmit={ev => onSave(ev, {name:userName, image, phoneNumber, streetAddress, city, stateProvince, zipCode, country, admin,})}>
           <div>
             <label className='text-gray-700 text-sm font-semibold'>Name</label>
             <input type='text' placeholder='Name' value={userName} onChange={ev => setUserName(ev.target.value)}/>
@@ -53,6 +56,12 @@ const UserForm = ({user, onSave}) => {
             <label className='text-gray-700 text-sm font-semibold'>Country</label>
             <input type='text' placeholder='Country' value={country} onChange={ev => setCountry(ev.target.value)}/>
           </div>
+          {loginAsUser.admin && (
+            <div className='flex gap-2 items-center mb-5'>
+              <label htmlFor='admin' className='text-gray-700 text-sm font-semibold'>Admin:</label>
+              <input type='checkbox' id='admin' value={'1'} checked={admin} onClick={ev => setAdmin(ev.target.checked)}/>
+            </div>
+          )}
           <button className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300 disabled:cursor-not-allowed'>Save</button>
         </form>
       </div>