Added settings modal and reset data

src/components/SettingsButton.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { IconButton } from "theme-ui";
+
+import SettingsIcon from "../icons/SettingsIcon";
+import SettingsModal from "../modals/SettingsModal";
+
+function SettingsButton() {
+  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
+  function openModal() {
+    setIsSettingsModalOpen(true);
+  }
+  function closeModal() {
+    setIsSettingsModalOpen(false);
+  }
+
+  return (
+    <>
+      <IconButton
+        m={1}
+        aria-label="Settings"
+        title="Settings"
+        onClick={openModal}
+      >
+        <SettingsIcon />
+      </IconButton>
+      <SettingsModal isOpen={isSettingsModalOpen} onRequestClose={closeModal} />
+    </>
+  );
+}
+
+export default SettingsButton;

src/components/party/Party.js

@@ -5,6 +5,7 @@ import AddPartyMemberButton from "./AddPartyMemberButton";
 import Nickname from "./Nickname";
 import ChangeNicknameButton from "./ChangeNicknameButton";
 import StartStreamButton from "./StartStreamButton";
+import SettingsButton from "../SettingsButton";
 
 function Party({
   nickname,
@@ -60,6 +61,7 @@ function Party({
           stream={stream}
         />
         <AddPartyMemberButton gameId={gameId} />
+        <SettingsButton />
       </Flex>
     </Flex>
   );

src/icons/SettingsIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function SettingsIcon() {
+  return (
+    <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="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" />
+    </svg>
+  );
+}
+
+export default SettingsIcon;

src/modals/SettingsModal.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { Box, Label, Flex, Button } from "theme-ui";
+
+import Modal from "../components/Modal";
+
+import db from "../database";
+
+function SettingsModal({ isOpen, onRequestClose }) {
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+  async function handleEraseAllData() {
+    await db.delete();
+    window.location.reload();
+  }
+
+  return (
+    <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
+      <Box>
+        <Label py={2}>Settings</Label>
+        <Flex py={2}>
+          <Button
+            sx={{ flexGrow: 1 }}
+            onClick={() => setIsDeleteModalOpen(true)}
+          >
+            Erase all content and reset
+          </Button>
+        </Flex>
+        <Modal
+          isOpen={isDeleteModalOpen}
+          onRequestClose={() => setIsDeleteModalOpen(false)}
+        >
+          <Box>
+            <Label py={2}>Are you sure?</Label>
+            <Flex py={2}>
+              <Button
+                sx={{ flexGrow: 1 }}
+                m={1}
+                onClick={() => setIsDeleteModalOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button m={1} sx={{ flexGrow: 1 }} onClick={handleEraseAllData}>
+                Erase
+              </Button>
+            </Flex>
+          </Box>
+        </Modal>
+      </Box>
+    </Modal>
+  );
+}
+
+export default SettingsModal;