feat: use game selector when chosen group has more than 1 game

rivet-gg · Sep 25, 2024 · 06990eb · 06990eb
1 parent 45afcd3
commit 06990eb
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 14 deletions.
diff --git a/apps/hub/src/components/breadcrumbs/game-breadcrumb.tsx b/apps/hub/src/components/breadcrumbs/game-breadcrumb.tsx
@@ -1,7 +1,11 @@
 import { GameAvatar } from "@/domains/game/components/game-avatar";
-import { gameQueryOptions } from "@/domains/game/queries";
+import { GroupGameSelect } from "@/domains/game/components/group-game-select";
+import {
+  gameQueryOptions,
+  gamesCountQueryOptions,
+} from "@/domains/game/queries";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { Link } from "@tanstack/react-router";
+import { Link, useNavigate } from "@tanstack/react-router";
 import { Fragment, useContext } from "react";
 import { NavItem } from "../header/nav-item";
 import { GroupBreadcrumb } from "./group-breadcrumb";
@@ -14,6 +18,16 @@ interface GameBreadcrumbProps {
 
 export function GameBreadcrumb({ gameId }: GameBreadcrumbProps) {
   const { data } = useSuspenseQuery(gameQueryOptions(gameId));
+  const { data: gamesCount } = useSuspenseQuery(
+    gamesCountQueryOptions(data.developerGroupId),
+  );
+
+  const navigate = useNavigate();
+  const handleGameChange = (gameId: string) => {
+    navigate({
+      params: { gameId },
+    });
+  };
 
   const isMobile = useContext(MobileBreadcrumbsContext);
 
@@ -24,18 +38,26 @@ export function GameBreadcrumb({ gameId }: GameBreadcrumbProps) {
       <GroupBreadcrumb groupId={data.developerGroupId} />
       <Separator />
       <Element>
-        <Link
-          to="/games/$gameId"
-          params={{ gameId }}
-          className="flex items-center gap-2"
-        >
-          <GameAvatar
-            displayName={data.displayName}
-            logoUrl={data.logoUrl}
-            className={isMobile ? "size-4" : "size-5"}
+        {gamesCount > 1 ? (
+          <GroupGameSelect
+            groupId={data.developerGroupId}
+            value={gameId}
+            onValueChange={handleGameChange}
           />
-          {data.displayName}
-        </Link>
+        ) : (
+          <Link
+            to="/games/$gameId"
+            params={{ gameId }}
+            className="flex items-center gap-2"
+          >
+            <GameAvatar
+              displayName={data.displayName}
+              logoUrl={data.logoUrl}
+              className={isMobile ? "size-4" : "size-5"}
+            />
+            {data.displayName}
+          </Link>
+        )}
       </Element>
     </>
   );

diff --git a/apps/hub/src/domains/game/components/group-game-select.tsx b/apps/hub/src/domains/game/components/group-game-select.tsx
@@ -0,0 +1,42 @@
+import { groupGamesQueryOptions } from "@/domains/game/queries";
+import {
+  AssetImage,
+  Flex,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@rivet-gg/components";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import type { ComponentProps } from "react";
+
+interface GroupGameSelectProps extends ComponentProps<typeof Select> {
+  groupId: string;
+}
+
+export function GroupGameSelect({ groupId, ...props }: GroupGameSelectProps) {
+  const { data } = useSuspenseQuery(groupGamesQueryOptions(groupId));
+
+  return (
+    <Select {...props}>
+      <SelectTrigger>
+        <SelectValue placeholder="Select game..." />
+      </SelectTrigger>
+      <SelectContent>
+        {data.games.map((game, index, groupList) => (
+          <SelectItem key={game.gameId} value={game.gameId}>
+            <Flex gap="2" items="center">
+              <AssetImage
+                src={game.logoUrl || "/games/blank/blankgame.svg"}
+                className="mx-auto size-5 object-contain"
+                alt="Game logo"
+              />
+              {game.displayName}
+            </Flex>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/apps/hub/src/domains/game/queries/query-options.tsx b/apps/hub/src/domains/game/queries/query-options.tsx
@@ -59,6 +59,13 @@ export const groupOnwerQueryOptions = (groupId: string) => {
   });
 };
 
+export const gamesCountQueryOptions = (groupId: string) => {
+  return queryOptions({
+    ...groupGamesQueryOptions(groupId),
+    select: (data) => data.games.length,
+  });
+};
+
 export const gameQueryOptions = (gameId: string) => {
   return queryOptions({
     queryKey: ["game", gameId],

diff --git a/packages/components/src/ui/select.tsx b/packages/components/src/ui/select.tsx
@@ -21,7 +21,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex whitespace-nowrap h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}