Skip to content

Commit 6e570ad

Browse files
author
koladev
committed
feat : add listing of menus
1 parent c244b16 commit 6e570ad

File tree

8 files changed

+147
-432
lines changed

8 files changed

+147
-432
lines changed

‎menu-frontend/next.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
/** @type {import('next').NextConfig} */
2-
const nextConfig = {}
2+
const nextConfig = {};
33

4-
module.exports = nextConfig
4+
module.exports = nextConfig;

‎menu-frontend/package-lock.json‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎menu-frontend/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"next": "14.0.0",
13+
"prettier": "^3.0.3",
1214
"react": "^18",
13-
"react-dom": "^18",
14-
"next": "14.0.0"
15+
"react-dom": "^18"
1516
},
1617
"devDependencies": {
1718
"eslint": "^8",

‎menu-frontend/src/app/globals.css‎

Lines changed: 0 additions & 107 deletions
This file was deleted.

‎menu-frontend/src/app/layout.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
import { Inter } from 'next/font/google'
2-
import './globals.css'
1+
import { Inter } from "next/font/google";
32

4-
const inter = Inter({ subsets: ['latin'] })
3+
import "./style.css";
4+
5+
const inter = Inter({ subsets: ["latin"] });
56

67
export const metadata = {
7-
title: 'Create Next App',
8-
description: 'Generated by create next app',
9-
}
8+
title: "Restaurant Menu",
9+
description: "A simple UI to handle menus",
10+
};
1011

1112
export default function RootLayout({ children }) {
1213
return (
1314
<html lang="en">
1415
<body className={inter.className}>{children}</body>
1516
</html>
16-
)
17+
);
1718
}

‎menu-frontend/src/app/page.js‎

Lines changed: 62 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,72 @@
1-
import Image from 'next/image'
2-
import styles from './page.module.css'
1+
"use client";
32

4-
export default function Home() {
3+
import { useEffect, useState } from "react";
4+
5+
async function getData() {
6+
const res = await fetch("http://127.0.0.1:8000/api/menu/");
7+
8+
if (!res.ok) {
9+
throw new Error("Failed to fetch data");
10+
}
11+
12+
return res.json();
13+
}
14+
15+
const MenuItem = ({ id, name, price, onEdit, onDelete }) => {
516
return (
6-
<main className={styles.main}>
7-
<div className={styles.description}>
8-
<p>
9-
Get started by editing&nbsp;
10-
<code className={styles.code}>src/app/page.js</code>
11-
</p>
12-
<div>
13-
<a
14-
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
By{' '}
19-
<Image
20-
src="/vercel.svg"
21-
alt="Vercel Logo"
22-
className={styles.vercelLogo}
23-
width={100}
24-
height={24}
25-
priority
26-
/>
27-
</a>
28-
</div>
17+
<div className="menu-item" data-id={id}>
18+
<div className="menu-item-info">
19+
<div className="menu-item-name">{name}</div>
20+
<div className="menu-item-price">${price.toFixed(2)}</div>
2921
</div>
30-
31-
<div className={styles.center}>
32-
<Image
33-
className={styles.logo}
34-
src="/next.svg"
35-
alt="Next.js Logo"
36-
width={180}
37-
height={37}
38-
priority
39-
/>
22+
<div className="menu-item-actions">
23+
<button className="edit-button" onClick={() => onEdit(id)}>
24+
Edit
25+
</button>
26+
<button className="delete-button" onClick={() => onDelete(id)}>
27+
Delete
28+
</button>
4029
</div>
30+
</div>
31+
);
32+
};
33+
export default function Page() {
34+
const [menuItems, setMenuItems] = useState(null);
4135

42-
<div className={styles.grid}>
43-
<a
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45-
className={styles.card}
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
>
49-
<h2>
50-
Docs <span>-&gt;</span>
51-
</h2>
52-
<p>Find in-depth information about Next.js features and API.</p>
53-
</a>
36+
useEffect(
37+
() => async () => {
38+
const data = await getData();
39+
if (data) {
40+
setMenuItems(data);
41+
}
42+
},
43+
[]
44+
);
5445

55-
<a
56-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
57-
className={styles.card}
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
61-
<h2>
62-
Learn <span>-&gt;</span>
63-
</h2>
64-
<p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
65-
</a>
46+
const handleDelete = (id) => {
47+
// Logic to delete the menu item
48+
console.log("Delete item with id:", id);
49+
setMenuItems((items) => items.filter((item) => item.id !== id));
50+
};
6651

67-
<a
68-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
69-
className={styles.card}
70-
target="_blank"
71-
rel="noopener noreferrer"
72-
>
73-
<h2>
74-
Templates <span>-&gt;</span>
75-
</h2>
76-
<p>Explore the Next.js 13 playground.</p>
77-
</a>
52+
console.log(menuItems);
7853

79-
<a
80-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
81-
className={styles.card}
82-
target="_blank"
83-
rel="noopener noreferrer"
84-
>
85-
<h2>
86-
Deploy <span>-&gt;</span>
87-
</h2>
88-
<p>
89-
Instantly deploy your Next.js site to a shareable URL with Vercel.
90-
</p>
91-
</a>
92-
</div>
54+
return (
55+
<main className="menu-container">
56+
{!!menuItems ? (
57+
menuItems.map((item) => (
58+
<MenuItem
59+
key={item.id}
60+
id={item.id}
61+
name={item.name}
62+
price={item.price}
63+
onEdit={undefined}
64+
onDelete={handleDelete}
65+
/>
66+
))
67+
) : (
68+
<p>Loading</p>
69+
)}
9370
</main>
94-
)
71+
);
9572
}

0 commit comments

Comments
 (0)