Resolved missing type errors. Fixed bug that triggered re-rendering. Modularized re-usable code. Matched styling to main app container. Added documentation to StatePropsPanel and TableStateProps.

Co-authored-by: jonocr <[email protected]>
Co-authored-by: buddhajjigae <[email protected]>
Co-authored-by: williamdyoon <[email protected]>
Co-authored-by: MadinventorZero <[email protected]>

Author: 5 people

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:react/recommended", "airbnb-base"],
+  "extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "airbnb-base"],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

app/src/components/right/StatePropsPanel.tsx

@@ -26,7 +26,7 @@ import TableStateProps from "./TableStateProps";
 
 const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
   const classes = useStyles();
-  const [state, dispatch] = useContext(StateContext);
+  const [state] = useContext(StateContext);
 
   const [inputKey, setInputKey] = useState("");
   const [inputValue, setInputValue] = useState("");
@@ -37,7 +37,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
   // detect changes to component.stateProps[], renders and prints its contents
   useEffect(() => {
     console.log(new Date().toLocaleDateString(), 'stateProps:', stateProps);
-  }, [stateProps])
+  }, [stateProps]);
 
   // get currentComponent by using currently focused component's id
   const currentId = state.canvasFocus.componentId;
@@ -47,10 +47,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
   const debug = () => {
     console.log("currentComponent:", currentComponent);
     console.log("currentComponent.stateProps:", currentComponent.stateProps);
-    console.log(
-      "currentComponent.useStateCodes:",
-      currentComponent.useStateCodes
-    );
+    console.log("currentComponent.useStateCodes:", currentComponent.useStateCodes);
   };
 
   // convert value to correct type based on user input
@@ -66,6 +63,7 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
         return value;
     }
   };
+
   // clears the input key, value, and type on Form
   const clearForm = () => {
     setInputKey("");
@@ -118,17 +116,16 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
       setInputKey(table.row.key);
       setInputType(table.row.type);
       setInputValue(table.row.value);
-    } 
-    else clearForm();
-  }
-
+    } else clearForm();
+  };
+  
   // find & delete table row using its id
-  const handlerRowDelete = (id) => {
-    //iterate and filter out stateProps with matching row id 
-    currentComponent.stateProps = currentComponent.stateProps.filter(element => element.id != id);
+  const handlerRowDelete = (id:any) => {
+    // iterate and filter out stateProps with matching row id 
+    currentComponent.stateProps = currentComponent.stateProps.filter(element => element.id !== id);
     updateUseStateCodes();
     setStateProps(currentComponent.stateProps.slice());
-  }
+  };
 
   return (
     <div style={{'background-color':`#ececea`}}>

app/src/components/right/TableStateProps.tsx

@@ -1,20 +1,18 @@
 // CARET
 import React, { useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import {
   DataGrid,
-  GridColumns,
   GridEditRowsModel,
 } from '@material-ui/data-grid';
-import {
-  styled,
-} from "@material-ui/core/styles";
-import Button from "@material-ui/core/Button";
+import Button from '@material-ui/core/Button';
+import ClearIcon from '@material-ui/icons/Clear';
 import StateContext from '../../context/context';
 
-import ClearIcon from '@material-ui/icons/Clear';
-import { IconButton, SvgIcon  } from '@material-ui/core';
+import { StatePropsPanelProps } from '../../interfaces/Interfaces';
 
 const getColumns = (props) => {
+  const { deleteHandler } : StatePropsPanelProps = props;
   return [
     {
       field: 'id',
@@ -45,36 +43,37 @@ const getColumns = (props) => {
       headerName: 'X',
       width: 70,
       editable: false,
-      renderCell: (params) => {
+      renderCell: function renderCell(params:any) {
         const getIdRow = () => {
-          const api: GridApi = params.api;
-          const fields = api.getAllColumns().map((c) => c.field).filter((c) => c !== "__check__" && !!c);
-          return params.getValue(fields[0]);          
+          const { api } = params;
+          const fields = api.getAllColumns().map((c: any) => c.field).filter((c : any) => c !== '__check__' && !!c);
+          return params.getValue(fields[0]);
         };
         return ( 
           <Button style={{width:`${3}px`}}
             onClick={() => {
-              props.deleteHandler(getIdRow());
+              deleteHandler(getIdRow());
             }}>
             <ClearIcon style={{width:`${15}px`}}/>
           </Button>
         );
-      }
+      },
     },
   ];
 };
 
-
 const TableStateProps = (props) => {
-  const [state, dispatch] = useContext(StateContext);
-  const [editRowsModel, setEditRowsModel] = useState < GridEditRowsModel > ({});
+  const [state] = useContext(StateContext);
+  const [editRowsModel] = useState <GridEditRowsModel> ({});
   const [gridColumns, setGridColumns] = useState([]);
 
   // get currentComponent by using currently focused component's id
   const currentId = state.canvasFocus.componentId;
   const currentComponent = state.components[currentId - 1];
 
   const rows = currentComponent.stateProps.slice();
+
+  const { selectHandler } : StatePropsPanelProps = props;
 
   // when component gets mounted, sets the gridColumn
   useEffect(() => {
@@ -84,14 +83,14 @@ const TableStateProps = (props) => {
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
-        // disableMultipleSelection={false}
         rows={rows}
         columns={gridColumns}
         pageSize={5}
         editRowsModel={editRowsModel}
-        onRowClick={props.selectHandler}
+        onRowClick = {selectHandler}
       />
     </div>
   );
-}
+};
+
 export default TableStateProps;

app/src/interfaces/Interfaces.ts

@@ -98,4 +98,13 @@ export interface Annotations {
   name: string;
   annotations: string;
 }
+
+export interface StatePropsPanelProps {
+  selectHandler: (table: any) => void;
+  deleteHandler: (id: number | any) => void;
+}
+
+export interface TableStateProps {
+}
+
 // Caret end