feat: Implement leave game menu option

Closes #16
barnslig · Jul 16, 2021 · 22b0eb5 · 22b0eb5
1 parent 2439a05
commit 22b0eb5
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 0 deletions.
diff --git a/app/lang/de.json b/app/lang/de.json
@@ -43,10 +43,18 @@
     "defaultMessage": "Ausführen",
     "description": "confirm qr code button"
   },
+  "KqZNMU": {
+    "defaultMessage": "Spiel verlassen",
+    "description": "appbar menu item leave game"
+  },
   "OgWAX/": {
     "defaultMessage": "QR-Code Aktionen",
     "description": "title of the confirm qr code actions page"
   },
+  "OzAuhp": {
+    "defaultMessage": "Spiel wirklich verlassen?",
+    "description": "leave game confirm message"
+  },
   "P5jGEu": {
     "defaultMessage": "Lebensmittelvorrat",
     "description": "parameter label"
@@ -79,6 +87,10 @@
     "defaultMessage": "Status",
     "description": "main nav main page item label"
   },
+  "ZelVIn": {
+    "defaultMessage": "Spiel erfolgreich verlassen!",
+    "description": "success snackbar on leave game"
+  },
   "eEE+z4": {
     "defaultMessage": "Diversity Puzzle Trails",
     "description": "main page title"

diff --git a/app/src/app/pages/IndexPage.tsx b/app/src/app/pages/IndexPage.tsx
@@ -26,6 +26,7 @@ import PausedHeroMessage from "../../common/components/PausedHeroMessage";
 import useCharacter from "../../common/hooks/useCharacter";
 import useClock from "../../common/hooks/api/useClock";
 import useUpdateClock from "../../common/hooks/api/useUpdateClock";
+import useLeaveGame from "../../common/hooks/useLeaveGame";
 
 const bg = require("./bg.svg");
 
@@ -58,6 +59,21 @@ const IndexPage = (props: IndexPageProps) => {
   const [appBarMenuIsOpen, setAppBarMenuIsOpen] = React.useState(false);
   const [updateClockIsLoading, updateClock] = useUpdateClock();
 
+  const leaveGame = useLeaveGame();
+  const onLeaveGame = () => {
+    if (
+      window.confirm(
+        intl.formatMessage({
+          defaultMessage: "Spiel wirklich verlassen?",
+          description: "leave game confirm message",
+        })
+      )
+    ) {
+      leaveGame();
+    }
+    setAppBarMenuIsOpen(false);
+  };
+
   return (
     <div className={classes.root}>
       <AppBar position="fixed" color="inherit">
@@ -132,6 +148,12 @@ const IndexPage = (props: IndexPageProps) => {
                 {updateClockIsLoading && <ButtonProgressIndicator />}
               </MenuItem>
             )}
+            <MenuItem onClick={onLeaveGame}>
+              <FormattedMessage
+                defaultMessage="Spiel verlassen"
+                description="appbar menu item leave game"
+              />
+            </MenuItem>
           </Menu>
         </Toolbar>
       </AppBar>

diff --git a/app/src/common/hooks/useLeaveGame.ts b/app/src/common/hooks/useLeaveGame.ts
@@ -0,0 +1,33 @@
+import { useIntl } from "react-intl";
+import { useLocation } from "wouter";
+import { useSnackbar } from "notistack";
+import useCharacter from "./useCharacter";
+import useGameId from "./useGameId";
+
+/**
+ * A React hook to leave the game
+ *
+ * @returns A function to call in order to leave the game
+ */
+const useLeaveGame = () => {
+  const [, , deleteCharacter] = useCharacter();
+  const [, , deleteGameId] = useGameId();
+  const [, setLocation] = useLocation();
+  const { enqueueSnackbar } = useSnackbar();
+  const intl = useIntl();
+
+  return () => {
+    deleteCharacter();
+    deleteGameId();
+    enqueueSnackbar(
+      intl.formatMessage({
+        defaultMessage: "Spiel erfolgreich verlassen!",
+        description: "success snackbar on leave game",
+      }),
+      { variant: "success" }
+    );
+    setLocation("/");
+  };
+};
+
+export default useLeaveGame;