From c20cb168ff04b16e0f00c1799264815aa0b832b0 Mon Sep 17 00:00:00 2001
From: hzhang <hzhang@hangman-lab.top>
Date: Fri, 18 Apr 2025 02:16:17 +0100
Subject: [PATCH] fix: template defects

---
 .../MarkdownTemplate/LayoutEditor.js          |  5 ++--
 .../MarkdownTemplateEditor.js                 | 15 ++++++++---
 .../MarkdownTemplate/ParametersManager.js     |  6 ++++-
 .../MarkdownTemplate/TemplateSelector.js      | 27 ++++++++++++++-----
 src/components/MarkdownTemplate/TypeEditor.js |  3 +++
 src/components/Markdowns/MarkdownContent.js   | 11 ++++----
 src/components/Markdowns/MarkdownView.js      |  4 ++-
 src/components/Markdowns/TemplatedEditor.js   |  4 +--
 src/components/Navigations/PathNode.js        |  3 ++-
 .../MarkdownTemplateSettingPanel.js           |  4 ---
 10 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/components/MarkdownTemplate/LayoutEditor.js b/src/components/MarkdownTemplate/LayoutEditor.js
index c2772b9..d4f8016 100644
--- a/src/components/MarkdownTemplate/LayoutEditor.js
+++ b/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);
             }}
         />
     );
diff --git a/src/components/MarkdownTemplate/MarkdownTemplateEditor.js b/src/components/MarkdownTemplate/MarkdownTemplateEditor.js
index 1f4e16e..cf5cab6 100644
--- a/src/components/MarkdownTemplate/MarkdownTemplateEditor.js
+++ b/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 } },
diff --git a/src/components/MarkdownTemplate/ParametersManager.js b/src/components/MarkdownTemplate/ParametersManager.js
index 15f5f75..5a701d5 100644
--- a/src/components/MarkdownTemplate/ParametersManager.js
+++ b/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>
diff --git a/src/components/MarkdownTemplate/TemplateSelector.js b/src/components/MarkdownTemplate/TemplateSelector.js
index 9d9fbff..b998225 100644
--- a/src/components/MarkdownTemplate/TemplateSelector.js
+++ b/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>
diff --git a/src/components/MarkdownTemplate/TypeEditor.js b/src/components/MarkdownTemplate/TypeEditor.js
index 99cb0f0..f06e312 100644
--- a/src/components/MarkdownTemplate/TypeEditor.js
+++ b/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:
diff --git a/src/components/Markdowns/MarkdownContent.js b/src/components/Markdowns/MarkdownContent.js
index 8d651e0..79d04a0 100644
--- a/src/components/Markdowns/MarkdownContent.js
+++ b/src/components/Markdowns/MarkdownContent.js
@@ -8,6 +8,7 @@ import {useMarkdown} from "../../utils/queries/markdown-queries";
 import {usePath} from "../../utils/queries/path-queries";
 import {useMarkdownSetting} from "../../utils/queries/markdown-setting-queries";
 import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries";
+import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries";
 
 const MarkdownContent = () => {
     const { id } = useParams();
@@ -15,8 +16,8 @@ const MarkdownContent = () => {
     const {data: markdown, isLoading, error} = useMarkdown(id);
     const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id);
     const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id);
