cleaned up code for use state button in custom tab

Author: carlyjackson

app/src/components/bottom/TableStateProps.tsx

@@ -30,8 +30,8 @@ const TableStateProps = props => {
     },
     {
       field: 'value',
-      headerName: 'Value',
-      width: 90,
+      headerName: 'Initial Value',
+      width: 100,
       editable: true
     },
     {
@@ -88,24 +88,20 @@ const TableStateProps = props => {
       setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
     }
   }, [state.canvasFocus.componentId]);
-  // rows to show are either from current component or from a given provider
-  let rows = [];
+
+  // create rows to show the current component's state props
+    let rows = [];
     const currentId = state.canvasFocus.componentId;
     const currentComponent = state.components[currentId - 1];
     let currentProps = currentComponent.stateProps.slice();
-
-   
 
-    //add in passed in props 
-
+    //add in passed in props for the current component (if it is not a root component)
     if (currentComponent.name !== 'App' && currentComponent.name !== 'index') {
     let propsPassed = currentComponent.passedInProps?.slice();
-
     for (let i = 0; i < propsPassed.length; i++) {
       currentProps.push(propsPassed[i]);
     }
   }
-
     rows = currentProps;
 
   return (

app/src/components/bottom/UseStateModal.tsx

@@ -1,98 +1,41 @@
-import React, {useRef, useState, useContext, useEffect } from 'react';
+import React, {useState, useContext} from 'react';
 import Modal from '@material-ui/core/Modal';
 import StateContext from '../../context/context';
 import TableStateProps from './TableStateProps';
-import { off } from 'process';
+
 
 function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
   const [state, dispatch] = useContext(StateContext);
   const [open, setOpen] = useState(false);
-  const [displayObject, setDisplayObject] = useState(null)
   const [stateKey, setStateKey] = useState('');
   const [statePropsId, setStatePropsId] = useState(-1);
   const [componentProviderId, setComponentProviderId] = useState(1);  
 
-  const currentId = state.canvasFocus.componentId;
-  const currentComponent = state.components[currentId - 1];
-  const passedInProps = (currentComponent.name !== 'App' && currentComponent.name !== 'index')? currentComponent.passedInProps : '';
-  const currentProps = currentComponent.stateProps; 
-
-  const allStateToDisplay = {
-    ...currentProps,
-    ...passedInProps
-  };
-
-  console.log({allStateToDisplay});
-
-  // make tabs to choose which component to get state from
-  // const componentTabs = [];
-  // for (let i = 0; i < state.components.length; i ++) {
-  //   componentTabs.push(<button
-  //     onClick={() => {
-  //       setComponentProviderId(i+1);
-  //       setDisplayObject(null);
-  //       setStateKey('');
-  //     }}>
-  //       {state.components[i].name}
-  //     </button>)
-  // }
-
-  // const componentTabs = [];
-  // componentTabs.push(<button
-  //       onClick={() => {
-  //         setComponentProviderId(i+1);
-  //         setDisplayObject(null);
-  //         setStateKey('');
-  //       }}>
-  //         {state.components[i].name}
-  //       </button>)
-  //   }
-
-  //carly: add a button to exit out of the window?
-
   // table to choose state from
   const body = (
     <div className="useState-position">
       <div className="useState-header">
         <span>Choose State</span>
-        {/* <button
+        <button
           style={{ margin: '5px 5px' ,padding: '1px', float: 'right' }}
           onClick={() => {
             setStateKey('');
             setStatePropsId(-1);
-            setDisplayObject(null)
             setOpen(false)}}
         >
           X
-        </button>  */}
+        </button> 
       </div>
       <div className="useState-window">
-        {/* <div className="useState-dropdown">
-          {componentTabs}
-        </div> */}
         <div className="useState-stateDisplay">
           <TableStateProps
             providerId = {componentProviderId}
             canDeleteState = {false}
-            //displayObject = {allStateToDisplay["0"]}
             selectHandler={(table) => {
-              // if object or array => show sub table
-              // if (table.row.type === "object") {
-              //   if (statePropsId < 0) setStatePropsId(table.row.id);
-              //   setStateKey(stateKey + table.row.key + '.');
-              //   setDisplayObject(table.row.value);
-              // } else if (table.row.type === "array") {
-              //   if (statePropsId < 0) setStatePropsId(table.row.id);
-              //   setStateKey(stateKey + table.row.key)
-              //   setDisplayObject(table.row.value);
-              // } else {
-                // if not object or array => update state
-                setDisplayObject(null);
                 updateAttributeWithState(attributeToChange, componentProviderId, statePropsId > 0 ? statePropsId : table.row.id, table.row, stateKey + table.row.key);
                 setStateKey('')
                 setStatePropsId(-1);
                 setOpen(false);
-              // }
             }}
             deleteHandler={() => func()}
             isThemeLight={true}