Add join functionality to party

co-author-by: mitchemmc <mitchemmc@gmail.com>

src/components/AddPartyMemberButton.js

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import Modal from "react-modal";
+import {
+  IconButton,
+  Flex,
+  Box,
+  Label,
+  Close,
+  useThemeUI,
+  Text
+} from "theme-ui";
+
+function AddPartyMemberButton({ streamId }) {
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const { theme } = useThemeUI();
+
+  function openModal() {
+    setIsAddModalOpen(true);
+  }
+
+  function closeModal() {
+    setIsAddModalOpen(false);
+  }
+
+  return (
+    <>
+      <Flex sx={{ justifyContent: "center" }} p={2}>
+        <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>
+      <Modal
+        isOpen={isAddModalOpen}
+        onRequestClose={closeModal}
+        style={{
+          overlay: { backgroundColor: "rgba(0, 0, 0, 0.73)" },
+          content: {
+            backgroundColor: theme.colors.background,
+            top: "50%",
+            left: "50%",
+            right: "auto",
+            bottom: "auto",
+            marginRight: "-50%",
+            transform: "translate(-50%, -50%)"
+          }
+        }}
+      >
+        <Box>
+          <Label p={2}>Other people can join using your ID (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧</Label>
+          <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
+            <Text>{streamId}</Text>
+          </Box>
+          <Close
+            m={1}
+            sx={{ position: "absolute", top: 0, right: 0 }}
+            onClick={closeModal}
+          />
+        </Box>
+      </Modal>
+    </>
+  );
+}
+
+export default AddPartyMemberButton;

src/components/Party.js

@@ -3,6 +3,7 @@ import React from "react";
 import { Flex } from "theme-ui";
 
 import PartyVideo from "./PartyVideo";
+import AddPartyMemberButton from "./AddPartyMemberButton";
 
 function Party({ streams, localStreamId }) {
   return (
@@ -14,6 +15,7 @@ function Party({ streams, localStreamId }) {
       {Object.entries(streams).map(([id, stream]) => (
         <PartyVideo key={id} stream={stream} muted={id === localStreamId} />
       ))}
+      <AddPartyMemberButton streamId={localStreamId} />
     </Flex>
   );
 }

src/index.js

@@ -1,9 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
+import Modal from "react-modal";
+
 import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(<App />, document.getElementById("root"));
+Modal.setAppElement("#root");
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.