♻️ Integrate category step with controller

Author: mraerino

src/hooks/controller.ts

@@ -1,6 +1,6 @@
 import { useReducer, useMemo, useCallback } from "react";
 import { Action, createActions } from "./actions";
-import { Category } from "../assets/categories";
+import { Category, categories } from "../assets/categories";
 import questions, { Question } from "../assets/questions";
 import { fetchValues } from "./datenguide";
 import { GraphQLRequest } from "apollo-link";
@@ -191,6 +191,12 @@ const useGameController = (restoreState?: GameState) => {
     ...actions
   } = useMemo(() => createActions(dispatch), [dispatch]);
 
+  const randomCategory = useCallback(() => {
+    const catNum = Math.floor(Math.random() * Object.keys(categories).length);
+    const cat = Object.keys(categories)[catNum] as Category;
+    actions.setCategory(cat);
+  }, [actions.setCategory]);
+
   const findOpponent = useCallback(() => {
     if (!user) {
       return;
@@ -229,6 +235,7 @@ const useGameController = (restoreState?: GameState) => {
     findOpponent,
     findQuestion,
     calculateResult,
+    randomCategory,
     ...state,
   };
 }

src/stories/controller.ts

@@ -4,20 +4,21 @@ import { action } from "@storybook/addon-actions";
 import { GameState, initialState, GameController } from "../hooks/controller";
 
 export const mockState = (state: Partial<GameState>): GameState => {
-    return {
-        ...initialState,
-        ...state,
-    }
+  return {
+    ...initialState,
+    ...state,
+  }
 }
 
 export const mockGameController: GameController = (state: Partial<GameState> = {}) => {
-    const actions = useMemo(() => createActions(action("action")), [])
+  const actions = useMemo(() => createActions(action("action")), [])
 
-    return {
-        ...actions,
-        findOpponent: action("findOpponent"),
-        findQuestion: action("findQuestion"),
-        calculateResult: (...args) => Promise.resolve(action("calculateResult")(...args)),
-        ...mockState(state),
-    }
+  return {
+    ...actions,
+    findOpponent: action("findOpponent"),
+    findQuestion: action("findQuestion"),
+    calculateResult: (...args) => Promise.resolve(action("calculateResult")(...args)),
+    randomCategory: action("randomCategory"),
+    ...mockState(state),
+  }
 }

src/templates/categories/categories.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 
 import Typography from "@material-ui/core/es/Typography";
@@ -9,42 +9,40 @@ import CountDown from "../../components/countDown";
 import { categoryIcons, categories } from "../../assets/categories";
 import styles from "./categories.module.scss";
 
-const Categories = ({ choosing = true }) => {
-  const [timeLeft, setTimeLeft] = useState(true);
+const Categories = ({ choosing = true, category, setCategory, randomCategory, nextStep }) => {
   useEffect(() => {
-    const timer = setTimeout(() => setTimeLeft(false), 10000);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
+    if (!category) {
+      const timer = setTimeout(() => randomCategory(), 10000);
+      return () => clearTimeout(timer);
+    } else {
+      const timer = setTimeout(() => nextStep(), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [category]);
+
   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>
-        )}
+        <Grid item xs={12}>
+          <Typography variant="h3" component="h2">
+            {choosing ? "Wähle eine Kategorie:" : "Dein Gegner wählt eine Kategorie!"}
+          </Typography>
+        </Grid>
         {categoryEntries.map(([cat, name]) => {
           const Icon = categoryIcons[cat];
+          const selected = cat === category;
+          const hasChoosen = !!category;
           return (
             <Grid item xs={12} key={cat} >
               <Button
-                color={!timeLeft ? "secondary" : "primary"}
+                color={selected ? "secondary" : "primary"}
                 variant="contained"
-                disabled={!choosing && timeLeft}
+                disabled={(!choosing || hasChoosen) && !selected}
                 fullWidth
+                onClick={() => setCategory(cat)}
               >
                 <Icon className={styles.buttonIcon} />
                 {name}
@@ -58,7 +56,11 @@ const Categories = ({ choosing = true }) => {
 };
 
 Categories.propTypes = {
-  choosing: PropTypes.bool
+  choosing: PropTypes.bool,
+  category: PropTypes.string,
+  setCategory: PropTypes.func.isRequired,
+  randomCategory: PropTypes.func.isRequired,
+  nextStep: PropTypes.func.isRequired,
 };
 
 export default Categories;