Refatoração para SPA

.prettierrc

@@ -1,8 +1,8 @@
 {
-    "arrowParens": always,
-    "singleQuote": true,
-    "semi": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "printWidth": 110
+  "arrowParens": "always",
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 110
 }

src/components/header/PageHeader.css

@@ -1,6 +1,3 @@
-.page-header {
-}
-
 @media (min-width: 801px) {
   .header-toggle-button {
     display: none;

src/index.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './components/app/App';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import DefaultLayout from './layouts/default';
 
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// Descomentar para ativar hot reload
-
-// if (module.hot)
-//   module.hot.accept();
+ReactDOM.render(
+  <BrowserRouter>
+    <Switch>
+      <Route path="/" render={(props) => <DefaultLayout {...props} />} />
+    </Switch>
+  </BrowserRouter>,
+  document.getElementById('root')
+);

src/layouts/default/index.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import PageHeader from '../../components/header/PageHeader';
+import PageSideNav from '../../components/sidenav/PageSideNav';
+import Backdrop from '../../components/sidenav/Backdrop';
+import routes from '../../routes';
+
+function DefaultLayout() {
+  const [sideDrawerOpen, setSideDrawerOpen] = useState(false);
+
+  function handleSideOpen() {
+    setSideDrawerOpen((prev) => !prev);
+  }
+
+  function handleBackdropClick() {
+    setSideDrawerOpen(false);
+  }
+
+  const getRoutes = (routes) =>
+    routes.map((route, index) =>
+      route.layout === '/default' ? <Route path={route.path} component={route.component} key={index} /> : null
+    );
+  return (
+    <>
+      <PageSideNav shown={sideDrawerOpen} />
+      <main>
+        <PageHeader drawerClickHandler={handleSideOpen} />
+        <Backdrop shown={sideDrawerOpen} click={handleBackdropClick} />
+        <Switch>{getRoutes(routes)}</Switch>
+      </main>
+      {/* Footer aqui */}
+    </>
+  );
+}
+
+export default DefaultLayout;

src/pages/main/Main.js

@@ -1,31 +1,12 @@
-import React, { useState } from 'react';
-import PageSideNav from '../../components/sidenav/PageSideNav';
-import PageHeader from '../../components/header/PageHeader';
+import React from 'react';
 import MainField from '../../components/content/main/MainField';
-import Backdrop from '../../components/sidenav/Backdrop';
 import './Main.css';
 
 const Main = () => {
-  const [sideDrawerOpen, setSideDrawerOpen] = useState(false);
-
-  const handleDrawerClick = () => {
-    setSideDrawerOpen(!sideDrawerOpen);
-  };
-
-  const handleBackdropClick = () => {
-    setSideDrawerOpen(false);
-  };
-
   return (
-    <main className="Main">
-      <PageSideNav shown={sideDrawerOpen} />
-      <section className="page">
-        <PageHeader drawerClickHandler={handleDrawerClick} />
-
-        <Backdrop shown={sideDrawerOpen} click={handleBackdropClick} />
-        <MainField />
-      </section>
-    </main>
+    <section className="page">
+      <MainField />
+    </section>
   );
 };
 

src/routes.js

@@ -1,14 +1,13 @@
-import React from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
 import Main from './pages/main/Main';
 
-const Routes = () => {
-  return (
-    <Router>
-      {/* Aqui devem estar as rotas */}
-      <Route path="/" exact component={Main} />
-    </Router>
-  );
-};
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Main,
+    layout: '/default',
+    showOnSidebar: false,
+  },
+];
 
-export default Routes;
+export default routes;

yarn.lock

@@ -5783,12 +5783,12 @@ jsx-ast-utils@^2.0.1, jsx-ast-utils@^2.1.0, jsx-ast-utils@^2.2.1:
     array-includes "^3.0.3"
     object.assign "^4.1.0"
 
-katex@^0.10.2:
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/katex/-/katex-0.10.2.tgz#39973edbb65eda5b6f9e7f41648781e557dd4932"
-  integrity sha512-cQOmyIRoMloCoSIOZ1+gEwsksdJZ1EW4SWm3QzxSza/QsnZr6D4U1V9S4q+B/OLm2OQ8TCBecQ8MaIfnScI7cw==
+katex@0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.9.0.tgz#26a7d082c21d53725422d2d71da9b2d8455fbd4a"
+  integrity sha512-lp3x90LT1tDZBW2tjLheJ98wmRMRjUHwk4QpaswT9bhqoQZ+XA4cPcjcQBxgOQNwaOSt6ZeL/a6GKQ1of3LFxQ==
   dependencies:
-    commander "^2.19.0"
+    match-at "^0.1.1"
 
 killable@^1.0.0:
   version "1.0.1"
@@ -6045,6 +6045,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+match-at@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/match-at/-/match-at-0.1.1.tgz#25d040d291777704d5e6556bbb79230ec2de0540"
+  integrity sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"