refactor(global): ♻️ fix reducer

fix reducer related changes, add onclick changes selectedProps and some small fix in ui Ref #54
wrappid · Jan 2, 2025 · 712ff1f · 712ff1f
1 parent 9cc5467
commit 712ff1f
Show file tree

Hide file tree

Showing 13 changed files with 282 additions and 186 deletions.
diff --git a/app/actions/reducer.action.ts b/app/actions/reducer.action.ts
@@ -1,29 +1,13 @@
 import { AppBuilderData } from "../components/data/app-builder/AppBuilder.data";
+import { AttributeData } from "../components/data/model/Attribute.data";
 import { Property } from "../components/data/toolbox/property/Property.interface";
 import { ToolBoxData } from "../components/data/toolbox/ToolBox.data";
 import {
-  ADD_ATTRIBUTE, BUILDER_HISTORY, ADD_ATTRIBUTE_FROM_MODEL_SCHEMA, SET_MODEL_SCHEMAS, SET_TOOLBOX_CONTENT, SET_TOOLBOX_DATA, SET_VIEWER_GROUP_DATA, UPDATE_BUTTON_NAME, UPDATE_ENTITY_DISPLAY_PROPS, 
-  ADD_APP_BUILDER_DATA_TO_REDUCER
+  ADD_ATTRIBUTE, ADD_ATTRIBUTE_FROM_MODEL_SCHEMA, SET_TOOLBOX_CONTENT, SET_VIEWER_GROUP_DATA, UPDATE_BUTTON_NAME, UPDATE_ATTRIBUTE_SELECTED_PROPS, 
+  ADD_APP_BUILDER_DATA_TO_REDUCER,
+  SET_TOOLBOX_DATA_TO_REDUCER
 } from "../types/builder.types";
 
