pre-lunch work

Author: ahsan-rao

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -40,6 +40,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
   const currentId = state.canvasFocus.componentId;
   const currentComponent = state.components[currentId - 1];
   const [parentProps, setParentProps] = useState([]);
+  const [parentPassedInProps, setParentPassedInProps] = useState([]);
   const [parentName, setParentName] = useState('No Parents');
   const [parentComponent, setParentComponent] = useState({});
   const [rows1, setRows1] = useState(currentComponent.stateProps);
@@ -85,7 +86,8 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
     }
     const newState = {
       // check if array is not empty => true find last elem in array. get id and increment by 1 || else 1
-      id: statesArray.length > 0 ? statesArray[statesArray.length-1].id + 1 : 1,
+      // id: statesArray.length > 0 ? statesArray[statesArray.length-1].id + 1 : 1,
+      id: inputKey,
       key: inputKey,
       value: typeConversion(inputValue, inputType),
       type: inputType,
@@ -120,6 +122,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
     setParentProps(parentInfo.parentProps);
     setParentName(parentInfo.parentName);
     setParentComponent(parentInfo.parentComponent);
+    setParentPassedInProps(parentInfo.parentPassedInProps)
   }, [currentId]);
 
   const findParent = (childId) => {
@@ -139,7 +142,8 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
           // })
           return {parentProps: currComponentCopy.stateProps, 
                   parentName: currComponentCopy.name,
-                  parentComponent: currComponentCopy
+                  parentComponent: currComponentCopy,
+                  parentPassedInProps: currComponentCopy.passedInProps
                 }
         }
       }
@@ -241,7 +245,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
         <h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
           Available Props from Parent: {parentName ? parentName : 'No Parents'}
         </h4>
-        <TableParentProps parentComponent ={parentComponent} parentProps={parentProps} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
+        <TableParentProps parentPassedInProps = {parentPassedInProps} parentComponent ={parentComponent} parentProps={parentProps} canDeleteState = {true} selectHandler={handlerRowSelect} isThemeLight={isThemeLight} data={data}/>
         </div>
         <div style={{display: 'flex', flexDirection: 'column', width: `${40}px`, color: 'black', justifyContent: 'center'}}>
         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">

app/src/components/StateManagement/CreateTab/components/Table3.tsx

@@ -23,12 +23,12 @@ const Table3 = props => {
   const passedInProps = currentComponent.name !== 'App' ? currentComponent.passedInProps : '';
 
   const columnTabs = [
-    {
-      field: 'id',
-      headerName: 'ID',
-      width: 30,
-      editable: false
-    },
+    // {
+    //   field: 'id',
+    //   headerName: 'ID',
+    //   width: 30,
+    //   editable: false
+    // },
     {
       field: 'key',
       headerName: 'Key',

app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

@@ -14,18 +14,21 @@ const TableParentProps = props => {
   // console.log('props from table state props', props)
   const [state, dispatch] = useContext(StateContext);
   const classes = useStyles();
+  const currentId = state.canvasFocus.componentId;
+  const currentComponent = state.components[currentId - 1];
   const [editRowsModel] = useState<GridEditRowsModel>({});
   const [gridColumns, setGridColumns] = useState([]);
   const [checked, setChecked] = useState(false);
   const parentProps = props.parentProps;
+  const parentPassedInProps = props.parentPassedInProps;
   const parentComponent = props.parentComponent;
   const columnTabs = [
-    {
-      field: 'id',
-      headerName: 'ID',
-      width: 30,
-      editable: false
-    },
+    // {
+    //   field: 'id',
+    //   headerName: 'ID',
+    //   width: 30,
+    //   editable: false
+    // },
     {
       field: 'key',
       headerName: 'Key',
@@ -55,7 +58,7 @@ const TableParentProps = props => {
             style={{ width: `${3}px`, color: 'black'}}
             onClick={() => {
                 console.log('params inside button', params)
-              addParentProps(params.row, params.id);
+              addParentProps(params.row, params.id - 1);
             }}
           >
             <AddIcon style={{ width: `${15}px` }} />
@@ -105,7 +108,20 @@ const TableParentProps = props => {
   }, [state.canvasFocus.componentId]);
   // rows to show are either from current component or from a given provider
   // legacy pd convert parent props into a row array
-  let rows = parentProps;
+  //let rows = parentProps;
+  let rows;
+  
+  if (currentComponent.name === 'App') {rows = []}
+  else { 
+    if (parentProps) {
+      rows = parentProps;
+      if (parentPassedInProps) {
+        rows = [...rows, ...parentPassedInProps]
+      }
+  }
+  }
+
+  console.log({rows});
   // if (!props.providerId) {
   //   const currentId = state.canvasFocus.componentId;
   //   const currentComponent = state.components[currentId - 1];

app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx

@@ -19,16 +19,16 @@ const TableStateProps = props => {
   const currentComponent = state.components[currentId - 1];
   const rows1 = props.rows1;
   const setRows1 = props.setRows1;
-  console.log({currentComponent})
+  // console.log({currentComponent})
 
-  console.log({rows1})
+  // console.log({rows1})
   const columnTabs = [
-    {
-      field: 'id',
-      headerName: 'ID',
-      width: 30,
-      editable: false
-    },
+    // {
+    //   field: 'id',
+    //   headerName: 'ID',
+    //   width: 30,
+    //   editable: false
+    // },
     {
       field: 'key',
       headerName: 'Key',
@@ -57,7 +57,7 @@ const TableStateProps = props => {
           <Button
             style={{ width: `${3}px`, color: 'black'}}
             onClick={() => {
-              deleteState(params.id);
+              deleteState(params.id, params.row.key);
             }}
           >
             <ClearIcon style={{ width: `${15}px` }} />
@@ -66,7 +66,7 @@ const TableStateProps = props => {
       }
     }
   ];
-  const deleteState = selectedId => {
+  const deleteState = (selectedId, stateName) => {
     // get the current focused component
     // remove the state that the button is clicked
     // send a dispatch to rerender the table
@@ -75,9 +75,12 @@ const TableStateProps = props => {
     const filtered = currentComponent.stateProps.filter(
       element => element.id !== selectedId
     );
+    const filteredChildren = currentComponent.children.passedInProps.filter(
+      element => element.name !== stateName
+    );
     dispatch({
       type: 'DELETE STATE',
-      payload: { stateProps: filtered, rowId: selectedId }
+      payload: { stateProps: filtered, rowId: selectedId, passedInProps: filteredChildren }
     });
   };