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

Dev
game-node-app · May 10, 2024 · 51e71d7 · 51e71d7
2 parents d13875b + 5d3ddfd
commit 51e71d7
Show file tree

Hide file tree

Showing 33 changed files with 1,137 additions and 57 deletions.
diff --git a/src/components/activity/ActivityFeed.tsx b/src/components/activity/ActivityFeed.tsx
@@ -1,13 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 import { useInfiniteActivities } from "@/components/activity/hooks/useInfiniteActivities";
 import { Skeleton, Stack } from "@mantine/core";
-import { Activity } from "@/wrapper/server";
-import type = Activity.type;
-import ReviewActivityItem from "@/components/activity/item/ReviewActivityItem";
-import CenteredLoading from "@/components/general/CenteredLoading";
-import CollectionEntryActivityItem from "@/components/activity/item/CollectionEntryActivityItem";
 import CenteredErrorMessage from "@/components/general/CenteredErrorMessage";
-import UserFollowActivityItem from "@/components/activity/item/UserFollowActivityItem";
 import { useIntersection } from "@mantine/hooks";
 import ActivityList from "@/components/activity/ActivityList";
 

diff --git a/src/components/activity/item/ActivityCreateDate.tsx b/src/components/activity/item/ActivityCreateDate.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import getTimeSinceString from "@/util/getTimeSinceString";
+import { Text } from "@mantine/core";
+
+interface Props {
+    createdAtDate: string | undefined;
+}
+
+const sevenDaysMs = 7 * 24 * 60 * 60 * 1000;
+
+const ActivityCreateDate = ({ createdAtDate }: Props) => {
+    if (!createdAtDate) {
+        return;
+    }
+    const createdAt = new Date(createdAtDate);
+    const timeSince = getTimeSinceString(createdAt);
+    const isSevenDaysOrOlder =
+        new Date().getTime() - createdAt.getTime() >= sevenDaysMs;
+    return (
+        <Text c={"dimmed"} fz={"sm"}>
+            {isSevenDaysOrOlder
+                ? createdAt.toLocaleDateString()
+                : `${timeSince} ago`}
+        </Text>
+    );
+};
+
+export default ActivityCreateDate;
diff --git a/src/components/activity/item/CollectionEntryActivityItem.tsx b/src/components/activity/item/CollectionEntryActivityItem.tsx
@@ -19,6 +19,7 @@ import TextLink from "@/components/general/TextLink";
 import getTimeSinceString from "@/util/getTimeSinceString";
 import { UserAvatar } from "@/components/general/input/UserAvatar";
 import { UserAvatarGroup } from "@/components/general/input/UserAvatarGroup";
