update content

ui/src/LearnDialog.jsx

@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import {Dialog} from "@headlessui/react";
 import logo from "./logo.png";
 import Draggable from "react-draggable";
+import {Loader} from "react-feather";
 //             moduleItem.querySelector('button').addEventListener('click', () => {
 //                 LearnModal.get().close()
 //                 if(module.initialWorkflow){
@@ -19,6 +20,7 @@ import Draggable from "react-draggable";
 //                 }
 function LearnDialog({close, startVideo}) {
     const [selectedCategory,setSelectedCategory] = useState(window.data.categories[0])
+    const [loading,setLoading] = useState(false)
 
     return (
         <Draggable>
@@ -32,7 +34,7 @@ function LearnDialog({close, startVideo}) {
                     className={"px-2 text-xs"}>by <a
                     href={"https://openart.ai"}><img src={logo} className={"w-14 px-1"}/></a></span>
                 </Dialog.Title>
-                <div className={"flex flex-col"}>
+                {loading?<div className={"w-full flex flex-row justify-center"}><Loader height={420}   width={420} className={'text-white animate-spin'} /></div>:<div className={"flex flex-col"}>
                     <div className="flex flex-row justify-around underline space-x-2 p-2">
                         {window.data.categories.map(cat => <a key={cat} className={"cursor-pointer"}
                                                               onClick={() => {
@@ -46,6 +48,23 @@ function LearnDialog({close, startVideo}) {
                                  onClick={(e) => {
                                      if (module.initialWorkflow) {
                                          app.loadGraphData(JSON.parse(module.initialWorkflow))
+                                         close()
+                                     } else if (module.type === 'template') {
+                                         setLoading(true)
+                                         fetch("https://openart.ai/api/public/workflows/download",
+                                             {
+                                                 method: 'POST',
+                                                 headers: {
+                                                     'Content-Type': 'application/json'
+                                                 },
+                                                 body: JSON.stringify({
+                                                     workflow_id: module.id
+                                                 })
+                                             }).then(res => res.json()).then(res => {
+                                             console.log('res', res)
+                                             app.loadGraphData(JSON.parse(res.payload))
+                                             close()
+                                         })
                                      }
                                      if (module.type === 'lesson') {
                                          const keyframesFunctions = {}
@@ -56,8 +75,6 @@ function LearnDialog({close, startVideo}) {
                                              }
                                          }
                                          startVideo({title: module.title, videoId: module.videoId, keyframesFunctions})
-                                     } else {
-                                         close()
                                      }
 
                                  }}
@@ -66,13 +83,14 @@ function LearnDialog({close, startVideo}) {
                                      src={module.thumbnail ? module.thumbnail : `https://img.youtube.com/vi/${module.videoId}/default.jpg`}/>
                                 <div className={"flex flex-col"}>
                                     <span className={"font-semibold text-2xl py-2"}>{module.title}</span>
-                                    <span className={"text-sm text-gray-300"}>{module.description}</span>
+                                    <div className={"text-sm text-gray-300"}
+                                         dangerouslySetInnerHTML={{__html: module.description}}></div>
                                     <hr/>
                                 </div>
                             </div>)}
                     </div>
 
-                </div>
+                </div>}
 
             </Dialog.Panel>
         </div>