ui minor changes

rivet-gg · Sep 21, 2024 · 69c17de · 69c17de
1 parent cbc99dd
commit 69c17de
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 629 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
@@ -8,8 +8,6 @@
 
 // This file is auto-generated by TanStack Router
 
-import { createFileRoute } from '@tanstack/react-router'
-
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
@@ -55,13 +53,6 @@ import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdLobbiesLo
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdBackendVariablesImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/backend/variables'
 import { Route as AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdBackendLogsImport } from './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/backend/logs'
 
-// Create Virtual Routes
-
-const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesLazyImport =
-  createFileRoute(
-    '/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules',
-  )()
-
 // Create/Update Routes
 
 const AuthenticatedRoute = AuthenticatedImport.update({
@@ -211,19 +202,6 @@ const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdIndexRoute =
       AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
   } as any)
 
-const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesLazyRoute =
-  AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesLazyImport.update(
-    {
-      path: '/modules',
-      getParentRoute: () =>
-        AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
-    } as any,
-  ).lazy(() =>
-    import(
-      './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.lazy'
-    ).then((d) => d.Route),
-  )
-
 const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsRoute =
   AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsImport.update({
     path: '/versions',
@@ -250,7 +228,11 @@ const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesRoute =
     path: '/modules',
     getParentRoute: () =>
       AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdRoute,
-  } as any)
+  } as any).lazy(() =>
+    import(
+      './routes/_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.lazy'
+    ).then((d) => d.Route),
+  )
 
 const AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerRoute =
   AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdMatchmakerImport.update({
@@ -580,13 +562,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsImport
       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 AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesLazyImport
-      parentRoute: typeof AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdImport
-    }
     '/_authenticated/_layout/games/$gameId/environments/$namespaceId/': {
       id: '/_authenticated/_layout/games/$gameId/environments/$namespaceId/'
       path: '/'
@@ -715,7 +690,6 @@ export const routeTree = rootRoute.addChildren({
             ),
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdTokensRoute,
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdVersionsRoute,
-          AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdModulesLazyRoute,
           AuthenticatedLayoutGamesGameIdEnvironmentsNamespaceIdIndexRoute,
         }),
     }),
@@ -869,7 +843,6 @@ export const routeTree = rootRoute.addChildren({
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/servers",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/tokens",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/versions",
-        "/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules",
         "/_authenticated/_layout/games/$gameId/environments/$namespaceId/"
       ]
     },
@@ -927,10 +900,6 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/versions.tsx",
       "parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId"
     },
-    "/_authenticated/_layout/games/$gameId/environments/$namespaceId/modules": {
-      "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/modules.lazy.tsx",
-      "parent": "/_authenticated/_layout/games/$gameId/environments/$namespaceId"
-    },
     "/_authenticated/_layout/games/$gameId/environments/$namespaceId/": {
       "filePath": "_authenticated/_layout/games/$gameId_/environments/$namespaceId/index.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>
         }