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

Dev
game-node-app · Mar 11, 2024 · 97163a8 · 97163a8
2 parents fd9dc40 + f6e572a
commit 97163a8
Show file tree

Hide file tree

Showing 24 changed files with 1,101 additions and 933 deletions.
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "axios": "^1.4.0",
     "bad-words": "^3.0.4",
     "embla-carousel-react": "^8.0.0-rc14",
+    "html-to-image": "^1.11.11",
     "next": "^14.0.3",
     "nextjs-cors": "^2.1.2",
     "npm-run-all": "^4.1.5",

diff --git a/src/components/auth/SuperTokensProvider.tsx b/src/components/auth/SuperTokensProvider.tsx
@@ -27,13 +27,12 @@ export const frontendConfig = () => {
             }),
             SessionReact.init(),
         ],
-        // this is so that the SDK uses the next router for navigation
         windowHandler: (oI: any) => {
             return {
                 ...oI,
                 location: {
                     ...oI.location,
-                    setHref: (href: any) => {
+                    setHref: (href: string) => {
                         Router.push(href);
                     },
                 },

diff --git a/src/components/collection/collection-entry/hooks/useCollectionEntriesForUserId.ts b/src/components/collection/collection-entry/hooks/useCollectionEntriesForUserId.ts
@@ -4,16 +4,19 @@ import {
     CollectionsService,
 } from "@/wrapper/server";
 
-export default function useCollectionEntriesForUserId(userId: string) {
+export default function useCollectionEntriesForUserId(
+    userId: string,
+    offset = 0,
+    limit = 20,
+) {
     return useQuery({
-        queryKey: ["collection-entries", "all", userId],
+        queryKey: ["collection-entries", "all", userId, offset, limit],
         queryFn: async () => {
             return CollectionsEntriesService.collectionsEntriesControllerFindAllByLibraryId(
                 userId,
-                0,
-                100,
+                offset,
+                limit,
             );
         },
-        staleTime: 5 * 60 * 1000,
     });
 }
diff --git a/src/components/collection/collection-entry/view/CollectionEntriesView.tsx b/src/components/collection/collection-entry/view/CollectionEntriesView.tsx
@@ -7,9 +7,6 @@ import CenteredLoading from "@/components/general/CenteredLoading";
 import { Box, Space } from "@mantine/core";
 import GameViewLayoutSwitcher from "@/components/general/view/game/GameViewLayoutSwitcher";
 import { IGameViewPaginationProps } from "@/components/general/view/game/GameViewPagination";
-import { TGameOrSearchGame } from "@/components/game/util/types";
-import { getGamePlatformInfo } from "@/components/game/util/getGamePlatformInfo";
-import GameInfoPlatformBadge from "@/components/game/info/GameInfoPlatformBadge";
 import CenteredErrorMessage from "@/components/general/CenteredErrorMessage";
 
 interface ICollectionEntriesViewProps extends IGameViewPaginationProps {

diff --git a/src/components/game/figure/GameListFigure.tsx b/src/components/game/figure/GameListFigure.tsx
@@ -7,8 +7,8 @@ import {
     Text,
     Title,
     Badge,
+    Flex,
 } from "@mantine/core";
-import Image from "next/image";
 import GameFigureImage, {
     IGameFigureProps,
 } from "@/components/game/figure/GameFigureImage";
@@ -17,25 +17,16 @@ import Link from "next/link";
 import { getLocalizedFirstReleaseDate } from "@/components/game/util/getLocalizedFirstReleaseDate";
 import { TGameOrSearchGame } from "@/components/game/util/types";
 import { getGameGenres } from "@/components/game/util/getGameGenres";
-import {
-    getGamePlatformInfo,
-    IGamePlatformInfo,
-} from "@/components/game/util/getGamePlatformInfo";
-import GameInfoPlatformBadge from "@/components/game/info/GameInfoPlatformBadge";
-import { Game } from "@/wrapper/server";
+import { getGamePlatformInfo } from "@/components/game/util/getGamePlatformInfo";
 import { getGameSpecialCategoryText } from "@/components/game/util/getGameSpecialCategoryText";
-import { useIconsForGamePlatforms } from "@/components/game/hooks/useIconsForGamePlatforms";
+import GameInfoPlatforms from "@/components/game/info/GameInfoPlatforms";
 
-interface IGameListFigureProps extends PropsWithChildren {
+interface IGameListFigureProps {
     game: TGameOrSearchGame;
     figureProps?: Partial<IGameFigureProps>;
 }
 
-const GameListFigure = ({
-    game,
-    figureProps,
-    children,
-}: IGameListFigureProps) => {
+const GameListFigure = ({ game, figureProps }: IGameListFigureProps) => {
     let name = game.name ?? "Unknown";
     const onMobile = useOnMobile();
     if (onMobile) {
@@ -50,7 +41,7 @@ const GameListFigure = ({
     const genreNames = genres?.join(", ");
     const categoryText = useMemo(
         () => getGameSpecialCategoryText(game?.category),
-        [game],
+        [game.category],
     );
 
     return (
@@ -105,9 +96,16 @@ const GameListFigure = ({
                         )}
                     </Text>
                 </Stack>
-                <Text size={"sm"} c={"dimmed"}>
-                    {platformsAbbreviations}
-                </Text>
+                <Flex className={"w-full"}>
+                    <GameInfoPlatforms
+                        gameId={game.id}
+                        justify={"start"}
+                        iconsProps={{
+                            w: 28,
+                        }}
+                    />
+                </Flex>
+
                 <Text size="sm" c={"dimmed"}>
                     {genreNames}
                 </Text>

diff --git a/src/components/game/hooks/useIconsForGamePlatforms.tsx b/src/components/game/hooks/useIconsForGamePlatforms.tsx
diff --git a/src/components/game/info/GameInfoActions.tsx b/src/components/game/info/GameInfoActions.tsx
@@ -1,12 +1,28 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { ActionIcon, Button, Group, Stack, Tooltip, Text } from "@mantine/core";
-import { IconHeartFilled, IconHeartPlus, IconX } from "@tabler/icons-react";
+import {
+    ActionIcon,
+    Button,
+    Group,
+    Stack,
+    Tooltip,
+    Text,
+    Modal,
+} from "@mantine/core";
+import {
+    IconHeartFilled,
+    IconHeartPlus,
+    IconShare,
+    IconX,
+} from "@tabler/icons-react";
 import CollectionEntryAddOrUpdateModal from "@/components/collection/collection-entry/form/modal/CollectionEntryAddOrUpdateModal";
 import { useDisclosure } from "@mantine/hooks";
 import { CollectionsEntriesService, Game } from "@/wrapper/server";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useOwnCollectionEntryForGameId } from "@/components/collection/collection-entry/hooks/useOwnCollectionEntryForGameId";
 import CollectionEntryRemoveModal from "@/components/collection/collection-entry/form/modal/CollectionEntryRemoveModal";
+import GameInfoShare from "@/components/game/info/share/GameInfoShare";
+import useReviewForUserIdAndGameId from "@/components/review/hooks/useReviewForUserIdAndGameId";
+import useUserId from "@/components/auth/hooks/useUserId";
 
 interface IGameViewActionsProps {
     wrapperProps?: React.ComponentPropsWithoutRef<typeof Group>;
@@ -21,7 +37,8 @@ interface IGameViewActionsProps {
 const GameInfoActions = ({ game, wrapperProps }: IGameViewActionsProps) => {
     const [addUpdateModalOpened, addUpdateModalUtils] = useDisclosure();
     const [removeModalOpened, removeModalUtils] = useDisclosure();
-
+    const [shareModalOpened, shareModalUtils] = useDisclosure();
+    const userId = useUserId();
     const collectionEntryQuery = useOwnCollectionEntryForGameId(game?.id);
 
     const gameInLibrary =
@@ -30,6 +47,10 @@ const GameInfoActions = ({ game, wrapperProps }: IGameViewActionsProps) => {
     const gameInFavorites =
         gameInLibrary && collectionEntryQuery.data!.isFavorite;
 
+    const reviewQuery = useReviewForUserIdAndGameId(userId, game?.id);
+
+    const hasReview = reviewQuery.data != undefined;
+
     const invisibleFavoriteGame = useMemo(() => {
         if (collectionEntryQuery.data != undefined) {
             const gameOnlyInPrivateCollections =
@@ -72,6 +93,17 @@ const GameInfoActions = ({ game, wrapperProps }: IGameViewActionsProps) => {
                     onClose={removeModalUtils.close}
                     gameId={game.id}
                 />
+                <Modal
+                    opened={shareModalOpened}
+                    onClose={shareModalUtils.close}
+                    title={"Share"}
+                >
+                    <GameInfoShare
+                        gameId={game.id}
+                        onClose={shareModalUtils.close}
+                    />
+                </Modal>
+
                 <Button onClick={addUpdateModalUtils.open}>
                     {gameInLibrary ? "Update" : "Add to library"}
                 </Button>
@@ -104,6 +136,17 @@ const GameInfoActions = ({ game, wrapperProps }: IGameViewActionsProps) => {
                         </ActionIcon>
                     </Tooltip>
                 )}
+                {hasReview && (
+                    <Tooltip label={"Share this game"}>
+                        <ActionIcon
+                            size="lg"
+                            variant="default"
+                            onClick={() => shareModalUtils.toggle()}
+                        >
+                            <IconShare size={"1.05rem"} />
+                        </ActionIcon>
+                    </Tooltip>
+                )}
             </Group>
             {invisibleFavoriteGame && (
                 <Text c={"dimmed"} fz={"sm"} className={"text-center"}>

diff --git a/src/components/game/info/GameInfoDetails.tsx b/src/components/game/info/GameInfoDetails.tsx
@@ -24,12 +24,17 @@ const GameInfoDetails = ({ game }: IGameInfoDetailsProps) => {
                     {getLocalizedFirstReleaseDate(game.firstReleaseDate) ??
                         "Unknown"}
                 </DetailsBox>
+                <GameInfoDetailsDeveloperInfo gameId={game.id} />
+                <GameInfoDetailsTags gameId={game.id} />
                 <DetailsBox withBorder withDimmedTitle title={"Summary"}>
                     {game.summary ?? "Unknown"}
                 </DetailsBox>
-                <GameInfoDetailsDeveloperInfo gameId={game.id} />
-                <GameInfoDetailsTags gameId={game.id} />
-                <GameInfoPlatforms gameId={game.id} />
+                <DetailsBox title={"Where to play"} withBorder withDimmedTitle>
+                    <GameInfoPlatforms
+                        gameId={game.id}
+                        className={"my-4 gap-5"}
+                    />
+                </DetailsBox>
                 <GameInfoScore gameId={game.id} />
             </SimpleGrid>
         </Stack>

diff --git a/src/components/game/info/GameInfoDetailsDeveloperInfo.tsx b/src/components/game/info/GameInfoDetailsDeveloperInfo.tsx
@@ -37,10 +37,6 @@ const GameInfoDetailsDeveloperInfo = ({ gameId }: IProps) => {
     const publishersNames =
         publishers?.map((company) => company.name).join(", ") ?? "Unknown";
 
-    if (game.isLoading) {
-        return <CenteredLoading />;
-    }
-
     return (
         <>
             <DetailsBox withBorder withDimmedTitle title={"Developer(s)"}>

diff --git a/src/components/game/info/GameInfoDetailsTags.tsx b/src/components/game/info/GameInfoDetailsTags.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { Game } from "@/wrapper/server";
 import { getGameGenres } from "@/components/game/util/getGameGenres";
 import { getGameThemes } from "@/components/game/util/getGameThemes";
-import { Badge, Group } from "@mantine/core";
+import { Badge, Group, Skeleton } from "@mantine/core";
 import { getGameModes } from "@/components/game/util/getGameModes";
 import { getGamePerspectives } from "@/components/game/util/getGamePerspectives";
 import { shuffleArray } from "@/util/shuffleArray";
@@ -43,18 +43,18 @@ const GameInfoDetailsTags = ({ gameId }: IProps) => {
     });
     const game = gameQuery.data;
     const tags = useMemo(() => getCombinedTags(game), [game]);
-    if (gameQuery.isLoading) {
-        return <CenteredLoading />;
-    }
-    if (tags == undefined || tags.length === 0) return "Empty";
-
+    const hasTags = tags != undefined && tags.length > 0;
     return (
         <DetailsBox withBorder withDimmedTitle title={"Tags"}>
             <Group justify={"start"} gap={10}>
-                {tags?.map((tag, index) => {
-                    if (!tag) return null;
-                    return <Badge key={index}>{tag}</Badge>;
-                })}
+                {gameQuery.isLoading && (
+                    <Skeleton className={"w-10/12 lg:w-4/12 h-4"}></Skeleton>
+                )}
+                {hasTags &&
+                    tags?.map((tag, index) => {
+                        if (!tag) return null;
+                        return <Badge key={index}>{tag}</Badge>;
+                    })}
             </Group>
         </DetailsBox>
     );