stepper configurable icons

.prettierrc.json

@@ -2,5 +2,6 @@
   "trailingComma": "none",
   "tabWidth": 2,
   "semi": true,
-  "singleQuote": false
+  "singleQuote": false,
+  "arrowParens": "avoid"
 }

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}

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 (

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 />
   }
 ];