changes schema editor to jotai

components/schema/field-type-input.tsx

@@ -1,14 +1,16 @@
-import { useRecoilValue } from "recoil";
+// import { useRecoilValue } from "recoil";
 import { SchemaEditAtom } from "../../recoil/atoms/schema";
 import { TEMPLATE_TYPES } from "../../constants/TemplateTypes";
 import { FC, PropsWithChildren } from "react";
+import { useAtom } from "jotai";
 
 interface IProps {
   bind: InputBinder;
 }
 
 export const FieldTypeInput: FC<PropsWithChildren<IProps>> = ({ bind }) => {
-  const schema = useRecoilValue(SchemaEditAtom);
+  // const schema = useRecoilValue(SchemaEditAtom);
+  const [schema] = useAtom(SchemaEditAtom);
 
   return (
     <label className="w-min">

components/schema/index.tsx

@@ -5,7 +5,6 @@ import AnimatedPageContainer from "@/components/AnimatedPageContainer";
 import { TypeEditor } from "./type-editor";
 import { useObjectStateWrapper } from "@/hooks/useObjectState";
 import { useInput } from "../../hooks/useInput";
-import { useRecoilState } from "recoil";
 import { SchemaEditAtom } from "@/recoil/atoms/schema";
 import { SchemaViewer } from "./schema-viewer";
 import { TemplateEditor } from "./template-editor";
@@ -14,9 +13,11 @@ import { useParams } from "next/navigation";
 import { FieldTypes } from "./fieldtypes";
 import { findSchema, saveSchemaDb } from "@/actions/Schemas/index";
 import { useToast } from "../toast";
+import { useAtom } from "jotai";
+import { Schema } from "@/types";
 
 export const SchemaBuilder: FC = () => {
-  const [schema, setSchema] = useRecoilState(SchemaEditAtom);
+  const [schema, setSchema] = useAtom(SchemaEditAtom);
   // const resetSchema = useResetRecoilState(SchemaEditAtom);
   const { createToast } = useToast();
   const { update: updateSchema, bindProperty: bindSchemaProperty } =
@@ -84,8 +85,8 @@ export const SchemaBuilder: FC = () => {
   } = useInput("", { disallowSpaces: true });
   const addSchemaField = useCallback(() => {
     updateSchema((s) => ({
-      schema: {
-        ...s.schema,
+      fields: {
+        ...s.fields,
         [schemaFieldName]: FieldTypes.any,
       },
     }));
@@ -93,11 +94,11 @@ export const SchemaBuilder: FC = () => {
   }, [resetSchemaFieldName, schemaFieldName, updateSchema]);
 
   const updateSchemaField = useCallback(
-    (key: string, template: Template) => {
+    (key: string, fieldType: FieldTypes) => {
       updateSchema((s) => ({
-        schema: {
-          ...s.schema,
-          [key]: template,
+        fields: {
+          ...s.fields,
+          [key]: fieldType,
         },
       }));
     },
@@ -134,12 +135,12 @@ export const SchemaBuilder: FC = () => {
             </button>
           </div>
           <ul className="rounded-lg overflow-hidden">
-            {Object.entries(schema.schema).map(
+            {Object.entries(schema.fields).map(
               ([schemaFieldKey, schemaField]) => (
                 <TemplateEditor
                   key={schemaFieldKey}
                   templateKey={schemaFieldKey}
-                  template={schemaField}
+                  fieldType={schemaField as FieldTypes}
                   update={updateSchemaField}
                 />
               ),

components/schema/template-editor.tsx

@@ -1,39 +1,45 @@
-import { FC, useCallback } from "react";
-import { useObjectStateWrapper } from "@/hooks/useObjectState";
+import { FC, useCallback, useEffect } from "react";
 import { TEMPLATE_TYPES } from "@/constants/TemplateTypes";
 import { SchemaEditAtom } from "@/recoil/atoms/schema";
-import { useRecoilState } from "recoil";
 import { Icon } from "@/components/Icon";
+import { FieldTypes } from "./fieldtypes";
+import { useAtom } from "jotai";
+import { useInput } from "@/hooks/useInput";
+import { Schema } from "@/types";
 
 interface IProps {
   templateKey: string;
-  update: (arg0: string, arg1: Template) => void;
-  template: Template;
+  update: (arg0: string, arg1: FieldTypes) => void;
+  fieldType: FieldTypes;
 }
 
-export const TemplateEditor: FC<IProps> = (
-  { templateKey, update, template },
-) => {
-  const [schema, setSchema] = useRecoilState(SchemaEditAtom);
-  const updateTemplate = useCallback(
-    (t: Template | ((arg: Template) => Template)) => {
-      update(templateKey, typeof t === "function" ? t(template) : t);
-    },
-    [templateKey, update, template],
-  );
+export const TemplateEditor: FC<IProps> = ({
+  templateKey,
+  update,
+  fieldType,
+}) => {
+  const [schema, setSchema] = useAtom(SchemaEditAtom);
+  // const updateTemplate = useCallback(
+  //   (t: FieldTypes | ((arg: FieldTypes) => FieldTypes)) => {
+  //     update(templateKey, typeof t === "function" ? t(template) : t);
+  //   },
+  //   [templateKey, update, template],
+  // );
 
-  const { bindProperty } = useObjectStateWrapper(
-    template,
-    updateTemplate,
-  );
+  // const { bindProperty } = useObjectStateWrapper(template, updateTemplate);
+  const { bind: bindFieldType, value } = useInput(fieldType);
 
-  const deleteTemplate = useCallback(() => {
+  useEffect(() => {
+    update(templateKey, value);
+  });
+
+  const deleteField = useCallback(() => {
     setSchema((s: Schema) => {
-      const templates = { ...s.schema };
-      delete templates[templateKey];
+      const fields = { ...s.fields };
+      delete fields[templateKey];
       return {
         ...s,
-        schema: templates,
+        schema: fields,
       };
     });
   }, [setSchema, templateKey]);
@@ -46,24 +52,24 @@ export const TemplateEditor: FC<IProps> = (
             Type:
             <input
               type="text"
-              {...bindProperty("type", { disallowSpaces: true })}
+              {...bindFieldType}
               list="type-editor-type-list"
             />
             <datalist id="type-editor-type-list">
               {Object.keys(TEMPLATE_TYPES).map((k) => (
-                <option key={"templatetype" + k} value={k}>{k}</option>
+                <option key={"templatetype" + k} value={k}>
+                  {k}
+                </option>
               ))}
               {Object.keys(schema.types).map((k) => (
-                <option key={"schematype" + k} value={k}>{k}</option>
+                <option key={"schematype" + k} value={k}>
+                  {k}
+                </option>
               ))}
             </datalist>
           </label>
-          <textarea {...bindProperty("display")} cols={30} rows={10}></textarea>
         </div>
-        <button
-          className="no-default"
-          onClick={deleteTemplate}
-        >
+        <button className="no-default" onClick={deleteField}>
           <Icon
             icon="Trash"
             className="svg-red-700 hover:svg-red-500 trash-can w-6 h-6"

recoil/atoms/schema.ts

@@ -1,6 +1,15 @@
-import { atom } from "recoil";
+// import { atom } from "recoil";
+
+import { atom } from "jotai";
+
+// export const SchemaEditAtom = atom<Schema>({
+//   key: "schema-edit",
+//   default: { name: "", types: {}, schema: {}, id: "" },
+// });
 
 export const SchemaEditAtom = atom<Schema>({
-  key: "schema-edit",
-  default: { name: "", types: {}, schema: {}, id: "" },
+  name: "",
+  id: "",
+  types: {},
+  fields: {},
 });

types.d.ts

@@ -1,3 +1,5 @@
+import { FieldTypes } from "./components/schema/fieldtypes";
+
 // MD Parser
 type IdentifiedToken<M> = {
   metadata: M;
@@ -76,7 +78,7 @@ type Template = {
   display: string;
 };
 
-type SchemaFields = Record<string, string>;
+type SchemaFields = Record<string, FieldTypes>;
 
 type SchemaTypes = Record<string, TypeType>;