From 48210b9efd959c36571fff94742171188106cf71 Mon Sep 17 00:00:00 2001
From: Dane Johnson <daneallenjohnson@protonmail.com>
Date: Tue, 14 Feb 2023 10:03:51 -0600
Subject: [PATCH] Updates to deal with new categories msg

---
 src/host/CluesDisplay.tsx |  5 +++--
 src/socket.ts             |  8 ++++----
 src/store/cluesSlice.ts   | 11 +++++++----
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/host/CluesDisplay.tsx b/src/host/CluesDisplay.tsx
index 41d7564..86b6bf7 100644
--- a/src/host/CluesDisplay.tsx
+++ b/src/host/CluesDisplay.tsx
@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import { Container, Button, Stack } from "react-bootstrap";
 
 import { useAppSelector } from "../hooks";
@@ -9,12 +10,12 @@ const CluesDisplay = () => {
     <Container>
       <Stack gap={3} className="text-center">
         {categories.map(({ name }) => (
-          <>
+          <Fragment key={name}>
             <h2>{name}</h2>
             {[200, 400, 600, 800, 1000].map((value) => (
               <Button key={value}>{value}</Button>
             ))}
-          </>
+          </Fragment>
         ))}
       </Stack>
     </Container>
diff --git a/src/socket.ts b/src/socket.ts
index eebb3dc..3d74d1d 100644
--- a/src/socket.ts
+++ b/src/socket.ts
@@ -2,7 +2,7 @@ import { io } from "socket.io-client";
 import store from "./store";
 import { setRoomCode } from "./store/socketSlice";
 import { addContestant } from "./store/displaySlice";
-import { addCategory } from "./store/cluesSlice";
+import { setCategories } from "./store/cluesSlice";
 
 export const socket = io(`${window.location.hostname}:5000`);
 
@@ -22,7 +22,7 @@ export const setup = () => {
     }
   );
 
-  socket.on("categories", (data: string[]) =>
-    data.forEach((category) => store.dispatch(addCategory(category)))
-  );
+  socket.on("categories", (data: Record<string, Clue>) => {
+    store.dispatch(setCategories(data));
+  });
 };
diff --git a/src/store/cluesSlice.ts b/src/store/cluesSlice.ts
index cb855f9..5daba1a 100644
--- a/src/store/cluesSlice.ts
+++ b/src/store/cluesSlice.ts
@@ -9,7 +9,7 @@ interface Category {
 interface Clue {
   value: number;
   question: string;
-  answer?: string;
+  answer: string;
 }
 
 const initialState: Category[] = [];
@@ -18,12 +18,15 @@ export const cluesSlice = createSlice({
   name: "clues",
   initialState,
   reducers: {
-    addCategory: (state, { payload }: PayloadAction<string>) =>
-      (state = [...state, { name: payload, clues: [] }]),
+    setCategories: (state, action: PayloadAction<Record<string, Clue[]>>) =>
+      Object.entries(action.payload).map(([name, clues]) => ({
+        name,
+        clues,
+      })),
   },
 });
 
-export const { addCategory } = cluesSlice.actions;
+export const { setCategories } = cluesSlice.actions;
 export const selectCategories = (state: RootState) => state.clues;
 
 export default cluesSlice.reducer;