+import ActivityCreateDate from "@/components/activity/item/ActivityCreateDate";
 
 interface Props {
     activity: Activity;
@@ -45,10 +46,6 @@ const CollectionEntryActivityItem = ({ activity }: Props) => {
         return null;
     }
 
-    const collectionEntryCreateDate = collectionEntryQuery.data
-        ? new Date(collectionEntryQuery.data.createdAt)
-        : new Date();
-    const timeSince = getTimeSinceString(collectionEntryCreateDate);
     return (
         <Box
             style={{
@@ -103,9 +100,9 @@ const CollectionEntryActivityItem = ({ activity }: Props) => {
                             "w-full h-full items-end justify-between pe-2 lg:pe-3 py-4"
                         }
                     >
-                        <Text c={"dimmed"} fz={"sm"}>
-                            {timeSince} ago
-                        </Text>
+                        <ActivityCreateDate
+                            createdAtDate={activity.createdAt}
+                        />
                         <Link
                             href={`/library/${activity.profileUserId}/collection/${activity.collectionId}`}
                         >

diff --git a/src/components/activity/item/ReviewActivityItem.tsx b/src/components/activity/item/ReviewActivityItem.tsx
@@ -16,6 +16,7 @@ import UserAvatarWithUsername from "@/components/general/input/UserAvatarWithUse
 import Link from "next/link";
 import getTimeSinceString from "@/util/getTimeSinceString";
 import { UserAvatarGroup } from "@/components/general/input/UserAvatarGroup";
+import ActivityCreateDate from "@/components/activity/item/ActivityCreateDate";
 
 interface Props {
     activity: Activity;
@@ -34,11 +35,6 @@ const ReviewActivityItem = ({ activity }: Props) => {
         gameQuery.data?.cover?.url,
         onMobile ? ImageSize.SCREENSHOT_MED : ImageSize.SCREENSHOT_BIG,
     );
-    const reviewCreateDate = reviewQuery.data
-        ? new Date(reviewQuery.data.createdAt)
-        : new Date();
-
-    const timeSince = getTimeSinceString(reviewCreateDate);
 
     return (
         <Box
@@ -94,9 +90,9 @@ const ReviewActivityItem = ({ activity }: Props) => {
                             "w-full h-full items-end justify-between py-4 pe-2 lg:pe-3"
                         }
                     >
-                        <Text c={"dimmed"} fz={"sm"}>
-                            {timeSince} ago
-                        </Text>
+                        <ActivityCreateDate
+                            createdAtDate={activity.createdAt}
+                        />
                         <GameRating
                             value={reviewQuery.data?.rating}
                             size={"md"}

diff --git a/src/components/connections/hooks/useAvailableConnections.ts b/src/components/connections/hooks/useAvailableConnections.ts
@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { ConnectionsService } from "@/wrapper/server";
+
+export function useAvailableConnections() {
+    return useQuery({
+        queryKey: ["connections", "available"],
+        queryFn: async () => {
+            return ConnectionsService.connectionsControllerFindAvailableConnections();
+        },
+    });
+}
diff --git a/src/components/connections/hooks/useOwnUserConnectionByType.ts b/src/components/connections/hooks/useOwnUserConnectionByType.ts
@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import { ConnectionsService } from "@/wrapper/server";
+import { ConnectionCreateDto } from "@/wrapper/server";
+import type = ConnectionCreateDto.type;
+
+export function useOwnUserConnectionByType(type: type) {
+    return useQuery({
+        queryKey: ["connections", "own", type],
+        queryFn: async () => {
+            return ConnectionsService.connectionsControllerFindOwnByType(type);
+        },
+        retry: 1,
+    });
+}
diff --git a/src/components/connections/hooks/useOwnUserConnections.ts b/src/components/connections/hooks/useOwnUserConnections.ts
@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { ConnectionsService } from "@/wrapper/server";
+
+/**
+ * Returns the connections persisted by the current logged-in user.
+ */
+export function useOwnUserConnections() {
+    return useQuery({
+        queryKey: ["connections", "own"],
+        queryFn: async () => {
+            return ConnectionsService.connectionsControllerFindOwn();
+        },
+        retry: 1,
+    });
+}
diff --git a/src/components/explore/ExploreScreenFilters.tsx b/src/components/explore/ExploreScreenFilters.tsx
@@ -136,11 +136,7 @@ const ExploreScreenFilters = ({
         drawerUtils.close();
     };
 
-    /**
-     * useLayoutEffect executes BEFORE the screen is updated, so this avoids screen "blinks" when a screen is in
-     * an unfinished state
-     */
-    useLayoutEffect(() => {
+    useEffect(() => {
         const query = router.query;
         if (router.isReady && !hasLoadedQueryParams) {
             const dto = exploreScreenUrlQueryToDto(query);

diff --git a/src/components/game/figure/GameFigureImage.tsx b/src/components/game/figure/GameFigureImage.tsx
@@ -38,27 +38,18 @@ const GameFigureImage = ({
 }: IGameFigureProps) => {
     const coverUrl = getCoverUrl(game);
     const sizedCoverUrl = getSizedImageUrl(coverUrl, ImageSize.COVER_BIG);
-    const [showSkeleton, setShowSkeleton] = useState(true);
     const defaultHref = `/game/${game?.id}`;
-    useEffect(() => {
-        if (showSkeleton) {
-            setShowSkeleton(false);
-        }
-    }, [showSkeleton, game?.id]);
     return (
         <Link
             href={href ?? defaultHref}
             className="w-full h-auto"
             onClick={onClick}
         >
             <AspectRatio ratio={264 / 354} pos="relative" h={"100%"} w={"auto"}>
-                <Skeleton animate visible={showSkeleton} className={"z-10"} />
                 <Image
                     radius={"sm"}
                     src={sizedCoverUrl ?? "/img/game_placeholder.jpeg"}
                     alt={"Game cover"}
-                    onLoad={() => setShowSkeleton(false)}
-                    onError={() => setShowSkeleton(false)}
                     className="w-full h-auto max-h-full"
                     {...imageProps}
                 />

diff --git a/src/components/general/shell/GlobalAppShell.tsx b/src/components/general/shell/GlobalAppShell.tsx
@@ -38,10 +38,7 @@ const GlobalAppShell = ({ children }: { children: React.ReactNode }) => {
                 />
             </AppShell.Header>
             <AppShell.Navbar>
-                <GlobalShellNavbar
-                    sidebarOpened={sidebarOpened}
-                    onClose={modalUtils.close}
-                />
+                <GlobalShellNavbar onClose={modalUtils.close} />
             </AppShell.Navbar>
 
             <AppShell.Main pos={"relative"}>{children}</AppShell.Main>

diff --git a/src/components/general/shell/GlobalShellNavbar/GlobalShellNavbar.tsx b/src/components/general/shell/GlobalShellNavbar/GlobalShellNavbar.tsx
@@ -5,6 +5,8 @@ import {
     IconCheckbox,
     IconRouteAltLeft,
     IconProps,
+    IconHierarchy,
+    IconRefresh,
 } from "@tabler/icons-react";
 import { UserButton } from "@/components/general/input/UserButton/UserButton";
 import Link from "next/link";
@@ -36,14 +38,13 @@ const links: NavbarItem[] = [
     { icon: IconUser, label: "Library", href: "/library" },
     { icon: IconCheckbox, label: "Achievements", href: "/achievements" },
     { icon: IconBulb, label: "Activity", href: "/activity" },
+    // It's disabled during beta, if you are reading this you're cheating :p
+    // { icon: IconRefresh, label: "Importer", href: "/importer" },
 ];
 
-interface IGlobalShellNavbarProps extends BaseModalChildrenProps {
-    sidebarOpened: boolean;
-}
+interface IGlobalShellNavbarProps extends BaseModalChildrenProps {}
 
 export default function GlobalShellNavbar({
-    sidebarOpened,
     onClose,
 }: IGlobalShellNavbarProps) {
     const [query, setQuery] = useState<string>("");

diff --git a/src/components/general/view/game/GameViewPagination.tsx b/src/components/general/view/game/GameViewPagination.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Center, Pagination, PaginationProps } from "@mantine/core";
+import { Center, Group, Pagination, PaginationProps } from "@mantine/core";
 import { PaginationInfo } from "@/wrapper/server";
 import { TPaginationInfoDto } from "@/util/types/pagination";
 
@@ -17,7 +17,7 @@ const GameViewPagination = ({
     return (
         <Center w={"100%"}>
             <Pagination
-                value={page}
+                value={page || 1}
                 total={paginationInfo?.totalPages || 1}
                 onChange={onPaginationChange}
             />

diff --git a/src/components/general/view/select/GameSelectActions.tsx b/src/components/general/view/select/GameSelectActions.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { ActionIcon, Group, Tooltip } from "@mantine/core";
+import { IconSquareCheck, IconSquareCheckFilled } from "@tabler/icons-react";
+
+interface Props {
+    isAllGamesSelected: boolean;
+    onSelectAll: () => void;
+}
+
+const GameSelectActions = ({ onSelectAll, isAllGamesSelected }: Props) => {
+    return (
+        <Group wrap={"nowrap"} gap={"xs"}>
+            <Tooltip label={"Select all items"}>
+                <ActionIcon
+                    size={"lg"}
+                    variant={"transparent"}
+                    onClick={onSelectAll}
+                >
+                    {isAllGamesSelected ? (
+                        <IconSquareCheckFilled className={"w-full h-full"} />
+                    ) : (
+                        <IconSquareCheck className={"w-full h-full"} />
+                    )}
+                </ActionIcon>
+            </Tooltip>
+        </Group>
+    );
+};
+
+export default GameSelectActions;
diff --git a/src/components/general/view/select/GameSelectView.tsx b/src/components/general/view/select/GameSelectView.tsx
@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from "react";
+import GameSelectViewContent from "@/components/general/view/select/GameSelectViewContent";
+import GameViewPagination from "@/components/general/view/game/GameViewPagination";
+import GameSelectActions from "@/components/general/view/select/GameSelectActions";
+
+interface GameSelectViewProps extends PropsWithChildren {}
+
+const GameSelectView = ({ children }: GameSelectViewProps) => {
+    return <>{children}</>;
+};
+
+GameSelectView.Content = GameSelectViewContent;
+GameSelectView.Pagination = GameViewPagination;
+GameSelectView.Actions = GameSelectActions;
+
+export default GameSelectView;
diff --git a/src/components/general/view/select/GameSelectViewContent.tsx b/src/components/general/view/select/GameSelectViewContent.tsx
@@ -0,0 +1,60 @@
+import React, { PropsWithChildren, useMemo } from "react";
+import { TGameOrSearchGame } from "@/components/game/util/types";
+import { SimpleGrid, SimpleGridProps } from "@mantine/core";
+import GameSelectViewFigure, {
+    GameSelectViewFigureProps,
+} from "@/components/general/view/select/GameSelectViewFigure";
+
+type SelectedProps = Pick<
+    GameSelectViewFigureProps,
+    "onSelected" | "onDeselected" | "checkIsSelected"
+>;
+
+interface Props extends PropsWithChildren<SimpleGridProps & SelectedProps> {
+    items: TGameOrSearchGame[];
+}
+
+const GameSelectViewContent = ({
+    items,
+    children,
+    checkIsSelected,
+    onSelected,
+    onDeselected,
+    ...others
+}: Props) => {
+    const columns = useMemo(() => {
+        if (items == undefined || items.length === 0) {
+            return null;
+        }
+
+        return items.map((game) => {
+            return (
+                <GameSelectViewFigure
+                    key={game.id!}
+                    checkIsSelected={checkIsSelected}
+                    onSelected={onSelected}
+                    onDeselected={onDeselected}
+                    game={game}
+                />
+            );
+        });
+    }, [checkIsSelected, items, onDeselected, onSelected]);
+
+    return (
+        <SimpleGrid
+            id={"game-view-content"}
+            cols={{
+                base: 2,
+                lg: 5,
+            }}
+            w={"100%"}
+            h={"100%"}
+            {...others}
+        >
+            {columns}
+            {children}
+        </SimpleGrid>
+    );
+};
+
+export default GameSelectViewContent;