updated

Author: webmasterdevlin

chapter-6/db.json

@@ -0,0 +1,14 @@
+{
+  "sales": [
+    {
+      "id": "sgacus86fov",
+      "name": "This week",
+      "data": [30, 40, 25, 50, 49, 21, 70, 51]
+    },
+    {
+      "id": "saftyaf56",
+      "name": "Last week",
+      "data": [23, 12, 54, 61, 32, 56, 81, 19]
+    }
+  ]
+}

chapter-6/package-lock.json

@@ -24,6 +24,7 @@
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/webpack-env": "1.15.3",
     "@types/yup": "0.29.9",
+    "apexcharts": "3.22.3",
     "axios": "0.21.0",
     "clsx": "1.1.1",
     "cross-env": "7.0.2",
@@ -40,8 +41,10 @@
     "plop": "2.7.4",
     "prettier": "2.2.0",
     "react": "16.13.0",
+    "react-apexcharts": "1.3.7",
     "react-app-polyfill": "1.0.6",
     "react-dom": "16.13.0",
+    "react-feather": "2.0.9",
     "react-helmet-async": "1.0.7",
     "react-i18next": "11.7.3",
     "react-redux": "7.2.2",
@@ -77,7 +80,8 @@
     "lint:fix": "npm run eslint -- --fix src",
     "lint:css": "stylelint src/**/*.css",
     "generate": "cross-env TS_NODE_PROJECT='./internals/ts-node.tsconfig.json' plop --plopfile internals/generators/plopfile.ts",
-    "prettify": "prettier --write"
+    "prettify": "prettier --write",
+    "backend": "json-server --watch db.json --port 5000 --delay=1000"
   },
   "browserslist": {
     "production": [

chapter-6/package.json

@@ -0,0 +1,13 @@
+import axios from 'axios';
+
+/*create an instance of axios with a default base URI when sending HTTP requests*/
+/*JSON Server has CORS Policy by default*/
+export const api = axios.create({
+  baseURL: `http://localhost:5000/`,
+});
+
+export default api;
+
+export const EndPoints = {
+  sales: 'sales',
+};

chapter-6/src/api/axios.ts

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import type { HTMLProps, ReactNode } from 'react';
+import { Helmet } from 'react-helmet-async';
+
+type PageProps = {
+  children?: ReactNode;
+  title?: string;
+} & HTMLProps<HTMLDivElement>;
+
+const Page = forwardRef<HTMLDivElement, PageProps>(
+  ({ children, title = '', ...rest }, ref) => {
+    return (
+      <div ref={ref as any} {...rest}>
+        <Helmet>
+          <title>{title}</title>
+        </Helmet>
+        {children}
+      </div>
+    );
+  },
+);
+
+export default Page;

chapter-6/src/app/components/page.tsx

@@ -6,13 +6,12 @@
  * contain code that should be seen on all pages. (e.g. navigation bar)
  */
 
-import { Container } from '@material-ui/core';
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
-import { Switch, Route, BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 
 import { GlobalStyle } from 'styles/global-styles';
-import NavigationBar from './components/navigation-bar';
+import MainLayout from './layouts/main-layout';
 import { Routes } from './routes';
 
 export function App() {
@@ -24,10 +23,9 @@ export function App() {
       >
         <meta name="description" content="A React Boilerplate application" />
       </Helmet>
-      <NavigationBar />
-      <Container>
+      <MainLayout>
         <Routes />
-      </Container>
+      </MainLayout>
       <GlobalStyle />
     </BrowserRouter>
   );

chapter-6/src/app/index.tsx

@@ -10,6 +10,9 @@ 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 { PieChart as PieChartIcon } from 'react-feather';
 
 const DashboardSidebarNavigation = () => {
   const classes = useStyles();
@@ -36,8 +39,18 @@ const DashboardSidebarNavigation = () => {
               Logo
             </Link>
           </Toolbar>
+          <Divider />
           <div className={classes.drawerContainer}>
             <List>
+              <ListSubheader>Reports</ListSubheader>
+              <Link className={classes.link} to={`${url}`}>
+                <ListItem button>
+                  <ListItemIcon>
+                    <PieChartIcon />
+                  </ListItemIcon>
+                  <ListItemText primary={'Dashboard'} />
+                </ListItem>
+              </Link>
               <Link className={classes.link} to={`${url}/settings-and-privacy`}>
                 <ListItem button>
                   <ListItemIcon>

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import DashboardSidebarNavigation from './dashboard-sidebar-navigation';
 
@@ -8,16 +9,51 @@ type Props = {
 };
 
 const Dashboard = ({ children }: Props) => {
+  const classes = useStyles();
+
   return (
     <Grid
       container
       direction="row"
       justify="flex-start"
       alignItems="flex-start"
     >
-      <DashboardSidebarNavigation /> {children}
+      <DashboardSidebarNavigation />{' '}
+      <div className={classes.wrapper}>
+        <div className={classes.contentContainer}>
+          <div className={classes.content}>{children}</div>
+        </div>
+      </div>
     </Grid>
   );
 };
 
 export default Dashboard;
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    width: '100%',
+  },
+  wrapper: {
+    display: 'flex',
+    flex: '1 1 auto',
+    overflow: 'hidden',
+    paddingTop: 64,
+    [theme.breakpoints.up('lg')]: {
+      paddingLeft: 256,
+    },
+  },
+  contentContainer: {
+    display: 'flex',
+    flex: '1 1 auto',
+    overflow: 'hidden',
+  },
+  content: {
+    flex: '1 1 auto',
+    height: '100%',
+    overflow: 'auto',
+  },
+}));

chapter-6/src/app/layouts/dashboard-layout/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { makeStyles } from '@material-ui/core';
+
+import NavigationBar from './navigation-bar';
+
+type Props = {
+  children?: ReactNode;
+};
+
+const MainLayout = ({ children }: Props) => {
+  const classes = useStyles();
+
+  return (
+    <>
+      <NavigationBar />
+      <div className={classes.root}>
+        <div className={classes.wrapper}>
+          <div className={classes.contentContainer}>
+            <div className={classes.content}>{children}</div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    backgroundColor: theme.palette.background.default,
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    width: '100%',
+  },
+  wrapper: {
+    display: 'flex',
+    flex: '1 1 auto',
+    overflow: 'hidden',
+    paddingTop: 64,
+  },
+  contentContainer: {
+    display: 'flex',
+    flex: '1 1 auto',
+    overflow: 'hidden',
+  },
+  content: {
+    flex: '1 1 auto',
+    height: '100%',
+    overflow: 'auto',
+  },
+}));
+
+export default MainLayout;