Merge pull request #1663 from notaphplover/refactor/add-game-hooks

Add game hooks

packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1GameId.spec.ts

@@ -261,10 +261,7 @@ describe(getGamesV1GameId.name, () => {
             SerializableAppError,
             never
           > = {
-            error: {
-              kind: AppErrorKind.entityNotFound,
-              message: resultFixture.body.description,
-            },
+            data: undefined,
           };
 
           expect(result).toStrictEqual(expected);

packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1GameId.ts

@@ -61,10 +61,7 @@ export function getGamesV1GameId(
         };
       case NOT_FOUND:
         return {
-          error: {
-            kind: AppErrorKind.entityNotFound,
-            message: httpResponse.body.description,
-          },
+          data: undefined,
         };
       default:
         return {

packages/frontend/web-ui/src/common/http/services/__mocks__/cornieApi.ts

@@ -9,6 +9,8 @@ export const cornieApi: jest.Mocked<typeof originalCornieApi> = {
   useCreateUsersV1EmailCodeMutation: jest.fn(),
   useCreateUsersV1Mutation: jest.fn(),
   useGetGamesSpecsV1Query: jest.fn(),
+  useGetGamesV1GameIdQuery: jest.fn(),
+  useGetGamesV1GameIdSlotsSlotIdCardsQuery: jest.fn(),
   useGetGamesV1MineQuery: jest.fn(),
   useGetGamesV1Query: jest.fn(),
   useGetUsersV1MeDetailQuery: jest.fn(),

packages/frontend/web-ui/src/common/pages/PageNotFound.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Grid, Link, Typography } from '@mui/material';
+import { Box, Button, Grid2, Link, Typography } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 
 import { getSlug } from '../helpers/getSlug';
@@ -8,22 +8,22 @@ import { PageName } from '../models/PageName';
 export const PageNotFound = (): React.JSX.Element => {
   return (
     <CornieLayout withFooter withNavBar>
-      <Grid
+      <Grid2
         className="page-not-found-page-container"
         container
         spacing={0}
         direction="column"
         alignItems="center"
         justifyContent="center"
       >
-        <Grid item xs={3}>
+        <Grid2 size={3}>
           <Box className="box-shadow user-info-form-grid">
             <Typography variant="h5" className="user-info-form-title">
               {'Page not found'}
             </Typography>
 
-            <Grid container>
-              <Grid item xs={12}>
+            <Grid2 container>
+              <Grid2 size={12}>
                 <Box className="page-not-found-button-box">
                   <Link
                     component={RouterLink}
@@ -35,11 +35,11 @@ export const PageNotFound = (): React.JSX.Element => {
                     </Button>
                   </Link>
                 </Box>
-              </Grid>
-            </Grid>
+              </Grid2>
+            </Grid2>
           </Box>
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
     </CornieLayout>
   );
 };

packages/frontend/web-ui/src/game/hooks/useGetGamesV1GameId.spec.ts

@@ -0,0 +1,90 @@
+import { afterAll, beforeAll, describe, expect, it, jest } from '@jest/globals';
+
+jest.mock('../../common/helpers/mapUseQueryHookResult');
+jest.mock('../../common/http/services/cornieApi');
+
+import { models as apiModels } from '@cornie-js/api-models';
+import { renderHook, RenderHookResult } from '@testing-library/react';
+
+import {
+  mapUseQueryHookResult,
+  UseQueryStateResult,
+} from '../../common/helpers/mapUseQueryHookResult';
+import { cornieApi } from '../../common/http/services/cornieApi';
+import { Either } from '../../common/models/Either';
+import {
+  useGetGamesV1GameId,
+  UseGetGamesV1GameIdResult,
+} from './useGetGamesV1GameId';
+
+describe(useGetGamesV1GameId.name, () => {
+  describe('when called', () => {
+    let gameIdFixture: string;
+    let useQueryStateResultFixture: UseQueryStateResult<
+      apiModels.GameV1 | undefined
+    > & {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      refetch: () => any;
+    };
+    let mapUseQueryHookResultResult: Either<string, apiModels.GameV1> | null;
+
+    let renderResult: RenderHookResult<UseGetGamesV1GameIdResult, unknown>;
+
+    beforeAll(() => {
+      gameIdFixture = 'game-id-fixture';
+      useQueryStateResultFixture = {
+        data: undefined,
+        error: undefined,
+        isLoading: true,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        refetch: jest.fn<any>(),
+      };
+      mapUseQueryHookResultResult = null;
+
+      (
+        cornieApi.useGetGamesV1GameIdQuery as jest.Mock<
+          typeof cornieApi.useGetGamesV1GameIdQuery
+        >
+      ).mockReturnValueOnce(useQueryStateResultFixture);
+
+      (
+        mapUseQueryHookResult as jest.Mock<typeof mapUseQueryHookResult>
+      ).mockReturnValueOnce(mapUseQueryHookResultResult);
+
+      renderResult = renderHook(() => useGetGamesV1GameId(gameIdFixture));
+    });
+
+    afterAll(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should call cornieApi.useGetGamesV1GameIdQuery()', () => {
+      expect(cornieApi.useGetGamesV1GameIdQuery).toHaveBeenCalledTimes(1);
+      expect(cornieApi.useGetGamesV1GameIdQuery).toHaveBeenCalledWith(
+        {
+          params: [
+            {
+              gameId: gameIdFixture,
+            },
+          ],
+        },
+        { skip: false },
+      );
+    });
+
+    it('should call mapUseQueryHookResult()', () => {
+      expect(mapUseQueryHookResult).toHaveBeenCalledTimes(1);
+      expect(mapUseQueryHookResult).toHaveBeenCalledWith(
+        useQueryStateResultFixture,
+      );
+    });
+
+    it('should return expected result', () => {
+      const expected: UseGetGamesV1GameIdResult = {
+        result: mapUseQueryHookResultResult,
+      };
+
+      expect(renderResult.result.current).toStrictEqual(expected);
+    });
+  });
+});

packages/frontend/web-ui/src/game/hooks/useGetGamesV1GameId.ts

@@ -0,0 +1,32 @@
+import { models as apiModels } from '@cornie-js/api-models';
+
+import { mapUseQueryHookResult } from '../../common/helpers/mapUseQueryHookResult';
+import { cornieApi } from '../../common/http/services/cornieApi';
+import { Either } from '../../common/models/Either';
+
+export interface UseGetGamesV1GameIdResult {
+  result: Either<string, apiModels.GameV1> | null;
+}
+
+export function useGetGamesV1GameId(
+  gameId: string | null,
+): UseGetGamesV1GameIdResult {
+  const useGetUsersV1MeQueryResult = cornieApi.useGetGamesV1GameIdQuery(
+    {
+      params: [
+        {
+          gameId: gameId ?? '',
+        },
+      ],
+    },
+    {
+      skip: gameId === null,
+    },
+  );
+
+  const result: Either<string, apiModels.GameV1> | null = mapUseQueryHookResult(
+    useGetUsersV1MeQueryResult,
+  );
+
+  return { result };
+}

packages/frontend/web-ui/src/game/hooks/useGetGamesV1GameIdSlotsSlotIdCards.spec.ts

@@ -0,0 +1,106 @@
+import { afterAll, beforeAll, describe, expect, it, jest } from '@jest/globals';
+
+jest.mock('../../common/helpers/mapUseQueryHookResult');
+jest.mock('../../common/http/services/cornieApi');
+
+import { models as apiModels } from '@cornie-js/api-models';
+import { renderHook, RenderHookResult } from '@testing-library/react';
+
+import {
+  mapUseQueryHookResult,
+  UseQueryStateResult,
+} from '../../common/helpers/mapUseQueryHookResult';
+import { cornieApi } from '../../common/http/services/cornieApi';
+import { Either } from '../../common/models/Either';
+import {
+  useGetGamesV1GameIdSlotsSlotIdCards,
+  UseGetGamesV1GameIdSlotsSlotIdCardsResult,
+} from './useGetGamesV1GameIdSlotsSlotIdCards';
+
+describe(useGetGamesV1GameIdSlotsSlotIdCards.name, () => {
+  describe('when called', () => {
+    let gameIdFixture: string;
+    let gameSlotIndexFixture: string;
+    let useQueryStateResultFixture: UseQueryStateResult<apiModels.CardArrayV1> & {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      refetch: () => any;
+    };
+    let mapUseQueryHookResultResult: Either<
+      string,
+      apiModels.CardArrayV1
+    > | null;
+
+    let renderResult: RenderHookResult<
+      UseGetGamesV1GameIdSlotsSlotIdCardsResult,
+      unknown
+    >;
+
+    beforeAll(() => {
+      gameIdFixture = 'game-id-fixture';
+      gameSlotIndexFixture = '1';
+      useQueryStateResultFixture = {
+        data: undefined,
+        error: undefined,
+        isLoading: true,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        refetch: jest.fn<any>(),
+      };
+      mapUseQueryHookResultResult = null;
+
+      (
+        cornieApi.useGetGamesV1GameIdSlotsSlotIdCardsQuery as jest.Mock<
+          typeof cornieApi.useGetGamesV1GameIdSlotsSlotIdCardsQuery
+        >
+      ).mockReturnValueOnce(useQueryStateResultFixture);
+
+      (
+        mapUseQueryHookResult as jest.Mock<typeof mapUseQueryHookResult>
+      ).mockReturnValueOnce(mapUseQueryHookResultResult);
+
+      renderResult = renderHook(() =>
+        useGetGamesV1GameIdSlotsSlotIdCards(
+          gameIdFixture,
+          gameSlotIndexFixture,
+        ),
+      );
+    });
+
+    afterAll(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should call cornieApi.useGetGamesV1GameIdSlotsSlotIdCardsQuery()', () => {
+      expect(
+        cornieApi.useGetGamesV1GameIdSlotsSlotIdCardsQuery,
+      ).toHaveBeenCalledTimes(1);
+      expect(
+        cornieApi.useGetGamesV1GameIdSlotsSlotIdCardsQuery,
+      ).toHaveBeenCalledWith(
+        {
+          params: [
+            {
+              gameId: gameIdFixture,
+              gameSlotIndex: gameSlotIndexFixture,
+            },
+          ],
+        },
+        { skip: false },
+      );
+    });
+
+    it('should call mapUseQueryHookResult()', () => {
+      expect(mapUseQueryHookResult).toHaveBeenCalledTimes(1);
+      expect(mapUseQueryHookResult).toHaveBeenCalledWith(
+        useQueryStateResultFixture,
+      );
+    });
+
+    it('should return expected result', () => {
+      const expected: UseGetGamesV1GameIdSlotsSlotIdCardsResult = {
+        result: mapUseQueryHookResultResult,
+      };
+
+      expect(renderResult.result.current).toStrictEqual(expected);
+    });
+  });
+});

packages/frontend/web-ui/src/game/hooks/useGetGamesV1GameIdSlotsSlotIdCards.ts

@@ -0,0 +1,34 @@
+import { models as apiModels } from '@cornie-js/api-models';
+
+import { mapUseQueryHookResult } from '../../common/helpers/mapUseQueryHookResult';
+import { cornieApi } from '../../common/http/services/cornieApi';
+import { Either } from '../../common/models/Either';
+
+export interface UseGetGamesV1GameIdSlotsSlotIdCardsResult {
+  result: Either<string, apiModels.CardArrayV1> | null;
+}
+
+export const useGetGamesV1GameIdSlotsSlotIdCards = (
+  gameId: string | null,
+  gameSlotIndex: string | null,
+): UseGetGamesV1GameIdSlotsSlotIdCardsResult => {
+  const useGetUsersV1MeQueryResult =
+    cornieApi.useGetGamesV1GameIdSlotsSlotIdCardsQuery(
+      {
+        params: [
+          {
+            gameId: gameId ?? '',
+            gameSlotIndex: gameSlotIndex ?? '0',
+          },
+        ],
+      },
+      {
+        skip: gameId === null || gameSlotIndex === null,
+      },
+    );
+
+  const result: Either<string, apiModels.CardArrayV1> | null =
+    mapUseQueryHookResult(useGetUsersV1MeQueryResult);
+
+  return { result };
+};