Pull from master to local branch

client/core/Burger.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import Menu from '@material-ui/icons/Menu';
+import IconButton from '@material-ui/core/IconButton';
+import NavItems from './BurgerNav'
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+
+const BurgerMenu = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const isMobile = useMediaQuery('(max-width: 700px)');
+
+    const toggleMenu = () => {
+      setIsOpen(!isOpen);
+    };
+
+    return (
+      <>
+      {isMobile && (
+      <span>
+        <IconButton aria-label="Menu" onClick={toggleMenu} style={{color: 'white'}}>
+          <Menu/>
+        </IconButton>
+        {isOpen && (
+            <NavItems/>
+        )}
+      </span>
+      )}
+      </>  
+    );
+  };
+
+  export default BurgerMenu;

client/core/BurgerNav.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import IconButton from '@material-ui/core/IconButton'
+import HomeIcon from '@material-ui/icons/Home'
+import Button from '@material-ui/core/Button'
+import auth from './../auth/auth-helper'
+import {Link, withRouter} from 'react-router-dom'
+import CartIcon from '@material-ui/icons/ShoppingCart'
+import Badge from '@material-ui/core/Badge'
+import cart from './../cart/cart-helper'
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+    menu: {
+      position: 'fixed',
+      top: theme.spacing(8), 
+      right: theme.spacing(3),
+      zIndex: theme.zIndex.drawer + 1,
+      backgroundColor: '#9C89EB', 
+      borderRadius: '15px',
+      padding: '10px'
+    }
+}));
+
+const isActive = (history, path) => {
+    if (history.location.pathname == path)
+      return {color: '#bef67a'}
+    else
+      return {color: '#ffffff'}
+  }
+  const isPartActive = (history, path) => {
+    if (history.location.pathname.includes(path))
+      return {color: '#bef67a'}
+    else
+      return {color: '#ffffff'}
+  }
+
+const NavItems = withRouter(({history}) => {
+    const classes = useStyles();
+    return (
+    <div style={{'text-align': 'right'}}>
+    <div className={classes.menu}>
+        <Link to="/">
+          <IconButton aria-label="Home" style={isActive(history, "/")}>
+            <HomeIcon/>
+          </IconButton>
+        </Link>
+        <br></br>
+        <Link to="/users">
+          <Button style={isActive(history, "/users")}>Users</Button>
+        </Link>
+        <br></br>
+        <Link to="/shops/all">
+          <Button style={isActive(history, "/shops/all")}>All Shops</Button>
+        </Link>
+        <br></br>
+        <Link to="/cart">
+          <Button style={isActive(history, "/cart")}>
+            Cart
+            <Badge color="secondary" invisible={false} badgeContent={cart.itemTotal()} style={{'marginLeft': '7px'}}>
+              <CartIcon />
+            </Badge>
+          </Button>
+        </Link>
+
+        {
+            !auth.isAuthenticated() && (<span>
+            <br></br>  
+            <Link to="/signup">
+                <Button style={isActive(history, "/signup")}>Sign up
+                </Button>
+            </Link>
+            <br></br>
+            <Link to="/signin">
+                <Button style={isActive(history, "/signin")}>Sign In
+                </Button>
+            </Link>
+
+            </span>)
+        }
+        {
+            auth.isAuthenticated() && (<span>
+            {auth.isAuthenticated().user.seller && (<><br></br><Link to="/seller/shops"><Button style={isPartActive(history, "/seller/")}>My Shops</Button></Link></>)}
+            <br></br>  
+            <Link to={"/user/" + auth.isAuthenticated().user._id}>
+                <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button>
+            </Link>
+            <br></br> 
+            <Button color="inherit" onClick={() => {
+                auth.clearJWT(() => history.push('/'))
+                }}>Sign out</Button>
+            </span>)
+        }
+        </div>
+    </div>
+    )
+})
+
+export default NavItems;

client/core/Home.jsx

