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 (
<>
-
-
-
-
-
+
+
+
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 (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
+}
+
+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 (
- <>
-
- {nickname}
- {allowChanging && (
- allowChanging && onStream()}
- >
-
-
- )}
- {allowChanging && (
- allowChanging && openModal()}
- >
-
-
- )}
-
-
-
-
-
-
-
-
-
-
- >
+
+ {nickname}
+
);
}
-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%",
}}
>
-
+
{Object.entries(partyNicknames).map(([id, partyNickname]) => (
))}
@@ -59,9 +56,11 @@ function Party({
))}
-
+
+
+
-
+
);
}
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 (
+
+
+
+ );
+}
+
+export default StartStreamButton;