Making a more clever Dropdown

client/src/components/util/GameCreationForm/Dropdown.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-const Dropdown = styled.div`
+const DropdownBox = styled.div`
   width: 100%;
   margin-bottom: 5px;
   position: relative;
@@ -16,7 +16,7 @@ const DropdownButton = styled.div`
   font-weight: 600;
   cursor: pointer;
 
-  ${Dropdown}:hover & {
+  ${DropdownBox}:hover & {
     background-color: #333;
   }
 `
@@ -28,7 +28,7 @@ const DropdownList = styled.div`
   width: 100%;
   z-index: 1;
 
-  ${Dropdown}:hover & {
+  ${DropdownBox}:hover & {
     display: block;
   }
 `
@@ -43,12 +43,29 @@ const DropdownItem = styled.div`
 }
 `
 
+export const Item = ({ value, onSelect, children }) => (
+  <DropdownItem onClick={() => onSelect(value)}>
+    {children}
+  </DropdownItem>
+)
+
+export const Dropdown = ({ selected, onSelect, children }) => (
+  <DropdownBox>
+    <DropdownButton>
+      {selected}
+    </DropdownButton>
+    <DropdownList>
+      {children.map((child, key) => React.cloneElement(child, { onSelect, key }))}
+    </DropdownList>
+  </DropdownBox>
+)
+
 export default ({
   options,
   onChange,
   children,
 }) => (
-  <Dropdown>
+  <DropdownBox>
     <DropdownButton>
       {children}
     </DropdownButton>
@@ -59,5 +76,5 @@ export default ({
         ))
       }
     </DropdownList>
-  </Dropdown>
+  </DropdownBox>
 );

client/src/components/util/GameCreationForm/GameCreationForm.jsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { createGame } from '../../../domain/apiMethods';
 import { MAP_CRUNCH, RANDOM_STREET_VIEW, URBAN } from '../../../domain/genMethods';
 import Loading from '../Loading';
-import Dropdown from './Dropdown';
+import OldDropdown, { Dropdown, Item } from './Dropdown';
 import styles from './GameCreationForm.module.css';
 
 export default ({ afterCreate }) => {
@@ -30,18 +30,13 @@ export default ({ afterCreate }) => {
   return (
     <div className={styles.form}>
       <div className={styles.dropdowns}>
-        <Dropdown
-          options={{
-            '30 Seconds': 30,
-            '2 Minutes': 120,
-            '5 Minutes': 300,
-            '1 Hour': 3600
-          }}
-          onChange={setTimer}
-        >
-          Round Timer: {ms(timer * 1000)}
+        <Dropdown selected={`Round Timer: ${ms(timer * 1000)}`} onSelect={setTimer}>
+          <Item value={30}>30 Seconds</Item>
+          <Item value={120}>2 Minutes</Item>
+          <Item value={300}>5 Minutes</Item>
+          <Item value={3600}>1 Hour</Item>
         </Dropdown>
-        <Dropdown
+        <OldDropdown
           options={{
             '1 Round': 1,
             '3 Rounds': 3,
@@ -51,8 +46,8 @@ export default ({ afterCreate }) => {
           onChange={setRounds}
         >
           Rounds: {rounds}
-        </Dropdown>
-        <Dropdown
+        </OldDropdown>
+        <OldDropdown
           options={{
             'All Countries': false,
             'Just America': true
@@ -60,8 +55,8 @@ export default ({ afterCreate }) => {
           onChange={setOnlyAmerica}
         >
           {onlyAmerica ? 'Just America' : 'All Countries'}
-        </Dropdown>
-        <Dropdown
+        </OldDropdown>
+        <OldDropdown
           options={{
             'Map Crunch': MAP_CRUNCH,
             'Random Street View': RANDOM_STREET_VIEW,
@@ -71,7 +66,7 @@ export default ({ afterCreate }) => {
         >
           Generator:{' '}
           {genMethod === MAP_CRUNCH ? 'Map Crunch' : genMethod === RANDOM_STREET_VIEW ? 'RSV' : 'Urban Centers'}
-        </Dropdown>
+        </OldDropdown>
       </div>
       <button className={styles.start} onClick={onCreateGame} disabled={invalidCombo}>
         {invalidCombo ? 'Incompatible Options' : 'New Game'}