From 81c3e699326ac48186bd00db262ca60d12c3b8d0 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Wed, 8 Apr 2020 17:00:56 +1000
Subject: [PATCH] Moved nickname and stream button

---
 src/components/AddPartyMemberButton.js |  26 +++---
 src/components/ChangeNicknameButton.js |  60 ++++++++++++
 src/components/Nickname.js             | 124 +++----------------------
 src/components/Party.js                |  15 ++-
 src/components/StartStreamButton.js    |  20 ++++
 5 files changed, 112 insertions(+), 133 deletions(-)
 create mode 100644 src/components/ChangeNicknameButton.js
 create mode 100644 src/components/StartStreamButton.js

diff --git a/src/components/AddPartyMemberButton.js b/src/components/AddPartyMemberButton.js
index abe8900..510186a 100644
--- a/src/components/AddPartyMemberButton.js
+++ b/src/components/AddPartyMemberButton.js
@@ -14,20 +14,18 @@ function AddPartyMemberButton({ gameId }) {
 
   return (
     <>
-      <Flex sx={{ justifyContent: "center" }}>
-        <IconButton aria-label="Add Party Member" onClick={openModal}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            fill="currentcolor"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 11h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H8c-.55 0-1-.45-1-1s.45-1 1-1h3V8c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1z" />
-          </svg>
-        </IconButton>
-      </Flex>
+      <IconButton m={1} aria-label="Add Party Member" onClick={openModal}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          fill="currentcolor"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 11h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H8c-.55 0-1-.45-1-1s.45-1 1-1h3V8c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1z" />
+        </svg>
+      </IconButton>
       <Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
         <Box>
           <Label p={2}>Other people can join using your ID</Label>
diff --git a/src/components/ChangeNicknameButton.js b/src/components/ChangeNicknameButton.js
new file mode 100644
index 0000000..f0db862
--- /dev/null
+++ b/src/components/ChangeNicknameButton.js
@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { Box, Input, Button, Label, IconButton, Flex } from "theme-ui";
+
+import Modal from "./Modal";
+
+function ChangeNicknameButton({ nickname, onChange }) {
+  const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
+  function openModal() {
+    setIsChangeModalOpen(true);
+  }
+  function closeModal() {
+    setIsChangeModalOpen(false);
+  }
+
+  const [changedNickname, setChangedNickname] = useState(nickname);
+  function handleChangeSubmit(event) {
+    event.preventDefault();
+    onChange(changedNickname);
+    closeModal();
+  }
+
+  function handleChange(event) {
+    setChangedNickname(event.target.value);
+  }
+  return (
+    <>
+      <IconButton m={1} aria-label="Change Nickname" onClick={openModal}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          fill="currentcolor"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+        </svg>
+      </IconButton>
+      <Modal isOpen={isChangeModalOpen} onRequestClose={closeModal}>
+        <Box as="form" onSubmit={handleChangeSubmit}>
+          <Label p={2} htmlFor="nicknameChange">
+            Change your nickname
+          </Label>
+          <Input
+            id="nicknameChange"
+            value={changedNickname}
+            onChange={handleChange}
+          />
+          <Flex py={2}>
+            <Button sx={{ flexGrow: 1 }} disabled={!changedNickname}>
+              Change
+            </Button>
+          </Flex>
+        </Box>
+      </Modal>
+    </>
+  );
+}
+
+export default ChangeNicknameButton;
diff --git a/src/components/Nickname.js b/src/components/Nickname.js
index d96bfeb..e384e1e 100644
--- a/src/components/Nickname.js
+++ b/src/components/Nickname.js
@@ -1,117 +1,19 @@
-import React, { useState } from "react";
-import { Text, Box, Input, Button, Label, IconButton, Flex } from "theme-ui";
-
-import Modal from "./Modal";
-
-function Nickname({ nickname, allowChanging, onChange, onStream }) {
-  const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
-  function openModal() {
-    setIsChangeModalOpen(true);
-  }
-  function closeModal() {
-    setIsChangeModalOpen(false);
-  }
-
-  const [changedNickname, setChangedNickname] = useState(nickname);
-  function handleChangeSubmit(event) {
-    event.preventDefault();
-    if (allowChanging) {
-      onChange(changedNickname);
-      closeModal();
-    }
-  }
-
-  function handleChange(event) {
-    setChangedNickname(event.target.value);
-  }
+import React from "react";
+import { Text } from "theme-ui";
 
+function Nickname({ nickname }) {
   return (
-    <>
-      <Text
-        my={1}
-        variant="caption"
-        sx={{
-          fontSize: 10,
-          position: "relative",
-        }}
-      >
-        {nickname}
-        {allowChanging && (
-          <IconButton
-            sx={{
-              width: "10px",
-              height: "10px",
-              padding: 0,
-              margin: "2px",
-              position: "absolute",
-              bottom: "-2px",
-            }}
-            aria-label="Start Radio Stream"
-            onClick={() => allowChanging && onStream()}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="10"
-              viewBox="0 0 24 24"
-              width="10"
-              fill="currentcolor"
-            >
-              <path d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.9 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.1-.9-2-2-2H8.3l7.43-3c.46-.19.68-.71.49-1.17-.19-.46-.71-.68-1.17-.49L3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H4V9c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v3z" />
-            </svg>
-          </IconButton>
-        )}
-        {allowChanging && (
-          <IconButton
-            sx={{
-              width: "10px",
-              height: "10px",
-              padding: 0,
-              margin: "2px",
-              position: "absolute",
-              bottom: "-2px",
-              transform: "translateX(12px)",
-            }}
-            aria-label="Change Nickname"
-            onClick={() => allowChanging && openModal()}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="10"
-              viewBox="0 0 24 24"
-              width="10"
-              fill="currentcolor"
-            >
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
-            </svg>
-          </IconButton>
-        )}
-      </Text>
-      <Modal isOpen={isChangeModalOpen} onRequestClose={closeModal}>
-        <Box as="form" onSubmit={handleChangeSubmit}>
-          <Label p={2} htmlFor="nicknameChange">
-            Change your nickname
-          </Label>
-          <Input
-            id="nicknameChange"
-            value={changedNickname}
-            onChange={handleChange}
-          />
-          <Flex py={2}>
-            <Button sx={{ flexGrow: 1 }} disabled={!changedNickname}>
-              Change
-            </Button>
-          </Flex>
-        </Box>
-      </Modal>
-    </>
+    <Text
+      my={1}
+      variant="caption"
+      sx={{
+        fontSize: 10,
+        position: "relative",
+      }}
+    >
+      {nickname}
+    </Text>
   );
 }
 
-Nickname.defaultProps = {
-  allowChanging: false,
-  onChange: () => {},
-  onStream: () => {},
-};
-
 export default Nickname;
diff --git a/src/components/Party.js b/src/components/Party.js
index 578be6a..27a552f 100644
--- a/src/components/Party.js
+++ b/src/components/Party.js
@@ -4,6 +4,8 @@ import { Flex, Box, Text } from "theme-ui";
 import AddPartyMemberButton from "./AddPartyMemberButton";
 import Nickname from "./Nickname";
 import Stream from "./Stream";
+import ChangeNicknameButton from "./ChangeNicknameButton";
+import StartStreamButton from "./StartStreamButton";
 
 function Party({
   nickname,
@@ -41,12 +43,7 @@ function Party({
           width: "100%",
         }}
       >
-        <Nickname
-          nickname={nickname || ""}
-          allowChanging
-          onChange={onNicknameChange}
-          onStream={onStreamStart}
-        />
+        <Nickname nickname={nickname || ""} />
         {Object.entries(partyNicknames).map(([id, partyNickname]) => (
           <Nickname nickname={partyNickname} key={id} />
         ))}
@@ -59,9 +56,11 @@ function Party({
             <Stream stream={partyStream} key={id} />
           ))}
       </Box>
-      <Box>
+      <Flex sx={{ flexDirection: "column" }}>
+        <ChangeNicknameButton nickname={nickname} onChange={onNicknameChange} />
+        <StartStreamButton onStream={onStreamStart} />
         <AddPartyMemberButton gameId={gameId} />
-      </Box>
+      </Flex>
     </Flex>
   );
 }
diff --git a/src/components/StartStreamButton.js b/src/components/StartStreamButton.js
new file mode 100644
index 0000000..613dfd0
--- /dev/null
+++ b/src/components/StartStreamButton.js
@@ -0,0 +1,20 @@
+import React from "react";
+import { IconButton } from "theme-ui";
+
+function StartStreamButton({ onStream }) {
+  return (
+    <IconButton m={1} aria-label="Start Radio Stream" onClick={onStream}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        fill="currentcolor"
+      >
+        <path d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.9 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.1-.9-2-2-2H8.3l7.43-3c.46-.19.68-.71.49-1.17-.19-.46-.71-.68-1.17-.49L3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H4V9c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v3z" />
+      </svg>
+    </IconButton>
+  );
+}
+
+export default StartStreamButton;