ui minor changes

rivet-gg · Sep 25, 2024 · ca670ea · ca670ea
1 parent 64eae55
commit ca670ea
Show file tree

Hide file tree

Showing 15 changed files with 60 additions and 648 deletions.
diff --git a/apps/hub/src/app.tsx b/apps/hub/src/app.tsx
@@ -34,6 +34,7 @@ export const router = createRouter({
   },
   // Since we're using React Query, we don't want loader calls to ever be stale
   // This will ensure that the loader is always called when the route is preloaded or visited
+  defaultPreload: "intent",
   defaultPreloadStaleTime: 0,
   defaultOnCatch: (error) => {
     Sentry.captureException(error);

diff --git a/apps/hub/src/components/featured-modules-grid.tsx b/apps/hub/src/components/featured-modules-grid.tsx
@@ -1,19 +1,15 @@
-import { Grid, H2 } from "@rivet-gg/components";
+import { featuredModulesQueryOptions } from "@/domains/game/queries";
+import { DocumentedModuleCard, Grid, H2 } from "@rivet-gg/components";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { motion } from "framer-motion";
 import type { ReactNode } from "react";
-import OpenGBMeta from "../../vendor/opengb-modules-meta.json";
-import { ModuleCard } from "./module-card";
-
-const FEATURED_MODULES = ["lobbies", "friends", "analytics"];
 
 interface FeaturesModulesGridProps {
   footer?: ReactNode;
 }
 
 export function FeaturesModulesGrid({ footer }: FeaturesModulesGridProps) {
-  const modules = OpenGBMeta.categories
-    .flatMap((category) => category.modules)
-    .filter((module) => FEATURED_MODULES.includes(module.id));
+  const { data } = useSuspenseQuery(featuredModulesQueryOptions());
 
   return (
     <motion.section
@@ -30,11 +26,16 @@ export function FeaturesModulesGrid({ footer }: FeaturesModulesGridProps) {
         items="start"
         className="my-4"
       >
-        {modules.map((module) => (
-          <ModuleCard key={module.id} layoutAnimation={false} {...module} />
+        {data.map(({ id, module }) => (
+          <DocumentedModuleCard
+            key={id}
+            id={id}
+            layoutAnimation={false}
+            {...module.config}
+          />
         ))}
       </Grid>
-      {footer}
+      {footer ? <div className="text-right">{footer}</div> : null}
     </motion.section>
   );
 }

diff --git a/apps/hub/src/components/module-card.tsx b/apps/hub/src/components/module-card.tsx
diff --git a/apps/hub/src/domains/game/helpers/try-create-backend.ts b/apps/hub/src/domains/game/helpers/try-create-backend.ts
@@ -7,7 +7,11 @@ export async function tryCreateBackend({
   gameId,
   environmentId,
   queryClient,
-}: { gameId: string; environmentId: string; queryClient: QueryClient }) {
+}: {
+  gameId: string;
+  environmentId: string;
+  queryClient: QueryClient;
+}) {
   try {
     await queryClient.fetchQuery(
       gameBackendQueryOptions({ gameId, environmentId }),

diff --git a/apps/hub/src/domains/game/queries/query-options.tsx b/apps/hub/src/domains/game/queries/query-options.tsx
@@ -1,5 +1,6 @@
 import { rivetClient } from "@/queries/global";
 import { getMetaWatchIndex } from "@/queries/utils";
+import { loadModuleCategories } from "@rivet-gg/components";
 import { queryOptions } from "@tanstack/react-query";
 
 export const gamesQueryOptions = () => {
@@ -180,3 +181,24 @@ export const gameMetadataQueryOptions = ({ gameId }: { gameId: string }) => {
     },
   });
 };
+
+export const modulesCategoriesQueryOptions = () => {
+  return queryOptions({
+    queryKey: ["modules", "categories"],
+    queryFn: () => loadModuleCategories(),
+  });
+};
+
+const FEATURED_MODULES = ["lobbies", "friends", "analytics"];
+
+export const featuredModulesQueryOptions = () => {
+  return queryOptions({
+    ...modulesCategoriesQueryOptions(),
+    queryKey: ["modules", "featured"],
+    select: (data) => {
+      return data
+        .flatMap((category) => category.modules)
+        .filter((module) => FEATURED_MODULES.includes(module.id));
+    },
+  });
+};
diff --git a/apps/hub/src/routeTree.gen.ts b/apps/hub/src/routeTree.gen.ts
@@ -41,7 +41,6 @@ import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdIndexImpo
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/versions'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdTokensImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/tokens'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/servers'
-import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/matchmaker'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdLobbiesImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/lobbies'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdCdnImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/cdn'
@@ -245,13 +244,6 @@ const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute =
       AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
   } as any)
 
-const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesRoute =
-  AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesImport.update({
-    path: '/modules',
-    getParentRoute: () =>
-      AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
-  } as any)
-
 const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerRoute =
   AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerImport.update({
     path: '/matchmaker',
@@ -552,13 +544,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerImport
       parentRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdImport
     }
-    '/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules': {
-      id: '/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules'
-      path: '/modules'
-      fullPath: '/games/$gameId/environments/$namespaceId/modules'
-      preLoaderRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesImport
-      parentRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdImport
-    }
     '/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers': {
       id: '/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers'
       path: '/servers'
@@ -705,7 +690,6 @@ export const routeTree = rootRoute.addChildren({
               },
             ),
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerRoute,
-          AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesRoute,
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute:
             AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdServersRoute.addChildren(
               {
@@ -865,7 +849,6 @@ export const routeTree = rootRoute.addChildren({
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/cdn",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/lobbies",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/matchmaker",
-        "/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/tokens",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/versions",
@@ -907,10 +890,6 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/matchmaker.tsx",
       "parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId"
     },
-    "/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules": {
-      "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.tsx",
-      "parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId"
-    },
     "/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers": {
       "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/servers.tsx",
       "parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId",

diff --git a/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId.tsx b/apps/hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId.tsx
@@ -66,7 +66,6 @@ function NamespaceIdRoute() {
 }
 const searchSchema = z.object({
   modal: z.enum(["database", "create-server"]).or(z.string()).optional(),
-  search: z.string().optional(),
 });
 export const Route = createFileRoute(
   "/_authenticated/_layout/games/$gameId/environments/$namespaceId",

diff --git a/.../hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/index.tsx b/.../hub/src/routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/index.tsx
@@ -12,6 +12,7 @@ import {
   Link as RivetLink,
   ValueCard,
 } from "@rivet-gg/components";
+import { Icon, faArrowRight } from "@rivet-gg/icons";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { Link, createFileRoute } from "@tanstack/react-router";
 import { lazy } from "react";
@@ -41,7 +42,8 @@ function NamespaceIdRoute() {
               to="/games/$gameId/environments/$namespaceId/modules"
               params={params}
             >
-              View all modules
+              View All Modules
+              <Icon className="ml-2" icon={faArrowRight} />
             </Link>
           </RivetLink>
         }