-export const builderHistory = (data:any, CRUD:string)=>({
-  CRUD   : CRUD,
-  payload: data,
-  type   : BUILDER_HISTORY
-});
-export const setModelSchemas = (data: any) => ({
-  payload: data,
-  type   : SET_MODEL_SCHEMAS,
-});
-
-export const setToolboxData = (builderType: string, toolboxData: ToolBoxData[]) => ({
-  payload: {
-    builderType,
-    toolboxData,
-  },
-  type: SET_TOOLBOX_DATA,
-});
-
 export const setToolboxContent = (toolboxContent: Property[]) => ({
   payload: { toolboxContent },
   type   : SET_TOOLBOX_CONTENT,
@@ -42,27 +26,27 @@ export const setViewerGroupData = (builderType: string, viewerData: { [key: stri
   type: SET_VIEWER_GROUP_DATA,
 });
 
-export const addAttribute = (validPropsForAllAttribute: Property[]) => ({ 
-  payload: { validPropsForAllAttribute }, // Fixed spelling
-  type   : ADD_ATTRIBUTE 
-});
-
-// export const addAttributeFromModelSchema = (attributesOfModelSchema: any[], validPropsForAllAttribute: Property[]) => ({
-//   payload: { attributesOfModelSchema, validPropsForAllAttribute },
-//   type   : ADD_ATTRIBUTE_FROM_MODEL_SCHEMA,
-// });
-
 export const addAttributeFromModelSchema = (attributesOfModelSchema: any[]) => ({
   payload: { attributesOfModelSchema },
   type   : ADD_ATTRIBUTE_FROM_MODEL_SCHEMA,
 });
 
+export const addAttribute = (builderId: string, attributeData: AttributeData = {} as AttributeData) => ({ 
+  payload: { attributeData, builderId },
+  type   : ADD_ATTRIBUTE 
+});
+
 export const selectedAttribute = (id: string) => ({
   payload: { id },
-  type   : UPDATE_ENTITY_DISPLAY_PROPS,
+  type   : UPDATE_ATTRIBUTE_SELECTED_PROPS,
 });
 
 export const addAppBuilderDataToReducer = (data: AppBuilderData, builderData: any) => ({
   payload: { builderData, data },
   type   : ADD_APP_BUILDER_DATA_TO_REDUCER,
 }); 
+
+export const setToolboxDataToReducer = (toolboxData: ToolBoxData[]) => ({
+  payload: { toolboxData },
+  type   : SET_TOOLBOX_DATA_TO_REDUCER,
+});
diff --git a/app/components/AppBuilder.tsx b/app/components/AppBuilder.tsx
@@ -35,7 +35,7 @@ export default function AppBuilder<T extends AppBuilderData>() {
 
   useEffect(() => {
     dispatch(addAppBuilderDataToReducer(appBuilderData, data));
-  }, []);
+  }, [data]);
   const builderDataFromReducer = GetDataFromReducer(data?.id);
   const viewerData = builderDataFromReducer?.viewers;
   const toolboxData = builderDataFromReducer?.toolboxes;

diff --git a/app/components/NOT_USED/StatusChangeCommentHistory.js b/app/components/NOT_USED/StatusChangeCommentHistory.js
@@ -1,27 +1,12 @@
-import { useEffect } from "react";
 
 import {
   CoreLabel, CoreGrid, CoreStack, StatusText, UserChip, CoreTypographyCaption 
 } from "@wrappid/core";
-import { useDispatch } from "react-redux";
-
-import { addAttributeFromModelSchema, setModelSchemas } from "../../actions/reducer.action";
-import { extractAttributes } from "../../utils/builderUtils";
 
 export default function StatusChangeCommentHistory(props) {
   const { data } = props;
   const { comments } = data;
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch(setModelSchemas(data?.schema));
-    const modelSchemaData = extractAttributes([data?.schema]);
-
-    // eslint-disable-next-line etc/no-commented-out-code
-    // const validPropsForAllAttribute = Component.getValidProps();
 
-    dispatch(addAttributeFromModelSchema(modelSchemaData));
-  }, [data]);
   return (
     <>
       {/* {comments[0]?.comment && <CoreStack direction="column"> */}

diff --git a/app/components/data/app-builder/AppBuilder.data.ts b/app/components/data/app-builder/AppBuilder.data.ts
@@ -74,6 +74,11 @@ export abstract class AppBuilderData {
     return this.viewers;
   }
 
+  // Setter for viewers - this is the setViewers function
+  setViewers(viewers: ViewerData[]): void {
+    this.viewers = viewers; // Update the viewers with the new list
+  }
+
   private addToolBox(toolboxData: ToolBoxData): void {
     this.toolboxes.push(toolboxData);
   }

diff --git a/app/components/data/valid-props/Validprops.ts b/app/components/data/valid-props/Validprops.ts
@@ -74,8 +74,97 @@ export const DEFAULT_VALID_PROPS:Property[] = [
         validValues: ["any value"]
       }
     ]
-  }
+  },
+  {
+    "description": "Marks the column as the primary key.",
+    "name"       : "primaryKey",
+    "types"      : [
+      {
+        "default"    : "false",
+        "type"       : "boolean",
+        "validValues": ["true", "false"]
+      }
+    ]
+  },
+  {
+    "description": "Indicates that the column should auto-increment.",
+    "name"       : "autoIncrement",
+    "types"      : [
+      {
+        "default"    : "false",
+        "type"       : "boolean",
+        "validValues": ["true", "false"]
+      }
+    ]
+  },
+  {
+    "description": "Ensures the column has unique values.",
+    "name"       : "unique",
+    "types"      : [
+      {
+        "default"    : "false",
+        "type"       : "boolean",
+        "validValues": ["true", "false"]
+      }
+    ]
+  },
+  {
+    "description": "Defines validation rules for the column.",
+    "name"       : "validate",
+    "types"      : [
+      {
+        "default"    : null,
+        "type"       : "object",
+        "validValues": null
+      }
+    ]
+  },
+  {
+    "description": "Defines the foreign key relationship.",
+    "name"       : "references",
+    "types"      : [
+      {
+        "default"    : null,
+        "type"       : "object",
+        "validValues": null
+      }
+    ]
+  },
+  {
+    "description": "Defines behavior when the referenced record is deleted.",
+    "name"       : "onDelete",
+    "types"      : [
+      {
+        "default"    : "NO ACTION",
+        "type"       : "string",
+        "validValues": ["CASCADE"]
+      }
+    ]
+  },
+  {
+    "description": "Defines behavior when the referenced record is updated.",
+    "name"       : "onUpdate",
+    "types"      : [
+      {
+        "default"    : "NO ACTION",
+        "type"       : "string",
+        "validValues": ["CASCADE"]
+      }
+    ]
+  },
+  {
+    "description": "Adds a comment to the column.",
+    "name"       : "comment",
+    "types"      : [
+      {
+        "default"    : null,
+        "type"       : "string",
+        "validValues": null
+      }
+    ]
+  },
 ];
