Currently working on delete state, which is bugged

Author: WilliamCheng12345

app/src/components/bottom/UseStateModal.tsx

@@ -4,7 +4,7 @@ import StateContext from '../../context/context';
 import TableStateProps from '../right/TableStateProps';
 
 // TODO: typescript interface or type check
-function UseStateModal({ updateAttributeWithState, deleteAttributeWithState, attributeToChange, childId }) {
+function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
   const [state, dispatch] = useContext(StateContext);
   const [open, setOpen] = useState(false);
 
@@ -15,6 +15,7 @@ function UseStateModal({ updateAttributeWithState, deleteAttributeWithState, att
     components.push(<button onClick={() => setComponentProviderId(i+1)}>{state.components[i].name}</button>)
   }
 
+    
   // return the selected state's ID back so the value of it can be updated in the customizationpanel.  to the assign the value of selected state to attribute tied to useState button (currently just text)
   // attribute to change as parameter for 
   const body = (
@@ -36,11 +37,8 @@ function UseStateModal({ updateAttributeWithState, deleteAttributeWithState, att
           <TableStateProps
             providerId = {componentProviderId}
             selectHandler={(table) => {
-              console.log('componentProviderId = ',componentProviderId);
-              console.log('table.row = ',table.row);
               updateAttributeWithState(attributeToChange, componentProviderId, table.row.id);
             }}
-            deleteHandler={() => deleteAttributeWithState()}
             isThemeLight={true}
           />
         </div>

app/src/components/right/StatePropsPanel.tsx

@@ -37,8 +37,6 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
   const [inputValue, setInputValue] = useState("");
   const [inputType, setInputType] = useState("");
 
-  const [stateProps, setStateProps] = useState([]);
-
   // get currentComponent by using currently focused component's id
   const currentId = state.canvasFocus.componentId;
   const currentComponent = state.components[currentId - 1];
@@ -100,17 +98,14 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
   };
 
   // find & delete table row using its id
-  const handlerRowDelete = (id:any) => {
-    // iterate and filter out stateProps with matching row id 
-    const filtered = currentComponent.stateProps.filter(element => element.id !== id); 
-      
-    dispatch({
-      type: 'DELETE STATE', 
-      payload: {stateProps: filtered}
-    });
-    
-    setStateProps(filtered);
-  };
+  // const handlerRowDelete = (id:any) => {
+  //   // iterate and filter out stateProps with matching row id 
+  //   const filtered = currentComponent.stateProps.filter(element => element.id !== id);     
+  //   dispatch({
+  //     type: 'DELETE STATE', 
+  //     payload: {stateProps: filtered}
+  //   });
+  // };
 
   return (
     <div className={'state-panel'}>
@@ -189,7 +184,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
         <h4  className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor}>
           Current State Name: {state.components[state.canvasFocus.componentId - 1].name}
         </h4>
-        <TableStateProps selectHandler={handlerRowSelect} deleteHandler={handlerRowDelete} isThemeLight={isThemeLight} />
+        <TableStateProps selectHandler={handlerRowSelect} isThemeLight={isThemeLight} />
       </div>
     </div>
   );

app/src/components/right/TableStateProps.tsx

@@ -11,8 +11,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 import { StatePropsPanelProps } from '../../interfaces/Interfaces';
 
-const getColumns = (props) => {
-  const { deleteHandler } : StatePropsPanelProps = props;
+const getColumns = (props, state, dispatch) => {
   return [
     {
       field: 'id',
@@ -53,8 +52,31 @@ const getColumns = (props) => {
         return ( 
           <Button style={{width:`${3}px`}}
           onClick={() => {
-            deleteHandler(getIdRow());
-          }}>
+            const deleteAttributeWithState = (id) => {
+              console.log('id=',id);
+              console.log('state.components =', state.components)
+              let currentComponent; 
+              if(!props.providerId) {
+                const currentId = state.canvasFocus.componentId;
+                currentComponent = state.components[currentId - 1];
+                console.log('currentId', currentId);
+                console.log('currentComponent =', currentComponent);
+              }
+              else {
+                currentComponent = state.components[props.providerId - 1]; 
+              }
+              const filtered = currentComponent.stateProps.filter(element => element.id !== id);
+              console.log('flitered=', filtered);     
+              dispatch({
+                type: 'DELETE STATE', 
+                payload: {stateProps: filtered}
+              });
+            }
+        
+            deleteAttributeWithState(getIdRow()); 
+          }
+
+          }>
             <ClearIcon style={{width:`${15}px`}}/>
           </Button>
         );
@@ -66,13 +88,13 @@ const getColumns = (props) => {
 //, providerId=1
 const TableStateProps = (props) => {
   const classes = useStyles();
-  const [state] = useContext(StateContext);
+  const [state, dispatch] = useContext(StateContext);
   const [editRowsModel] = useState <GridEditRowsModel> ({});
   const [gridColumns, setGridColumns] = useState([]);
 
 
   useEffect(() => {
-    setGridColumns(getColumns(props));
+    setGridColumns(getColumns(props, state, dispatch));
   }, [props.isThemeLight])
   // get currentComponent by using currently focused component's id
   const currentId = state.canvasFocus.componentId;
@@ -91,8 +113,8 @@ const TableStateProps = (props) => {
 
   // when component gets mounted, sets the gridColumn
   useEffect(() => {
-    setGridColumns(getColumns(props));
-  }, []);
+    setGridColumns(getColumns(props, state, dispatch));
+  }, [state]);
 
   return (
     <div className={'state-prop-grid'}>

app/src/containers/CustomizationPanel.tsx

@@ -207,8 +207,6 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
 
   // function to pass into UseStateModal to use state to update attribute
   const updateAttributeWithState = (attributeName, componentProviderId, statePropsId) => {
-    console.log('attributeName = ',attributeName); //returns compText or compLink
-    console.log('statePropsId = ', statePropsId);
     // get the stateProps of the componentProvider    
     const currentComponent = state.components[componentProviderId - 1];
     const currentComponentProps = currentComponent.stateProps;
@@ -220,12 +218,13 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
 
     if (attributeName === 'compText') {
       const newContextObj = useContextObj;
-      console.log('newContextObj=',newContextObj)
+      console.log('Line 223 newContextObj=',newContextObj)
       if (!newContextObj[componentProviderId]) {
         newContextObj[componentProviderId] = {};
       }
       newContextObj[componentProviderId].compText = statePropsId;
-
+      console.log('Line 288, newContextObj[componentProviderId].compText = ', newContextObj[componentProviderId].compText);
+      console.log('statePropsId = ', statePropsId);
       setCompText(newInput);
       setUseContextObj(newContextObj);
     }
@@ -240,7 +239,7 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
       setUseContextObj(newContextObj);
     }
 
-    const deleteAttributeWithState = alert('Hello from Customization Panel');
+    
     // TODO: set something to signify that state was used
     // so it can be handled in generateCode
 
@@ -601,7 +600,8 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
                   <UseStateModal 
                   updateAttributeWithState={updateAttributeWithState} 
                   attributeToChange="compText" 
-                  childId={state.canvasFocus.childId}/>
+                  childId={state.canvasFocus.childId}
+                  />
                 </div>
               </div>
               <div className={classes.configRow}>