Merge pull request #65 from CMU-17-356/ananyabhat_customer_menu

Linked customer menu to cart page
CMU-17-356 · Feb 28, 2022 · 8d0aba1 · 8d0aba1
2 parents c48e3c6 + 9538c77
commit 8d0aba1
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 6 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -4,10 +4,11 @@ import Home from './components/Home/Home';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from "./components/Theme/Theme";
-import Orders from './components/Dashboard/Orders';
 
 import ResponsiveAppBar from './components/Home/ResponsiveAppBar';
+import CustomerMenu from './components/Customer/CustomerMenu';
 import TrackOrder from './components/Customer/TrackOrder';
+import Cart from './components/Customer/Cart';
 import Dashboard from './components/Dashboard/Dashboard';
 
 import {
@@ -26,7 +27,9 @@ function App() {
         <CssBaseline />
         <ResponsiveAppBar></ResponsiveAppBar>
         <Routes>
-          <Route path="/customer" element={<TrackOrder />} />
+          <Route path="/customer" element={<CustomerMenu />} />
+          <Route path="/order" element={<TrackOrder />} />
+          <Route path="/cart" element={<Cart />} />
           <Route path="/employee" element={<Dashboard />} />
           <Route path="" element={<Home />} />
         </Routes>

diff --git a/frontend/src/components/Customer/Cart.tsx b/frontend/src/components/Customer/Cart.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Button from '@mui/material/Button';
+import RestaurantMenuTwoToneIcon from '@mui/icons-material/RestaurantMenuTwoTone';import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import CssBaseline from '@mui/material/CssBaseline';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+// import Link from '@mui/material/Link';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { Link } from 'react-router-dom';
+
+function Copyright() {
+    return (
+      <Typography variant="body2" color="text.secondary" align="center">
+        {'Copyright © '}
+        <Link color="inherit" to="https://mui.com/">
+          Dronuts Group 3
+        </Link>{' '}
+        {new Date().getFullYear()}
+        {'.'}
+      </Typography>
+    );
+  }
+
+  export default function Cart() {
+    return (
+      <main>
+          <Copyright />
+      </main>
+    );
+}
diff --git a/frontend/src/components/Customer/CustomerMenu.tsx b/frontend/src/components/Customer/CustomerMenu.tsx
@@ -12,14 +12,17 @@ import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
-import Link from '@mui/material/Link';
+// import Link from '@mui/material/Link';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { Link } from 'react-router-dom';
+
+
 
 function Copyright() {
   return (
     <Typography variant="body2" color="text.secondary" align="center">
       {'Copyright © '}
-      <Link color="inherit" href="https://mui.com/">
+      <Link color="inherit" to="https://mui.com/">
         Dronuts Group 3
       </Link>{' '}
       {new Date().getFullYear()}
@@ -29,6 +32,8 @@ function Copyright() {
 }
 
 const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+const donuts = ["Glazed", "Chocolate", "Boston Kreme", "Strawberry",
+"Sprinkles", "Apple Krumb", "Powdered", "Krueller", "Munchkin"]
 
 const theme = createTheme();
 
@@ -60,14 +65,14 @@ export default function CustomerMenu() {
                   />
                   <CardContent sx={{ flexGrow: 1 }}>
                     <Typography gutterBottom variant="h5" component="h2">
-                      Donut Name
+                      {(donuts[card-1])}
                     </Typography>
                     <Typography>
                       This is a donut card. The donut's description will go here.
                     </Typography>
                   </CardContent>
                   <CardActions>
-                    <Button size="small">Add to Cart</Button>
+                    <Button component={Link} to={'/cart'} size="small">Add to Cart</Button>
                   </CardActions>
                 </Card>
               </Grid>