fix(messages): Retrieve hasMessage from game manifest

barnslig · Jan 26, 2022 · e8709fd · e8709fd
1 parent 2d36fbf
commit e8709fd
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 37 deletions.
diff --git a/app/src/app/MainNav.test.tsx b/app/src/app/MainNav.test.tsx
@@ -1,22 +1,26 @@
-import { screen } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 import * as React from "react";
 import userEvent from "@testing-library/user-event";
 
 import config from "../config";
 import MainNav from "./MainNav";
 import render from "../common/testing/render";
 
-it("renders correctly", () => {
+it("renders correctly", async () => {
   const { container } = render(<MainNav />);
+  if (config.featureMessages) {
+    await waitFor(() => screen.getByText(/Nachrichten/));
+  }
   expect(container.firstChild).toMatchSnapshot();
 });
 
-it("sets the location on click", () => {
+it("sets the location on click", async () => {
   render(<MainNav />);
 
   expect(window.location.pathname).toEqual("/");
 
   if (config.featureMessages) {
+    await waitFor(() => screen.getByText(/Nachrichten/));
     userEvent.click(screen.getByText(/Nachrichten/));
     expect(window.location.pathname).toEqual("/messages");
   }

diff --git a/app/src/app/MainNav.tsx b/app/src/app/MainNav.tsx
@@ -4,15 +4,20 @@ import { Paper, BottomNavigation, BottomNavigationAction } from "@mui/material";
 import { useLocation } from "wouter";
 import * as React from "react";
 
-import QrCodeScanner from "../common/icons/QrCodeScanner";
-
 import config from "../config";
+import QrCodeScanner from "../common/icons/QrCodeScanner";
+import useGame from "../common/hooks/api/useGame";
 
 type MainNavProps = {};
 
 const MainNav = (props: MainNavProps) => {
   const [location, setLocation] = useLocation();
 
+  const { data: game } = useGame();
+
+  const hasMessages =
+    config.featureMessages && game && game.data.attributes.hasMessages;
+
   return (
     <Paper
       elevation={8}
@@ -50,7 +55,7 @@ const MainNav = (props: MainNavProps) => {
           }
           icon={<QrCodeScanner />}
         />
-        {config.featureMessages && (
+        {hasMessages && (
           <BottomNavigationAction
             value="/messages"
             label={

diff --git a/app/src/app/pages/__snapshots__/IndexPage.test.tsx.snap b/app/src/app/pages/__snapshots__/IndexPage.test.tsx.snap
@@ -389,31 +389,6 @@ exports[`initially asks the user to choose a character 1`] = `
           class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
         />
       </button>
-      <button
-        class="MuiButtonBase-root MuiBottomNavigationAction-root css-1ee5err-MuiButtonBase-root-MuiBottomNavigationAction-root"
-        tabindex="0"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-          data-testid="ChatBubbleIcon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"
-          />
-        </svg>
-        <span
-          class="MuiBottomNavigationAction-label css-imwso6-MuiBottomNavigationAction-label"
-        >
-          Nachrichten
-        </span>
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
-      </button>
     </div>
   </nav>
   <main
@@ -434,7 +409,7 @@ exports[`initially asks the user to choose a character 1`] = `
       </p>
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-q2ql64-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1w920nw-MuiSvgIcon-root"
         data-testid="ArrowDownwardIcon"
         focusable="false"
         viewBox="0 0 24 24"

diff --git a/app/src/common/components/ChooseCharacterHeroMessage.tsx b/app/src/common/components/ChooseCharacterHeroMessage.tsx
@@ -2,13 +2,18 @@ import { ArrowDownward } from "@mui/icons-material";
 import { FormattedMessage } from "react-intl";
 import * as React from "react";
 
-import HeroMessage from "./HeroMessage";
-
 import config from "../../config";
+import HeroMessage from "./HeroMessage";
+import useGame from "../hooks/api/useGame";
 
 type ChooseCharacterHeroMessageProps = {};
 
 const ChooseCharacterHeroMessage = (props: ChooseCharacterHeroMessageProps) => {
+  const { data: game } = useGame();
+
+  const hasMessages =
+    config.featureMessages && game && game.data.attributes.hasMessages;
+
   return (
     <HeroMessage
       title={
@@ -28,7 +33,7 @@ const ChooseCharacterHeroMessage = (props: ChooseCharacterHeroMessageProps) => {
           sx={{
             marginBottom: 3,
             marginTop: 3,
-            transform: config.featureMessages ? "" : "translateX(84px)",
+            transform: hasMessages ? "" : "translateX(84px)",
           }}
         />
       }

diff --git a/app/src/common/components/__snapshots__/ChooseCharacterHeroMessage.test.tsx.snap b/app/src/common/components/__snapshots__/ChooseCharacterHeroMessage.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`renders correctly 1`] = `
     </p>
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-q2ql64-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1w920nw-MuiSvgIcon-root"
       data-testid="ArrowDownwardIcon"
       focusable="false"
       viewBox="0 0 24 24"

diff --git a/app/src/mocks/data/game.json b/app/src/mocks/data/game.json
@@ -3,7 +3,7 @@
     "type": "game",
     "id": "summer-school-2021",
     "attributes": {
-      "hasMessages": false,
+      "hasMessages": true,
       "hasUserParameterScope": true
     }
   }