feat: add statemanagement across various code types

.husky/pre-commit

@@ -1 +1,2 @@
+npm run format
 npm run lint:staged

package.json

@@ -11,7 +11,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
-    "split-pane-react": "^0.1.3"
+    "split-pane-react": "^0.1.3",
+    "usehooks-ts": "^3.1.0"
   },
   "scripts": {
     "dev": "vite",

src/Header.tsx

@@ -1,12 +1,11 @@
 import React, { useContext } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { ActionType, ActionsContext } from './action';
 import RudderStackLogo from './assets/images/rudderstack-logo.svg';
 import GithubLogo from './assets/images/github-mark.svg';
 import DocsIcon from './assets/images/docs.svg';
 import SaveIcon from './assets/images/save.svg';
 import LoadIcon from './assets/images/load.svg';
-import { useLocation } from 'react-router-dom';
 
 import './Header.css';
 

src/JsonTemplate.tsx

@@ -10,9 +10,6 @@ export const JsonTemplate = () => {
     document.title = 'Json Templates';
   });
 
-  const [action, setAction] = useState<ActionType>(ActionType.None);
-  const [codeName, setCodeName] = useState<string>('');
-
   async function executeJsonTemplate(code: string, data: any, bindings: any) {
     return JsonTemplateEngine.create(code).evaluate(data, bindings);
   }
@@ -33,16 +30,14 @@ export const JsonTemplate = () => {
   }
 
   return (
-    <ActionsContext.Provider value={{ action, setAction, codeName, setCodeName }}>
-      <div className="app">
-        <Header />
-        <Playground
-          execute={executeJsonTemplate}
-          parse={parseJsonTemplate}
-          convert={convertMappings}
-          type={CodeType.JsonTemplate}
-        />
-      </div>
-    </ActionsContext.Provider>
+    <div className="app">
+      <Header />
+      <Playground
+        execute={executeJsonTemplate}
+        parse={parseJsonTemplate}
+        convert={convertMappings}
+        type={CodeType.JsonTemplate}
+      />
+    </div>
   );
 };

src/LoadCode.tsx

@@ -1,15 +1,30 @@
 import React, { useContext, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Code, CodeType } from './types';
-import { ActionType, ActionsContext } from './action';
+import { ActionType, ActionsContext, savePlaygroundSimple } from './action';
 import CloseIcon from './assets/images/close.svg';
 import './LoadCode.css';
+import { CommonUtils } from './utils';
 
 const LoadCode = () => {
   const { setAction } = useContext(ActionsContext);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  function navigateToPage(type: CodeType) {
+    closeModel();
+    const navPath = CommonUtils.getNavigationPath(type);
+    if (navPath === location.pathname) {
+      navigate(0);
+    } else {
+      navigate(navPath);
+    }
+  }
+
   function closeModel() {
     setAction(ActionType.None);
   }
+
   useEffect(() => {
     const keyDownHandler = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -23,17 +38,7 @@ const LoadCode = () => {
       document.removeEventListener('keydown', keyDownHandler);
     };
   }, []);
-  const navigate = useNavigate();
-  function navigateWithCode(code: Code) {
-    if (code.type === CodeType.JsonTemplate) {
-      navigate('/json-template', { state: { code } });
-    } else if (code.type === CodeType.Mappings) {
-      navigate('/mappings', { state: { code } });
-    } else {
-      navigate('/workflow-engine', { state: { code } });
-    }
-    setAction(ActionType.None);
-  }
+
   function handleCodeLoad(event: React.ChangeEvent<HTMLInputElement>) {
     const file = event.target.files?.[0];
     if (!file) {
@@ -42,7 +47,8 @@ const LoadCode = () => {
     const reader = new FileReader();
     reader.onload = (e) => {
       const code = JSON.parse(e.target?.result as string) as Code;
-      navigateWithCode(code);
+      savePlaygroundSimple(code);
+      navigateToPage(code.type);
     };
     reader.readAsText(file);
   }

src/Mappings.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import Playground from './Playground';
 import Header from './Header';
-import { ActionType, ActionsContext } from './action';
 import { CodeType } from './types';
 import {
   Expression,
@@ -15,9 +14,6 @@ export const Mappings = () => {
     document.title = 'Json Template Mappings';
   });
 
-  const [action, setAction] = useState<ActionType>(ActionType.None);
-  const [codeName, setCodeName] = useState<string>('');
-
   function parseMappings(code: string): Expression {
     const mappings = JSON.parse(code) as FlatMappingPaths[];
     return JsonTemplateEngine.parse(mappings, { defaultPathType: PathType.JSON });
@@ -39,16 +35,14 @@ export const Mappings = () => {
   }
 
   return (
-    <ActionsContext.Provider value={{ action, setAction, codeName, setCodeName }}>
-      <div className="app">
-        <Header />
-        <Playground
-          execute={executeMappings}
-          parse={parseMappings}
-          convert={convertMappings}
-          type={CodeType.Mappings}
-        />
-      </div>
-    </ActionsContext.Provider>
+    <div className="app">
+      <Header />
+      <Playground
+        execute={executeMappings}
+        parse={parseMappings}
+        convert={convertMappings}
+        type={CodeType.Mappings}
+      />
+    </div>
   );
 };