Updates to deal with new categories msg

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>

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));
+  });
 };

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;