Turning HomePage back into a nicely split up component

client/src/components/screens/HomePage.jsx

@@ -1,119 +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";
-
-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 Dropdown = styled.div`
-  flex: 1;
-  position: relative;
-  display: inline-block;
-  margin: 5px 5px 5px 5px;
-`
-
-const DropdownButton = styled.div`
-  text-align: center;
-  padding: 4px;
-  background-color: #555;
-  color: #fff;
-  font-weight: 600;
-  cursor: pointer;
-
-  ${Dropdown}:hover & {
-    background-color: #333;
-  }
-`
-
-const DropdownList = styled.div`
-  display: none;
-  position: absolute;
-  background-color: #333;
-  width: 100%;
-  z-index: 1;
-
-  ${Dropdown}:hover & {
-    display: block;
-  }
-`
-
-const DropdownItem = styled.div`
-  padding: 12px 16px;
-  display: block;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #555;
-  }
-`
-
-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>
-            <DropdownButton>
-              Round Timer: {ms(timer * 1000)}
-            </DropdownButton>
-            <DropdownList>
-              <DropdownItem onClick={() => setTimer(30)}>30 Seconds</DropdownItem>
-              <DropdownItem onClick={() => setTimer(300)}>5 Minutes</DropdownItem>
-              <DropdownItem onClick={() => setTimer(3600)}>1 Hour</DropdownItem>
-            </DropdownList>
-          </Dropdown>
-          <Dropdown>
-            <DropdownButton>
-              Rounds: {rounds}
-            </DropdownButton>
-            <DropdownList>
-              <DropdownItem onClick={() => setRounds(1)}>1 Round</DropdownItem>
-              <DropdownItem onClick={() => setRounds(5)}>5 Rounds</DropdownItem>
-              <DropdownItem onClick={() => setRounds(10)}>10 Rounds</DropdownItem>
-            </DropdownList>
-          </Dropdown>
-        </DropdownContainer>
-        <StartButton onClick={onCreateGame}>
-          Create New Game
-        </StartButton>
-      </Container>
-    </HeaderAndFooter>
-  );
-}

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

@@ -0,0 +1,63 @@
+import React from "react";
+import styled from "styled-components";
+
+const Dropdown = styled.div`
+  flex: 1;
+  position: relative;
+  display: inline-block;
+  margin: 5px 5px 5px 5px;
+`
+
+const DropdownButton = styled.div`
+  text-align: center;
+  padding: 4px;
+  background-color: #555;
+  color: #fff;
+  font-weight: 600;
+  cursor: pointer;
+
+  ${Dropdown}:hover & {
+    background-color: #333;
+  }
+`
+
+const DropdownList = styled.div`
+  display: none;
+  position: absolute;
+  background-color: #333;
+  width: 100%;
+  z-index: 1;
+
+  ${Dropdown}:hover & {
+    display: block;
+  }
+`
+
+const DropdownItem = styled.div`
+  padding: 12px 16px;
+  display: block;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #555;
+}
+`
+
+export default ({
+  options,
+  onChange,
+  children,
+}) => (
+  <Dropdown>
+    <DropdownButton>
+      {children}
+    </DropdownButton>
+    <DropdownList>
+      {
+        Object.entries(options).map(([text, option]) => (
+          <DropdownItem key={option} onClick={() => onChange(option)}>{text}</DropdownItem>
+        ))
+      }
+    </DropdownList>
+  </Dropdown>
+);

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

@@ -0,0 +1,78 @@
+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

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