+
 export default class ValidProps {
   private validProps: Property[];
 

diff --git a/app/components/data/viewer/FormattedAttribute.ts b/app/components/data/viewer/FormattedAttribute.ts
@@ -0,0 +1,25 @@
+import { getWrappidUUID } from "@wrappid/core/utils/appUtils";
+
+import { AttributeData } from "../model/Attribute.data";
+import { Property } from "../toolbox/property/Property.interface";
+import ValidProps from "../valid-props/Validprops";
+
+export class FormattedAttribute {
+  attributeSelected: boolean;
+  id: string;
+  selectedProps: AttributeData;
+  validProps: Property[];
+
+  constructor(selectedProps: AttributeData) {
+    this.attributeSelected = false;
+    this.id = getWrappidUUID();
+    this.selectedProps = selectedProps;
+    this.validProps = this.getValidProps();
+  }
+
+  private getValidProps(): Property[] {
+    const validPropsInstance = new ValidProps();
+
+    return validPropsInstance.getValidProps();
+  }
+}
diff --git a/app/components/toolbox/ToolBoxGroup.tsx b/app/components/toolbox/ToolBoxGroup.tsx
@@ -26,8 +26,9 @@ export default function ToolBoxGroup<T extends ToolBoxData>(props: ToolBoxGroupT
         ]}
       >
         <CoreBox
-          styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.GAP.GAP_3]}
-        >
+          styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
+        > 
+          {/** This icon should be changed dynnamically based on collapse and expand */}
           <CoreTooltip title="Collapse All" arrow>
             <CoreIconButton>
               <CoreIcon 