-    const {data: template_setting, isFetching: isTemplateSettingFetching} = useMarkdownTemplate(setting?.template_setting_id);
-
+    const {data: templateSetting, isFetching: isTemplateSettingFetching} = useMarkdownTemplateSetting(setting?.template_setting_id);
+    const {data: template, isFetching: isTemplateFetching} = useMarkdownTemplate(templateSetting?.template_id);
 
     useEffect(() => {
         if(markdown && markdown.title === "index" && path){
@@ -25,7 +26,7 @@ const MarkdownContent = () => {
     }, [markdown, path]);
 
 
-    const notReady = isLoading || isPathFetching || isSettingFetching || isTemplateSettingFetching;
+    const notReady = isLoading || isPathFetching || isSettingFetching || isTemplateSettingFetching || isTemplateFetching;
 
     if (notReady) {
         return <div>Loading...</div>;
@@ -45,9 +46,9 @@ const MarkdownContent = () => {
                     </Link>
                 </PermissionGuard>
             </div>
-            <MarkdownView content={JSON.parse(markdown.content)} template={template_setting}/>
+            <MarkdownView content={JSON.parse(markdown.content)} template={template}/>
         </div>
     );
 };
 
-export default MarkdownContent;
\ No newline at end of file
+export default MarkdownContent;
diff --git a/src/components/Markdowns/MarkdownView.js b/src/components/Markdowns/MarkdownView.js
index bb04f5a..7274895 100644
--- a/src/components/Markdowns/MarkdownView.js
+++ b/src/components/Markdowns/MarkdownView.js
@@ -34,11 +34,12 @@ const Translate = ({variable, value}) => {
 
 const ParseTemplate = ({template, variables}) => {
     if(!template || !Array.isArray(template.parameters)) return '';
+    const vars = variables || {};
     let res = template.layout ?? '';
     for (const parameter of template.parameters) {
         res = res.replaceAll(`<${parameter.name}/>`, Translate({
             variable: parameter,
-            value: variables[parameter.name]
+            value: vars[parameter.name]
         }));
     }
     return res;
@@ -64,6 +65,7 @@ const MarkdownView = ({ content, template, height="auto" }) => {
         layout: "<markdown/>",
         title: "default"
     };
+
     return (
         <div className="markdown-preview" style={{height}}>
             <ReactMarkdown
diff --git a/src/components/Markdowns/TemplatedEditor.js b/src/components/Markdowns/TemplatedEditor.js
index 3cf4eb3..5245ed1 100644
--- a/src/components/Markdowns/TemplatedEditor.js
+++ b/src/components/Markdowns/TemplatedEditor.js
@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries";
 
-const TemplatedEditorComponent = ({ variable, value, namespace, onContentChanged }) => {
+const TemplatedEditorComponent = ({ variable, value={}, namespace, onContentChanged }) => {
     if(variable.type.base_type === "string") {
         return (
             <div>
@@ -102,7 +102,7 @@ const TemplatedEditorComponent = ({ variable, value, namespace, onContentChanged
     }
 
     if(variable.type.base_type === 'template'){
-        const {data: _template, isFetching: _templateIsFetching} = useMarkdownTemplate(variable.type.definition.template_id);
+        const {data: _template, isFetching: _templateIsFetching} = useMarkdownTemplate(variable.type.definition.template.id);
         if(_templateIsFetching){
             return(<p>Loading...</p>);
         }
diff --git a/src/components/Navigations/PathNode.js b/src/components/Navigations/PathNode.js
index e82ed83..bca025c 100644
--- a/src/components/Navigations/PathNode.js
+++ b/src/components/Navigations/PathNode.js
@@ -86,12 +86,13 @@ const PathNode = ({ path, isRoot = false }) => {
                     <MarkdownNode
                         markdown={markdown}
                         handleMoveMarkdown={handleMoveMarkdown}
+                        key={markdown.id}
                     />
                 ))}
             </ul>
         );
     return (
-        <li>
+        <li key={path.id}>
             <div className="path-node-header field has-addons">
                 <span className="control has-text-weight-bold path-toggle" onClick={isRoot ? undefined : toggleExpand}>
                         {isExpanded ? "-" : "+"}
diff --git a/src/components/Settings/MarkdownSettings/MarkdownTemplateSettingPanel.js b/src/components/Settings/MarkdownSettings/MarkdownTemplateSettingPanel.js
index fcf9d21..0bd1d2e 100644
--- a/src/components/Settings/MarkdownSettings/MarkdownTemplateSettingPanel.js
+++ b/src/components/Settings/MarkdownSettings/MarkdownTemplateSettingPanel.js
@@ -15,7 +15,6 @@ const MarkdownTemplateSettingPanel = ({markdownSetting, onClose}) => {
     const {data: templates, isFetching: templatesAreFetching}=useMarkdownTemplates();
     const {data: template, isFetching: templateIsFetching} = useMarkdownTemplate(setting?.template_id);
     const [selectedTemplateId, setSelectedTemplateId] = useState(template?.id ?? undefined);
-    const [selectedTemplate, setSelectedTemplate] = useState(templates?.find(t => t.id === selectedTemplateId) || undefined);
 
     const createMarkdownTemplateSetting = useCreateMarkdownTemplateSetting();
     const updateMarkdownSetting = useUpdateMarkdownSetting();
@@ -49,14 +48,11 @@ const MarkdownTemplateSettingPanel = ({markdownSetting, onClose}) => {
     useEffect(() => {
         if(template?.id && selectedTemplateId === undefined) {
             setSelectedTemplateId(template?.id ?? undefined);
-            setSelectedTemplate(templates?.find(t => t.id === selectedTemplateId) || undefined);
         }
     },[template, selectedTemplateId]);
     if (settingIsFetching || templatesAreFetching || templatesAreFetching || templateIsFetching) {
         return (<p>Loading...</p>);
     }
-    console.log("template", template);
-    console.log("selectedTemplateId", selectedTemplateId);
     return setting ? (
         <div className="box" style={{marginTop: "1rem"}}>
             <h4 className="title is-5">Template Setting</h4>