updated

Author: webmasterdevlin

chapter-6/src/services/saleService.ts

@@ -1,5 +1,5 @@
-import api, { EndPoints } from '../api/axios';
-import { SaleType } from '../models/sale-type';
+import api, { EndPoints } from 'api/axios';
+import { SaleType } from 'models/sale-type';
 
 export async function getSalesAxios() {
   return await api.get<SaleType[]>(EndPoints.sales);

chapter-7/src/app/layouts/dashboard-layout/dashboard-sidebar-navigation.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
@@ -7,19 +7,31 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import SettingsIcon from '@material-ui/icons/Settings';
-import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import Toolbar from '@material-ui/core/Toolbar';
 import { useRouteMatch } from 'react-router';
-import { Divider, ListSubheader } from '@material-ui/core';
+import { Collapse, Divider, ListSubheader } from '@material-ui/core';
 
-import { PieChart as PieChartIcon } from 'react-feather';
+import {
+  PieChart as PieChartIcon,
+  ShoppingCart as ShoppingCartIcon,
+  ChevronUp as ChevronUpIcon,
+  ChevronDown as ChevronDownIcon,
+  List as ListIcon,
+  FilePlus as FilePlusIcon,
+  LogOut as LogOutIcon,
+} from 'react-feather';
 
 const DashboardSidebarNavigation = () => {
   const classes = useStyles();
   const { url } = useRouteMatch();
+  const [open, setOpen] = useState(false);
 
   useEffect(() => {}, []);
 
+  const handleClick = () => {
+    setOpen(!open);
+  };
+
   return (
     <>
       <div className={classes.root}>
@@ -51,18 +63,40 @@ const DashboardSidebarNavigation = () => {
                   <ListItemText primary={'Dashboard'} />
                 </ListItem>
               </Link>
-              <Link className={classes.link} to={`${url}/settings-and-privacy`}>
-                <ListItem button>
-                  <ListItemIcon>
-                    <SettingsIcon />
-                  </ListItemIcon>
-                  <ListItemText primary={'settings and privacy'} />
-                </ListItem>
-              </Link>
+
+              <ListSubheader>Management</ListSubheader>
+              <ListItem button onClick={handleClick}>
+                <ListItemIcon>
+                  <ShoppingCartIcon />
+                </ListItemIcon>
+                <ListItemText primary="Products" />
+                {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+              </ListItem>
+              <Collapse in={open} timeout="auto" unmountOnExit>
+                <List component="div" disablePadding>
+                  <Link className={classes.link} to={`${url}/list-products`}>
+                    <ListItem button className={classes.nested}>
+                      <ListItemIcon>
+                        <ListIcon />
+                      </ListItemIcon>
+                      <ListItemText primary="List Products" />
+                    </ListItem>
+                  </Link>
+                  <Link className={classes.link} to={`${url}/create-product`}>
+                    <ListItem button className={classes.nested}>
+                      <ListItemIcon>
+                        <FilePlusIcon />
+                      </ListItemIcon>
+                      <ListItemText primary="Create Product" />
+                    </ListItem>
+                  </Link>
+                </List>
+              </Collapse>
+
               <a className={classes.link} href={'/'}>
                 <ListItem button>
                   <ListItemIcon>
-                    <ExitToAppIcon />
+                    <LogOutIcon />
                   </ListItemIcon>
                   <ListItemText primary={'logout'} />
                 </ListItem>
@@ -106,5 +140,8 @@ const useStyles = makeStyles(theme =>
       textDecoration: 'none',
       color: 'inherit',
     },
+    nested: {
+      paddingLeft: theme.spacing(4),
+    },
   }),
 );

chapter-7/src/app/routes.tsx

@@ -32,9 +32,16 @@ export const Routes = () => {
                   exact
                 />
                 <Route
-                  path={path + '/settings-and-privacy'}
+                  path={path + '/list-products'}
                   component={lazy(
-                    () => import('./views/dashboard/settings-and-privacy'),
+                    () => import('./views/dashboard/product/ProductListView'),
+                  )}
+                  exact
+                />
+                <Route
+                  path={path + '/create-product'}
+                  component={lazy(
+                    () => import('./views/dashboard/product/ProductCreateView'),
                   )}
                   exact
                 />

chapter-7/src/app/views/dashboard/product/ProductCreateView/Header.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const Header = () => {
+  const classes = useStyles();
+
+  return <h1>Header works!</h1>;
+};
+
+const useStyles = makeStyles(() => ({}));
+
+export default Header;

chapter-7/src/app/views/dashboard/product/ProductCreateView/ProductCreateForm.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const ProductCreateForm = () => {
+  const classes = useStyles();
+
+  return <h1>ProductCreateForm works!</h1>;
+};
+
+const useStyles = makeStyles(() => ({}));
+
+export default ProductCreateForm;

chapter-7/src/app/views/dashboard/product/ProductCreateView/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Container, makeStyles } from '@material-ui/core';
+
+import Header from './Header';
+import ProductCreateForm from './ProductCreateForm';
+
+const ProductCreateView = () => {
+  const classes = useStyles();
+
+  return (
+    <Container>
+      <Header />
+      <ProductCreateForm />
+    </Container>
+  );
+};
+
+const useStyles = makeStyles(theme => ({}));
+
+export default ProductCreateView;

chapter-7/src/app/views/dashboard/product/ProductListView/Header.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const Header = () => {
+  const classes = useStyles();
+
+  return <h1>Header works!</h1>;
+};
+
+const useStyles = makeStyles(() => ({}));
+
+export default Header;

chapter-7/src/app/views/dashboard/product/ProductListView/Results.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const Results = () => {
+  const classes = useStyles();
+
+  return <h1>Results works!</h1>;
+};
+
+const useStyles = makeStyles(() => ({}));
+
+export default Results;

chapter-7/src/app/views/dashboard/product/ProductListView/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Container, makeStyles } from '@material-ui/core';
+
+import Header from './Header';
+import Results from './Results';
+
+const ProductListView = () => {
+  const classes = useStyles();
+
+  return (
+    <Container>
+      <Header />
+      <Results />
+    </Container>
+  );
+};
+
+const useStyles = makeStyles(theme => ({}));
+
+export default ProductListView;

chapter-7/src/app/views/dashboard/settings-and-privacy.tsx

@@ -0,0 +1,25 @@
+export type InventoryType = 'in_stock' | 'limited' | 'out_of_stock';
+
+export type ProductType = {
+  id: string;
+  attributes: string[];
+  category: string;
+  createdAt: string | number;
+  currency: string;
+  image: string | null;
+  inventoryType: InventoryType;
+  isAvailable: boolean;
+  isShippable: boolean;
+  name: string;
+  price: number;
+  quantity: number;
+  updatedAt: string | number;
+  variants: number;
+  description: string;
+  images: string[];
+  includesTaxes: boolean;
+  isTaxable: boolean;
+  productCode: '';
+  productSku: '';
+  salePrice: '';
+};