Layout rerender fix

Author: modularcoder

docs/references.md

@@ -14,6 +14,10 @@ https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/
 React with Redux and hooks
 https://medium.com/@koss_lebedev/rematch-with-hooks-50a8380c46e4
 
+Layouts
+https://stackoverflow.com/questions/33996484/using-multiple-layouts-for-react-router-components
+https://gist.github.com/avinmathew/e82fe7e757b20cb337d5219e0ab8dc2c
+
 #### TypeScript
 
 Typescript Book:

src/AppRoute.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Route } from 'react-router-dom'
+
+const AppRoute = ({ component: Component, layout: Layout, ...rest }: any) => (
+  <Route
+    {...rest}
+    render={props => {
+      if (Layout) {
+        return (
+          <Layout>
+            <Component {...props} />
+          </Layout>
+        )
+      } else {
+        return <Component {...props} />
+      }
+    }}
+  />
+)
+
+export default AppRoute

src/AppRouter.tsx

@@ -13,6 +13,9 @@ import config from './_config'
 import authService from './_services/authService'
 import { useAppState, useAppStateMethods } from './_state/appState'
 
+import AppRoute from './AppRoute'
+import DashboardLayout from '_layouts/DashboardLayout'
+
 // Import application modules
 import Sales from './SalesModule'
 import Content from './ContentModule'
@@ -41,13 +44,13 @@ const LoggedInRouter = () => {
   return (
     <Switch>
       <Route exact path="/" render={() => <Redirect to="/sales/dashboard" />} />
-      <Route path={`/sales`} component={Sales} />
-      <Route path={`/content`} component={Content} />
-      <Route path={`/admin`} component={Admin} />
-      <Route path={`/profile`} component={Profile} />
-      <Route path={`/account`} component={Organization} />
-      <Route path={`/demo`} component={Demo} />
-      <Route component={NotFound} />
+      <AppRoute path={`/sales`} component={Sales} layout={DashboardLayout} />
+      <AppRoute path={`/content`} component={Content} layout={DashboardLayout} />
+      <AppRoute path={`/admin`} component={Admin} layout={DashboardLayout} />
+      <AppRoute path={`/profile`} component={Profile} layout={DashboardLayout} />
+      <AppRoute path={`/account`} component={Organization} layout={DashboardLayout} />
+      <AppRoute path={`/demo`} component={Demo} layout={DashboardLayout} />
+      <AppRoute component={NotFound} layout={DashboardLayout} />
     </Switch>
   )
 }
@@ -58,8 +61,10 @@ const AppRouterComponent: React.ComponentType<any> =
 
 const AppRouter: React.FC = () => (
   <AppRouterComponent>
-    <Route path="/auth" component={Auth} />
-    <PrivateRoute path="/" component={LoggedInRouter} />
+    <Switch>
+      <Route path="/auth" component={Auth} />
+      <PrivateRoute path="/" component={LoggedInRouter} />
+    </Switch>
   </AppRouterComponent>
 )
 

src/DemoModule/Demo.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Switch, Route, RouteComponentProps } from 'react-router-dom'
 
+import AppRoute from 'AppRoute'
 import DashboardLayout from '_layouts/DashboardLayout'
 
 import Features from './Features'
@@ -12,14 +13,12 @@ export interface DemoProps extends RouteComponentProps {}
 
 const Demo: React.FC<DemoProps> = ({ match }) => {
   return (
-    <DashboardLayout>
-      <Switch>
-        <Route path={`${match.url}/features`} component={Features} />
-        <Route path={`${match.url}/docs`} component={Docs} />
-        <Route path={`${match.url}/supporters`} component={Supporters} />
-        <Route path={`${match.url}/discuss`} component={Discuss} />
-      </Switch>
-    </DashboardLayout>
+    <Switch>
+      <AppRoute path={`${match.url}/features`} component={Features} />
+      <AppRoute path={`${match.url}/docs`} component={Docs} />
+      <AppRoute path={`${match.url}/supporters`} component={Supporters} />
+      <AppRoute path={`${match.url}/discuss`} component={Discuss} />
+    </Switch>
   )
 }
 

src/EmptyModule/_api/index.ts

@@ -0,0 +1 @@
+export default {}

src/EmptyModule/index.tsx

@@ -0,0 +1 @@
+export default {}

src/SalesModule/Customers/Customers.tsx

@@ -2,14 +2,14 @@ import React from 'react'
 // import clsx from 'clsx'
 import { makeStyles } from '@material-ui/core/styles'
 
+// import DashboardLayout from '_layouts/DashboardLayout'
+// import { withDashboardLayout } from '_layouts'
 import PageContainer from '../../_common/PageContainer'
-
-// import Grid from '@material-ui/core/Grid'
 import Paper from '@material-ui/core/Paper'
 
 import { Theme } from '_theme'
 
-export default function Customers() {
+const Customers = () => {
   const classes = useStyles()
 
   return (
@@ -20,3 +20,5 @@ export default function Customers() {
 }
 
 const useStyles = makeStyles((theme: Theme) => ({}))
+
+export default Customers

src/SalesModule/Orders/Orders.tsx

@@ -6,6 +6,8 @@ import Button from '@material-ui/core/Button'
 
 // import { Theme } from '_theme'
 
+// import DashboardLayout from '_layouts/DashboardLayout'
+// import { withDashboardLayout } from '_layouts'
 import PageContainer from '../../_common/PageContainer'
 import PageToolbar from '../../_common/PageToolbar'
 

src/SalesModule/Overview/Overview.tsx

@@ -5,6 +5,7 @@ import moment from 'moment'
 
 import Grid from '@material-ui/core/Grid'
 
+// import { withDashboardLayout } from '_layouts'
 import PageContainer from '../../_common/PageContainer'
 import PageToolbar from '../../_common/PageToolbar'
 
@@ -14,7 +15,7 @@ import SalesDashboardActions from './OverviewActions'
 import OrdersHistory from './OrdersHistory'
 import OrdersLatest from './OrdersLatest'
 
-export default function SalesDashboard() {
+const SalesDashboard = () => {
   const [filter, setFilter] = useState({
     dateFrom: moment()
       .subtract(14, 'day')
@@ -59,3 +60,5 @@ export default function SalesDashboard() {
 //     paddingBottom: theme.spacing(4),
 //   },
 // }))
+
+export default SalesDashboard

src/SalesModule/Sales.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Switch, Route, RouteComponentProps } from 'react-router-dom'
 
+import AppRoute from 'AppRoute'
 import DashboardLayout from '_layouts/DashboardLayout'
 import Overview from './Overview'
 import Orders from './Orders'
@@ -10,13 +11,15 @@ export interface SalesProps extends RouteComponentProps {}
 
 const Sales = ({ match }: SalesProps) => {
   return (
-    <DashboardLayout>
-      <Switch>
-        <Route path={`${match.url}/dashboard`} component={Overview} />
-        <Route path={`${match.url}/orders`} component={Orders} />
-        <Route path={`${match.url}/customers`} component={Customers} />
-      </Switch>
-    </DashboardLayout>
+    <Switch>
+      {/* <Route path={`${match.url}/dashboard`} component={Overview} /> */}
+      {/* <Route path={`${match.url}/orders`} component={Orders} /> */}
+      {/* <Route path={`${match.url}/customers`} component={Customers} /> */}
+
+      <AppRoute path={`${match.url}/dashboard`} component={Overview} />
+      <AppRoute path={`${match.url}/orders`} component={Orders} />
+      <AppRoute path={`${match.url}/customers`} component={Customers} />
+    </Switch>
   )
 }