From 50ba58e9009fd027974e1202bda0dc851c1d231e Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Fri, 17 May 2024 16:53:21 -0500 Subject: [PATCH] created new page for menu item and updated new route for menu item --- donutshop_ecommerce/package-lock.json | 8 +- donutshop_ecommerce/package.json | 2 +- .../src/app/api/menu-items/route.js | 7 ++ .../src/app/menu-items/new/page.js | 83 +++++++++++++++++++ .../src/app/menu-items/page.js | 74 +++++------------ .../src/components/layout/UserTab.js | 2 +- 6 files changed, 119 insertions(+), 57 deletions(-) create mode 100644 donutshop_ecommerce/src/app/menu-items/new/page.js diff --git a/donutshop_ecommerce/package-lock.json b/donutshop_ecommerce/package-lock.json index 5503f9a..d2eaa4b 100644 --- a/donutshop_ecommerce/package-lock.json +++ b/donutshop_ecommerce/package-lock.json @@ -19,7 +19,7 @@ "react": "^18", "react-dom": "^18", "react-hot-toast": "^2.4.1", - "react-icons": "^5.2.0", + "react-icons": "^5.2.1", "react-scroll-parallax": "^3.4.5", "react-slick": "^0.30.2", "slick-carousel": "^1.8.1", @@ -6667,9 +6667,9 @@ } }, "node_modules/react-icons": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.0.tgz", - "integrity": "sha512-n52Y7Eb4MgQZHsSZOhSXv1zs2668/hBYKfSRIvKh42yExjyhZu0d1IK2CLLZ3BZB1oo13lDfwx2vOh2z9FTV6Q==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", + "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", "peerDependencies": { "react": "*" } diff --git a/donutshop_ecommerce/package.json b/donutshop_ecommerce/package.json index 79ed1b4..7c6969c 100644 --- a/donutshop_ecommerce/package.json +++ b/donutshop_ecommerce/package.json @@ -20,7 +20,7 @@ "react": "^18", "react-dom": "^18", "react-hot-toast": "^2.4.1", - "react-icons": "^5.2.0", + "react-icons": "^5.2.1", "react-scroll-parallax": "^3.4.5", "react-slick": "^0.30.2", "slick-carousel": "^1.8.1", diff --git a/donutshop_ecommerce/src/app/api/menu-items/route.js b/donutshop_ecommerce/src/app/api/menu-items/route.js index 0b98acb..d80f069 100644 --- a/donutshop_ecommerce/src/app/api/menu-items/route.js +++ b/donutshop_ecommerce/src/app/api/menu-items/route.js @@ -7,4 +7,11 @@ export async function POST(req){ const menuItemDoc = await MenuItem.create(data); return Response.json(menuItemDoc) +} + +export async function GET(){ + mongoose.connect(process.env.MONGO_URL) + return Response.json( + await MenuItem.find() + ) } \ No newline at end of file diff --git a/donutshop_ecommerce/src/app/menu-items/new/page.js b/donutshop_ecommerce/src/app/menu-items/new/page.js new file mode 100644 index 0000000..e8cf45a --- /dev/null +++ b/donutshop_ecommerce/src/app/menu-items/new/page.js @@ -0,0 +1,83 @@ +"use client" +import React, { useState } from 'react' +import UserTab from '../../../components/layout/UserTab' +import EditImage from '../../../components/layout/EditImage' +import toast from 'react-hot-toast' +import useProfile from '../../../components/UseProfile' +import Link from 'next/link' +import { redirect } from 'next/navigation' + +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){ + ev.preventDefault(); + const data = {menuImg, itemName, description, basePrice,}; + const menuSavingPromise = new Promise(async (resolve, reject) => { + const response = await fetch('/api/menu-items', { + method: 'POST', + 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

Loading...

+ } + if(!data.admin){ + return

Please login as an admin

+ } + + + return ( +
+ +
+
+
+ +
+
+ + setItemName(ev.target.value)}/> +
+
+ + setDescription(ev.target.value)}/> +
+
+ + setBasePrice(ev.target.value)}/> +
+ +
+
+ Show all menu items +
+
+
+ ) +} + +export default NewMenuItemPage \ No newline at end of file diff --git a/donutshop_ecommerce/src/app/menu-items/page.js b/donutshop_ecommerce/src/app/menu-items/page.js index b54a8ea..238ceac 100644 --- a/donutshop_ecommerce/src/app/menu-items/page.js +++ b/donutshop_ecommerce/src/app/menu-items/page.js @@ -1,40 +1,21 @@ "use client" -import React, { useState } from 'react' -import UserTab from '../../components/layout/UserTab' +import React, { useEffect, useState } from 'react' +import { IoMdAddCircle } from "react-icons/io"; import useProfile from '../../components/UseProfile' -import EditImage from '../../components/layout/EditImage' -import toast from 'react-hot-toast' +import UserTab from '../../components/layout/UserTab'; +import Link from 'next/link'; const MenuItemsPage = () => { const {loading, data} = useProfile(); - const [menuImg, setMenuImg] = useState(''); - const [itemName, setItemName] = useState(''); - const [description, setDescription] = useState(''); - const [basePrice, setBasePrice] = useState(''); - - - - async function handleMenuFormSubmit(ev){ - ev.preventDefault(); - const data = {menuImg, itemName, description, basePrice,}; - const menuSavingPromise = new Promise(async (resolve, reject) => { - const response = await fetch('/api/menu-items', { - method: 'POST', - 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!', - }) - } - + const [menuItems, setMenuItems] = useState([]); + + useEffect(() => { + fetch('/api/menu-items').then(res => { + res.json().then(menuItems => { + setMenuItems(menuItems); + }) + }) + }, []) if(loading){ return

Loading...

@@ -48,25 +29,16 @@ const MenuItemsPage = () => {
-
-
- -
-
- - setItemName(ev.target.value)}/> -
-
- - setDescription(ev.target.value)}/> -
-
- - setBasePrice(ev.target.value)}/> -
- -
-
+ Create new menu item + + +
+
+

Edit menu items

+ {menuItems?.length > 0 && menuItems.map(item => ( + + ))} +
) } diff --git a/donutshop_ecommerce/src/components/layout/UserTab.js b/donutshop_ecommerce/src/components/layout/UserTab.js index 3f3f1ee..065a1e8 100644 --- a/donutshop_ecommerce/src/components/layout/UserTab.js +++ b/donutshop_ecommerce/src/components/layout/UserTab.js @@ -13,7 +13,7 @@ const UserTab = ({isAdmin}) => { {isAdmin && ( <> Categories - Items + Items Users )}