Merge pull request #102 from game-node-app/dev

Dev

package.json

@@ -13,17 +13,18 @@
   "dependencies": {
     "@hookform/resolvers": "^3.1.1",
     "@mantine/carousel": "^7.7.1",
+    "@mantine/charts": "^7.11.2",
     "@mantine/core": "^7.7.1",
     "@mantine/dates": "^7.8.1",
     "@mantine/dropzone": "^7.7.1",
     "@mantine/hooks": "^7.7.1",
     "@mantine/next": "^6.0.21",
     "@mantine/notifications": "^7.7.1",
     "@mantine/nprogress": "^7.7.1",
+    "@mantine/tiptap": "^7.7.1",
     "@socialgouv/matomo-next": "^1.8.1",
     "@tabler/icons-react": "^3.1.0",
     "@tanstack/react-query": "^5.29.0",
-    "@mantine/tiptap": "^7.7.1",
     "@tiptap/extension-link": "^2.2.6",
     "@tiptap/pm": "^2.2.6",
     "@tiptap/react": "^2.2.6",
@@ -40,6 +41,7 @@
     "react-dom": "^18.2.0",
     "react-easy-crop": "^5.0.6",
     "react-hook-form": "^7.51.2",
+    "recharts": "2",
     "reconnecting-eventsource": "^1.6.2",
     "supertokens-auth-react": "^0.39.1",
     "supertokens-node": "^17.0.3",
@@ -55,14 +57,14 @@
     "@types/node": "20.12.5",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
-    "prettier": "^3.0.0",
     "eslint": "^8.52.0",
     "eslint-config-next": "^14.1.4",
     "eslint-config-prettier": "^9.0.0",
     "openapi-typescript-codegen": "^0.28.0",
     "postcss": "^8.4.38",
     "postcss-preset-mantine": "^1.9.0",
     "postcss-simple-vars": "^7.0.1",
+    "prettier": "^3.0.0",
     "tailwindcss": "3.4.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.4.4"

src/components/explore/ExploreScreenFilters.tsx

@@ -29,12 +29,12 @@ import ExploreScreenResourceSelector from "@/components/explore/ExploreScreenRes
 import { useRouter } from "next/router";
 import { IconAdjustments } from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
-import period = FindStatisticsTrendingReviewsDto.period;
 import { GameResourceFilter } from "@/components/game/util/types";
 import {
     exploreScreenDtoToSearchParams,
     exploreScreenUrlQueryToDto,
 } from "@/components/explore/utils";
+import period = FindStatisticsTrendingGamesDto.period;
 
 export const DEFAULT_EXPLORE_SCREEN_PERIOD = period.MONTH.valueOf();
 

src/components/game/hooks/useGamesResource.ts

@@ -1,8 +1,8 @@
 import { useQuery, UseQueryResult } from "@tanstack/react-query";
-import { ApiError, GameRepositoryService } from "@/wrapper/server";
+import { ApiError, Game, GameRepositoryService } from "@/wrapper/server";
 
-export function useGamesResource<T>(
-    resourceName: string,
+export function useGamesResource<T, U extends keyof Game = any>(
+    resourceName: U,
 ): UseQueryResult<T[], ApiError> {
     return useQuery({
         queryKey: ["game", "resource", resourceName],

src/components/game/info/GameExtraInfoView.tsx

@@ -4,78 +4,48 @@ import { DetailsBox } from "@/components/general/DetailsBox";
 import GameInfoCarousel from "@/components/game/info/carousel/GameInfoCarousel";
 import Break from "@/components/general/Break";
 import { useGame } from "@/components/game/hooks/useGame";
+import GameRelatedGamesCarousel from "@/components/game/info/GameRelatedGamesCarousel";
 
 interface IGameExtraInfoViewProps {
     id: number;
 }
 
-const DEFAULT_SIMILAR_GAMES_DTO = {
-    relations: {
-        similarGames: {
-            cover: true,
-        },
-    },
-};
-
-const DEFAULT_DLCS_GAMES_DTO = {
-    relations: {
-        dlcs: {
-            cover: true,
-        },
-    },
-};
-
-const DEFAULT_DLC_OF_GAMES_DTO = {
-    relations: {
-        dlcOf: {
-            cover: true,
-        },
-    },
-};
-
 const GameExtraInfoView = ({ id }: IGameExtraInfoViewProps) => {
-    const similarGamesQuery = useGame(id, DEFAULT_SIMILAR_GAMES_DTO);
-    const dlcsGamesQuery = useGame(id, DEFAULT_DLCS_GAMES_DTO);
-    const dlcsOfGamesQuery = useGame(id, DEFAULT_DLC_OF_GAMES_DTO);
-    const hasDlcsOf =
-        dlcsOfGamesQuery.data != undefined &&
-        dlcsOfGamesQuery.data.dlcOf != undefined &&
-        dlcsOfGamesQuery.data.dlcOf.length > 0;
-    const hasDlcs =
-        dlcsGamesQuery.data != undefined &&
-        dlcsGamesQuery.data.dlcs != undefined &&
-        dlcsGamesQuery.data.dlcs.length > 0;
-
-    const hasSimilarGames =
-        similarGamesQuery.data != undefined &&
-        similarGamesQuery.data.similarGames != undefined &&
-        similarGamesQuery.data.similarGames.length > 0;
     return (
         <Paper w={"100%"} h={"100%"} suppressHydrationWarning>
             <Flex w={"100%"} h={"100%"} wrap={"wrap"}>
-                <DetailsBox enabled={hasDlcsOf} title={"DLC of"}>
-                    <GameInfoCarousel
-                        games={dlcsOfGamesQuery.data?.dlcOf}
-                        isLoading={dlcsOfGamesQuery.isLoading}
-                        isError={dlcsOfGamesQuery.isError}
-                    />
-                </DetailsBox>
+                <GameRelatedGamesCarousel
+                    title={"Expansion of"}
+                    gameId={id}
+                    relationProperty={"expansionOf"}
+                />
+                <Break />
+                <GameRelatedGamesCarousel
+                    title={"Expansions"}
+                    gameId={id}
+                    relationProperty={"expansions"}
+                />
+                <Break />
+
+                <GameRelatedGamesCarousel
+                    title={"DLC of"}
+                    gameId={id}
+                    relationProperty={"dlcOf"}
+                />
                 <Break />
-                <DetailsBox enabled={hasDlcs} title={"DLCs"}>
-                    <GameInfoCarousel
-                        games={dlcsGamesQuery.data?.dlcs}
-                        isLoading={dlcsGamesQuery.isLoading}
-                        isError={dlcsGamesQuery.isError}
-                    />
-                </DetailsBox>
+
+                <GameRelatedGamesCarousel
+                    title={"DLCs"}
+                    gameId={id}
+                    relationProperty={"dlcs"}
+                />
                 <Break />
-                <DetailsBox enabled={hasSimilarGames} title={"Similar games"}>
-                    <GameInfoCarousel
-                        games={similarGamesQuery.data?.similarGames}
-                        isLoading={similarGamesQuery.isLoading}
-                        isError={similarGamesQuery.isError}
-                    />
-                </DetailsBox>
+
+                <GameRelatedGamesCarousel
+                    title={"Similar games"}
+                    gameId={id}
+                    relationProperty={"similarGames"}
+                />
             </Flex>
         </Paper>
     );

src/components/game/info/GameRelatedGamesCarousel.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Game } from "@/wrapper/server";
+import { useGame } from "@/components/game/hooks/useGame";
+import { DetailsBox } from "@/components/general/DetailsBox";
+import GameInfoCarousel from "@/components/game/info/carousel/GameInfoCarousel";
+
+interface GameRelatedGameCarouselProps {
+    title: string;
+    gameId: number;
+    relationProperty: keyof Game;
+}
+
+const GameRelatedGamesCarousel = ({
+    title,
+    gameId,
+    relationProperty,
+}: GameRelatedGameCarouselProps) => {
+    const gameWithRelationsQuery = useGame(gameId, {
+        relations: {
+            [relationProperty]: {
+                cover: true,
+            },
+        },
+    });
+
+    const data = gameWithRelationsQuery.data;
+    // Make sure to add runtime checks for an array of games too.
+    const relationData = gameWithRelationsQuery.data?.[relationProperty] as
+        | Game[]
+        | undefined;
+
+    const hasRelations =
+        relationData != undefined &&
+        Array.isArray(relationData) != undefined &&
+        relationData.length > 0;
+
+    return (
+        <DetailsBox enabled={hasRelations} title={title}>
+            <GameInfoCarousel
+                isLoading={gameWithRelationsQuery.isLoading}
+                isError={gameWithRelationsQuery.isError}
+                games={relationData || []}
+            />
+        </DetailsBox>
+    );
+};
+
+export default GameRelatedGamesCarousel;

src/components/game/info/carousel/GameInfoCarousel.tsx

@@ -31,7 +31,7 @@ const buildSkeletons = () => {
     for (let i = 0; i < 7; i++) {
         skeletons.push(
             <Carousel.Slide key={i}>
-                <Skeleton height={300} />
+                <Skeleton height={250} />
             </Carousel.Slide>,
         );
     }
@@ -67,7 +67,7 @@ const GameInfoCarousel = ({
                 base: "65%",
                 lg: "15%",
             }}
-            height={300}
+            height={"fit-content"}
             align="start"
             slideGap={{
                 base: "xs",

src/components/game/info/review/GameInfoReviewList.tsx

@@ -21,7 +21,6 @@ import { FindStatisticsTrendingReviewsDto } from "@/wrapper/server";
 import { useReviews } from "@/components/review/hooks/useReviews";
 import CenteredLoading from "@/components/general/CenteredLoading";
 import CenteredErrorMessage from "@/components/general/CenteredErrorMessage";
-import period = FindStatisticsTrendingReviewsDto.period;
 import Link from "next/link";
 
 interface IGameInfoReviewListProps {
@@ -32,7 +31,6 @@ const DEFAULT_LIMIT = 7;
 
 export const DEFAULT_GAME_REVIEW_LIST_VIEW_DTO: FindStatisticsTrendingReviewsDto =
     {
-        period: period.MONTH,
         offset: 0,
         limit: DEFAULT_LIMIT,
     };
@@ -67,17 +65,15 @@ const GameInfoReviewList = ({ gameId }: IGameInfoReviewListProps) => {
     const { reviewId } = router.query;
     const ownUserId = useUserId();
     const hasSetInitialQueryParams = useRef(false);
-    const [currentPeriod, setCurrentPeriod] = useState(period.MONTH.valueOf());
     const [offset, setOffset] = useState(0);
     const trendingReviewsDto = useMemo((): FindStatisticsTrendingReviewsDto => {
         return {
             ...DEFAULT_GAME_REVIEW_LIST_VIEW_DTO,
             offset: offset,
             gameId: gameId,
-            reviewId: reviewId as string,
-            period: currentPeriod as period,
+            reviewId: reviewId as string | undefined,
         };
-    }, [offset, gameId, reviewId, currentPeriod]);
+    }, [offset, gameId, reviewId]);
     const trendingReviewsQuery = useTrendingReviews(trendingReviewsDto);
     const trendingReviewsPagination = trendingReviewsQuery.data?.pagination;
 
@@ -142,20 +138,6 @@ const GameInfoReviewList = ({ gameId }: IGameInfoReviewListProps) => {
         <DetailsBox enabled={content != undefined} title={"Reviews"}>
             <Stack w={"100%"} justify={"space-between"}>
                 <Stack w={"100%"} align={"start"}>
-                    <Tabs
-                        value={currentPeriod}
-                        onChange={(v) => setCurrentPeriod(v as period)}
-                        w={"100%"}
-                    >
-                        <Tabs.List grow={onMobile}>
-                            <Tabs.Tab value={period.MONTH.valueOf()}>
-                                Trending
-                            </Tabs.Tab>
-                            <Tabs.Tab value={period.ALL.valueOf()}>
-                                All
-                            </Tabs.Tab>
-                        </Tabs.List>
-                    </Tabs>
                     {reviewId && (
                         <Group className={"w-full"}>
                             <Link href={`/game/${gameId}`}>

src/components/general/Break.tsx

@@ -3,7 +3,7 @@ import React, { ComponentPropsWithoutRef } from "react";
 interface IBreakProps extends ComponentPropsWithoutRef<"div"> {}
 
 const Break = ({ ...props }: IBreakProps) => {
-    return <div className="w-full h-0" {...props}></div>;
+    return <div className="basis-full" {...props}></div>;
 };
 
 export default Break;

src/components/general/DetailsBox.tsx

@@ -31,7 +31,8 @@ export const DetailsBox = ({
                         borderRadius: withBorder ? "6px" : undefined,
                     },
                 }}
-                className={`justify-start px-4 py-2`}
+                gap={"0.5rem"}
+                className={`justify-start px-4 py-2 `}
                 {...stackProps}
             >
                 <Text

src/components/general/TextLink.tsx

@@ -4,11 +4,17 @@ import Link from "next/link";
 
 interface ITextLinkProps extends PropsWithChildren<TextProps> {
     href: string;
+    linkProps?: React.HTMLProps<HTMLAnchorElement>;
 }
 
-const TextLink = ({ href, children, ...textProps }: ITextLinkProps) => {
+const TextLink = ({
+    href,
+    children,
+    linkProps,
+    ...textProps
+}: ITextLinkProps) => {
     return (
-        <Link href={href}>
+        <Link href={href} {...linkProps}>
             <Text {...textProps} className={`underline ${textProps.className}`}>
                 {children}
             </Text>

src/components/general/TitleLink.tsx

@@ -4,11 +4,17 @@ import Link from "next/link";
 
 interface ITitleLinkProps extends PropsWithChildren<TitleProps> {
     href: string;
+    linkProps?: React.HTMLProps<HTMLAnchorElement>;
 }
 
-const TitleLink = ({ href, children, ...titleProps }: ITitleLinkProps) => {
+const TitleLink = ({
+    href,
+    children,
+    linkProps,
+    ...titleProps
+}: ITitleLinkProps) => {
     return (
-        <Link href={href}>
+        <Link href={href} {...linkProps}>
             <Title
                 {...titleProps}
                 className={`underline ${titleProps.className}`}

src/components/general/shell/GlobalAppShell.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { AppShell, useMantineTheme } from "@mantine/core";
+import { AppShell, Box, useMantineTheme } from "@mantine/core";
 import GlobalShellHeader from "@/components/general/shell/GlobalShellHeader/GlobalShellHeader";
 import { useDisclosure, useHeadroom } from "@mantine/hooks";
 import GlobalShellFooter from "@/components/general/shell/GlobalShellFooter";
@@ -40,8 +40,15 @@ const GlobalAppShell = ({ children }: { children: React.ReactNode }) => {
             <AppShell.Navbar>
                 <GlobalShellNavbar onClose={modalUtils.close} />
             </AppShell.Navbar>
-
-            <AppShell.Main pos={"relative"}>{children}</AppShell.Main>
+            {/**
+             Remove 'ps=0' to make the sidebar push the main content to its right when opened
+             */}
+            <AppShell.Main
+                pos={"relative"}
+                className={"!ps-0 xl:flex xl:justify-center"}
+            >
+                <Box className={"w-full xl:max-w-screen-xl"}>{children}</Box>
+            </AppShell.Main>
             <AppShell.Footer pos={"static"}>
                 <GlobalShellFooter />
             </AppShell.Footer>