optimize /new/model page

quantified-uncertainty · Nov 26, 2024 · 49d8597 · 49d8597
1 parent ee4da30
commit 49d8597
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 36 deletions.
diff --git a/packages/hub/src/app/new/model/NewModel.tsx b/packages/hub/src/app/new/model/NewModel.tsx
@@ -1,9 +1,7 @@
 "use client";
-import { useSession } from "next-auth/react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { FC, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { FC, useState } from "react";
 import { FormProvider } from "react-hook-form";
-import { useLazyLoadQuery } from "react-relay";
 import { graphql } from "relay-runtime";
 
 import { generateSeed } from "@quri/squiggle-lang";
@@ -14,10 +12,9 @@ import { SelectGroup, SelectGroupOption } from "@/components/SelectGroup";
 import { H1 } from "@/components/ui/Headers";
 import { SlugFormField } from "@/components/ui/SlugFormField";
 import { useMutationForm } from "@/hooks/useMutationForm";
-import { modelRoute, newModelRoute } from "@/routes";
+import { modelRoute } from "@/routes";
 
 import { NewModelMutation } from "@/__generated__/NewModelMutation.graphql";
-import { NewModelPageQuery } from "@/__generated__/NewModelPageQuery.graphql";
 
 const defaultCode = `/*
 Describe your code here
@@ -32,35 +29,12 @@ type FormShape = {
   isPrivate: boolean;
 };
 
-export const NewModel: FC = () => {
-  useSession({ required: true });
-
-  const searchParams = useSearchParams();
-
-  const { group: initialGroup } = useLazyLoadQuery<NewModelPageQuery>(
-    graphql`
-      query NewModelPageQuery($groupSlug: String!, $groupSlugIsSet: Boolean!) {
-        group(slug: $groupSlug) @include(if: $groupSlugIsSet) {
-          ... on Group {
-            id
-            slug
-            myMembership {
-              id
-            }
-          }
-        }
-      }
-    `,
-    {
-      groupSlug: searchParams.get("group") ?? "",
-      groupSlugIsSet: Boolean(searchParams.get("group")),
-    }
-  );
+export const NewModel: FC<{ initialGroup: SelectGroupOption | null }> = ({
+  initialGroup,
+}) => {
+  const [group] = useState(initialGroup);
 
   const router = useRouter();
-  useEffect(() => {
-    router.replace(newModelRoute()); // clean up group=... param
-  }, [router]);
 
   const { form, onSubmit, inFlight } = useMutationForm<
     FormShape,
@@ -70,7 +44,7 @@ export const NewModel: FC = () => {
     mode: "onChange",
     defaultValues: {
       // don't pass `slug: ""` here, it will lead to form reset if a user started to type in a value before JS finished loading
-      group: initialGroup?.myMembership ? initialGroup : null,
+      group,
       isPrivate: false,
     },
     mutation: graphql`

diff --git a/packages/hub/src/app/new/model/page.tsx b/packages/hub/src/app/new/model/page.tsx
@@ -1,13 +1,64 @@
 import { Metadata } from "next";
+import { fetchQuery, graphql } from "relay-runtime";
+import { z } from "zod";
 
 import { NarrowPageLayout } from "@/components/layout/NarrowPageLayout";
+import { SelectGroupOption } from "@/components/SelectGroup";
+import { getCurrentEnvironment } from "@/relay/environment";
+import { getSessionUserOrRedirect } from "@/server/helpers";
 
 import { NewModel } from "./NewModel";
 
-export default async function OuterNewModelPage() {
+import { pageNewModelQuery } from "@/__generated__/pageNewModelQuery.graphql";
+
+export default async function OuterNewModelPage({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    [key: string]: string | string[] | undefined;
+  }>;
+}) {
+  await getSessionUserOrRedirect();
+
+  const groupSlug = z
+    .string()
+    .optional()
+    .parse((await searchParams)["group"]);
+
+  const environment = getCurrentEnvironment();
+
+  let group: SelectGroupOption | null = null;
+
+  if (groupSlug) {
+    const result = await fetchQuery<pageNewModelQuery>(
+      environment,
+      graphql`
+        query pageNewModelQuery($groupSlug: String!) {
+          group(slug: $groupSlug) {
+            ... on Group {
+              id
+              slug
+              myMembership {
+                id
+              }
+            }
+          }
+        }
+      `,
+      { groupSlug }
+    ).toPromise();
+
+    if (result?.group?.id && result?.group?.slug) {
+      group = {
+        id: result.group.id,
+        slug: result.group.slug,
+      };
+    }
+  }
+
   return (
     <NarrowPageLayout>
-      <NewModel />
+      <NewModel initialGroup={group} />
     </NarrowPageLayout>
   );
 }