Fixing an issue in the way Game was extracting params

client/src/components/Game.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
   PRE_GAME,
   PRE_ROUND,
@@ -15,14 +15,6 @@ import RoundSummary from "./screens/RoundSummary";
 import PlayerScores from "./screens/PlayerScores";
 import useObservable from "../hooks/useObservable";
 
-const extractAndRemoveSearchParam = param => {
-  const u = new URL(window.location.href);
-  const extracted = u.searchParams.get(param);
-  u.searchParams.delete(param);
-  window.history.replaceState({}, document.title, u.href);
-  return extracted;
-}
-
 const componentMap = {
   [PRE_GAME]: PreGame,
   [PRE_ROUND]: PreRound,
@@ -32,25 +24,29 @@ const componentMap = {
   [ERROR]: () => <p>Application encountered unrecoverable error, please refresh the page.</p>,
 }
 
-const Game = () => {
-  useEffect(() => {
-    const joinCode = extractAndRemoveSearchParam("join");
-    if (joinCode) {
-      gameIdStore.set(joinCode);
-      gameStateStore.set(PRE_ROUND);
-    }
-  }, [])
+const paramRouter = {
+  join: PRE_ROUND,
+  summary: POST_GAME,
+}
 
-  useEffect(() => {
-    const summaryCode = extractAndRemoveSearchParam("summary");
-    if (summaryCode) {
-      gameIdStore.set(summaryCode);
-      gameStateStore.set(POST_GAME);
+const handleParams = () => {
+  const url = new URL(window.location.href);
+  for (let [param, value] of url.searchParams.entries()) {
+    const state = paramRouter[param];
+    if (state) {
+      url.searchParams.delete(param);
+      window.history.replaceState({}, document.title, url.href);
+      gameIdStore.set(value);
+      gameStateStore.set(state);
+      return;
     }
-  }, [])
-
-  const Screen = componentMap[useObservable(gameStateStore)];
+  }
+}
 
+const Game = () => {
+  const gameState = useObservable(gameStateStore);
+  handleParams();
+  const Screen = componentMap[gameState];
   return <Screen />
 }