Fixes broken accordion ref

Fixes broken poppable ref adds Schema page Fixes schema creation not including game system id
2024-09-09 08:37:53 -06:00
parent a2fde9cc79
commit c8f20fbda8
9 changed files with 117 additions and 103 deletions
--- a/components/schema/field-editor.tsx
+++ b/components/schema/field-editor.tsx
@@ -2,13 +2,14 @@ import { FC, useCallback, useEffect, useState } from "react";
 import { useObjectStateWrapper } from "../../hooks/useObjectState";
 import { ValueField } from "./value-field";
 import { HelpPopper } from "../Poppables/help";
-import { Icon } from "../Icon";
 import { RESERVED_FIELDS } from "../../constants/ReservedFields";
 import {
  fieldTypeOptions,
  FieldTypes,
  fieldTypesWithValues,
 } from "./fieldtypes";
+import { TrashIcon } from "@heroicons/react/24/solid";
+import { FieldType } from "@/types";

 interface IProps {
  update: (arg: FieldType) => void;
@@ -17,9 +18,12 @@ interface IProps {
  deleteField: (arg: string) => void;
 }

-export const FieldEditor: FC<IProps> = (
-  { update, field, fieldName, deleteField },
-) => {
+export const FieldEditor: FC<IProps> = ({
+  update,
+  field,
+  fieldName,
+  deleteField,
+}) => {
  const { bindProperty, bindPropertyCheck } = useObjectStateWrapper(
    field,
    (e) => update(typeof e === "function" ? e(field) : e),
@@ -83,9 +87,8 @@ export const FieldEditor: FC<IProps> = (
          )}
          <span className="flex items-center gap-2">
            <label>
-              <input type="checkbox" {...bindPropertyCheck("isConstant")} />
-              {" "}
-              Is constant
+              <input type="checkbox" {...bindPropertyCheck("isConstant")} /> Is
+              constant
            </label>
            <HelpPopper>
              <p className="text-sm">
@@ -108,7 +111,11 @@ export const FieldEditor: FC<IProps> = (
          </label>
          <label className="w-min">
            Limit:
-            <input className="w-12 min-w-min" type="number" {...bindProperty("limit")} />
+            <input
+              className="w-12 min-w-min"
+              type="number"
+              {...bindProperty("limit")}
+            />
          </label>
          <HelpPopper>
            <p className="text-sm">
@@ -122,11 +129,7 @@ export const FieldEditor: FC<IProps> = (
            className="no-default self-end ml-auto"
            onClick={() => deleteField(fieldName)}
          >
-            <Icon
-              className="svg-red-700 hover:svg-red-500 trash-can w-6 h-6"
-              icon="Trash"
-            >
-            </Icon>
+            <TrashIcon className="w-6 h-6 fill-white" />
          </button>
        </div>
      )}
--- a/components/schema/index.tsx
+++ b/components/schema/index.tsx
@@ -15,6 +15,8 @@ import { findSchema, saveSchemaDb } from "@/actions/Schemas/index";
 import { useToast } from "../toast";
 import { useAtom } from "jotai";
 import { Schema, TypeType } from "@/types";
+import { TrashIcon } from "@heroicons/react/24/solid";
+import { PencilSquareIcon } from "@heroicons/react/24/solid";

 export const SchemaBuilder: FC = () => {
  const [schema, setSchema] = useAtom<Schema>(SchemaEditAtom);
@@ -184,20 +186,14 @@ export const SchemaBuilder: FC = () => {
                    className="no-default"
                    onClick={() => selectTypeForEdit(t)}
                  >
-                    <Icon
-                      icon="Anvil"
-                      className="anvil svg-olive-drab hover:svg-olive-drab-100 w-6 h-6"
-                    />
+                    <PencilSquareIcon className="w-6 h-6 fill-white" />
                  </button>
                  <button
                    title="Delete"
                    className="no-default"
                    onClick={() => deleteType(t)}
                  >
-                    <Icon
-                      icon="Trash"
-                      className="trash-can svg-red-700 hover:svg-red-500 w-6 h-6"
-                    />
+                    <TrashIcon className="w-6 h-6 fill-white" />
                  </button>
                </div>
              </li>
--- a/components/schema/schema-viewer.tsx
+++ b/components/schema/schema-viewer.tsx
@@ -34,10 +34,10 @@ export const SchemaViewer: FC<IProps> = ({ schema, onTypeClick }) => {
        <hr />
        <p className="font-bold italic">Templates</p>
        <ul>
-          {Object.entries(schema.schema).map(([templateKey, template]) => (
+          {Object.entries(schema.fields).map(([templateKey, template]) => (
            <li key={templateKey}>
              <p className="font-bold">{templateKey}</p>
-              <p className="font-thin text-xs">{template.type}</p>
+              <p className="text-mixed-600 ml-2">Type: {template}</p>
            </li>
          ))}
        </ul>
--- a/components/schema/template-editor.tsx
+++ b/components/schema/template-editor.tsx
@@ -6,6 +6,7 @@ import { FieldTypes } from "./fieldtypes";
 import { useAtom } from "jotai";
 import { useInput } from "@/hooks/useInput";
 import { Schema } from "@/types";
+import { TrashIcon } from "@heroicons/react/24/solid";

 interface IProps {
  templateKey: string;
@@ -19,19 +20,11 @@ export const TemplateEditor: FC<IProps> = ({
  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 { bind: bindFieldType, value } = useInput(fieldType);

  useEffect(() => {
    update(templateKey, value);
-  });
+  }, []);

  const deleteField = useCallback(() => {
    setSchema((s: Schema) => {
@@ -70,10 +63,7 @@ export const TemplateEditor: FC<IProps> = ({
          </label>
        </div>
        <button className="no-default" onClick={deleteField}>
-          <Icon
-            icon="Trash"
-            className="svg-red-700 hover:svg-red-500 trash-can w-6 h-6"
-          />
+          <TrashIcon className="w-6 h-6 fill-white" />
        </button>
      </div>
    </li>
--- a/components/schema/type-editor.tsx
+++ b/components/schema/type-editor.tsx
@@ -9,6 +9,7 @@ import { useObjectState } from "../../hooks/useObjectState";
 import { useInput } from "../../hooks/useInput";
 import { FieldEditor } from "./field-editor";
 import { FieldTypes } from "./fieldtypes";
+import { FieldType, TypeType } from "@/types";

 interface IProps {
  name: string;
@@ -18,9 +19,11 @@ interface IProps {

 const constantProperties = ["metadata"];

-export const TypeEditor: FC<PropsWithChildren<IProps>> = (
-  { saveType, name, type: passedType },
-) => {
+export const TypeEditor: FC<PropsWithChildren<IProps>> = ({
+  saveType,
+  name,
+  type: passedType,
+}) => {
  const {
    update: updateType,
    reset: resetType,
@@ -39,19 +42,22 @@ export const TypeEditor: FC<PropsWithChildren<IProps>> = (
    resetType();
  };

-  const addField = useCallback((e: FormEvent) => {
-    e.preventDefault();
-    updateType({
-      [propertyName]: {
-        type: FieldTypes.number,
-        value: "",
-        isConstant: false,
-        limit: 1,
-        minimum: 1,
-      },
-    });
-    resetPropertyName();
-  }, [propertyName, updateType, resetPropertyName]);
+  const addField = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+      updateType({
+        [propertyName]: {
+          type: FieldTypes.number,
+          value: "",
+          isConstant: false,
+          limit: 1,
+          minimum: 1,
+        },
+      });
+      resetPropertyName();
+    },
+    [propertyName, updateType, resetPropertyName],
+  );

  const updateField = useCallback(
    (k: keyof typeof type) => (field: FieldType) => {
@@ -64,13 +70,16 @@ export const TypeEditor: FC<PropsWithChildren<IProps>> = (
    passedType && setType(passedType);
  }, [passedType, setType]);

-  const deleteField = useCallback((name: string) => {
-    setType((t) => {
-      const fields = { ...t };
-      delete fields[name];
-      return fields;
-    });
-  }, [setType]);
+  const deleteField = useCallback(
+    (name: string) => {
+      setType((t) => {
+        const fields = { ...t };
+        delete fields[name];
+        return fields;
+      });
+    },
+    [setType],
+  );

  return (
    <div>
@@ -82,17 +91,18 @@ export const TypeEditor: FC<PropsWithChildren<IProps>> = (
        <button disabled={!propertyName}>Add Field</button>
      </form>
      <ul className="rounded-lg overflow-hidden">
-        {Object.entries(type).reverse().filter(([k]) =>
-          !constantProperties.includes(k)
-        ).map(([key, value]) => (
-          <FieldEditor
-            key={"field-editor" + key}
-            field={value}
-            update={updateField(key)}
-            fieldName={key}
-            deleteField={deleteField}
-          />
-        ))}
+        {Object.entries(type)
+          .reverse()
+          .filter(([k]) => !constantProperties.includes(k))
+          .map(([key, value]) => (
+            <FieldEditor
+              key={"field-editor" + key}
+              field={value}
+              update={updateField(key)}
+              fieldName={key}
+              deleteField={deleteField}
+            />
+          ))}
      </ul>
      <div>
        <button onClick={save} disabled={!Object.keys(type).length}>