Fixed delete state button, but useContext needs to be fixed now

Author: WilliamCheng12345

app/src/components/bottom/UseStateModal.tsx

@@ -7,9 +7,9 @@ import TableStateProps from '../right/TableStateProps';
 function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
   const [state, dispatch] = useContext(StateContext);
   const [open, setOpen] = useState(false);
+  const [componentProviderId, setComponentProviderId] = useState(1) // id is initialized to App
 
   // make buttons to choose which component to get state from
-  const [componentProviderId, setComponentProviderId] = useState(1) // for now set to App
   const components = [];
   for (let i = 0; i < state.components.length; i ++) {
     components.push(<button onClick={() => setComponentProviderId(i+1)}>{state.components[i].name}</button>)

app/src/components/right/TableStateProps.tsx

@@ -8,9 +8,56 @@ import Button from '@material-ui/core/Button';
 import ClearIcon from '@material-ui/icons/Clear';
 import StateContext from '../../context/context';
 import { makeStyles } from '@material-ui/core/styles';
-
 import { StatePropsPanelProps } from '../../interfaces/Interfaces';
 
+
+const TableStateProps = (props) => {
+  const [state, dispatch] = useContext(StateContext);
+  const classes = useStyles();
+  const [editRowsModel] = useState <GridEditRowsModel> ({});
+  const [gridColumns, setGridColumns] = useState([]);
+  const [rows, setRows] = useState([]); 
+  
+
+  useEffect(() => {
+    setGridColumns(getColumns(props, state, dispatch));
+  }, [props.isThemeLight])
+  // get currentComponent by using currently focused component's id
+  
+  // rows to show are either from current component or from a given provider
+ 
+  const { selectHandler } : StatePropsPanelProps = props;
+  
+  // when component gets mounted, sets the gridColumn
+  useEffect(() => {
+    setGridColumns(getColumns(props, state, dispatch));
+
+    if (!props.providerId) {
+      const currentId = state.canvasFocus.componentId;
+      const currentComponent = state.components[currentId - 1];
+      setRows(currentComponent.stateProps.slice());
+    } else {
+      const providerComponent = state.components[props.providerId - 1];
+      setRows(providerComponent.stateProps.slice());
+    }
+  
+  }, [props.providerId, state]);
+  
+  return (
+    <div className={'state-prop-grid'}>
+      <DataGrid
+        rows={rows}
+        columns={gridColumns}
+        pageSize={5}
+        editRowsModel={editRowsModel}
+        onRowClick = {selectHandler}
+        className={props.isThemeLight ? classes.themeLight : classes.themeDark}
+      />
+    </div>
+  );
+};
+
+
 const getColumns = (props, state, dispatch) => {
   return [
     {
@@ -44,7 +91,6 @@ const getColumns = (props, state, dispatch) => {
       editable: false,
       renderCell: function renderCell(params:any) {
         const getIdRow = () => {
-          const { api } = params;
           // const fields = api.getAllColumns().map((c: any) => c.field).filter((c : any) => c !== '__check__' && !!c);
           return params.id;
           // return params.getValue(fields[0]);
@@ -53,24 +99,29 @@ const getColumns = (props, state, dispatch) => {
           <Button style={{width:`${3}px`}}
           onClick={() => {
             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);
+                const filtered = currentComponent.stateProps.filter(element => element.id !== id);
+                console.log('filtered:', filtered);     
+                dispatch({
+                  type: 'DELETE STATE', 
+                  payload: {stateProps: filtered}
+                });
               }
               else {
                 currentComponent = state.components[props.providerId - 1]; 
+                console.log("row-id: ", id); 
+                console.log("provider-id: ", props.providerId)
+                console.log("currentProviderComponent: ", currentComponent); 
+                const filtered = currentComponent.stateProps.filter(element => element.id !== id);
+                console.log('filtered:', filtered);     
+                dispatch({
+                  type: 'DELETE STATE', 
+                  payload: {stateProps: filtered, providerId: props.providerId}
+                });
               }
-              const filtered = currentComponent.stateProps.filter(element => element.id !== id);
-              console.log('flitered=', filtered);     
-              dispatch({
-                type: 'DELETE STATE', 
-                payload: {stateProps: filtered}
-              });
             }
 
             deleteAttributeWithState(getIdRow()); 
@@ -85,52 +136,6 @@ const getColumns = (props, state, dispatch) => {
   ];
 };
 
-//, providerId=1
-const TableStateProps = (props) => {
-  const classes = useStyles();
-  const [state, dispatch] = useContext(StateContext);
-  const [editRowsModel] = useState <GridEditRowsModel> ({});
-  const [gridColumns, setGridColumns] = useState([]);
-  
-
-  useEffect(() => {
-    setGridColumns(getColumns(props, state, dispatch));
-  }, [props.isThemeLight])
-  // get currentComponent by using currently focused component's id
-  const currentId = state.canvasFocus.componentId;
-  const currentComponent = state.components[currentId - 1];
-  
-  // rows to show are either from current component or from a given provider
-  let rows = [];
-  if (!props.providerId) {
-    rows = currentComponent.stateProps.slice();
-  } else {
-    const providerComponent = state.components[props.providerId - 1];
-    rows = providerComponent.stateProps.slice();
-  }
-
-  const { selectHandler } : StatePropsPanelProps = props;
-  
-  // when component gets mounted, sets the gridColumn
-  useEffect(() => {
-    setGridColumns(getColumns(props, state, dispatch));
-  }, [state]);
-  
-  return (
-    <div className={'state-prop-grid'}>
-      <DataGrid
-        rows={rows}
-        columns={gridColumns}
-        pageSize={5}
-        editRowsModel={editRowsModel}
-        onRowClick = {selectHandler}
-        className={props.isThemeLight ? classes.themeLight : classes.themeDark}
-      />
-    </div>
-  );
-};
-
-
 const useStyles = makeStyles({
   themeLight: {
     color: 'rgba(0,0,0,0.54)',

app/src/containers/CustomizationPanel.tsx

@@ -212,19 +212,13 @@ const CustomizationPanel = ({ isThemeLight }): JSX.Element => {
     const currentComponentProps = currentComponent.stateProps;
     const newInput = currentComponentProps[statePropsId - 1].value;
 
-    console.log('currentComponent = ',currentComponent);
-    console.log('currentComponentProps =', currentComponentProps);
-    console.log('newInput', newInput);
 
     if (attributeName === 'compText') {
       const newContextObj = useContextObj;
-      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);
     }

app/src/reducers/componentReducer.ts

@@ -791,9 +791,14 @@ const reducer = (state: State, action: Action) => {
 
     case 'DELETE STATE' : {
       const components = [...state.components];
-      let currComponent = findComponent(
+      let currComponent = !action.payload.providerId
+      ? findComponent(
         components,
         state.canvasFocus.componentId
+      )
+      : findComponent(
+        components, 
+        action.payload.providerId 
       );
 
       currComponent.stateProps = action.payload.stateProps;