From 91f6e04a9a23dcba6484434a23d295c073b548a0 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sat, 19 Dec 2020 01:47:14 +0200
Subject: [PATCH] stepper configurable icons

---
 .prettierrc.json                                  |  3 ++-
 .../layout/stepper/ApplicationStepper.js          |  8 ++++----
 src/components/layout/stepper/StepIcon.js         | 15 ++++-----------
 src/constants/steps.js                            |  9 +++++++--
 4 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/.prettierrc.json b/.prettierrc.json
index fca24df..4ed2da0 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -2,5 +2,6 @@
   "trailingComma": "none",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": false
+  "singleQuote": false,
+  "arrowParens": "avoid"
 }
diff --git a/src/components/layout/stepper/ApplicationStepper.js b/src/components/layout/stepper/ApplicationStepper.js
index f455498..bdcc495 100644
--- a/src/components/layout/stepper/ApplicationStepper.js
+++ b/src/components/layout/stepper/ApplicationStepper.js
@@ -22,20 +22,20 @@ const styles = () => ({
 const useStyles = makeStyles(styles);
 
 const ApplicationStepper = () => {
-  const firstStep = steps.find((z) => z.id === 0);
+  const firstStep = steps[0];
   const [activeStep, setActiveStep] = useState(firstStep);
   const classes = useStyles();
   const location = useLocation();
   const history = useHistory();
 
   useEffect(() => {
-    const step = steps.find((z) => z.route === location.pathname);
+    const step = steps.find(z => z.route === location.pathname);
     if (step) {
       setActiveStep(step);
     }
   }, [location.pathname]);
 
-  const handleStepClick = (step) => {
+  const handleStepClick = step => {
     if (!step) return;
     setActiveStep(step);
     if (location.pathname === step.route) return;
@@ -49,7 +49,7 @@ const ApplicationStepper = () => {
         orientation="horizontal"
         connector={<CustomStepConnector />}
       >
-        {steps.map((step) => (
+        {steps.map(step => (
           <Step key={step.id}>
             <StepButton
               id={"appStepper_" + step.title}
diff --git a/src/components/layout/stepper/StepIcon.js b/src/components/layout/stepper/StepIcon.js
index 6b597c9..b3c461b 100644
--- a/src/components/layout/stepper/StepIcon.js
+++ b/src/components/layout/stepper/StepIcon.js
@@ -2,9 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
 import { makeStyles } from "@material-ui/core/styles";
-import SettingsIcon from "@material-ui/icons/Settings";
-import GroupAddIcon from "@material-ui/icons/GroupAdd";
-import VideoLabelIcon from "@material-ui/icons/VideoLabel";
+import steps from "../../../constants/steps";
 
 const useStepIconStyles = makeStyles({
   root: {
@@ -33,14 +31,9 @@ function StepIcon(props) {
   const classes = useStepIconStyles();
   const { active, completed } = props;
 
-  const icons = {
-    1: <SettingsIcon />,
-    2: <GroupAddIcon />,
-    3: <VideoLabelIcon />
-  };
-
-  const getIcon = (icon) => {
-    return icons[String(icon)];
+  const getIcon = icon => {
+    const step = steps.find(z => z.id === icon - 1);
+    return step.icon;
   };
 
   return (
diff --git a/src/constants/steps.js b/src/constants/steps.js
index 0a003a2..1f4a3ea 100644
--- a/src/constants/steps.js
+++ b/src/constants/steps.js
@@ -1,15 +1,20 @@
+import SettingsIcon from "@material-ui/icons/Settings";
+import GroupAddIcon from "@material-ui/icons/GroupAdd";
+
 const steps = [
   {
     id: 0,
     title: "Login",
     route: "/",
-    disabled: false
+    disabled: false,
+    icon: <SettingsIcon />
   },
   {
     id: 1,
     title: "About",
     route: "/about",
-    disabled: false
+    disabled: false,
+    icon: <GroupAddIcon />
   }
 ];