From 6af6da358b3bb4140cdee4b6c5ced64278e44f40 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Tue, 21 May 2024 09:59:51 -0500
Subject: [PATCH] updated select category on menu item page, and added user and
 edit user page functionality

---
 .../src/app/api/models/MenuItem.js            |  5 +-
 .../src/app/api/users/route.js                |  9 +++
 donutshop_ecommerce/src/app/globals.css       |  2 +-
 .../src/app/users/[id]/page.js                | 25 ++++++++
 donutshop_ecommerce/src/app/users/page.js     | 57 +++++++++++++++++++
 .../src/components/layout/MenuItemForm.js     | 25 ++++++--
 .../src/components/layout/UserTab.js          |  5 +-
 7 files changed, 120 insertions(+), 8 deletions(-)
 create mode 100644 donutshop_ecommerce/src/app/api/users/route.js
 create mode 100644 donutshop_ecommerce/src/app/users/[id]/page.js
 create mode 100644 donutshop_ecommerce/src/app/users/page.js

diff --git a/donutshop_ecommerce/src/app/api/models/MenuItem.js b/donutshop_ecommerce/src/app/api/models/MenuItem.js
index 11df751..ba2c7f1 100644
--- a/donutshop_ecommerce/src/app/api/models/MenuItem.js
+++ b/donutshop_ecommerce/src/app/api/models/MenuItem.js
@@ -1,4 +1,4 @@
-import { Schema, model, models } from "mongoose";
+import mongoose, { Schema, model, models } from "mongoose";
 
 const ExtraPriceSchema = new Schema({
     itemName: String,
@@ -15,6 +15,9 @@ const MenuItemSchema = new Schema({
     description:{
         type: String
     },
+    category:{
+        type: mongoose.Types.ObjectId
+    },
     basePrice:{
         type: Number
     },
diff --git a/donutshop_ecommerce/src/app/api/users/route.js b/donutshop_ecommerce/src/app/api/users/route.js
new file mode 100644
index 0000000..e010514
--- /dev/null
+++ b/donutshop_ecommerce/src/app/api/users/route.js
@@ -0,0 +1,9 @@
+import mongoose from "mongoose";
+import { User } from "../models/User";
+
+export async function GET(){
+    mongoose.connect(process.env.MONGO_URL);
+    const users = await User.find();
+
+    return Response.json(users);
+}
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/app/globals.css b/donutshop_ecommerce/src/app/globals.css
index b3520ad..dd2d5e6 100644
--- a/donutshop_ecommerce/src/app/globals.css
+++ b/donutshop_ecommerce/src/app/globals.css
@@ -34,7 +34,7 @@ input[type="email"], input[type="password"], input[type="text"], input[type="tel
 }
 /*===== profile =====*/
 div.tabs > *{
-  @apply py-1 px-2 sm:py-2 sm:px-4 bg-gray-200 text-gray-700 rounded-md
+  @apply py-1 px-2 sm:py-2 sm:px-3 bg-gray-200 text-gray-700 rounded-md text-sm sm:text-base 
 }
 div.tabs > *.active{
   @apply bg-pink-500 text-white font-semibold
diff --git a/donutshop_ecommerce/src/app/users/[id]/page.js b/donutshop_ecommerce/src/app/users/[id]/page.js
new file mode 100644
index 0000000..bbe84af
--- /dev/null
+++ b/donutshop_ecommerce/src/app/users/[id]/page.js
@@ -0,0 +1,25 @@
+"use client"
+import React from 'react'
+import UserTab from '../../../components/layout/UserTab'
+import useProfile from '../../../components/UseProfile';
+
+const EditUsersPage = () => {
+    const {data, loading} = useProfile();
+
+
+
+    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='px-5'>
+        <UserTab isAdmin={true}/>
+    </div>
+  )
+}
+
+export default EditUsersPage
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/app/users/page.js b/donutshop_ecommerce/src/app/users/page.js
new file mode 100644
index 0000000..93bedc8
--- /dev/null
+++ b/donutshop_ecommerce/src/app/users/page.js
@@ -0,0 +1,57 @@
+"use client"
+import React, { useEffect, useState } from 'react'
+import UserTab from '../../components/layout/UserTab'
+import useProfile from '../../components/UseProfile'
+import { LiaEditSolid } from "react-icons/lia";
+import Link from 'next/link';
+
+const Userspage = () => {
+    const {data, loading} = useProfile();
+    const [users, setUser] = useState([]);
+
+
+    useEffect(() => {
+        fetch('api/users').then(response => {
+            response.json().then(users => {
+                setUser(users)
+            })
+        })
+    }, [])
+
+
+    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='px-5'>
+        <UserTab isAdmin={true}/>
+        <div className='max-w-md mx-auto mt-10'>
+            {users?.length > 0 && users.map(user => (
+                <div className='border p-2 my-2 w-full rounded-md outline-none border-[#DCA0AE] flex items-center justify-between'>
+                    <div className='flex flex-col'>
+                        <div className='text-gray-700 font-semibold'>
+                            {!!user.name && (
+                                <span>{user.name}</span>
+                            )}
+                            {!user.name && (
+                                <span className='italic'>No username</span>
+                            )}
+                        </div>
+                        <span className='text-gray-500 text-sm'>{user.email}</span>
+                    </div>
+                    <div>
+                        <Link href={'/users/'+user._id}><LiaEditSolid className='text-green-600 text-xl'/></Link>
+                    </div>
+                </div>
+            ))}
+        </div>
+    </div>
+  )
+}
+
+export default Userspage
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/components/layout/MenuItemForm.js b/donutshop_ecommerce/src/components/layout/MenuItemForm.js
index a4cf748..9d867c8 100644
--- a/donutshop_ecommerce/src/components/layout/MenuItemForm.js
+++ b/donutshop_ecommerce/src/components/layout/MenuItemForm.js
@@ -1,7 +1,6 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import EditImage from './EditImage';
 import MenuItemProps from './MenuItemProps'
-import toast from 'react-hot-toast';
 
 
 const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
@@ -10,14 +9,32 @@ const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
     const [description, setDescription] = useState(menuItem?.description || '');
     const [basePrice, setBasePrice] = useState(menuItem?.basePrice || '');
     const [sizes, setSizes] = useState(menuItem?.sizes || []);
-    
+    const [category, setCategory] = useState(menuItem?.category || '');
+    const [categories, setCategories] = useState([]);
+
+
+    useEffect(() => {
+        fetch('/api/categories').then(res => {
+            res.json().then(categories => {
+                setCategories(categories)
+            })
+        })
+    }, [])
 
 
   return (
-    <form className='mt-10' onSubmit={ev => handleMenuFormSubmit(ev, {menuImg, itemName, description, basePrice, sizes})}>
+    <form className='mt-10' onSubmit={ev => handleMenuFormSubmit(ev, {menuImg, itemName, description, basePrice, sizes, category,})}>
         <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'>Category</label>
+            <select value={category} onChange={ev => setCategory(ev.target.value)} className='border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE] bg-transparent'>
+                {categories?.length > 0 && categories.map(c => (
+                    <option value={c._id} >{c.name}</option>
+                ))}
+            </select>
+        </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)}/>
diff --git a/donutshop_ecommerce/src/components/layout/UserTab.js b/donutshop_ecommerce/src/components/layout/UserTab.js
index 065a1e8..3b12e11 100644
--- a/donutshop_ecommerce/src/components/layout/UserTab.js
+++ b/donutshop_ecommerce/src/components/layout/UserTab.js
@@ -8,13 +8,14 @@ const UserTab = ({isAdmin}) => {
 
 
   return (
-    <div className='tabs flex gap-2 justify-center'>
+    <div className='tabs flex gap-1 justify-center'>
         <Link href='/profile' className={path === '/profile' ? 'active' : ''}>Profile</Link>
         {isAdmin && (
           <>
             <Link href='/categories' className={path === '/categories' ? 'active' : ''}>Categories</Link>
             <Link href='/menu-items' className={path.includes('menu-items')  ? 'active' : ''}>Items</Link>
-            <Link href='/users' className={path === '/users' ? 'active' : ''}>Users</Link>
+            <Link href='/users' className={path.includes('users') ? 'active' : ''}>Users</Link>
+            <Link href='/orders' className={path === '/orders' ? 'active' : ''}>Orders</Link>
           </>
         )}
     </div>