working form

apps/main/src/components/action-button.tsx

@@ -23,7 +23,7 @@ export const ActionButton = () => {
   const handleActionClick = () => {
     // openSheet(AIAssistantComponent);
     openSheet(
-      AIProcessor,
+      CreateThing,
       {
         onCreateCallback: () => {
           // it could toast, success or so

apps/main/src/components/common/window-container.tsx

@@ -12,7 +12,8 @@ export const WindowControls = () => {
 
   const menuItems = [
     { label: "Home", path: "/" },
-    { label: "Inventory", path: "/inventory" }
+    { label: "Inventory", path: "/inventory" },
+    { label: "Types", path: "/types" }
   ];
 
   return (

apps/main/src/components/form/generator.tsx

@@ -39,7 +39,7 @@ export const FormGenerator = ({
   return (
     <Form
       schema={schema}
-      formData={JSON.parse(JSON.stringify(data))}
+      formData={data && JSON.parse(JSON.stringify(data))}
       validator={validator}
       uiSchema={uiSchema}
       widgets={widgets}

apps/main/src/components/form/select-type.tsx

@@ -0,0 +1,35 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@/components/ui/select";
+import { useGetTypes } from "@/lib/graph";
+import { WidgetProps } from "@rjsf/utils";
+
+export function SelectType(props: WidgetProps) {
+  const { data: types, isLoading, isError } = useGetTypes();
+
+  if (isLoading) {
+    return <p>Loading...</p>;
+  }
+
+  if (isError) {
+    return <p>Failed to load types</p>;
+  }
+  return (
+    <Select onValueChange={props.onChange} defaultValue={props.value}>
+      <SelectTrigger className="w-full">
+        <SelectValue placeholder="Select a type" />
+      </SelectTrigger>
+      <SelectContent>
+        {types?.map((type: any) => (
+          <SelectItem key={type.id} value={type.id}>
+            {type.key}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

apps/main/src/components/form/widgets.tsx

@@ -1,21 +1,12 @@
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { Thing } from "@/lib/schema";
 import { RegistryWidgetsType, WidgetProps } from "@rjsf/utils";
 import { LucideImage, LucideX } from "lucide-react";
 import { useCallback, useState } from "react";
 import { useDropzone } from "react-dropzone";
-import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from "@/components/ui/select";
-import { useAccountOrGuest } from "@/lib/providers/jazz";
-import { getThings } from "@/lib/inventory";
+import { SelectType } from "./select-type";
 
 // for reference, see https://github.com/m6io/rjsf-tailwind/blob/main/src/components/rjsf/Widgets/Widgets.ts
 // usage:  "ui:widget": "VALUE" where value is the key (e.g JsonEditorWidget)
@@ -177,30 +168,6 @@ export const widgets: RegistryWidgetsType = {
       </div>
     );
   },
-  SelectTypeWidget: function (props: WidgetProps) {
-    console.log("the props", props);
-
-    const { me } = useAccountOrGuest();
-    const things = getThings(me);
-    const types = things.filter((thing) => {
-      return thing.type.toLowerCase() === "type" || [];
-    });
-    return (
-      <Select onValueChange={props.onChange} defaultValue={props.value}>
-        <SelectTrigger className="w-full">
-          <SelectValue placeholder="Select a type" />
-        </SelectTrigger>
-        <SelectContent>
-          {types.map((type: Thing) => {
-            return (
-              <SelectItem key={type.id} value={type.id}>
-                Type
-              </SelectItem>
-            );
-          })}
-        </SelectContent>
-      </Select>
-    );
-  }
+  SelectTypeWidget: SelectType
   // add the rest of your desired components here
 };