Add router to sidebar (CodeForPoznan#70) (CodeForPoznan#137)

* Add simple routing structure (CodeForPoznan#70)

* Fix displaying icon on Dashboard

* Change routes for rending single component (CodeForPoznan#70)

* Move ProgressBar into Form (CodeForPoznan#70)

* Create dump components to render another page (CodeForPoznan#70)

* Change Navigation with using routes and add its style (CodeForPoznan#70)

* Change routes object into array - CR amendments (CodeForPoznan#70)

.babelrc

@@ -5,6 +5,7 @@
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-syntax-dynamic-import",
     [
       "@babel/plugin-transform-runtime",
       {

package.json

@@ -36,6 +36,7 @@
     "prop-types": "^15.7.2",
     "react": "16.8.6",
     "react-dom": "16.8.6",
+    "react-router-dom": "^5.1.2",
     "react-final-form": "^6.3.3",
     "react-final-form-arrays": "^3.1.1",
     "sequelize": "5.21.2",
@@ -46,11 +47,13 @@
     "@babel/core": "^7.5.5",
     "@babel/node": "^7.5.5",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
-    "@testing-library/react": "^9.3.2",
+    "@loadable/component": "^5.12.0",
     "@svgr/webpack": "^4.3.3",
+    "@testing-library/react": "^9.3.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "^24.9.0",

src/components/Dashboard/Children/Children.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Children = () => <div>Szukajka dzieci</div>;
+
+export default Children;

src/components/Dashboard/Dashboard.js

@@ -1,17 +1,26 @@
 import React from "react";
+import { Route, withRouter, Switch } from "react-router-dom";
 import styles from "./Dashboard.scss";
-import ProgressBar from "./ProgressBar/ProgressBar";
-import FormSteps from "./Form/FormSteps";
+import routes from "../../routing/routes";
 
 const Dashboard = () => {
   return (
     <div className={styles.Dashboard}>
       <div className={styles.Wrapper}>
-        <ProgressBar />
-        <FormSteps />
+        <Switch>
+          {routes.map((route, index) => (
+            <Route
+              key={index}
+              index={route.id}
+              path={route.path}
+              render={() => route.component}
+              exact={route.exact}
+            />
+          ))}
+        </Switch>
       </div>
     </div>
   );
 };
 
-export default Dashboard;
+export default withRouter(Dashboard);

src/components/Dashboard/Form/DocumentForm.js

@@ -4,6 +4,7 @@ import { Form } from "react-final-form";
 import styles from "./DocumentForm.scss";
 import arrayMutators from "final-form-arrays";
 import PropTypes from "prop-types";
+import ProgressBar from "../ProgressBar/ProgressBar";
 import Button from "../../Button/Button";
 
 export default class DocumentForm extends Component {
@@ -51,31 +52,34 @@ export default class DocumentForm extends Component {
     const isLastPage = page === React.Children.count(children) - 1;
 
     return (
-      <Form
-        mutators={{
-          ...arrayMutators
-        }}
-        initialValues={values}
-        validate={this.validate}
-        onSubmit={this.handleSubmit}
-      >
-        {({ handleSubmit, submitting }) => (
-          <form className={styles.Form} onSubmit={handleSubmit}>
-            <FormHeader page={this.state.page} />
-            {activePage}
-            <div className={styles.buttons}>
-              {page > 0 && <Button onClick={this.previous}>wróć</Button>}
-              {isLastPage ? (
-                <Button type="submit" disabled={submitting}>
-                  utwórz dokument
-                </Button>
-              ) : (
-                <Button type="submit">dalej</Button>
-              )}
-            </div>
-          </form>
-        )}
-      </Form>
+      <React.Fragment>
+        <ProgressBar />
+        <Form
+          mutators={{
+            ...arrayMutators
+          }}
+          initialValues={values}
+          validate={this.validate}
+          onSubmit={this.handleSubmit}
+        >
+          {({ handleSubmit, submitting }) => (
+            <form className={styles.Form} onSubmit={handleSubmit}>
+              <FormHeader page={this.state.page} />
+              {activePage}
+              <div className={styles.buttons}>
+                {page > 0 && <Button onClick={this.previous}>wróć</Button>}
+                {isLastPage ? (
+                  <Button type="submit" disabled={submitting}>
+                    utwórz dokument
+                  </Button>
+                ) : (
+                  <Button type="submit">dalej</Button>
+                )}
+              </div>
+            </form>
+          )}
+        </Form>
+      </React.Fragment>
     );
   }
 }

src/components/Dashboard/Form/FormHeader/FormHeader.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./FormHeader.scss";
 import PropTypes from "prop-types";
-import headerIcon from "../../../../assets/icons/profile.svg";
+import HeaderIcon from "../../../../assets/icons/profile.svg";
 
 const switchHeading = page => {
   let heading = "";
@@ -26,10 +26,9 @@ const switchHeading = page => {
 
 const FormHeader = ({ page }) => {
   const heading = switchHeading(page);
-
   return (
     <div className={styles.FormHeader}>
-      <img className={styles.Icon} src={headerIcon} />
+      <HeaderIcon />
       <h2 className={styles.Heading}>
         <span className={styles.Underline}>{heading}</span>
       </h2>

src/components/Dashboard/Form/FormHeader/FormHeader.scss

@@ -17,8 +17,3 @@
 .Underline {
   border-bottom: 3px solid $orange;
 }
-
-.Icon {
-  width: 76px;
-  height: auto;
-}

src/components/Dashboard/Home/Home.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Home = () => <div>Strona startowa :) </div>;
+
+export default Home;

src/components/Dashboard/Statements/Statements.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Statements = () => <div>Szukajka orzeczeń</div>;
+
+export default Statements;

src/components/Layout.js

@@ -1,17 +1,24 @@
 import React from "react";
+import { BrowserRouter as Router } from "react-router-dom";
 import styles from "./Layout.scss";
 import Header from "./Header/Header";
 import Dashboard from "./Dashboard/Dashboard";
 import Sidebar from "./Sidebar/Sidebar";
+import Navigation from "./Navigation/Navigation";
 
 const Layout = () => {
   return (
-    <div className={styles.Layout}>
-      <Sidebar>
-        <Header />
-      </Sidebar>
-      <Dashboard />
-    </div>
+    <Router>
+      <div className={styles.Layout}>
+        <Sidebar>
+          <React.Fragment>
+            <Header />
+            <Navigation />
+          </React.Fragment>
+        </Sidebar>
+        <Dashboard />
+      </div>
+    </Router>
   );
 };