[fix] routing of buttons and reduce the code

Author: AngyDev

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>
     )