Feature/feature router page

src/scripts/components/Layout/Layout.js

@@ -0,0 +1,12 @@
+import React from "react";
+import Sidebar from "../Sidebar/Sidebar";
+import Main from "../Main/Main";
+
+export default function Layout({children}) {
+    return (
+        <div className="app-container">
+            <Sidebar />
+            <Main>{children}</Main>
+        </div>
+    )
+}

src/scripts/components/Main/Main.js

@@ -3,16 +3,16 @@ import Header from "../Header/Header";
 import Step from "../Step/Step";
 import Navbar from "../Navbar/Navbar";
 
-export default function Main() {
+export default function Main({ children }) {
     return (
         <div data-testid="main" className="main flex flex-col">
-            <hr className="spacing spacing--2"/>
+            <hr className="spacing spacing--2" />
             <div className="main__container flex flex-col justify-between">
                 <Header />
-                <Step />
+                <Step >{children}</Step>
                 <Navbar />
             </div>
-            <hr className="spacing spacing--3"/>
+            <hr className="spacing spacing--3" />
         </div>
     )
 }

src/scripts/components/Navbar/Navbar.js

@@ -2,19 +2,22 @@ import React, { useContext } from "react";
 import Button from "../Button/Button";
 import { StepContext } from "../../context/StepContext";
 import { UserContext } from "../../context/UserContext";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 
 export default function Navbar() {
 
     const [step, setStep] = useContext(StepContext);
     const [user, setUser] = useContext(UserContext);
+    let history = useHistory();
 
     /**
      * Skips the step without any checks on the inputs
      */
     const skipStep = () => {
         if (step < 3) {
             setStep(step + 1);
+            // go to the next page
+            history.push('/step' + (step + 1))
         }
     }
 
@@ -33,25 +36,8 @@ export default function Navbar() {
                 <Button typeClass="link" text="Back to the homepage" arrow="right" handleClick={backToHome} />
             </Link>
             <div className="flex">
-                {(step === 1) &&
-                    <Link to="/step2">
-                        <Button typeClass="btn btn__skip pad" text="Skip for now" handleClick={skipStep} />
-                    </Link>
-                }
-                {(step === 2) &&
-                    <Link to="/step3">
-                        <Button typeClass="btn btn__skip pad" text="Skip for now" handleClick={skipStep} />
-                    </Link>
-                }
-                {(step === 3) &&
-                    <Link to="/step3">
-                        <Button typeClass="btn btn__skip pad" text="Skip for now" handleClick={skipStep} />
-                    </Link>
-                }
-                {
-                    step === 3 ? <Button typeClass="btn btn__next" text="Finish" form="form-id" />
-                        : <Button typeClass="btn btn__next" text="Next Step" arrow="left" form="form-id" />
-                }
+                <Button typeClass="btn btn__skip pad" text="Skip for now" handleClick={skipStep} />
+                <Button typeClass="btn btn__next" text={step === 3 ? "Finish" : "Next Step"} arrow={ step!==3 && "left"} form="form-id" />
             </div>
         </div>
     )

src/scripts/components/Step/Step.js

@@ -6,7 +6,7 @@ import ContactDetails from "../ContactDetails/ContactDetails";
 import InvestmentPlans from "../InvestmentPlans/InvestmentPlans";
 import InvestmentPreferences from "../InvestmentPreferences/InvestmentPreferences";
 
-export default function Step() {
+export default function Step({children}) {
 
     const [step, setStep] = useContext(StepContext);
 
@@ -16,11 +16,7 @@ export default function Step() {
                 <div className="step__title">{steps.stepPage[step].title}</div>
                 <div className="step__caption">{steps.stepPage[step].caption}</div>
             </div>
-            <Switch>
-                <Route exact path="/" component={ContactDetails} />
-                <Route path="/step2" component={InvestmentPlans} />
-                <Route path="/step3" component={InvestmentPreferences} />
-            </Switch>
+            {children}
         </div>
     )
 }

src/scripts/features/App/App.js

@@ -3,7 +3,11 @@ import Sidebar from "../../components/Sidebar/Sidebar";
 import Main from "../../components/Main/Main";
 import { StepContext } from "../../context/StepContext";
 import { UserProvider } from "../../context/UserContext";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import Layout from "../../components/Layout/Layout";
+import ContactDetails from "../../components/ContactDetails/ContactDetails";
+import InvestmentPlans from "../../components/InvestmentPlans/InvestmentPlans";
+import InvestmentPreferences from "../../components/InvestmentPreferences/InvestmentPreferences";
 
 export default function App() {
 
@@ -13,10 +17,17 @@ export default function App() {
         <StepContext.Provider value={[step, setStep]}>
             <UserProvider >
                 <BrowserRouter>
-                    <div className="app-container">
-                        <Sidebar />
-                        <Main />
-                    </div>
+                    <Switch>
+                        <Route exact path="/">
+                            <Layout><ContactDetails /></Layout>
+                        </Route>
+                        <Route path="/step2">
+                            <Layout><InvestmentPlans /></Layout>
+                        </Route>
+                        <Route path="/step3">
+                            <Layout><InvestmentPreferences /></Layout>
+                        </Route>
+                    </Switch>
                 </BrowserRouter>
             </UserProvider>
         </StepContext.Provider>