From 66721d451ac473160d5d9075089628cd6c311ea3 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Wed, 16 Dec 2020 03:09:24 +0200
Subject: [PATCH] Added stepper

---
 .prettierrc.json                 |  6 ++++
 src/App.js                       |  4 +--
 src/components/layout/Main.js    | 14 ++++++++
 src/components/layout/Stepper.js | 58 ++++++++++++++++++++++++++++++++
 src/constants/steps.js           | 16 +++++++++
 5 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 .prettierrc.json
 create mode 100644 src/components/layout/Main.js
 create mode 100644 src/components/layout/Stepper.js
 create mode 100644 src/constants/steps.js

diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..fca24df
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false
+}
diff --git a/src/App.js b/src/App.js
index e0dca46..27d5b0f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,13 @@
 import React, { Suspense } from "react";
 import "./App.css";
-import Switcher from "./components/layout/Switcher";
+import Main from "./components/layout/Main";
 
 function App() {
   return (
     <Suspense fallback={<div>Loading...</div>}>
       <div className="App">
         <header className="App-header">
-          <Switcher />
+          <Main />
         </header>
       </div>
     </Suspense>
diff --git a/src/components/layout/Main.js b/src/components/layout/Main.js
new file mode 100644
index 0000000..a6038f4
--- /dev/null
+++ b/src/components/layout/Main.js
@@ -0,0 +1,14 @@
+import React from "react";
+import Stepper from "./Stepper";
+import Switcher from "./Switcher";
+
+const Main = () => {
+  return (
+    <>
+      <Stepper />
+      <Switcher />
+    </>
+  );
+};
+
+export default Main;
diff --git a/src/components/layout/Stepper.js b/src/components/layout/Stepper.js
new file mode 100644
index 0000000..1692236
--- /dev/null
+++ b/src/components/layout/Stepper.js
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import steps from "../../constants/steps";
+import {
+  Card,
+  Grid,
+  Stepper,
+  Step,
+  StepButton,
+  StepLabel,
+  makeStyles
+} from "@material-ui/core";
+import { useLocation, useHistory } from "react-router-dom";
+
+const styles = () => ({
+  stepperCard: {
+    padding: "2px",
+    marginBottom: "15px"
+  }
+});
+
+const useStyles = makeStyles(styles);
+
+const ApplicationStepper = () => {
+  const [activeStep, setActiveStep] = useState(0);
+  const classes = useStyles();
+  const location = useLocation();
+  const history = useHistory();
+
+  const handleStepClick = (step) => {
+    if (!step) return;
+    if (location.pathname === step.route) return;
+    history.push(step.route);
+  };
+
+  return (
+    <Card className={classes.stepperCard}>
+      <Grid container alignItems="center" spacing={3}>
+        <Grid item xs={12}>
+          <Stepper activeStep={activeStep} orientation="horizontal">
+            {steps.map((step) => (
+              <Step key={step.id}>
+                <StepButton
+                  id={"offerStepper_" + step.title}
+                  disabled={step.disabled}
+                  onClick={() => handleStepClick(step)}
+                >
+                  <StepLabel>{step.title}</StepLabel>
+                </StepButton>
+              </Step>
+            ))}
+          </Stepper>
+        </Grid>
+      </Grid>
+    </Card>
+  );
+};
+
+export default ApplicationStepper;
diff --git a/src/constants/steps.js b/src/constants/steps.js
new file mode 100644
index 0000000..0a003a2
--- /dev/null
+++ b/src/constants/steps.js
@@ -0,0 +1,16 @@
+const steps = [
+  {
+    id: 0,
+    title: "Login",
+    route: "/",
+    disabled: false
+  },
+  {
+    id: 1,
+    title: "About",
+    route: "/about",
+    disabled: false
+  }
+];
+
+export default steps;