Merge pull request #2 from oslabs-beta/benWork

fixed bug with prop drilling delete

Author: carlyjackson

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

@@ -57,7 +57,7 @@ const TableParentProps = props => {
           <Button
             style={{ width: `${3}px`, color: 'black'}}
             onClick={() => {
-              addParentProps(params.row, params.id - 1);
+              addPassedInProps(params.row, params.id - 1);
             }}
           >
             <AddIcon style={{ width: `${15}px` }} />
@@ -67,7 +67,7 @@ const TableParentProps = props => {
       }
     }
   ];
-  const addParentProps = (parentComponentProps, rowId) => {
+  const addPassedInProps = (parentComponentProps, rowId) => {
     // get the current focused component
     // remove the state that the button is clicked
     // send a dispatch to rerender the table

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

@@ -54,7 +54,7 @@ const TableStateProps = props => {
           <Button
             style={{ width: `${3}px`, color: 'black'}}
             onClick={() => {
-              deleteState(params.id, params.row.key);
+              deleteState(params.id, params.key);
             }}
           >
             <ClearIcon style={{ width: `${15}px` }} />
@@ -73,7 +73,7 @@ const TableStateProps = props => {
     );
     dispatch({
       type: 'DELETE STATE',
-      payload: { stateProps: filtered, rowId: selectedId}
+      payload: { stateProps: filtered, rowId: selectedId }
     });
   };
 

app/src/reducers/componentReducer.ts

@@ -818,7 +818,20 @@ const reducer = (state: State, action: Action) => {
       );
       currComponent.stateProps = action.payload.stateProps;
       currComponent.useStateCodes = updateUseStateCodes(currComponent);
+
       components.forEach((component) => {
+
+
+        //find all instances of state within child elements and delete state
+
+        
+        if (component.name !== 'App') {
+          component.passedInProps.forEach((prop, i) => {
+            if(prop.id === action.payload.rowId) {
+              component.passedInProps.splice(i,1);
+            }
+          });
+        }
           // curr component = where you are deleting from state from, also is the canvas focus
           // curr component id = providerId
           // we then iterate through the rest of the components