enables schema saving in db, initial refactor of db schema for revisions

components/schema/index.tsx

@@ -1,30 +1,45 @@
 "use client";
 
-import { FC, useCallback, useState } from "react";
+import { FC, useCallback, useEffect, useState } from "react";
 import AnimatedPageContainer from "@/components/AnimatedPageContainer";
 import { TypeEditor } from "./type-editor";
 import { useObjectStateWrapper } from "@/hooks/useObjectState";
 import { useInput } from "../../hooks/useInput";
-import { useRecoilState, useResetRecoilState } from "recoil";
+import { useRecoilState } from "recoil";
 import { SchemaEditAtom } from "@/recoil/atoms/schema";
 import { SchemaViewer } from "./schema-viewer";
 import { TemplateEditor } from "./template-editor";
 import { Icon } from "@/components/Icon";
 import { useParams } from "next/navigation";
 import { FieldTypes } from "./fieldtypes";
-import { prisma } from "@/prisma/prismaClient";
+import { findSchema, saveSchemaDb } from "@/actions/Schemas/index";
+import { useToast } from "../toast";
 
 export const SchemaBuilder: FC = () => {
   const [schema, setSchema] = useRecoilState(SchemaEditAtom);
-  const resetSchema = useResetRecoilState(SchemaEditAtom);
+  // const resetSchema = useResetRecoilState(SchemaEditAtom);
+  const { createToast } = useToast();
   const { update: updateSchema, bindProperty: bindSchemaProperty } =
     useObjectStateWrapper<Schema>(schema, setSchema);
 
-  const { schemaId, gameSystemId } = useParams<{
+  const { schemaId, id: gameSystemId } = useParams<{
     schemaId: string;
-    gameSystemId?: string;
+    id: string;
   }>();
 
+  useEffect(() => {
+    if (schemaId !== "create" && schemaId !== schema.id)
+      findSchema(schemaId).then((sc) => {
+        if (!sc) return;
+        setSchema(sc);
+      });
+  }, [schema.id, schemaId, setSchema]);
+
+  useEffect(() => {
+    if (gameSystemId && !schema.gameSystemId)
+      setSchema((sc) => ({ ...sc, gameSystemId }));
+  }, [gameSystemId, schema.gameSystemId, setSchema]);
+
   const {
     value: typeName,
     bind: bindTypeName,
@@ -33,7 +48,7 @@ export const SchemaBuilder: FC = () => {
 
   const [pageNumber, setPageNumber] = useState(0);
 
-  const [lastSaved, setLastSaved] = useState(schema);
+  const [lastSaved, _setLastSaved] = useState(schema);
 
   const [selectedType, setSelectedType] = useState("");
 
@@ -49,24 +64,13 @@ export const SchemaBuilder: FC = () => {
       setPageNumber(0);
       setSelectedType("");
     },
-    [resetTypeName, updateSchema]
+    [resetTypeName, updateSchema],
   );
 
   const saveSchema = useCallback(async () => {
-    // "use server";
-    // setLastSaved(schema);
-    // await prisma.schema.upsert({
-    //   where: { id: schema.id },
-    //   update: { ...schema },
-    //   create: {
-    //     name: schema.name,
-    //     schema: schema.schema,
-    //     types: schema.types,
-    //     version: 0,
-    //     gameSystemId,
-    //   },
-    // });
-  }, [schema, gameSystemId]);
+    createToast({ msg: "Saving Schema", fading: true });
+    await saveSchemaDb(schema);
+  }, [createToast, schema]);
 
   const selectTypeForEdit = useCallback((typeKey: string) => {
     setSelectedType(typeKey);
@@ -82,10 +86,7 @@ export const SchemaBuilder: FC = () => {
     updateSchema((s) => ({
       schema: {
         ...s.schema,
-        [schemaFieldName]: {
-          display: "",
-          type: FieldTypes.any,
-        },
+        [schemaFieldName]: FieldTypes.any,
       },
     }));
     resetSchemaFieldName();
@@ -100,7 +101,7 @@ export const SchemaBuilder: FC = () => {
         },
       }));
     },
-    [updateSchema]
+    [updateSchema],
   );
 
   const deleteType = useCallback(
@@ -111,7 +112,7 @@ export const SchemaBuilder: FC = () => {
         return { types };
       });
     },
-    [updateSchema]
+    [updateSchema],
   );
 
   return (
@@ -141,7 +142,7 @@ export const SchemaBuilder: FC = () => {
                   template={schemaField}
                   update={updateSchemaField}
                 />
-              )
+              ),
             )}
           </ul>
         </div>