Dev

package.json

@@ -63,7 +63,7 @@
     "postcss-simple-vars": "^7.0.1",
     "tailwindcss": "3.3.3",
     "ts-node": "^10.9.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.4"
   },
   "prettier": {
     "tabWidth": 4,

src/components/achievement/AchievementsScreen.tsx

@@ -43,7 +43,9 @@ const AchievementsScreen = ({ targetUserId }: Props) => {
                     </Box>
 
                     {isOwnUserId && (
-                        <Button className={""}>Redeem a code</Button>
+                        <Button className={""} disabled>
+                            Redeem a code
+                        </Button>
                     )}
                 </Group>
 

src/components/achievement/ObtainedAchievementItem.tsx

@@ -4,16 +4,13 @@ import { useAchievements } from "@/components/achievement/hooks/useAchievements"
 
 interface Props {
     targetUserId: string;
-    obtainedAchievementId: string;
+    achievementId: string;
 }
 
-const ObtainedAchievementItem = ({
-    obtainedAchievementId,
-    targetUserId,
-}: Props) => {
+const ObtainedAchievementItem = ({ achievementId, targetUserId }: Props) => {
     const achievementsQuery = useAchievements({});
     const achievementEntity = achievementsQuery.data?.data.find(
-        (achievement) => achievement.id === obtainedAchievementId,
+        (achievement) => achievement.id === achievementId,
     );
     return (
         <AchievementItem

src/components/auth/SuperTokensProvider.tsx

@@ -1,6 +1,8 @@
 import SuperTokensReact, { SuperTokensWrapper } from "supertokens-auth-react";
 import React from "react";
-import ThirdPartyPasswordlessReact from "supertokens-auth-react/recipe/thirdpartypasswordless";
+import ThirdPartyPasswordlessReact, {
+    GetRedirectionURLContext,
+} from "supertokens-auth-react/recipe/thirdpartypasswordless";
 import SessionReact from "supertokens-auth-react/recipe/session";
 import Router from "next/router";
 
@@ -13,6 +15,23 @@ export const frontendConfig = () => {
             apiBasePath: "/v1/auth",
             websiteBasePath: "/auth",
         },
+        getRedirectionURL: async (context: any) => {
+            if (context.action === "SUCCESS" && context.newSessionCreated) {
+                if (context.redirectToPath !== undefined) {
+                    // we are navigating back to where the user was before they authenticated
+                    return context.redirectToPath;
+                }
+                if (context.createdNewUser) {
+                    // user signed up
+                    return "/wizard/init";
+                } else {
+                    // user signed in
+                }
+                return "/";
+            }
+            return undefined;
+        },
+
         recipeList: [
             ThirdPartyPasswordlessReact.init({
                 contactMethod: "EMAIL",
@@ -23,17 +42,6 @@ export const frontendConfig = () => {
                         ThirdPartyPasswordlessReact.Discord.init(),
                     ],
                 },
-                onHandleEvent: (context) => {
-                    // Sends user to /wizard/init on sign-up
-                    if (context.action === "SUCCESS") {
-                        if (
-                            context.isNewRecipeUser &&
-                            context.user.loginMethods.length === 1
-                        ) {
-                            Router.push("/wizard/init");
-                        }
-                    }
-                },
             }),
             SessionReact.init(),
         ],

src/components/auth/hooks/useUserId.tsx

@@ -2,7 +2,6 @@ import { useSessionContext } from "supertokens-auth-react/recipe/session";
 
 const useUserId = (): string | undefined => {
     const session = useSessionContext();
-
     if (!session.loading && session.doesSessionExist) {
         return session.userId;
     }

src/components/collection/collection-entry/hooks/useCollectionEntriesForCollectionId.ts

@@ -14,7 +14,6 @@ interface UseCollectionEntriesForCollectionIdProps {
     collectionId: string;
     limit?: number;
     offset?: number;
-    gameRelations?: Record<string, object | boolean>;
 }
 
 /**
@@ -29,20 +28,15 @@ export function useCollectionEntriesForCollectionId({
     collectionId,
     limit,
     offset,
-    gameRelations,
 }: UseCollectionEntriesForCollectionIdProps): ExtendedUseQueryResult<
     CollectionEntriesPaginatedResponseDto | undefined
 > {
     const queryClient = useQueryClient();
-    const queryKey = [
-        "collection-entries",
-        collectionId,
-        offset,
-        limit,
-        gameRelations,
-    ];
+    const queryKey = ["collection-entries", collectionId, offset, limit];
     const invalidate = () => {
-        return queryClient.invalidateQueries({ queryKey: [queryKey[0]] });
+        return queryClient.invalidateQueries({
+            queryKey: [queryKey.slice(0, 2)],
+        });
     };
     return {
         ...useQuery({
@@ -51,39 +45,11 @@ export function useCollectionEntriesForCollectionId({
                 if (!collectionId) {
                     return undefined;
                 }
-                const collectionEntriesQuery =
-                    await getCollectionEntriesByCollectionId(
-                        collectionId,
-                        offset,
-                        limit,
-                    );
-
-                if (
-                    collectionEntriesQuery &&
-                    collectionEntriesQuery.data &&
-                    collectionEntriesQuery.data.length > 0
-                ) {
-                    const gameIds = collectionEntriesQuery.data.map(
-                        (entry) => entry.gameId,
-                    );
-
-                    const gamesRequest =
-                        await GameRepositoryService.gameRepositoryControllerFindAllByIds(
-                            {
-                                gameIds: gameIds,
-                                relations: gameRelations,
-                            },
-                        );
-                    collectionEntriesQuery.data =
-                        collectionEntriesQuery.data.map((entry) => {
-                            // Associates game with current entry
-                            entry.game = gamesRequest.find(
-                                (game) => game.id === entry.gameId,
-                            )!;
-                            return entry;
-                        });
-                }
-                return collectionEntriesQuery;
+                return await getCollectionEntriesByCollectionId(
+                    collectionId,
+                    offset,
+                    limit,
+                );
             },
             enabled: !!collectionId,
             placeholderData: keepPreviousData,

src/components/collection/collection-entry/view/CollectionEntriesView.tsx

@@ -1,8 +1,7 @@
 import React, { useMemo, useState } from "react";
-import { CollectionEntry } from "@/wrapper/server";
-import { Container, Stack } from "@mantine/core";
+import { CollectionEntry, Game } from "@/wrapper/server";
+import { Stack } from "@mantine/core";
 import GameView from "@/components/general/view/game/GameView";
-import GameSearchResultErrorMessage from "@/components/game/search/GameSearchResultErrorMessage";
 import CenteredLoading from "@/components/general/CenteredLoading";
 import { Box, Space } from "@mantine/core";
 import GameViewLayoutSwitcher from "@/components/general/view/game/GameViewLayoutSwitcher";
@@ -12,22 +11,18 @@ import CenteredErrorMessage from "@/components/general/CenteredErrorMessage";
 interface ICollectionEntriesViewProps extends IGameViewPaginationProps {
     isLoading: boolean;
     isError: boolean;
-    isFetching: boolean;
-    entries: CollectionEntry[] | undefined;
+    games: Game[] | undefined;
 }
 
 const CollectionEntriesView = ({
-    entries,
+    games,
     isError,
     isLoading,
     paginationInfo,
     onPaginationChange,
     page,
 }: ICollectionEntriesViewProps) => {
     const [layout, setLayout] = useState<"grid" | "list">("grid");
-    const entriesGames = useMemo(() => {
-        return entries?.map((entry) => entry.game);
-    }, [entries]);
 
     const render = () => {
         if (isError) {
@@ -38,11 +33,7 @@ const CollectionEntriesView = ({
             );
         } else if (isLoading) {
             return <CenteredLoading />;
-        } else if (
-            entries == undefined ||
-            entriesGames == undefined ||
-            entriesGames.length === 0
-        ) {
+        } else if (games == undefined || games.length === 0) {
             return (
                 <CenteredErrorMessage message={"This collection is empty."} />
             );
@@ -54,12 +45,12 @@ const CollectionEntriesView = ({
                     h={"100%"}
                     mt={"md"}
                 >
-                    <Box className="w-full flex justify-end mb-8 ">
+                    <Box className="w-full flex justify-end mb-8">
                         <Box className={"!me-4"}>
                             <GameViewLayoutSwitcher setLayout={setLayout} />
                         </Box>
                     </Box>
-                    <GameView.Content items={entriesGames} />
+                    <GameView.Content items={games} />
                     <Space h={"2rem"} />
                     <GameView.Pagination
                         page={page}

src/components/collection/view/CollectionView.tsx

@@ -10,6 +10,7 @@ import {
     Stack,
     Text,
     Title,
+    Tooltip,
 } from "@mantine/core";
 import { useCollectionEntriesForCollectionId } from "@/components/collection/collection-entry/hooks/useCollectionEntriesForCollectionId";
 import { Collection } from "@/wrapper/server";
@@ -87,19 +88,29 @@ const CollectionView = ({
         collectionId,
         offset: requestParams.offset,
         limit: requestParams.limit,
-        gameRelations: {
+    });
+    const gamesIds =
+        collectionQuery.data?.entries.map((entry) => entry.gameId) || [];
+    const gamesQuery = useGames({
+        gameIds: gamesIds,
+        relations: {
             cover: true,
-            platforms: true,
         },
     });
+    const games = gamesQuery.data;
+
     const profileQuery = useUserProfile(userId);
     const profile = profileQuery.data;
 
-    if (collectionQuery.isError || collectionEntriesQuery.isError) {
-        return (
-            <Center>We couldn't fetch this resource. Please, try again.</Center>
-        );
-    }
+    const isLoading =
+        collectionQuery.isLoading ||
+        collectionEntriesQuery.isLoading ||
+        gamesQuery.isLoading;
+    const isError =
+        collectionQuery.isError ||
+        collectionEntriesQuery.isLoading ||
+        gamesQuery.isError;
+
     return (
         <Container fluid p={0} h={"100%"}>
             {collection && profile && (
@@ -141,17 +152,29 @@ const CollectionView = ({
                     </Stack>
                     {isOwnCollection && (
                         <Group justify={"end"}>
-                            <ActionIcon
-                                onClick={() => createUpdateModalUtils.open()}
-                            >
-                                <IconDots size={"1.2rem"} />
-                            </ActionIcon>
-                            <ActionIcon onClick={() => moveModalUtils.open()}>
-                                <IconReplace size={"1.2rem"} />
-                            </ActionIcon>
-                            <ActionIcon onClick={() => removeModalUtils.open()}>
-                                <IconTrash size={"1.2rem"} />
-                            </ActionIcon>
+                            <Tooltip label={"Collection settings"}>
+                                <ActionIcon
+                                    onClick={() =>
+                                        createUpdateModalUtils.open()
+                                    }
+                                >
+                                    <IconDots size={"1.2rem"} />
+                                </ActionIcon>
+                            </Tooltip>
+                            <Tooltip label={"Move games between collections"}>
+                                <ActionIcon
+                                    onClick={() => moveModalUtils.open()}
+                                >
+                                    <IconReplace size={"1.2rem"} />
+                                </ActionIcon>
+                            </Tooltip>
+                            <Tooltip label={"Delete collection"}>
+                                <ActionIcon
+                                    onClick={() => removeModalUtils.open()}
+                                >
+                                    <IconTrash size={"1.2rem"} />
+                                </ActionIcon>
+                            </Tooltip>
                         </Group>
                     )}
                 </Group>
@@ -161,10 +184,9 @@ const CollectionView = ({
                     variant={"dashed"}
                 />
                 <CollectionEntriesView
-                    isLoading={collectionEntriesQuery.isLoading}
-                    isError={collectionEntriesQuery.isError}
-                    isFetching={collectionEntriesQuery.isFetching}
-                    entries={collectionEntriesQuery.data?.data}
+                    isLoading={isLoading}
+                    isError={isError}
+                    games={games}
                     paginationInfo={collectionEntriesQuery.data?.pagination}
                     page={watch("page")}
                     onPaginationChange={(page) => {

src/components/explore/ExploreScreenFilters.tsx

@@ -14,6 +14,7 @@ import {
     ComboboxItem,
     Drawer,
     Group,
+    LoadingOverlay,
     Select,
     SimpleGrid,
     Stack,
@@ -23,11 +24,8 @@ import { useRouter } from "next/router";
 import { IconAdjustments } from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
 import period = FindStatisticsTrendingReviewsDto.period;
-import { ParsedUrlQuery } from "querystring";
-import { QueryKey, useQueryClient } from "@tanstack/react-query";
 import { GameResourceFilter } from "@/components/game/util/types";
 import {
-    DEFAULT_EXPLORE_TRENDING_GAMES_DTO,
     exploreScreenDtoToSearchParams,
     exploreScreenUrlQueryToDto,
 } from "@/components/explore/utils";
@@ -194,6 +192,7 @@ const ExploreScreenFilters = ({
             </ActionIcon>
             <Select
                 {...register("period")}
+                description={"Trending in"}
                 data={SELECT_PERIOD_DATA}
                 value={watch("period")}
                 allowDeselect={false}
@@ -202,7 +201,7 @@ const ExploreScreenFilters = ({
                     setValue("period", value);
                     onSubmit({ period: v as period });
                 }}
-            ></Select>
+            />
         </Group>
     );
 };