templates from backend stored in context

src/frontend/src/contexts/index.tsx

@@ -5,6 +5,7 @@ import { LocationProvider } from "./locationContext";
 import PopUpProvider from "./popUpContext";
 import { TabsProvider } from "./tabsContext";
 import { TypesProvider } from "./typesContext";
+import { TemplatesProvider } from "./templatesContext";
 
 export default function ContextWrapper({ children }: { children: ReactNode }) {
 	//element to wrap all context
@@ -13,13 +14,13 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
 			<DarkProvider>
 				<LocationProvider>
 					<AlertProvider>
-					<TabsProvider>
+						<TemplatesProvider>
-						<PopUpProvider>
+							<TabsProvider>
-							<TypesProvider>
+								<PopUpProvider>
-								{children}
+									<TypesProvider>{children}</TypesProvider>
-							</TypesProvider>
+								</PopUpProvider>
-						</PopUpProvider>
+							</TabsProvider>
-						</TabsProvider>
+						</TemplatesProvider>
 					</AlertProvider>
 				</LocationProvider>
 			</DarkProvider>

src/frontend/src/contexts/tabsContext.tsx

@@ -3,6 +3,7 @@ import { FlowType } from "../types/flow";
 import { TabsContextType } from "../types/tabs";
 import { normalCaseToSnakeCase } from "../utils";
 import { alertContext } from "./alertContext";
+import { TemplatesContext } from "./templatesContext";
 
 const TabsContextInitialValue: TabsContextType = {
 	save:()=>{},
@@ -30,6 +31,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	const [flows, setFlows] = useState<Array<FlowType>>([]);
 	const [id, setId] = useState(0);
 	const [lockChat, setLockChat] = useState(false);
+	const {templates} = useContext(TemplatesContext)
 
 	const newNodeId = useRef(0);
 	function incrementNodeId() {
@@ -53,14 +55,16 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	useEffect(() => {
 		//get tabs locally saved
 		let cookie = window.localStorage.getItem("tabsData");
-		if (cookie) {
+		if (cookie && Object.keys(templates).length>0) {
+			console.log(templates)
+			console.log(Object.keys(templates).length)
 			let cookieObject = JSON.parse(cookie);
 			setTabIndex(cookieObject.tabIndex);
 			setFlows(cookieObject.flows);
 			setId(cookieObject.id);
 			newNodeId.current = cookieObject.nodeId;
 		}
-	}, []);
+	}, [templates]);
 	function hardReset(){
 		newNodeId.current=0;
 		setTabIndex(0);setFlows([]);setId(0);

src/frontend/src/contexts/templatesContext.tsx

@@ -1,5 +1,4 @@
 import { createContext, ReactNode, useState } from "react";
-import { Node } from "reactflow";
 import { TemplateContextType } from "../types/templatesContext";
 //context to share types adn functions from nodes to flow
 
@@ -11,7 +10,7 @@ const initialValue: TemplateContextType = {
 export const TemplatesContext =
 	createContext<TemplateContextType>(initialValue);
 
-export function TypesProvider({ children }: { children: ReactNode }) {
+export function TemplatesProvider({ children }: { children: ReactNode }) {
 	const [templates, setTemplates] = useState({});
 	return (
 		<TemplatesContext.Provider value={{ templates, setTemplates }}>

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -9,10 +9,12 @@ import {
 	APIKindType,
 	APIObjectType,
 } from "../../../../types/api";
+import { TemplatesContext } from "../../../../contexts/templatesContext";
 
 export default function ExtraSidebar() {
 	const [data, setData] = useState({});
 	const { setTypes } = useContext(typesContext);
+	const { setTemplates } = useContext(TemplatesContext);
 
 	useEffect(() => {
 		async function getTypes(): Promise<void> {
@@ -21,7 +23,14 @@ export default function ExtraSidebar() {
 
 			// Update the state of the component with the retrieved data.
 			setData(result.data);
-
+			setTemplates(
+				Object.keys(result.data).reduce((acc, curr) => {
+					Object.keys(result.data[curr]).forEach((c: keyof APIKindType)=>{
+						acc[c] = result.data[curr][c]
+					})
+					return acc;
+				},{})
+			);
 			// Set the types by reducing over the keys of the result data and updating the accumulator.
 			setTypes(
 				Object.keys(result.data).reduce((acc, curr) => {
@@ -84,7 +93,9 @@ export default function ExtraSidebar() {
 								</div>
 							</div>
 						))}
-						{Object.keys(data[d]).length===0 && <div className="text-gray-400 text-center">Coming soon</div>}
+						{Object.keys(data[d]).length === 0 && (
+							<div className="text-gray-400 text-center">Coming soon</div>
+						)}
 					</div>
 				</DisclosureComponent>
 			))}