From 4e1f1b58bd458ca1250740861188316670c0d909 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 24 Feb 2023 16:59:07 -0300 Subject: [PATCH 01/21] sending message when hit enter, not saving chat for each tab yet --- .../src/components/chatComponent/index.tsx | 62 ++++++++++++------- space_flow/src/contexts/tabsContext.tsx | 4 +- space_flow/src/pages/FlowPage/index.tsx | 2 +- 3 files changed, 41 insertions(+), 27 deletions(-) diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx index c2b43d280..f15da6827 100644 --- a/space_flow/src/components/chatComponent/index.tsx +++ b/space_flow/src/components/chatComponent/index.tsx @@ -9,13 +9,15 @@ import { useContext, useEffect, useRef, useState } from "react"; import { sendAll } from "../../controllers/NodesServices"; import { alertContext } from "../../contexts/alertContext"; import { nodeColors } from "../../utils"; +import { TabsContext } from "../../contexts/tabsContext"; const _ = require("lodash"); -export default function Chat({ reactFlowInstance }) { +export default function Chat({flow, reactFlowInstance }) { + const {updateFlow} = useContext(TabsContext) const [open, setOpen] = useState(true); const [chatValue, setChatValue] = useState(""); - const [chatHistory, setChatHistory] = useState([]); + const [chatHistory, setChatHistory] = useState(flow.chat); const {setErrorData} = useContext(alertContext); const addChatHistory = (message, isSend) => { setChatHistory((old) => { @@ -23,7 +25,13 @@ export default function Chat({ reactFlowInstance }) { newChat.push({ message, isSend }); return newChat; }); + updateFlow({..._.cloneDeep(flow),chat:chatHistory}) + }; + useEffect(()=>{ + // setChatHistory(flow.chat) + console.log(flow.chat) + },[flow]) useEffect(()=>{ ref.current.scrollIntoView({behavior: 'smooth'}); }, [chatHistory]) @@ -40,6 +48,28 @@ export default function Chat({ reactFlowInstance }) { return true; } const ref = useRef(null); + + function sendMessage(){ + console.log(reactFlowInstance.toObject()) + if(chatValue !== ""){ + if(validateNodes()){ + if(validateChatNodes()){ + let message = chatValue; + setChatValue(""); + addChatHistory(message, true); + sendAll({...reactFlowInstance.toObject(),message}).then((r) => {addChatHistory(r.data.result, false);}); + } else { + setErrorData({title: 'Error sending message', list:['Chat nodes are missing.']}) + } + + } else { + setErrorData({title: 'Error sending message', list:['There are required fields not filled yet.']}) + } + } else { + setErrorData({title: 'Error sending message', list:['The message cannot be empty.']}) + } + } + return ( <>
{ + if(event.key==='Enter'){ + sendMessage() + } + }} type="text" value={chatValue} onChange={(e) => { @@ -100,28 +135,7 @@ export default function Chat({ reactFlowInstance }) { />
-
- ) : ( -
- {isRename ? ( - { - setIsRename(false); - if (value !== "") { - let newFlow = _.cloneDeep(flow); - newFlow.name = value; - updateFlow(newFlow); - } - }} - value={value} - onChange={(e) => { - setValue(e.target.value); - }} - /> - ) : ( - { - setIsRename(true); - setValue(flow.name); - }} - > - {flow.name} - - )} - -
- ) - ) : ( -
- -
- )} - - ); + const { removeFlow, updateFlow, flows, downloadFlow } = useContext(TabsContext); + const [isRename, setIsRename] = useState(false); + const [value, setValue] = useState(""); + return ( + <> + {flow ? ( + !selected ? ( +
+ {flow.name} + +
+ ) : ( +
+ {isRename ? ( + { + setIsRename(false); + if (value !== "") { + let newFlow = _.cloneDeep(flow); + newFlow.name = value; + updateFlow(newFlow); + } + }} + value={value} + onChange={(e) => { + setValue(e.target.value); + }} + /> + ) : ( +
+ { + setIsRename(true); + setValue(flow.name); + }} + > + {flow.name} + + downloadFlow()} className="w-4 h-4 hover:text-blue-500 cursor-pointer"/> +
+ )} + +
+ ) + ) : ( +
+ +
+ )} + + ); } From fa51eb3d3a5dc7ae012578b06e3596a77822dcae Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Sun, 26 Feb 2023 17:04:40 -0300 Subject: [PATCH 07/21] upload file not working yet, creating just empty flow, maybe is related to the chat bug? --- .../ExtraSidebarComponent/index.tsx | 12 +++++++--- space_flow/src/contexts/tabsContext.tsx | 24 +++++++++++++++---- .../extraSidebarComponent/index.tsx | 2 +- 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/space_flow/src/components/ExtraSidebarComponent/index.tsx b/space_flow/src/components/ExtraSidebarComponent/index.tsx index 7f6ef2c4a..6d5a92667 100644 --- a/space_flow/src/components/ExtraSidebarComponent/index.tsx +++ b/space_flow/src/components/ExtraSidebarComponent/index.tsx @@ -1,11 +1,13 @@ import { Disclosure } from "@headlessui/react"; -import { ChevronLeftIcon } from "@heroicons/react/24/outline"; +import { ArrowUpTrayIcon, ChevronLeftIcon } from "@heroicons/react/24/outline"; import { useContext } from "react"; import { Link } from "react-router-dom"; import { classNames } from "../../utils"; import { locationContext } from "../../contexts/locationContext"; +import { TabsContext } from "../../contexts/tabsContext"; export default function ExtraSidebar() { + const {uploadFlow} = useContext(TabsContext) const { atual, isStackedOpen, @@ -20,7 +22,7 @@ export default function ExtraSidebar() { isStackedOpen ? "w-60" : "w-0 " } flex-shrink-0 flex overflow-hidden flex-col border-r transition-all duration-500`} > -
+
{extraNavigation.title} @@ -32,7 +34,7 @@ export default function ExtraSidebar() {
-
+
{extraNavigation.options ? (
+
+
diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index aecaa3f08..e8e15d0a0 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -10,7 +10,8 @@ type TabsContextType={ addFlow:(flowData?:any)=>void; updateFlow:(newFlow:flow)=>void; incrementNodeId:()=>number, - downloadFlow:()=>void + downloadFlow:()=>void, + uploadFlow:()=>void } const TabsContextInitialValue = { @@ -21,7 +22,8 @@ const TabsContextInitialValue = { addFlow:(flowData?:any)=>{}, updateFlow:(newFlow:flow)=>{}, incrementNodeId:()=>0, - downloadFlow:()=>{} + downloadFlow:()=>{}, + uploadFlow:()=>{} } @@ -62,6 +64,18 @@ export function TabsProvider({children}){ link.download = `${flows[tabIndex].name}.json` link.click() } + function uploadFlow(){ + const input = document.createElement('input') + input.type='file' + input.onchange = (e:Event)=>{ + if((e.target as HTMLInputElement).files[0].type === "application/json"){ + const file = (e.target as HTMLInputElement).files[0]; + file.text().then(text =>addFlow(JSON.parse(text))) + } + } + input.click() + + } function removeFlow(id:string){ setFlows(prevState=>{ @@ -82,8 +96,8 @@ export function TabsProvider({children}){ }); } function addFlow(flowData?:flow) { - const data = flowData?flowData:null - let newFlow: flow = {name: "flow"+id, id: id.toString(), data,chat:[]} + const data = flowData?.data?flowData:null + let newFlow: flow = {name:flowData?flowData.name:"flow"+id, id: id.toString(), data,chat:flowData?flowData.chat:[]} setId((old) => old+1); setFlows(prevState => { const newFlows = [...prevState, newFlow]; @@ -106,7 +120,7 @@ export function TabsProvider({children}){ } return( - + {children} ) diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index ef68d3768..980902c22 100644 --- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -49,7 +49,7 @@ export default function ExtraSidebar() { } return ( -
+
{Object.keys(data).map((d, i) => ( Date: Mon, 27 Feb 2023 11:42:02 -0300 Subject: [PATCH 08/21] import and export inside flow --- .../flowManager/tabComponent/index.tsx | 8 +- space_flow/src/pages/FlowPage/index.tsx | 312 +++++++++--------- 2 files changed, 171 insertions(+), 149 deletions(-) diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx index 4df405004..138d399b9 100644 --- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx @@ -6,7 +6,8 @@ import { TabsContext } from "../../../../contexts/tabsContext"; var _ = require("lodash"); export default function TabComponent({ selected, flow, onClick }) { - const { removeFlow, updateFlow, flows, downloadFlow } = useContext(TabsContext); + const { removeFlow, updateFlow, flows, downloadFlow } = + useContext(TabsContext); const [isRename, setIsRename] = useState(false); const [value, setValue] = useState(""); return ( @@ -57,7 +58,10 @@ export default function TabComponent({ selected, flow, onClick }) { > {flow.name} - downloadFlow()} className="w-4 h-4 hover:text-blue-500 cursor-pointer"/> + {/* downloadFlow()} + className="w-4 h-4 hover:text-blue-500 cursor-pointer" + /> */}
)}
-
+ {/*
-
+
*/}
From 8ea68be22b4c9c1d63c27484692c2390c2da3026 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 27 Feb 2023 12:59:38 -0300 Subject: [PATCH 10/21] debugging from upload flow --- space_flow/src/contexts/tabsContext.tsx | 269 +++++++++++++----------- 1 file changed, 149 insertions(+), 120 deletions(-) diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index e8e15d0a0..86bf32e22 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -1,127 +1,156 @@ import { createContext, useEffect, useState, useRef } from "react"; -type flow={name:string,id:string,data:any,chat:Array<{message:string,isSend:boolean}>} +type flow = { + name: string; + id: string; + data: any; + chat: Array<{ message: string; isSend: boolean }>; +}; -type TabsContextType={ - tabIndex:number; - setTabIndex:(index:number)=>void; - flows:Array - removeFlow:(id:string)=>void; - addFlow:(flowData?:any)=>void; - updateFlow:(newFlow:flow)=>void; - incrementNodeId:()=>number, - downloadFlow:()=>void, - uploadFlow:()=>void -} +type TabsContextType = { + tabIndex: number; + setTabIndex: (index: number) => void; + flows: Array; + removeFlow: (id: string) => void; + addFlow: (flowData?: any) => void; + updateFlow: (newFlow: flow) => void; + incrementNodeId: () => number; + downloadFlow: () => void; + uploadFlow: () => void; +}; const TabsContextInitialValue = { - tabIndex : 0, - setTabIndex:(index:number)=>{}, - flows:[], - removeFlow:(id:string)=>{}, - addFlow:(flowData?:any)=>{}, - updateFlow:(newFlow:flow)=>{}, - incrementNodeId:()=>0, - downloadFlow:()=>{}, - uploadFlow:()=>{} + tabIndex: 0, + setTabIndex: (index: number) => {}, + flows: [], + removeFlow: (id: string) => {}, + addFlow: (flowData?: any) => {}, + updateFlow: (newFlow: flow) => {}, + incrementNodeId: () => 0, + downloadFlow: () => {}, + uploadFlow: () => {}, +}; -} - -export const TabsContext = createContext(TabsContextInitialValue) - -let _ = require('lodash'); - -export function TabsProvider({children}){ - const [tabIndex,setTabIndex] = useState(0) - const [flows,setFlows] = useState>([]) - const [id, setId] = useState(0); - - const newNodeId = useRef(0); - function incrementNodeId(){ - newNodeId.current = newNodeId.current + 1; - return newNodeId.current; - } - useEffect(() => { - if(flows.length !== 0) - window.localStorage.setItem('tabsData', JSON.stringify({tabIndex, flows, id, nodeId: newNodeId.current})); - }, [flows, id, tabIndex, newNodeId]); - - useEffect(() => { - let cookie = window.localStorage.getItem('tabsData'); - if(cookie){ - let cookieObject = JSON.parse(cookie); - setTabIndex(cookieObject.tabIndex); - setFlows(cookieObject.flows); - setId(cookieObject.id); - newNodeId.current= cookieObject.nodeId; - } - }, []) - - function downloadFlow(){ - const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(JSON.stringify(flows[tabIndex]))}` - const link = document.createElement('a') - link.href = jsonString - link.download = `${flows[tabIndex].name}.json` - link.click() - } - function uploadFlow(){ - const input = document.createElement('input') - input.type='file' - input.onchange = (e:Event)=>{ - if((e.target as HTMLInputElement).files[0].type === "application/json"){ - const file = (e.target as HTMLInputElement).files[0]; - file.text().then(text =>addFlow(JSON.parse(text))) - } - } - input.click() - - } - - function removeFlow(id:string){ - setFlows(prevState=>{ - const newFlows = [...prevState]; - const index = newFlows.findIndex(flow=>flow.id===id); - if(index >= 0){ - if(index===tabIndex){ - setTabIndex(flows.length-2); - newFlows.splice(index,1); - } else { - let flowId = flows[tabIndex].id; - newFlows.splice(index,1); - setTabIndex(newFlows.findIndex(flow=>flow.id === flowId)); - } - - } - return newFlows; - }); - } - function addFlow(flowData?:flow) { - const data = flowData?.data?flowData:null - let newFlow: flow = {name:flowData?flowData.name:"flow"+id, id: id.toString(), data,chat:flowData?flowData.chat:[]} - setId((old) => old+1); - setFlows(prevState => { - const newFlows = [...prevState, newFlow]; - return newFlows; - }); - setTabIndex(flows.length); - } - function updateFlow(newFlow:flow){ - console.log(newFlow) - setFlows(prevState=>{ - const newFlows = [...prevState]; - const index = newFlows.findIndex(flow=>flow.id===newFlow.id) - if(index!==-1){ - newFlows[index].data = newFlow.data - newFlows[index].name = newFlow.name - newFlows[index].chat = newFlow.chat - } - return newFlows; - }); - } - - return( - - {children} - - ) +export const TabsContext = createContext( + TabsContextInitialValue +); + +let _ = require("lodash"); + +export function TabsProvider({ children }) { + const [tabIndex, setTabIndex] = useState(0); + const [flows, setFlows] = useState>([]); + const [id, setId] = useState(0); + + const newNodeId = useRef(0); + function incrementNodeId() { + newNodeId.current = newNodeId.current + 1; + return newNodeId.current; + } + useEffect(() => { + if (flows.length !== 0) + window.localStorage.setItem( + "tabsData", + JSON.stringify({ tabIndex, flows, id, nodeId: newNodeId.current }) + ); + }, [flows, id, tabIndex, newNodeId]); + + useEffect(() => { + let cookie = window.localStorage.getItem("tabsData"); + if (cookie) { + let cookieObject = JSON.parse(cookie); + setTabIndex(cookieObject.tabIndex); + setFlows(cookieObject.flows); + setId(cookieObject.id); + newNodeId.current = cookieObject.nodeId; + } + }, []); + + function downloadFlow() { + const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent( + JSON.stringify(flows[tabIndex]) + )}`; + const link = document.createElement("a"); + link.href = jsonString; + link.download = `${flows[tabIndex].name}.json`; + link.click(); + } + function uploadFlow() { + const input = document.createElement("input"); + input.type = "file"; + input.onchange = (e: Event) => { + if ((e.target as HTMLInputElement).files[0].type === "application/json") { + const file = (e.target as HTMLInputElement).files[0]; + file.text().then((text) => { + console.log(JSON.parse(text),"json from upload") + addFlow(JSON.parse(text)); + }); + } + }; + input.click(); + } + + function removeFlow(id: string) { + setFlows((prevState) => { + const newFlows = [...prevState]; + const index = newFlows.findIndex((flow) => flow.id === id); + if (index >= 0) { + if (index === tabIndex) { + setTabIndex(flows.length - 2); + newFlows.splice(index, 1); + } else { + let flowId = flows[tabIndex].id; + newFlows.splice(index, 1); + setTabIndex(newFlows.findIndex((flow) => flow.id === flowId)); + } + } + return newFlows; + }); + } + function addFlow(flowData?: flow) { + const data = flowData?.data ? flowData : null; + let newFlow: flow = { + name: flowData ? flowData.name : "flow" + id, + id: id.toString(), + data, + chat: flowData ? flowData.chat : [], + }; + setId((old) => old + 1); + setFlows((prevState) => { + const newFlows = [...prevState, newFlow]; + return newFlows; + }); + setTabIndex(flows.length); + } + function updateFlow(newFlow: flow) { + console.log(newFlow); + setFlows((prevState) => { + const newFlows = [...prevState]; + const index = newFlows.findIndex((flow) => flow.id === newFlow.id); + if (index !== -1) { + newFlows[index].data = newFlow.data; + newFlows[index].name = newFlow.name; + newFlows[index].chat = newFlow.chat; + } + return newFlows; + }); + } + + return ( + + {children} + + ); } From d54da3b87890b77d7666e56670b2830bfe02346c Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 27 Feb 2023 14:12:20 -0300 Subject: [PATCH 11/21] refactor popUpContext --- space_flow/src/contexts/popUpContext.tsx | 37 ++++++++++++------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/space_flow/src/contexts/popUpContext.tsx b/space_flow/src/contexts/popUpContext.tsx index 506be2a38..1d4d28bc7 100644 --- a/space_flow/src/contexts/popUpContext.tsx +++ b/space_flow/src/contexts/popUpContext.tsx @@ -1,32 +1,33 @@ import { createContext } from "react"; -import React, { useState } from 'react'; +import React, { useState } from "react"; +//context to set JSX element on the DOM export const PopUpContext = createContext({ - openPopUp: (popUpElement: JSX.Element) => {}, - closePopUp: () => {} + openPopUp: (popUpElement: JSX.Element) => {}, + closePopUp: () => {}, }); interface PopUpProviderProps { - children: React.ReactNode; + children: React.ReactNode; } const PopUpProvider = ({ children }: PopUpProviderProps) => { - const [popUpElement, setPopUpElement] = useState(null); + const [popUpElement, setPopUpElement] = useState(null); - const openPopUp = (element: JSX.Element) => { - setPopUpElement(element); - }; + const openPopUp = (element: JSX.Element) => { + setPopUpElement(element); + }; - const closePopUp = () => { - setPopUpElement(null); - }; + const closePopUp = () => { + setPopUpElement(null); + }; - return ( - - {children} - {popUpElement} - - ); + return ( + + {children} + {popUpElement} + + ); }; -export default PopUpProvider; \ No newline at end of file +export default PopUpProvider; From ab1a4c9801331dc9b0c450a521555fc5fe61b6ae Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 27 Feb 2023 14:13:46 -0300 Subject: [PATCH 12/21] refactor context wrapper --- space_flow/src/App.tsx | 242 +++++++++++++++--------------- space_flow/src/contexts/index.tsx | 1 + 2 files changed, 121 insertions(+), 122 deletions(-) diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx index 32b87e72f..e3e53ecff 100644 --- a/space_flow/src/App.tsx +++ b/space_flow/src/App.tsx @@ -7,7 +7,7 @@ import ErrorAlert from "./alerts/error"; import NoticeAlert from "./alerts/notice"; import SuccessAlert from "./alerts/success"; import ExtraSidebar from "./components/ExtraSidebarComponent"; -import { alertContext } from "./contexts/alertContext"; +import { alertContext } from "./contexts/alertContext"; import { locationContext } from "./contexts/locationContext"; import FlowPage from "./pages/FlowPage"; import Sidebar from "./components/SidebarComponent"; @@ -16,134 +16,132 @@ import { TabsProvider } from "./contexts/tabsContext"; import { TabsManager } from "./pages/FlowPage/flowManager"; export default function App() { - var _ = require("lodash"); - + var _ = require("lodash"); - let { setAtual, setShowSideBar, setIsStackedOpen} = - useContext(locationContext); - let location = useLocation(); - useEffect(() => { - setAtual(location.pathname.replace(/\/$/g, "").split("/")); - setShowSideBar(true); - setIsStackedOpen(true); - }, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]); + let { setAtual, setShowSideBar, setIsStackedOpen } = + useContext(locationContext); + let location = useLocation(); + useEffect(() => { + setAtual(location.pathname.replace(/\/$/g, "").split("/")); + setShowSideBar(true); + setIsStackedOpen(true); + }, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]); - const { - errorData, - errorOpen, - setErrorOpen, - noticeData, - noticeOpen, - setNoticeOpen, - successData, - successOpen, - setSuccessOpen, - } = useContext(alertContext); + const { + errorData, + errorOpen, + setErrorOpen, + noticeData, + noticeOpen, + setNoticeOpen, + successData, + successOpen, + setSuccessOpen, + } = useContext(alertContext); - const [alertsList, setAlertsList] = useState([]); + const [alertsList, setAlertsList] = useState([]); - useEffect(() => { - if (errorOpen && errorData) { - setErrorOpen(false); - setAlertsList((old) => { - let newAlertsList = [ - ...old, - { type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() }, - ]; - return newAlertsList; - }); - } else if (noticeOpen && noticeData) { - setNoticeOpen(false); - setAlertsList((old) => { - let newAlertsList = [ - ...old, - { type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() }, - ]; - return newAlertsList; - }); - } else if (successOpen && successData) { - setSuccessOpen(false); - setAlertsList((old) => { - let newAlertsList = [ - ...old, - { type: "success", data: _.cloneDeep(successData), id: _.uniqueId() }, - ]; - return newAlertsList; - }); - } - }, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]); + useEffect(() => { + if (errorOpen && errorData) { + setErrorOpen(false); + setAlertsList((old) => { + let newAlertsList = [ + ...old, + { type: "error", data: _.cloneDeep(errorData), id: _.uniqueId() }, + ]; + return newAlertsList; + }); + } else if (noticeOpen && noticeData) { + setNoticeOpen(false); + setAlertsList((old) => { + let newAlertsList = [ + ...old, + { type: "notice", data: _.cloneDeep(noticeData), id: _.uniqueId() }, + ]; + return newAlertsList; + }); + } else if (successOpen && successData) { + setSuccessOpen(false); + setAlertsList((old) => { + let newAlertsList = [ + ...old, + { type: "success", data: _.cloneDeep(successData), id: _.uniqueId() }, + ]; + return newAlertsList; + }); + } + }, [errorData, errorOpen, noticeData, noticeOpen, successData, successOpen]); - const removeAlert = (id: number) => { - setAlertsList((prevAlertsList) => - prevAlertsList.filter((alert) => alert.id !== id) - ); - }; + const removeAlert = (id: number) => { + setAlertsList((prevAlertsList) => + prevAlertsList.filter((alert) => alert.id !== id) + ); + }; - const user = { - name: "Whitney Francis", - email: "whitney.francis@example.com", - imageUrl: - "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", - }; + const user = { + name: "Whitney Francis", + email: "whitney.francis@example.com", + imageUrl: + "https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", + }; - const userNavigation = [ - { name: "Your Projects", href: "/" }, - // { - // name: "Account settings", - // href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser", - // }, - { name: "Sign out", href: "/" }, - ]; + const userNavigation = [ + { name: "Your Projects", href: "/" }, + // { + // name: "Account settings", + // href: "http://localhost:4455/.ory/kratos/public/self-service/settings/browser", + // }, + { name: "Sign out", href: "/" }, + ]; - return ( - //need parent component with width and height -
- -
-
-
-
- - + return ( + //need parent component with width and height +
+
+
+
+
+ + - {/* Main area */} -
- {/* Primary column */} -
- -
-
-
-
- {alertsList.map((alert) => ( -
- {alert.type === "error" ? ( - - ) : alert.type === "notice" ? ( - - ) : ( - - )} -
- ))} -
-
- ); + {/* Main area */} +
+ {/* Primary column */} +
+ +
+
+
+
+ {alertsList.map((alert) => ( +
+ {alert.type === "error" ? ( + + ) : alert.type === "notice" ? ( + + ) : ( + + )} +
+ ))} +
+
+ ); } diff --git a/space_flow/src/contexts/index.tsx b/space_flow/src/contexts/index.tsx index c4a22cad6..8ad06ab0b 100644 --- a/space_flow/src/contexts/index.tsx +++ b/space_flow/src/contexts/index.tsx @@ -5,6 +5,7 @@ import { TabsProvider } from "./tabsContext"; import { TypesProvider } from "./typesContext"; export default function ContextWrapper({ children }) { + //element to wrap all context return ( <> From bf8d47781599d638964980e6ec35061f33c0c23a Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 27 Feb 2023 14:17:07 -0300 Subject: [PATCH 13/21] refactor alertContext --- space_flow/src/contexts/alertContext.tsx | 231 ++++++++++++++--------- 1 file changed, 138 insertions(+), 93 deletions(-) diff --git a/space_flow/src/contexts/alertContext.tsx b/space_flow/src/contexts/alertContext.tsx index 50e16e2c3..f749cef39 100644 --- a/space_flow/src/contexts/alertContext.tsx +++ b/space_flow/src/contexts/alertContext.tsx @@ -3,101 +3,146 @@ import { alertDropdownItem } from "../alerts/alertDropDown"; var _ = require("lodash"); -type alertContextType= -{ - errorData: {title: string, list?: Array}; - setErrorData:(newState:{title: string, list?: Array})=>void; - errorOpen: boolean; - setErrorOpen:(newState:boolean)=>void; - noticeData: {title: string, link?: string}; - setNoticeData:(newState:{title: string, link?: string})=>void; - noticeOpen: boolean; - setNoticeOpen:(newState:boolean)=>void; - successData: {title: string}; - setSuccessData:(newState:{title: string})=>void; - successOpen: boolean; - setSuccessOpen:(newState:boolean)=>void; - notificationCenter:boolean - setNotificationCenter:(newState:boolean)=>void; - notificationList:Array; - pushNotificationList:(Object)=>void - clearNotificationList:()=>void, - removeFromNotificationList:(index:number)=>void -} +//types for alertContextType +type alertContextType = { + errorData: { title: string; list?: Array }; + setErrorData: (newState: { title: string; list?: Array }) => void; + errorOpen: boolean; + setErrorOpen: (newState: boolean) => void; + noticeData: { title: string; link?: string }; + setNoticeData: (newState: { title: string; link?: string }) => void; + noticeOpen: boolean; + setNoticeOpen: (newState: boolean) => void; + successData: { title: string }; + setSuccessData: (newState: { title: string }) => void; + successOpen: boolean; + setSuccessOpen: (newState: boolean) => void; + notificationCenter: boolean; + setNotificationCenter: (newState: boolean) => void; + notificationList: Array; + pushNotificationList: (Object) => void; + clearNotificationList: () => void; + removeFromNotificationList: (index: number) => void; +}; -const initialValue= { - errorData: {title:"", list:[]}, - setErrorData:()=>{}, - errorOpen: false, - setErrorOpen:()=>{}, - noticeData: {title:"", link:""}, - setNoticeData:()=>{}, - noticeOpen: false, - setNoticeOpen:()=>{}, - successData: {title:""}, - setSuccessData:()=>{}, - successOpen: false, - setSuccessOpen:()=>{}, - notificationCenter:false, - setNotificationCenter:()=>{}, - notificationList:[], - pushNotificationList:()=>{}, - clearNotificationList:()=>{}, - removeFromNotificationList:()=>{} -} +//initial values to alertContextType +const initialValue = { + errorData: { title: "", list: [] }, + setErrorData: () => {}, + errorOpen: false, + setErrorOpen: () => {}, + noticeData: { title: "", link: "" }, + setNoticeData: () => {}, + noticeOpen: false, + setNoticeOpen: () => {}, + successData: { title: "" }, + setSuccessData: () => {}, + successOpen: false, + setSuccessOpen: () => {}, + notificationCenter: false, + setNotificationCenter: () => {}, + notificationList: [], + pushNotificationList: () => {}, + clearNotificationList: () => {}, + removeFromNotificationList: () => {}, +}; export const alertContext = createContext(initialValue); -export function AlertProvider({children}){ - const [errorData, setErrorDataState] = useState<{title:string,list?:Array}>({title:"",list:[]}); - const [errorOpen, setErrorOpen] = useState(false); - const [noticeData, setNoticeDataState] = useState<{title:string,link?:string}>({title:"",link:""}); - const [noticeOpen, setNoticeOpen] = useState(false); - const [successData, setSuccessDataState] = useState<{title:string}>({title:""}); - const [successOpen, setSuccessOpen] = useState(false); - const [notificationCenter,setNotificationCenter]=useState(false); - const [notificationList,setNotificationList] = useState([]) - const pushNotificationList = (notification:alertDropdownItem)=>{ - setNotificationList((old) => { - let newNotificationList = _.cloneDeep(old); - newNotificationList.unshift(notification); - return newNotificationList; - }) - } - function setErrorData (newState:{title: string, list?: Array}){ - setErrorDataState(newState) - setErrorOpen(true) - if(newState.title){ - setNotificationCenter(true) - pushNotificationList({type:"error",title:newState.title,list:newState.list, id:_.uniqueId()}) - } - } - function setNoticeData(newState:{title: string, link?: string}){ - setNoticeDataState(newState) - setNoticeOpen(true) - if(newState.title){ - setNotificationCenter(true) - pushNotificationList({type:"notice",title:newState.title,link:newState.link, id:_.uniqueId()}) - } - } - function setSuccessData(newState:{title: string}){ - setSuccessDataState(newState) - setSuccessOpen(true) - if(newState.title){ - setNotificationCenter(true) - pushNotificationList({type:"success",title:newState.title, id:_.uniqueId()}) - } - } - function clearNotificationList(){ - setNotificationList([]) - } - function removeFromNotificationList(index:number){ - setNotificationList((prevAlertsList) => prevAlertsList.filter((alert) => alert.id !== index)); - } - return ( - - {children} - - ) +export function AlertProvider({ children }) { + const [errorData, setErrorDataState] = useState<{ + title: string; + list?: Array; + }>({ title: "", list: [] }); + const [errorOpen, setErrorOpen] = useState(false); + const [noticeData, setNoticeDataState] = useState<{ + title: string; + link?: string; + }>({ title: "", link: "" }); + const [noticeOpen, setNoticeOpen] = useState(false); + const [successData, setSuccessDataState] = useState<{ title: string }>({ + title: "", + }); + const [successOpen, setSuccessOpen] = useState(false); + const [notificationCenter, setNotificationCenter] = useState(false); + const [notificationList, setNotificationList] = useState([]); + const pushNotificationList = (notification: alertDropdownItem) => { + setNotificationList((old) => { + let newNotificationList = _.cloneDeep(old); + newNotificationList.unshift(notification); + return newNotificationList; + }); + }; + function setErrorData(newState: { title: string; list?: Array }) { + setErrorDataState(newState); + setErrorOpen(true); + if (newState.title) { + setNotificationCenter(true); + pushNotificationList({ + type: "error", + title: newState.title, + list: newState.list, + id: _.uniqueId(), + }); + } + } + function setNoticeData(newState: { title: string; link?: string }) { + setNoticeDataState(newState); + setNoticeOpen(true); + if (newState.title) { + setNotificationCenter(true); + pushNotificationList({ + type: "notice", + title: newState.title, + link: newState.link, + id: _.uniqueId(), + }); + } + } + function setSuccessData(newState: { title: string }) { + setSuccessDataState(newState); + setSuccessOpen(true); + if (newState.title) { + setNotificationCenter(true); + pushNotificationList({ + type: "success", + title: newState.title, + id: _.uniqueId(), + }); + } + } + function clearNotificationList() { + setNotificationList([]); + } + function removeFromNotificationList(index: number) { + setNotificationList((prevAlertsList) => + prevAlertsList.filter((alert) => alert.id !== index) + ); + } + return ( + + {children} + + ); } From 60eccb274d6ac07dff73c856976ad12d6e68c8f4 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 27 Feb 2023 14:23:40 -0300 Subject: [PATCH 14/21] refactor location context --- space_flow/src/App.tsx | 6 +- .../ExtraSidebarComponent/index.tsx | 10 +- .../SidebarComponent/sidebarButton/index.tsx | 4 +- .../components/breadcrumbComponent/index.tsx | 4 +- space_flow/src/contexts/locationContext.tsx | 110 ++++++++++++------ 5 files changed, 84 insertions(+), 50 deletions(-) diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx index e3e53ecff..1480111d4 100644 --- a/space_flow/src/App.tsx +++ b/space_flow/src/App.tsx @@ -18,14 +18,14 @@ import { TabsManager } from "./pages/FlowPage/flowManager"; export default function App() { var _ = require("lodash"); - let { setAtual, setShowSideBar, setIsStackedOpen } = + let { setCurrent, setShowSideBar, setIsStackedOpen } = useContext(locationContext); let location = useLocation(); useEffect(() => { - setAtual(location.pathname.replace(/\/$/g, "").split("/")); + setCurrent(location.pathname.replace(/\/$/g, "").split("/")); setShowSideBar(true); setIsStackedOpen(true); - }, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]); + }, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]); const { errorData, diff --git a/space_flow/src/components/ExtraSidebarComponent/index.tsx b/space_flow/src/components/ExtraSidebarComponent/index.tsx index 2a84c47be..8f2220cd0 100644 --- a/space_flow/src/components/ExtraSidebarComponent/index.tsx +++ b/space_flow/src/components/ExtraSidebarComponent/index.tsx @@ -9,7 +9,7 @@ import { TabsContext } from "../../contexts/tabsContext"; export default function ExtraSidebar() { const {uploadFlow} = useContext(TabsContext) const { - atual, + current, isStackedOpen, setIsStackedOpen, extraNavigation, @@ -44,7 +44,7 @@ export default function ExtraSidebar() { diff --git a/space_flow/src/components/breadcrumbComponent/index.tsx b/space_flow/src/components/breadcrumbComponent/index.tsx index c4db2d896..809a4f144 100644 --- a/space_flow/src/components/breadcrumbComponent/index.tsx +++ b/space_flow/src/components/breadcrumbComponent/index.tsx @@ -22,7 +22,7 @@ function getPages(atual){ } export default function Breadcrumb(){ - let {atual} = useContext(locationContext); + let {current} = useContext(locationContext); return (
- {getPages(atual).map((page) => ( + {getPages(current).map((page) => (
    • ) diff --git a/space_flow/src/entities/sidebarNav.ts b/space_flow/src/entities/sidebarNav.ts index 9de85c1f1..52ff363e3 100644 --- a/space_flow/src/entities/sidebarNav.ts +++ b/space_flow/src/entities/sidebarNav.ts @@ -10,9 +10,9 @@ import { export const sidebarNavigation = [ { name: 'Home', href: '/', icon: HomeIcon, current: true }, - { name: 'Table', href: '/table/', icon: TableCellsIcon, current: false }, - //{ name: 'Train', href: '#', icon: BoltIcon, current: false }, - //{ name: 'Model Details', href: '#', icon: LightBulbIcon, current: false }, - //{ name: 'Deploy', href: '#', icon: RocketLaunchIcon, current: false }, - { name: 'Settings', href: '/settings/', icon: Cog6ToothIcon, current: false }, + // { name: 'Table', href: '/table/', icon: TableCellsIcon, current: false }, + // //{ name: 'Train', href: '#', icon: BoltIcon, current: false }, + // //{ name: 'Model Details', href: '#', icon: LightBulbIcon, current: false }, + // //{ name: 'Deploy', href: '#', icon: RocketLaunchIcon, current: false }, + // { name: 'Settings', href: '/settings/', icon: Cog6ToothIcon, current: false }, ] diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index c57de749d..d0e4538d4 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -44,7 +44,7 @@ export default function FlowPage({ flow }) { const reactFlowWrapper = useRef(null); function getId() { - return `dndnode_}` + incrementNodeId(); + return `dndnode_` + incrementNodeId(); } const { setExtraComponent, setExtraNavigation } = useContext(locationContext); From 682190dec010f45d6d25ec1575aa2ad5acf8849e Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 27 Feb 2023 17:32:18 -0300 Subject: [PATCH 18/21] flow tabs bug solved with variable control inside chat] --- space_flow/src/components/chatComponent/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx index d001f26c5..9a6ec63f7 100644 --- a/space_flow/src/components/chatComponent/index.tsx +++ b/space_flow/src/components/chatComponent/index.tsx @@ -15,6 +15,7 @@ const _ = require("lodash"); export default function Chat({flow, reactFlowInstance }) { const {updateFlow} = useContext(TabsContext) + const [saveChat,setSaveChat] = useState(false) const [open, setOpen] = useState(true); const [chatValue, setChatValue] = useState(""); const [chatHistory, setChatHistory] = useState(flow.chat); @@ -25,14 +26,16 @@ export default function Chat({flow, reactFlowInstance }) { newChat.push({ message, isSend }); return newChat; }); + setSaveChat(chat=>!chat) }; //bug here why?? useEffect(()=>{ + console.log("flow") updateFlow({..._.cloneDeep(flow),chat:chatHistory}) - },[chatHistory]) + },[saveChat]) useEffect(()=>{ setChatHistory(flow.chat) - console.log(flow.chat) + // console.log(flow.chat) },[flow]) useEffect(()=>{ if(ref.current) From bb0873eeacd5b8f0a382d68b93f53febfd6079c5 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 27 Feb 2023 19:05:44 -0300 Subject: [PATCH 19/21] add coment to bug on upload --- space_flow/src/components/chatComponent/index.tsx | 2 -- space_flow/src/contexts/tabsContext.tsx | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx index 9a6ec63f7..60ed864d6 100644 --- a/space_flow/src/components/chatComponent/index.tsx +++ b/space_flow/src/components/chatComponent/index.tsx @@ -28,14 +28,12 @@ export default function Chat({flow, reactFlowInstance }) { }); setSaveChat(chat=>!chat) }; - //bug here why?? useEffect(()=>{ console.log("flow") updateFlow({..._.cloneDeep(flow),chat:chatHistory}) },[saveChat]) useEffect(()=>{ setChatHistory(flow.chat) - // console.log(flow.chat) },[flow]) useEffect(()=>{ if(ref.current) diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index 86bf32e22..56df51bfe 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -75,6 +75,7 @@ export function TabsProvider({ children }) { link.download = `${flows[tabIndex].name}.json`; link.click(); } + //upload is always empty, don't know why function uploadFlow() { const input = document.createElement("input"); input.type = "file"; From 6014297e07878df997b905411e2c06be288c4766 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 27 Feb 2023 21:05:12 -0300 Subject: [PATCH 20/21] save and upload working fine --- space_flow/src/components/chatComponent/index.tsx | 3 ++- space_flow/src/contexts/tabsContext.tsx | 9 +++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/space_flow/src/components/chatComponent/index.tsx b/space_flow/src/components/chatComponent/index.tsx index 60ed864d6..6a31d6560 100644 --- a/space_flow/src/components/chatComponent/index.tsx +++ b/space_flow/src/components/chatComponent/index.tsx @@ -61,7 +61,8 @@ export default function Chat({flow, reactFlowInstance }) { let message = chatValue; setChatValue(""); addChatHistory(message, true); - sendAll({...reactFlowInstance.toObject(),message}).then((r) => {addChatHistory(r.data.result, false);}); + console.log({...reactFlowInstance.toObject(),message,chatHistory}) + sendAll({...reactFlowInstance.toObject(),message,chatHistory}).then((r) => {addChatHistory(r.data.result, false);}); } else { setErrorData({title: 'Error sending message', list:['Chat nodes are missing.']}) } diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index 56df51bfe..789dffb11 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -1,4 +1,5 @@ import { createContext, useEffect, useState, useRef } from "react"; +import { example } from "../data_assets/example"; type flow = { name: string; @@ -108,13 +109,13 @@ export function TabsProvider({ children }) { return newFlows; }); } - function addFlow(flowData?: flow) { - const data = flowData?.data ? flowData : null; + function addFlow(flow?: flow) { + const data = flow?.data ? flow.data : null; let newFlow: flow = { - name: flowData ? flowData.name : "flow" + id, + name: flow ? flow.name : "flow" + id, id: id.toString(), data, - chat: flowData ? flowData.chat : [], + chat: flow ? flow.chat : [], }; setId((old) => old + 1); setFlows((prevState) => { From 898bba87b1d46f1039c57a3e1d468bff9600c2e4 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Tue, 28 Feb 2023 19:30:07 -0300 Subject: [PATCH 21/21] bug already resolved, removing commit --- space_flow/src/contexts/tabsContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index 789dffb11..88ee249f8 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -76,7 +76,7 @@ export function TabsProvider({ children }) { link.download = `${flows[tabIndex].name}.json`; link.click(); } - //upload is always empty, don't know why + function uploadFlow() { const input = document.createElement("input"); input.type = "file";