From bcf9f94c241ffcb90d0b01a907193536d2d4966c Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Mon, 13 Apr 2020 18:15:00 +1000 Subject: [PATCH] Refactored buttons and modals to be separate --- src/components/AddMapButton.js | 103 ++++--------------------- src/components/AddPartyMemberButton.js | 28 ++----- src/components/ChangeNicknameButton.js | 28 +++---- src/components/StartStreamButton.js | 39 ++++------ src/modals/AddMapModal.js | 100 ++++++++++++++++++++++++ src/modals/AddPartyMemberModal.js | 30 +++++++ src/modals/ChangeNicknameModal.js | 30 +++++++ src/modals/StartStreamModal.js | 45 +++++++++++ 8 files changed, 248 insertions(+), 155 deletions(-) create mode 100644 src/modals/AddMapModal.js create mode 100644 src/modals/AddPartyMemberModal.js create mode 100644 src/modals/ChangeNicknameModal.js create mode 100644 src/modals/StartStreamModal.js diff --git a/src/components/AddMapButton.js b/src/components/AddMapButton.js index e25875f..bac0be2 100644 --- a/src/components/AddMapButton.js +++ b/src/components/AddMapButton.js @@ -1,27 +1,11 @@ import React, { useRef, useState, useEffect } from "react"; -import { - IconButton, - Box, - Button, - Image as UIImage, - Flex, - Label, - Input, -} from "theme-ui"; +import { IconButton } from "theme-ui"; -import Modal from "./Modal"; +import AddMapModal from "../modals/AddMapModal"; const defaultMapSize = 22; function AddMapButton({ onMapChanged }) { - const fileInputRef = useRef(); - - function openImageDialog() { - if (fileInputRef.current) { - fileInputRef.current.click(); - } - } - const [isAddModalOpen, setIsAddModalOpen] = useState(false); function openModal() { setIsAddModalOpen(true); @@ -82,77 +66,18 @@ function AddMapButton({ onMapChanged }) { - - { - e.preventDefault(); - handleDone(); - }} - > - - - - - - - - - setRows(e.target.value)} - /> - - - - setColumns(e.target.value)} - /> - - - {mapSource ? ( - - ) : ( - - )} - - - + ); } diff --git a/src/components/AddPartyMemberButton.js b/src/components/AddPartyMemberButton.js index af8a28b..c9a1fa1 100644 --- a/src/components/AddPartyMemberButton.js +++ b/src/components/AddPartyMemberButton.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; -import { IconButton, Box, Label, Text } from "theme-ui"; +import { IconButton } from "theme-ui"; -import Modal from "./Modal"; +import AddPartyMemberModal from "../modals/AddPartyMemberModal"; function AddPartyMemberButton({ gameId }) { const [isAddModalOpen, setIsAddModalOpen] = useState(false); @@ -31,25 +31,11 @@ function AddPartyMemberButton({ gameId }) { - - - - - Other people can join using the game ID - - - {gameId} - - - Or by using this link - - - {window.location.href} - - - + ); } diff --git a/src/components/ChangeNicknameButton.js b/src/components/ChangeNicknameButton.js index 29b13c5..ee56da0 100644 --- a/src/components/ChangeNicknameButton.js +++ b/src/components/ChangeNicknameButton.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; -import { Box, Input, Button, Label, IconButton, Flex } from "theme-ui"; +import { IconButton } from "theme-ui"; -import Modal from "./Modal"; +import ChangeNicknameModal from "../modals/ChangeNicknameModal"; function ChangeNicknameButton({ nickname, onChange }) { const [isChangeModalOpen, setIsChangeModalOpen] = useState(false); @@ -41,23 +41,13 @@ function ChangeNicknameButton({ nickname, onChange }) { - - - - - - - - - + ); } diff --git a/src/components/StartStreamButton.js b/src/components/StartStreamButton.js index 2597f1a..b2f8703 100644 --- a/src/components/StartStreamButton.js +++ b/src/components/StartStreamButton.js @@ -1,8 +1,8 @@ import React, { useState } from "react"; -import { IconButton, Box, Text, Button, Label, Flex, Link } from "theme-ui"; +import { IconButton, Box, Text, Link } from "theme-ui"; import adapter from "webrtc-adapter"; -import Modal from "./Modal"; +import StartStreamModal from "../modals/StartStreamModal"; function StartStreamButton({ onStreamStart, onStreamEnd, stream }) { const [isStreamModalOpoen, setIsStreamModalOpen] = useState(false); @@ -89,30 +89,17 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) { - - - - - Share your computers audio with the party - - {!isSupported && unavailableMessage} - {isSupported && !stream && noAudioTrack && noAudioMessage} - - {isSupported && !stream && ( - - )} - {isSupported && stream && ( - - )} - - - + ); } diff --git a/src/modals/AddMapModal.js b/src/modals/AddMapModal.js new file mode 100644 index 0000000..fd1a735 --- /dev/null +++ b/src/modals/AddMapModal.js @@ -0,0 +1,100 @@ +import React, { useRef } from "react"; +import { Box, Button, Image as UIImage, Flex, Label, Input } from "theme-ui"; + +import Modal from "../components/Modal"; + +function AddMapModal({ + isOpen, + onRequestClose, + onDone, + onImageUpload, + rows, + onRowsChange, + columns, + onColumnsChange, + imageLoaded, + mapSource, +}) { + const fileInputRef = useRef(); + + function openImageDialog() { + if (fileInputRef.current) { + fileInputRef.current.click(); + } + } + return ( + + { + e.preventDefault(); + onDone(); + }} + > + + + + + + + + + onRowsChange(e.target.value)} + /> + + + + onColumnsChange(e.target.value)} + /> + + + {mapSource ? ( + + ) : ( + + )} + + + + ); +} + +export default AddMapModal; diff --git a/src/modals/AddPartyMemberModal.js b/src/modals/AddPartyMemberModal.js new file mode 100644 index 0000000..7a29568 --- /dev/null +++ b/src/modals/AddPartyMemberModal.js @@ -0,0 +1,30 @@ +import React from "react"; +import { Box, Label, Text } from "theme-ui"; + +import Modal from "../components/Modal"; + +function AddPartyMemberModal({ isOpen, onRequestClose, gameId }) { + return ( + + + + + Other people can join using the game ID + + + {gameId} + + + Or by using this link + + + {window.location.href} + + + + ); +} + +export default AddPartyMemberModal; diff --git a/src/modals/ChangeNicknameModal.js b/src/modals/ChangeNicknameModal.js new file mode 100644 index 0000000..49b9b5b --- /dev/null +++ b/src/modals/ChangeNicknameModal.js @@ -0,0 +1,30 @@ +import React from "react"; +import { Box, Input, Button, Label, Flex } from "theme-ui"; + +import Modal from "../components/Modal"; + +function ChangeNicknameModal({ + isOpen, + onRequestClose, + onChangeSubmit, + nickname, + onChange, +}) { + return ( + + + + + + + + + + ); +} + +export default ChangeNicknameModal; diff --git a/src/modals/StartStreamModal.js b/src/modals/StartStreamModal.js new file mode 100644 index 0000000..9d2f289 --- /dev/null +++ b/src/modals/StartStreamModal.js @@ -0,0 +1,45 @@ +import React from "react"; +import { Box, Text, Button, Label, Flex } from "theme-ui"; + +import Modal from "../components/Modal"; + +function StartStreamModal({ + isOpen, + onRequestClose, + isSupported, + unavailableMessage, + stream, + noAudioTrack, + noAudioMessage, + onStreamStart, + onStreamEnd, +}) { + return ( + + + + + Share your computers audio with the party + + {!isSupported && unavailableMessage} + {isSupported && !stream && noAudioTrack && noAudioMessage} + + {isSupported && !stream && ( + + )} + {isSupported && stream && ( + + )} + + + + ); +} + +export default StartStreamModal;