@@ -30,6 +30,12 @@ return (
   <Typography variant="h3" className={classes.title}>Home Page</Typography>
   <Typography variant="body2" component="p"> 
 Welcome to SmartWeb Application
+     <br />
+<br />
+SmartWeb is Smart Web is a online marketplace designed to connect skilled freelancers  <br /> 
+offering a range of internet services with individuals and businesses seeking expert solutions. <br />
+<br />Whether you're a web developer, digital marketer, graphic designer, or SEO specialist, <br />
+Smart Web provides a platform to showcase your talents and find meaningful projects.
 </Typography></center>
 <CardMedia className={classes.media}
 image={onlineshopping3} title="online shopping"/>

client/core/Menu.jsx

@@ -1,16 +1,18 @@
-import React from 'react'
+import React, { useState } from 'react'
 import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
 import Typography from '@material-ui/core/Typography'
 import IconButton from '@material-ui/core/IconButton'
 import HomeIcon from '@material-ui/icons/Home'
+import BurgerMenu from './Burger';
 import Button from '@material-ui/core/Button'
 import auth from './../auth/auth-helper'
 import {Link, withRouter} from 'react-router-dom'
 import CartIcon from '@material-ui/icons/ShoppingCart'
 import Badge from '@material-ui/core/Badge'
 import cart from './../cart/cart-helper'
 import logo from './../assets/images/logo1.png';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 const isActive = (history, path) => {
   if (history.location.pathname == path)
@@ -25,15 +27,18 @@ const isPartActive = (history, path) => {
     return {color: '#ffffff'}
 }
 
-
-const Menu = withRouter(({history}) => (
+const Menu = withRouter(({history}) => {
+  const isMobile = useMediaQuery('(max-width: 700px)');
+  return (
   <AppBar position="static"style={{ backgroundColor: '#9C89EB', borderRadius: '15px' }}>
     <Toolbar>
       <Typography variant="h6" color="inherit">
 
       </Typography>
 
       <img src={logo} alt="Logo" style={{marginRight: '10px', height: '75px', width: 'auto' }}/>
+      {!isMobile && (
+      <>
       <div>
         <Link to="/">
           <IconButton aria-label="Home" style={isActive(history, "/")}>
@@ -49,13 +54,14 @@ const Menu = withRouter(({history}) => (
         <Link to="/cart">
           <Button style={isActive(history, "/cart")}>
             Cart
-            <Badge color="secondary" invisible={false} badgeContent={"e"} style={{'marginLeft': '7px'}}>
+            <Badge color="secondary" invisible={false} badgeContent={cart.itemTotal()} style={{'marginLeft': '7px'}}>
               <CartIcon />
             </Badge>
           </Button>
         </Link>      
       </div>
       <div style={{'position':'absolute', 'right': '10px'}}><span style={{'float': 'right'}}>
+
       {
         !auth.isAuthenticated() && (<span>
           <Link to="/signup">
@@ -66,8 +72,10 @@ const Menu = withRouter(({history}) => (
             <Button style={isActive(history, "/signin")}>Sign In
             </Button>
           </Link>
+
         </span>)
       }
+
       {
         auth.isAuthenticated() && (<span>
           {auth.isAuthenticated().user.seller && (<Link to="/seller/shops"><Button style={isPartActive(history, "/seller/")}>My Shops</Button></Link>)}
@@ -79,9 +87,17 @@ const Menu = withRouter(({history}) => (
             }}>Sign out</Button>
         </span>)
       }
+
+
       </span></div>
+      </>
+      )}
+      <div style={{'position':'absolute', 'right': '10px'}}><span style={{'float': 'right'}}>
+        <BurgerMenu/>
+      </span>
+      </div>
     </Toolbar>
   </AppBar>
-))
+)})
 
 export default Menu

client/package.json

@@ -18,6 +18,7 @@
     "bcrypt": "^5.1.0",
     "crypto": "^1.0.1",
     "global": "^4.4.0",
+    "query-string": "6.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-loader": "^4.13.1",

client/user/Users.jsx

@@ -1,30 +1,98 @@
-import React from 'react';
-import { useState, useStyles, useEffect } from 'react';
-import {Paper, List, Link, ListItem, ListItemAvatar, ListItemSecondaryAction, ListItemText, Avatar, IconButton, Typography } from '@material-ui/core';
-import { ArrowForward, Person } from '@material-ui/icons';
-import list from 'react';
 
+// import React, { useState, useEffect } from 'react';
+// import { Paper, List, ListItem, ListItemAvatar, ListItemSecondaryAction, ListItemText, Avatar, IconButton, Typography, makeStyles } from '@material-ui/core';
+// import { ArrowForward, Person } from '@material-ui/icons';
+// import { Link as RouterLink } from 'react-router-dom'; 
+// import { list } from './api-user'
+
+// const useStyles = makeStyles((theme) => ({
+//   root: {
+
+//   },
+//   title: {
+
+//   },
+// }));
+
+// export default function Users() {
+//   const [users, setUsers] = useState([])
+// useEffect(() => {
+//   const abortController = new AbortController()
+//   const signal = abortController.signal
+//   list(signal).then((data) => {
+// if (data && data.error) { 
+// console.log(data.error)
+// } else { 
+//   console.log(data)
+// setUsers(data)
+// } 
+// })
+// return function cleanup(){ 
+// abortController.abort()
+// } 
+// }, [])
+
+
+//   const classes = useStyles()
+// return (
+// <Paper className={classes.root} elevation={4}>
+// <Typography variant="h6" className={classes.title}> 
+// All Users
+// </Typography> 
+// <List dense>
+// {users.map((item, i) => {
+//   return  <Link component={RouterLink} to={"/user/" + item._id} key={i}>
+
+// <ListItem button> 
+// <ListItemAvatar>
+// <Avatar> 
+
+// </Avatar>
+// </ListItemAvatar>
+// <ListItemText primary={item.name}/> 
+// <ListItemSecondaryAction>
+// <IconButton>
+// <ArrowForward/> 
+// </IconButton>
+// </ListItemSecondaryAction> 
+// </ListItem>
+// </Link> 
+// })} 
+// </List>
+// </Paper>
+// )
+// }
+
+import React, { useState, useEffect } from 'react';
+import { Paper, List, ListItem, ListItemAvatar, ListItemSecondaryAction, ListItemText, Avatar, IconButton, Typography, makeStyles } from '@material-ui/core';
+import { ArrowForward, Person } from '@material-ui/icons';
+import { Link } from 'react-router-dom'; 
+import { list } from './api-user'
+const useStyles = makeStyles((theme) => ({
+  root: {
+    // Add your styles here
+  },
+  title: {
+    // Add your styles here
+  },
+}));
 export default function Users() {
   useEffect(() => {
     const abortController = new AbortController();
     const signal = abortController.signal;
-
     list(signal).then((data) => {
       if (data && data.error) {
         console.log(data.error);
       } else {
         setUsers(data);
       };
     });
-
     return function cleanup() {
       abortController.abort();
     };
   }, []);
-
   const [users, setUsers] = useState([]);
   const classes = useStyles();
-
   return (
     <Paper className={classes.root} elevation={4}>
       <Typography variant="h6" className={classes.title}>All Users</Typography>
@@ -37,7 +105,6 @@ export default function Users() {
                           <Person/>
                         </Avatar>
                       </ListItemAvatar>
-
                       <ListItemText primary={item.name}/>
                       <ListItemSecondaryAction>
                         <IconButton>

client/vite.config.js

@@ -23,9 +23,10 @@ server: {
   },
 },
 build: {
-  manifest: true,
-  rollupOptions: {
-    input: "./src/main.jsx",
-  },
+  // manifest: true,
+  // rollupOptions: {
+  //   input: "./src/main.jsx",
+  // },
+  outDir: '../dist/app',
 },
 });