@@ -36,15 +37,6 @@ export default function ToolBoxGroup<T extends ToolBoxData>(props: ToolBoxGroupT
               />
             </CoreIconButton>
           </CoreTooltip>
-
-          <CoreTooltip title="Expand All" arrow>
-            <CoreIconButton>
-              <CoreIcon 
-                icon="unfold_more" 
-              // onClick={() => dispatch(toolboxCollapseExpand(false))}
-              />
-            </CoreIconButton>
-          </CoreTooltip>
         </CoreBox>
 
         <CoreTooltip title="Select Selector Box" arrow>

diff --git a/app/components/viewers/FormViewer.tsx b/app/components/viewers/FormViewer.tsx
@@ -1,19 +1,19 @@
 /* eslint-disable etc/no-commented-out-code */
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 
-import { CoreBox, CoreTypographyBody1, CoreButton } from "@wrappid/core";
+import { CoreBox, CoreButton } from "@wrappid/core";
 import { useDispatch } from "react-redux";
 
 import { setToolboxContent, selectedAttribute } from "../../actions/reducer.action";
-import { GetDataFromReducer, getBuilderType } from "../UtilityFunction";
+import { getBuilderType } from "../UtilityFunction";
 
 export default function FormViewer() {
   const dispatch = useDispatch();
   const [attributeId, setAttributeId] = useState("");
 
   const builderType = getBuilderType();
   // const validPropsForAllComponent = Component.getValidProps();
-  const modelAttributes = GetDataFromReducer(builderType)?.viewerGroupData[0]?.modelAttributes || [];
+  // const modelAttributes = GetDataFromReducer(builderType)?.viewerGroupData[0]?.modelAttributes || [];
 
   // Function to set validProps in toolbox
   const setValidPropsToToolboxDataInReducer = (validProps) => {
@@ -29,39 +29,39 @@ export default function FormViewer() {
   };
 
   // React to changes in modelAttributes to check and dispatch toolbox data
-  useEffect(() => {
-    const checkAndDispatchToolboxData = () => {
-      const hasAttributeSelectedTrue = modelAttributes?.some(
-        (item: any) => item.attributeSelected === true
-      );
+  // useEffect(() => {
+  //   const checkAndDispatchToolboxData = () => {
+  //     const hasAttributeSelectedTrue = modelAttributes?.some(
+  //       (item: any) => item.attributeSelected === true
+  //     );
 
-      if (hasAttributeSelectedTrue) {
-        const attributeIdFromReducer = modelAttributes?.find(
-          (item: any) => item.attributeSelected === true
-        )?.id;
+  //     if (hasAttributeSelectedTrue) {
+  //       const attributeIdFromReducer = modelAttributes?.find(
+  //         (item: any) => item.attributeSelected === true
+  //       )?.id;
 
-        if (attributeId !== attributeIdFromReducer) {
-          const matchingItem = modelAttributes?.find(
-            (item: any) => item.id === attributeIdFromReducer
-          );
+  //       if (attributeId !== attributeIdFromReducer) {
+  //         const matchingItem = modelAttributes?.find(
+  //           (item: any) => item.id === attributeIdFromReducer
+  //         );
 
-          // Ensure matchingItem exists before attempting to access its validProps
-          if (matchingItem?.validProps) {
-            setValidPropsToToolboxDataInReducer(matchingItem.validProps);
-          }
-          setAttributeId(attributeIdFromReducer);
-        }
-      }
-    };
+  //         // Ensure matchingItem exists before attempting to access its validProps
+  //         if (matchingItem?.validProps) {
+  //           setValidPropsToToolboxDataInReducer(matchingItem.validProps);
+  //         }
+  //         setAttributeId(attributeIdFromReducer);
+  //       }
+  //     }
+  //   };
 
-    checkAndDispatchToolboxData();
-  }, [modelAttributes]); // Run whenever modelAttributes changes
+  //   checkAndDispatchToolboxData();
+  // }, [modelAttributes]); // Run whenever modelAttributes changes
 
   return (
     <CoreBox>
       <CoreButton onClick={handleAddAttribute}>Add attributes</CoreButton>
       {/* Render buttons only if modelAttributes is not empty */}
-      {modelAttributes.length > 0 ? (
+      {/* {modelAttributes.length > 0 ? (
         modelAttributes.map((button) => (
           <CoreButton
             variant="outlined"
@@ -73,7 +73,7 @@ export default function FormViewer() {
         ))
       ) : (
         <CoreTypographyBody1>No buttons available.</CoreTypographyBody1>
-      )}
+      )} */}
     </CoreBox>
   );
 }
diff --git a/app/components/viewers/JsonViewer.tsx b/app/components/viewers/JsonViewer.tsx
@@ -1,14 +1,15 @@
 import React from "react";
 
-import { CoreBox, CoreJSONEditor } from "@wrappid/core";
+import { CoreBox, CoreAlert, CoreJSONEditor } from "@wrappid/core";
 
 export default function JsonViewer(props) {
   const { content } = props;
 
   return (
     <>
+      <CoreAlert severity="error">Height of this JSON editor should be increased</CoreAlert>
       <CoreJSONEditor
-        label="Height of this JSON editor should be increased"
+        label=" "
         value={content}/>
       <CoreBox component="pre">
         {JSON.stringify(content, null, 2)}