♻️ Update category step for use with controller

Author: mraerino

src/assets/categories.ts

@@ -1,8 +1,20 @@
+import CompareArrows from '@material-ui/icons/CompareArrows';
+import EuroSymbol from '@material-ui/icons/EuroSymbol';
+import LocalFlorist from '@material-ui/icons/LocalFlorist';
+import LocalHospital from '@material-ui/icons/LocalHospital';
+
 export const categories = {
-    "arbeit-wirtschaft": "Arbeit & Wirtschaft",
-    "bildung": "Bildung",
-    "gesundheit": "Gesundheit",
-    "umwelt": "Umwelt",
+  "arbeit-wirtschaft": "Arbeit & Wirtschaft",
+  "bildung": "Bildung",
+  "gesundheit": "Gesundheit",
+  "umwelt": "Umwelt",
 };
 
+export const categoryIcons = {
+  "arbeit-wirtschaft": CompareArrows,
+  "bildung": LocalFlorist,
+  "gesundheit": EuroSymbol,
+  "umwelt": LocalHospital,
+}
+
 export type Category = keyof typeof categories;

src/pages/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import useGameController, { Step, GameController } from "../hooks/controller";
 import Landing from "../templates/landing/landing";
 import MatchMaking from "../templates/matchMaking/matchMaking";
+import Category from "../templates/categories/categories";
 
 interface IndexPageProps {}
 
@@ -11,6 +12,8 @@ const renderStep = (step: Step): React.FC<ReturnType<GameController>> => {
       return Landing;
     case Step.opponents:
       return MatchMaking;
+    case Step.category:
+      return Category;
     default:
       return () => <h1>Not found</h1>;
   }
@@ -19,7 +22,7 @@ const renderStep = (step: Step): React.FC<ReturnType<GameController>> => {
 const localStorageKey = "GAME_STATE";
 let prevState;
 try {
-  prevState = JSON.parse(window.localStorage.getItem(localStorageKey) || "");
+  prevState = JSON.parse(window.localStorage.getItem(localStorageKey) || "");
   if (!prevState) {
     prevState = undefined;
   }

src/templates/categories/categories.jsx

@@ -2,76 +2,63 @@ import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
 import Typography from "@material-ui/core/es/Typography";
-import TextField from "@material-ui/core/es/TextField";
-import Select from "@material-ui/core/es/Select";
-import MenuItem from "@material-ui/core/es/MenuItem";
 import Button from "@material-ui/core/es/Button";
-import LinearProgress from "@material-ui/core/es/LinearProgress";
-import FormControl from "@material-ui/core/es/FormControl";
-import FormHelperText from "@material-ui/core/es/FormHelperText";
 import Grid from "@material-ui/core/es/Grid";
-import Paper from "@material-ui/core/es/Paper";
-import Avatar from "@material-ui/core/es/Avatar";
+
 import CountDown from "../../components/countDown";
-import CompareArrows from '@material-ui/icons/CompareArrows';
-import EuroSymbol from '@material-ui/icons/EuroSymbol';
-import LocalFlorist from '@material-ui/icons/LocalFlorist';
-import LocalHospital from '@material-ui/icons/LocalHospital';
-import * as locations from "../../assets/locations.json";
+import { categoryIcons, categories } from "../../assets/categories";
 import styles from "./categories.module.scss";
 
-const Categories = ({ choosing }) => {
-    const [timeLeft, setTimeLeft] = useState(true);
-    useEffect(() => {
-        const timer = setTimeout(() => setTimeLeft(false), 10000);
-        return () => {
-            clearTimeout(timer);
-        };
-    }, []);
-    const categories = [
-        { name: "Bildung", icon: <CompareArrows className={styles.buttonIcon} /> },
-        { name: "Umwelt", icon: <LocalFlorist className={styles.buttonIcon} /> },
-        { name: "Arbeit & Wirtschaft", icon: <EuroSymbol className={styles.buttonIcon} /> },
-        { name: "Gesundheit", icon: <LocalHospital className={styles.buttonIcon} /> }
-    ];
-    return (
-        <>
-            <CountDown />
-            <Grid container spacing={3}>
-                {choosing && (
-                    <Grid item xs={12}>
-                        <Typography variant="h3" component="h2">
-                            Wähle eine Kategorie:
-                        </Typography>
-                    </Grid>
-                )}
-                {!choosing && (
-                    <Grid item xs={12}>
-                        <Typography variant="h3" component="h2">
-                            Dein Gegner wählt eine Kategorie!
-                        </Typography>
-                    </Grid>
-                )}
-                {categories.map(category => (
-                    <Grid item xs={12}key={category.name} >
-                        <Button
-                            color={!timeLeft ? "secondary" : "primary"}
-                            variant="contained"
-                            disabled={!choosing && timeLeft}
-                            fullWidth
-                        >
-                            {category.icon}
-                            {category.name}
-                        </Button>
-                    </Grid>
-                ))}
+const Categories = ({ choosing = true }) => {
+  const [timeLeft, setTimeLeft] = useState(true);
+  useEffect(() => {
+    const timer = setTimeout(() => setTimeLeft(false), 10000);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+  const categoryEntries = Object.entries(categories);
+  return (
+    <>
+      <CountDown />
+      <Grid container spacing={3}>
+        {choosing && (
+          <Grid item xs={12}>
+            <Typography variant="h3" component="h2">
+              Wähle eine Kategorie:
+            </Typography>
+          </Grid>
+        )}
+        {!choosing && (
+          <Grid item xs={12}>
+            <Typography variant="h3" component="h2">
+              Dein Gegner wählt eine Kategorie!
+            </Typography>
+          </Grid>
+        )}
+        {categoryEntries.map(([cat, name]) => {
+          const Icon = categoryIcons[cat];
+          return (
+            <Grid item xs={12} key={cat} >
+              <Button
+                color={!timeLeft ? "secondary" : "primary"}
+                variant="contained"
+                disabled={!choosing && timeLeft}
+                fullWidth
+              >
+                <Icon className={styles.buttonIcon} />
+                {name}
+              </Button>
             </Grid>
-        </>
-    );
+          );
+        })}
+      </Grid>
+    </>
+  );
 };
 
 Categories.propTypes = {
-    choosing: PropTypes.bool
+  choosing: PropTypes.bool
 };
 
 export default Categories;