Added Transformer support

ui/components/Layout.tsx

@@ -18,6 +18,9 @@ dynamic(import("ace-builds/src-noconflict/theme-monokai"), { ssr: false });
 const DynamicAceEditor = dynamic(import("react-ace"), { ssr: false });
 import SidebarWithHeader from "./Sidebar";
 import dynamic from "next/dynamic";
+import HTMLRenderer from "./template-renderers/html-renderer";
+import TransformData from "./transform-data";
+import { Transformers } from "../lib/utility";
 const DynamicReactJson = dynamic(import("react-json-view"), { ssr: false });
 
 interface Props {
@@ -32,28 +35,53 @@ export function Layout(props: Props) {
 }
 
 export function MainLayout() {
+  const [template, setTemplate] = React.useState('');
+  const [JSONContent, setJSONContent] = React.useState({updated_src: {name:'hima'}} as any);
+  const [transformedData, setTransformedData] = React.useState(null as any);
+  const [selectedTransformer, setSelectedTransformer] = React.useState('' as any);
+  React.useEffect(()=>{
+    if(Transformers.hasTransformer(selectedTransformer)){
+      setTransformedData(Transformers.transform(selectedTransformer, JSONContent.updated_src));
+    }else{
+      setTransformedData(null);
+    }
+  }, [JSONContent, selectedTransformer]);
+
   return (
     <SimpleGrid columns={2} spacing={3}>
       <Box bg="transparent" height="40vh">
         <DynamicAceEditor
           style={{ height: "100%", width: "100%" }}
           mode="html"
           theme="monokai"
-          onChange={() => {}}
+          value={template}
+          onChange={setTemplate}
           name="UNIQUE_ID_OF_DIV"
           editorProps={{ $blockScrolling: true }}
         />
       </Box>
-      <Box bg="tomato" height="40vh"></Box>
+      <Box height="40vh">
+        <HTMLRenderer template={template} content={transformedData || JSONContent?.updated_src || {}}/>
+      </Box>
       <Box bg="transparent" height="40vh">
         <DynamicReactJson
-          src={{}}
+          src={JSONContent?.updated_src || {}}
           theme={"ashes"}
           onAdd={(add) => {}}
-          onEdit={(edit) => {}} //TODO: update the data
+          onEdit={setJSONContent} //TODO: update the data
         />
       </Box>
-      <Box bg="tomato" height="40vh"></Box>
+      <Box height="40vh">
+        <TransformData selectedTransformer={selectedTransformer} onTransformerChange={setSelectedTransformer} content={JSONContent?.updated_src || {}}/>
+        <hr/>
+        {
+          transformedData &&  
+          <DynamicReactJson
+            src={transformedData}
+            theme={"ashes"}
+          />
+        }
+      </Box>
     </SimpleGrid>
   );
 }

ui/components/template-renderers/html-renderer.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { replaceItemsInTheTemplate } from '../../lib/utility';
+const HTMLRenderer = (props: {template: string, content: any})=>{
+
+    return <div dangerouslySetInnerHTML={{__html: replaceItemsInTheTemplate(props.template, props.content)}}/>;
+}
+export default HTMLRenderer;

ui/components/transform-data.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Select } from '@chakra-ui/react'
+import ReactJson from 'react-json-view'
+import dynamic from 'next/dynamic';
+// const DynamicReactJson = dynamic(import("react-json-view"), { ssr: false });
+interface Props {
+    content: any,
+    selectedTransformer: string,
+    onTransformerChange : (transformer: string) =>void
+}
+const TransformData = (props: Props)=>{    
+    return <div>
+        <h5>Transformer</h5>
+        <Select placeholder='Select Transformer' onChange={(e)=>props.onTransformerChange(e.target.value)}>
+            <option value=''>Remove Transformer</option>
+            <option value={'capitalize'}>Capitalize</option>
+        </Select>
+
+    </div>;
+}
+export default TransformData;

ui/lib/utility.ts

@@ -0,0 +1,40 @@
+export const replaceItemsInTheTemplate=(template: string, content: any)=>{
+    if(content && template){
+        for(let c in content){
+            template = template.replaceAll(`{{${c}}}`, content[c]);
+        }
+    }
+    return template;
+}
+const  capitalizeFirstLetter = (string: string) =>{
+    return string ? string.charAt(0).toUpperCase() + string.slice(1) : '';
+  }
+
+const capitalize  = (content: any)=>{
+    if(content){
+        for(let c in content){
+            content[c] = content[c]?.length ? capitalizeFirstLetter(content[c]) : content[c]   
+        }
+    }
+    return content;
+}
+interface TransformersInterface {
+    [key: string]: any
+}
+export class Transformers {
+    static TRANSFORMERS: TransformersInterface = {
+        capitalize
+    };
+    static hasTransformer (type: string){
+        // TODO : Axios call to fetch transformer based on Type as DID
+        return Transformers.TRANSFORMERS[type]
+    }
+    static transform(type: string, content: any){
+        const _transformer = Transformers.hasTransformer(type);
+        if(!content ||  !type || !_transformer){
+            return content;
+        }
+        let result = JSON.parse(JSON.stringify(content));
+        return _transformer(result);
+    }
+}