diff --git a/packages/hub/src/app/new/model/NewModel.tsx b/packages/hub/src/app/new/model/NewModel.tsx index ec22897eba..2c01d4469b 100644 --- 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( - 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 index c939ed570c..ac979abdad 100644 --- 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( + 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 ( - + ); }