Splitting up the HomePage so that the game creation form can be re-used

client/src/components/screens/HomePage.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import HeaderAndFooter from '../util/HeaderAndFooter';
+import GameCreationForm from '../util/GameCreationForm';
+
+export default () => (
+  <HeaderAndFooter>
+    <GameCreationForm/>
+  </HeaderAndFooter>
+);

client/src/components/screens/HomePage/HomePage.jsx

@@ -1,78 +0,0 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import ms from "pretty-ms";
-import Loading from "../../util/Loading";
-import HeaderAndFooter from "../../util/HeaderAndFooter";
-import { dispatch } from "../../../domain/gameStore";
-import Button from "../../util/Button";
-import { createGame } from "../../../domain/apiMethods";
-import Dropdown from "./Dropdown";
-
-const Container = styled.div`
-  display: flex;
-  flex-flow: column-reverse nowrap;
-  justify-content: space-between;
-  width: 50%;
-  align-self: center;
-`
-
-const DropdownContainer = styled.div`
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-`;
-
-const StartButton = styled(Button)`
-  margin-bottom: 5px;
-  width: 100%;
-`
-
-export default () => {
-  const [loading, setLoading] = useState(false);
-  const [timer, setTimer] = useState(300);
-  const [rounds, setRounds] = useState(5);
-
-  if (loading) {
-    return <Loading/>
-  }
-
-  const onCreateGame = async () => {
-    setLoading(true);
-    const gameId = await createGame(timer, rounds);
-    await dispatch.goToLobby(gameId);
-  };
-
-  return (
-    <HeaderAndFooter>
-      <Container>
-        <DropdownContainer>
-          <Dropdown
-            options={{
-              "30 Seconds": 30,
-              "5 Minutes": 300,
-              "1 Hour": 3600,
-            }}
-            onChange={setTimer}
-          >
-            Round Timer: {ms(timer * 1000)}
-          </Dropdown>
-          <Dropdown
-            options={{
-              "1 Round": 1,
-              "5 Rounds": 5,
-              "10 Rounds": 10,
-            }}
-            onChange={setRounds}
-          >
-            Rounds: {rounds}
-          </Dropdown>
-        </DropdownContainer>
-        <StartButton onClick={onCreateGame}>
-          Create New Game
-        </StartButton>
-      </Container>
-    </HeaderAndFooter>
-  );
-}

client/src/components/screens/HomePage/index.js

@@ -1 +0,0 @@
-export { default } from "./HomePage";

client/src/components/util/GameCreationForm.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import ms from "pretty-ms";
+import Loading from "./Loading";
+import { dispatch } from "../../domain/gameStore";
+import Button from "./Button";
+import { createGame } from "../../domain/apiMethods";
+import Dropdown from "./Dropdown";
+
+const Container = styled.div`
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  justify-content: space-between;
+  width: 50%;
+  align-self: center;
+`
+
+const DropdownContainer = styled.div`
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+`;
+
+const StartButton = styled(Button)`
+  margin-bottom: 5px;
+  width: 100%;
+`
+
+export default ({ afterCreate }) => {
+  const [loading, setLoading] = useState(false);
+  const [timer, setTimer] = useState(300);
+  const [rounds, setRounds] = useState(5);
+
+  if (loading) {
+    return <Loading/>
+  }
+
+  const onCreateGame = async () => {
+    setLoading(true);
+    const gameId = await createGame(timer, rounds);
+    await dispatch.goToLobby(gameId);
+    if (afterCreate) {
+      afterCreate(gameId);
+    }
+  };
+
+  return (
+    <Container>
+      <DropdownContainer>
+        <Dropdown
+          options={{
+            "30 Seconds": 30,
+            "5 Minutes": 300,
+            "1 Hour": 3600,
+          }}
+          onChange={setTimer}
+        >
+          Round Timer: {ms(timer * 1000)}
+        </Dropdown>
+        <Dropdown
+          options={{
+            "1 Round": 1,
+            "5 Rounds": 5,
+            "10 Rounds": 10,
+          }}
+          onChange={setRounds}
+        >
+          Rounds: {rounds}
+        </Dropdown>
+      </DropdownContainer>
+      <StartButton onClick={onCreateGame}>
+        Create New Game
+      </StartButton>
+    </Container>
+  );
+}