Merge branch 'updateStyle' of https://github.com/oslabs-beta/ReacType into updateStyle

Author: carlyjackson

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

@@ -9,6 +9,7 @@ import StateContext from "../../../../context/context";
 import { makeStyles } from '@material-ui/core/styles';
 import { StatePropsPanelProps } from '../../../../interfaces/Interfaces';
 import AddIcon from '@mui/icons-material/Add';
+import { borderLeft } from '@mui/system';
 
 const Table3 = props => {
   // console.log('props from table state props', props)
@@ -25,7 +26,7 @@ const Table3 = props => {
     {
       field: 'id',
       headerName: 'ID',
-      width: 70,
+      width: 30,
       editable: false
     },
     {
@@ -49,14 +50,16 @@ const Table3 = props => {
     {
       field: 'delete',
       headerName: 'X',
-      width: 70,
+      width: 30,
       editable: false,
+      align: 'left',
       renderCell: function renderCell(params: any) {
         return (
           <Button
             style={{ width: `${3}px`, color: 'black'}}
             onClick={() => {
-                console.log('params inside button', params)
+                console.log('params inside delete button', params)
+                console.log('params.id inside delete button', params.id)
               deleteParentProps(params.row, params.id);
             }}
           >
@@ -138,8 +141,9 @@ const Table3 = props => {
           columns={gridColumns}
           pageSize={5}
           editRowsModel={editRowsModel}
-          onRowClick={deleteParentProps}
+          // onRowClick={deleteParentProps}
           className={props.isThemeLight ? classes.themeLight : classes.themeDark}
+          // checkboxSelection
         />
     </div>
   );

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

@@ -23,7 +23,7 @@ const TableParentProps = props => {
     {
       field: 'id',
       headerName: 'ID',
-      width: 70,
+      width: 30,
       editable: false
     },
     {
@@ -47,7 +47,7 @@ const TableParentProps = props => {
     {
       field: 'delete',
       headerName: '+',
-      width: 90,
+      width: 30,
       editable: false,
       renderCell: function renderCell(params: any) {
         return (

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

@@ -26,7 +26,7 @@ const TableStateProps = props => {
     {
       field: 'id',
       headerName: 'ID',
-      width: 70,
+      width: 30,
       editable: false
     },
     {
@@ -50,7 +50,7 @@ const TableStateProps = props => {
     {
       field: 'delete',
       headerName: 'X',
-      width: 90,
+      width: 30,
       editable: false,
       renderCell: function renderCell(params: any) {
         return (

app/src/components/main/DirectChildComponent.tsx

@@ -54,7 +54,7 @@ function DirectChildComponent({ childId, type, typeId, style, name }: ChildEleme
   const combinedStyle = combineStyles(
     combineStyles(
       combineStyles(globalDefaultStyle, referencedComponent.style),
-      style
+      // style
     ),
     interactiveStyle
   );

app/src/reducers/componentReducer.ts

@@ -796,12 +796,23 @@ const reducer = (state: State, action: Action) => {
         components,
         state.canvasFocus.componentId
       );
-      currComponent.passedInProps = action.payload.passedInProps;
-      console.log('in delete reducer', currComponent)
-      console.log('in delete reducer 2', action.payload.rowId)
-      const toDelete = currComponent.passedInProps[0]
-      console.log('in delete reducer', {toDelete})
-      delete currComponent.passedInProps[0];
+      console.log('currComponent.passedInProps before splice', currComponent.passedInProps)
+      // currComponent.passedInProps = action.payload.passedInProps;
+      // console.log('in delete reducer after assignment', currComponent.passedInProps)
+      console.log('in delete reducer action.payload.rowId', action.payload.rowId)
+      // const toDelete = currComponent.passedInProps[action.payload.rowId]
+      // console.log('in delete reducer toDelete', {toDelete})
+      let index;
+      for (let i = 0; i < currComponent.passedInProps.length; i++) {
+        if (currComponent.passedInProps[i].id === action.payload.rowId) {
+          index = i;
+          break;
+        }
+      }
+      currComponent.passedInProps.splice(index, 1);
+      // console.log('temp', temp)
+      console.log('currComponent.passedInProps after splice', currComponent.passedInProps)
+      // delete currComponent.passedInProps[0];
       currComponent.code = generateCode(
         components,
         state.canvasFocus.componentId,