Move model selection to a component

app/test/page.tsx

@@ -1,30 +1,17 @@
 "use client";
 
 import React from "react";
-import { useQuery, useMutation } from "convex/react";
+import { useMutation } from "convex/react";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { ModelSelector } from "@/components/ModelSelector";
 import { api } from "@/convex/_generated/api";
 
 export default function TestPage() {
-  const models = useQuery(api.models.getActiveModels);
   const testModel = useMutation(api.games.testModel);
   const [model, setModel] = React.useState("");
   const router = useRouter();
 
-  React.useEffect(() => {
-    if (models !== undefined && models.length !== 0) {
-      setModel(models[0].slug);
-    }
-  }, [models]);
-
   const handleClick = async () => {
     await testModel({
       modelId: model,
@@ -38,19 +25,7 @@ export default function TestPage() {
       <h1 className="text-4xl font-bold mb-8">Zombie Map Simulator</h1>
 
       <div className="flex justify-center gap-4">
-        <Select value={model} onValueChange={(value) => setModel(value)}>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Select model" />
-          </SelectTrigger>
-          <SelectContent>
-            {models !== undefined &&
-              models.map((model) => (
-                <SelectItem key={model._id} value={model.slug}>
-                  {model.name}
-                </SelectItem>
-              ))}
-          </SelectContent>
-        </Select>
+        <ModelSelector onChange={setModel} value={model} />
         <Button onClick={handleClick}>Test Model</Button>
       </div>
     </div>

components/ModelSelector.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { useQuery } from "convex/react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/convex/_generated/api";
+
+export function ModelSelector({
+  onChange,
+  value,
+}: {
+  onChange: (value: string) => unknown;
+  value: string;
+}) {
+  const models = useQuery(api.models.getActiveModels);
+
+  React.useEffect(() => {
+    if (models !== undefined && models.length !== 0) {
+      onChange(models[0].slug);
+    }
+  }, [models]);
+
+  if (models === undefined) {
+    return <p>Loading...</p>;
+  } else if (models.length === 0) {
+    return <p>No models found.</p>;
+  }
+
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select model" />
+      </SelectTrigger>
+      <SelectContent>
+        {models.map((model) => (
+          <SelectItem key={model._id} value={model.slug}>
+            {model.name}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}