fix: template defects

src/components/MarkdownTemplate/LayoutEditor.js

@@ -1,13 +1,14 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 const LayoutEditor = ({layout, onChange}) => {
     const [_layout, setLayout] = useState(layout || "");
+    useEffect(() => {setLayout(layout)}, [layout]);
     return (
         <textarea
             className="textarea"
             value={_layout}
             onChange={(e) => {
                 setLayout(e.target.value);
-                onChange(layout);
+                onChange(e.target.value);
             }}
         />
     );

src/components/MarkdownTemplate/MarkdownTemplateEditor.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, {useContext, useEffect, useState} from "react";
 import { AuthContext } from "../../AuthProvider";
 import { useNavigate, useParams } from "react-router-dom";
 import { useMarkdownTemplate, useSaveMarkdownTemplate } from "../../utils/queries/markdown-template-queries";
@@ -7,9 +7,7 @@ import ParametersManager from "./ParametersManager";
 import "bulma/css/bulma.min.css";
 
 const MarkdownTemplateEditor = () => {
-    const { roles } = useContext(AuthContext);
-    if (!roles.includes("admin") || roles.includes("creator"))
-        return <div className="notification is-danger">Permission Denied</div>;
+
 
     const navigate = useNavigate();
     const { id } = useParams();
@@ -19,11 +17,20 @@ const MarkdownTemplateEditor = () => {
     const [title, setTitle] = useState(template?.id || "");
     const [parameters, setParameters] = useState(template?.parameters || []);
     const [layout, setLayout] = useState(template?.layout || "");
+    const { roles } = useContext(AuthContext);
+
+    useEffect(() => {
+        setTitle(template?.title || "");
+        setParameters(template?.parameters || []);
+        setLayout(template?.layout || "");
+    }, [template]);
 
     if (templateIsFetching) {
         return <p>Loading...</p>;
     }
 
+    if (!roles.includes("admin") || roles.includes("creator"))
+        return <div className="notification is-danger">Permission Denied</div>;
     const handleSave = () => {
         saveMarkdownTemplate.mutate(
             { id, data: { title, parameters, layout } },

src/components/MarkdownTemplate/ParametersManager.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import TypeEditor from "./TypeEditor";
 
 const ParametersManager = ({ parameters, onChange }) => {
@@ -15,6 +15,9 @@ const ParametersManager = ({ parameters, onChange }) => {
         setParameters(updated);
         onChange(updated);
     };
+    useEffect(() => {
+        setParameters(parameters);
+    }, [parameters]);
 
     const handleNameChange = (index, newName) => {
         const updated = [..._parameters];
@@ -71,6 +74,7 @@ const ParametersManager = ({ parameters, onChange }) => {
                                     updated[index].type = newType;
                                     setParameters(updated);
                                     onChange(updated);
+                                    console.log("updated", updated);
                                 }}
                             />
                         </div>

src/components/MarkdownTemplate/TemplateSelector.js

@@ -1,26 +1,39 @@
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {useMarkdownTemplates} from "../../utils/queries/markdown-template-queries";
 
 const TemplateSelector = ({template, onChange}) => {
-    const [_template, setTemplate] = useState(template || {
+    const {data:templates, isFetching: templatesAreFetching} = useMarkdownTemplates();
+    const [_template, setTemplate] = useState(templates?.find(t => t.id === template.id) || {
         title: "",
         parameters: [],
         layout: ""
     });
-    const {data:templates, isFetching: templatesAreFetching} = useMarkdownTemplates();
+    useEffect(() => {
+        setTemplate(templates?.find(t => t.id === template.id) || {
+            title: "",
+            parameters: [],
+            layout: ""
+        });
+    }, [template]);
     if(templatesAreFetching) {
         return <p>Loading...</p>
     }
+
     return (
         <select
-            value={_template.title}
+            value={template.id}
             onChange={(e) => {
-                setTemplate(e.target.value);
-                onChange(e.target.value);
+                const templateId = parseInt(e.target.value, 10);
+                onChange(templates.find(t => t.id === templateId) || {
+                    title: "",
+                    parameters: [],
+                    layout: ""
+                });
             }}>
+            <option value="">(None)</option>
             {
                 templates.map((tmpl, index) => (
-                    <option key={index} value={tmpl} >{tmpl.title}</option>
+                    <option key={index} value={tmpl.id} >{tmpl.title}</option>
                 ))
             }
         </select>

src/components/MarkdownTemplate/TypeEditor.js

@@ -53,6 +53,7 @@ const TypeEditor = ({ type, onChange }) => {
                 return <TemplateSelector
                     template={_type.definition.template}
                     onChange={(newTemplate) => {
+
                         const updated = {
                             ..._type,
                             definition: {
@@ -62,6 +63,8 @@ const TypeEditor = ({ type, onChange }) => {
                         };
                         setType(updated);
                         onChange(updated);
+
+
                     }}
                 />;
             default: