refactor(global): ♻️ add builder json in viewergroup manually as disc…

…ussed previously add builder json in viewergroup manually as discussed previously Ref #54
wrappid · Dec 31, 2024 · c4db04e · c4db04e
1 parent a8a07dc
commit c4db04e
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 49 deletions.
diff --git a/app/components/viewers/JsonViewer.tsx b/app/components/viewers/JsonViewer.tsx
@@ -3,10 +3,11 @@ import React from "react";
 import { CoreBox } from "@wrappid/core";
 
 export default function JsonViewer(props) {
+  const { content } = props;
 
   return (
-    <CoreBox>
-      JSON Viewer
+    <CoreBox component="pre">
+      {JSON.stringify(content, null, 2)}
     </CoreBox>
   );
 }
diff --git a/app/components/viewers/Viewer.tsx b/app/components/viewers/Viewer.tsx
@@ -1,19 +1,20 @@
 import React from "react";
 
-import { CoreBox } from "@wrappid/core";
+import { CoreBox, CoreComponent } from "@wrappid/core";
 
 import { ViewerData } from "../data/viewer/Viewer.data";
-import { GetViewerContent } from "../UtilityFunction";
 
 type ViewerType<T extends ViewerData> = {viewerData: T};
 
 export default function Viewer<T extends ViewerData>(props: ViewerType<T>) {
   const { viewerData } = props;
 
-  Object.setPrototypeOf(viewerData, ViewerData.prototype);
+  const componentName = viewerData.getViewerRenderedComponent();
+  const viewerContent = viewerData.getViewerContent();
 
   return (
     <CoreBox>
+      <CoreComponent componentName={componentName} content={viewerContent}/>
     </CoreBox>
   );
 }

diff --git a/app/components/viewers/ViewerGroup.tsx b/app/components/viewers/ViewerGroup.tsx
@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { CoreBox, CoreClasses, CoreTabs, CoreTab, CoreTypographyBody1 } from "@wrappid/core";
 
 import Viewer from "./Viewer";
+import { BUILDER_JSON, JSON_VIEWER } from "../../constants/AppBuilder.constant";
 import { ViewerData } from "../data/viewer/Viewer.data";
 
 function CoreTabPanel(props) {
@@ -34,73 +35,75 @@ type ViewerGroupType<T extends ViewerData> = {viewerData: T[]};
 export default function ViewerGroup<T extends ViewerData>(props: ViewerGroupType<T>) {
   const { viewerData } = props;
 
-  // const JSONTabData = GetDataFromReducer(getBuilderType())?.viewerGroupData;
-  // const viewerGroupData = useSelector((state:any) => state.builderReducer?.appBuilderData?.builderRelatedData?.formBuilderData?.viewerGroupData[0]?.modelAttributes);
-  // const { builderType, viewerContent, builderJson } = props;
+  const builderJson = { "hola": "buenos" };
 
-  // const viewerRenderer = ViewerRendererFactory.getRenderedBuilderComponent();
-
-  // const viewerGroupData=builderJson.viewerGroupDat[0].modelAttributes;
   const [value, setValue] = useState(0);
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
 
+  // const enhancedViewerData = [
+  //   ...viewerData,
+  // {
+  //   viewerContent          : builderJson,
+  //   viewerRenderedComponent: JSON_VIEWER,
+  //   viewerTitle            : "Builder JSON",
+  // } as unknown as ViewerData,
+  // ];
+
+  const enhancedViewerData = Array.isArray(viewerData) 
+    ? [
+      ...viewerData,
+        {
+          viewerContent          : builderJson,
+          viewerRenderedComponent: JSON_VIEWER,
+          viewerTitle            : BUILDER_JSON,
+        } as unknown as ViewerData,
+    ]
+    : [];
+
   return (
     <CoreBox>
       <CoreBox styleClasses={[CoreClasses.WIDTH.W_100, CoreClasses.TEXT.LINEHEIGHT_NORMAL]}>
         <CoreBox styleClasses={[CoreClasses.POSITION.POSITION_STICKY, CoreClasses.POSITION.TOP_0, CoreClasses.Z_INDEX.Z_3, CoreClasses.BG.BG_WHITE]}>
           <CoreTabs styleClasses={[CoreClasses.DISPLAY.FLEX]} value={value} onChange={handleChange} aria-label="basic tabs example">
-            {viewerData && viewerData.length > 0 ? (
-              viewerData.map((eachViewerData, index) => (
-                <CoreTab
-                  key={`tab-${index}`}
-                  label={eachViewerData.getViewerTitle()}
-                  {...a11yProps(index)}
-                  styleClasses={[CoreClasses.PADDING.P0, CoreClasses.DISPLAY.INLINE_BLOCK, CoreClasses.HEIGHT.MAX_H_25, CoreClasses.TEXT.LINEHEIGHT_NORMAL]}/>
-              ))
+            {enhancedViewerData && enhancedViewerData.length > 0 ? (
+              enhancedViewerData.map((eachViewerData, index) => {
+                Object.setPrototypeOf(eachViewerData, ViewerData.prototype); // Set prototype here
+
+                return (
+                  <CoreTab
+                    key={`tab-${index}`}
+                    label={eachViewerData.getViewerTitle()}
+                    {...a11yProps(index)}
+                    styleClasses={[CoreClasses.PADDING.P0, CoreClasses.DISPLAY.INLINE_BLOCK, CoreClasses.HEIGHT.MAX_H_25, CoreClasses.TEXT.LINEHEIGHT_NORMAL]}
+                  />
+                );
+              })
             ) : (
               <CoreTypographyBody1 styleClasses={[CoreClasses.PADDING.PY5]}>
-                      No viewer available to display.
+                No viewer available to display.
               </CoreTypographyBody1>
-
             )}
           </CoreTabs>
+
         </CoreBox>
 
-        {viewerData && viewerData.length > 0 ? (
-          viewerData.map((eachViewerData, index) => (
-            <CoreTabPanel key={`panel-${index}`} value={value} index={index}>
-              <Viewer viewerData={eachViewerData} />
-            </CoreTabPanel>
-          ))
+        {enhancedViewerData && enhancedViewerData.length > 0 ? (
+          enhancedViewerData.map((eachViewerData, index) => {
+            Object.setPrototypeOf(eachViewerData, ViewerData.prototype); // Properly set the prototype
+            return (
+              <CoreTabPanel key={`panel-${index}`} value={value} index={index}>
+                <Viewer viewerData={eachViewerData} />
+              </CoreTabPanel>
+            );
+          })
         ) : (
           <CoreTypographyBody1 styleClasses={[CoreClasses.PADDING.PY5]}>
-          No viewer content available.
+            No viewer content available.
           </CoreTypographyBody1>
-
         )}
-        {/* <CoreTabPanel value={value} index={0}> */}
-        {/* <ReduxStoreDataViewer reducerName="appBuilderReducer"/> */}
-        {/* {viewerRenderer}
-        </CoreTabPanel> */}
-
-        {/* <CoreTabPanel value={value} index={1}>
-          <CoreJSONEditor value={JSONTabData}/>
-        </CoreTabPanel> */}
-
-        {/* <CoreTabPanel value={value} index={2}>
-        Not developted yet
-        </CoreTabPanel> */}
-
-        {/* <CoreTabPanel value={value} index={3}>
-          <CoreBox component="pre">
-            
-            {JSON.stringify(builderJson, null, 2)}
-
-          </CoreBox>
-        </CoreTabPanel> */}
       </CoreBox>
     </CoreBox>
   );

diff --git a/app/constants/AppBuilder.constant.ts b/app/constants/AppBuilder.constant.ts
@@ -4,3 +4,4 @@ export const DEVICE_TOOLBOX = "DeviceToolBox";
 export const COMPONENT_TOOLBOX = "ComponentToolBox";
 export const MODEL_VIEWER = "ModelViewer";
 export const JSON_VIEWER = "JsonViewer";
+export const BUILDER_JSON = "Builder JSON";