feat: Implement displaying user scope depending on game manifest :)

app/src/common/hooks/api/useGame.test.ts

@@ -0,0 +1,19 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+import useGame from "./useGame";
+
+it("loads the game", async () => {
+  const { result, waitForValueToChange } = renderHook(() => useGame());
+
+  await waitForValueToChange(() => result.current.data);
+  expect(result.current.data).toEqual(require("../../../mocks/data/game.json"));
+});
+
+it("returns an error when the game is not found", async () => {
+  const { result, waitForValueToChange } = renderHook(() => useGame());
+
+  await waitForValueToChange(() => result.current.error);
+  expect(result.current.error).toEqual(
+    require("../../../mocks/data/game-not-found.json")
+  );
+});

app/src/common/hooks/api/useGame.ts

@@ -0,0 +1,26 @@
+import useSWR from "swr";
+
+import { Game } from "../../types/Game";
+import ApiError from "./helper/ApiError";
+import config from "../../../config";
+import errorAwareFetcher from "./helper/errorAwareFetcher";
+import useApiUrl from "./useApiUrl";
+
+interface GameApiResponse {
+  data: Game;
+}
+
+/**
+ * A React hook that retrieves the game manifest
+ *
+ * @returns The game manifest. May be null during initial load
+ */
+const useGame = () => {
+  const url = useApiUrl((gameId) => config.apiEndpoints.game(gameId));
+  return useSWR<GameApiResponse, ApiError>(
+    () => url,
+    (url) => errorAwareFetcher(() => fetch(url))
+  );
+};
+
+export default useGame;

app/src/common/types/Game.ts

@@ -0,0 +1,8 @@
+export interface Game {
+  type: "game";
+  id: string;
+  attributes: {
+    hasMessages: boolean;
+    hasUserParameterScope: boolean;
+  };
+}

app/src/config.ts

@@ -5,6 +5,7 @@ interface Config {
   apiEndpoints: {
     clock: (gameId: string) => string;
     code: (codeId: string, gameId: string) => string;
+    game: (gameId: string) => string;
     parameters: (gameId: string) => string;
   };
 
@@ -19,6 +20,7 @@ const config: Config = {
     clock: (gameId: string) => `${process.env.API_ROOT}/games/${gameId}/clock`,
     code: (codeId: string, gameId: string) =>
       `${process.env.API_ROOT}/games/${gameId}/codes/${codeId}`,
+    game: (gameId: string) => `${process.env.API_ROOT}/games/${gameId}`,
     parameters: (gameId: string) =>
       `${process.env.API_ROOT}/games/${gameId}/parameters`,
   },

app/src/features/parameters/Parameters.tsx

@@ -1,35 +1,40 @@
 import { FormattedMessage } from "react-intl";
 import * as React from "react";
 
-import ParameterCard from "./ParameterCard";
 import {
   useParameters,
   useScopedParameterResponse,
 } from "../../common/hooks/api/useParameters";
+import ParameterCard from "./ParameterCard";
+import useGame from "../../common/hooks/api/useGame";
 
 const Parameters = () => {
+  const game = useGame();
+
   const { data } = useParameters();
   const userParams = useScopedParameterResponse("user", data);
   const globalParams = useScopedParameterResponse("global", data);
 
   return (
     <>
-      <ParameterCard
-        title={
-          <FormattedMessage
-            defaultMessage="Persönliches"
-            description="personal parameter card title"
-          />
-        }
-        description={
-          <FormattedMessage
-            defaultMessage="Diese Parameter betreffen nur dich selber. Tausche sie gegen Aktionskarten ein!"
-            description="personal parameter card description"
-          />
-        }
-        params={userParams}
-        numSkeletonParams={1}
-      />
+      {game.data?.data.attributes.hasUserParameterScope && (
+        <ParameterCard
+          title={
+            <FormattedMessage
+              defaultMessage="Persönliches"
+              description="personal parameter card title"
+            />
+          }
+          description={
+            <FormattedMessage
+              defaultMessage="Diese Parameter betreffen nur dich selber. Tausche sie gegen Aktionskarten ein!"
+              description="personal parameter card description"
+            />
+          }
+          params={userParams}
+          numSkeletonParams={1}
+        />
+      )}
       <ParameterCard
         title={
           <FormattedMessage

app/src/mocks/data/game-not-found.json

@@ -0,0 +1,9 @@
+{
+  "errors": [
+    {
+      "id": "not-found",
+      "status": 404,
+      "title": "Unknown game"
+    }
+  ]
+}

app/src/mocks/handlers.ts

@@ -46,6 +46,12 @@ export const handlers = [
   }),
 
   rest.get("/games/:gameId", (req, res, ctx) => {
+    if (req.params.gameId === "not-found") {
+      return res(
+        ctx.status(404),
+        ctx.json(require("./data/game-not-found.json"))
+      );
+    }
     return res(ctx.json(require("./data/game.json")));
   }),
 ];

docs/ABC-DPT.v1.yaml

@@ -367,7 +367,8 @@ paths:
         required: true
     get:
       summary: Your GET endpoint
-      tags: []
+      tags:
+        - App
       responses:
         "200":
           description: OK