Merge pull request #13 from williamdyoon/feat/table-state-props

typecasted values, useState code snippets, tabularized table state props

Author: xkevinpark

app/src/components/right/StatePropsPanel.tsx

@@ -1,11 +1,5 @@
 // CARET
-import React, {
-  Component,
-  useState,
-  useContext,
-  useEffect,
-  useCallback
-} from 'react';
+import React, { useState, useContext } from 'react';
 import {
   createStyles,
   makeStyles,
@@ -31,53 +25,79 @@ import StateContext from '../../context/context';
 import ComponentPanelItem from './ComponentPanelItem';
 import ComponentPanelRoutingItem from './ComponentPanelRoutingItem';
 
+import TableStateProps from './TableStateProps';
+
 const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
   const classes = useStyles();
   const [state, dispatch] = useContext(StateContext);
-  const [compName, setCompName] = useState('');
   const [newStateProp, setNewStateProp] = useState({});
-  const [isRoot, setIsRoot] = useState(false);
 
   const debug = () => {
-    console.log('state:', state);
-    console.log('state.canvasFocus:', state.canvasFocus);
     const currentId = state.canvasFocus.componentId;
+    const currentComponent = state.components[currentId - 1];
+    console.log('currentComponent:', currentComponent);
+    console.log('currentComponent.stateProps:', currentComponent.stateProps);
     console.log(
-      'state.canvasFocus.components[currentId-1]:',
-      state.components[currentId - 1]
+      'currentComponent.useStateCodes:',
+      currentComponent.useStateCodes
     );
-    console.log('key', document.getElementById('textfield-key').value);
-    console.log('value', document.getElementById('textfield-value').value);
-    console.log(document.getElementById('type-input').innerHTML);
-    console.log('newStateProp:', newStateProp);
+  };
+
+  const typeConversion = (value, type) => {
+    // based on user input for value, convert value to correct type
+    switch (type) {
+      case 'String':
+        return String(value);
+      case 'Number':
+        return Number(value);
+      case 'Boolean':
+        return Boolean(value);
+      default:
+        return value;
+    }
   };
 
   const submitNewState = () => {
     // currently focused component's id
     const currentId = state.canvasFocus.componentId;
-
     // current component
     const currentComponent = state.components[currentId - 1];
     // grab user inputs for key, value, type
     const key = document.getElementById('textfield-key').value;
     const value = document.getElementById('textfield-value').value;
     const type = document.getElementById('type-input').innerHTML;
 
-    // FOR CONSIDERING USER INPUT DATA VISUALIZATION:
-    // case 1: [{ name: 'John Doe'}, {age: 99}, {alive: true}]
-    // case 2: [{ key: 'name', value: 'John Doe', type: 'string'}, {key: 'age', value: 99, type: 'number'}, {key: 'alive', value: true, type: 'boolean'}]
-
-    // store key, value, type in newStateProp obj
+    // store key, value, type in newStateProp object
     newStateProp.key = key;
-    newStateProp.value = value;
-    newStateProp.type = type;
+    newStateProp.type = type.charAt(0).toLowerCase() + type.slice(1);
+    newStateProp.value = typeConversion(value, type);
 
+    // update newStateProp after storing key, value, type
     setNewStateProp(newStateProp);
     // store this newStateProp obj to our Component's stateProps array
     currentComponent.stateProps.push(newStateProp);
-    // set newStateProp to empty for any new state prop entries
+    // reset newStateProp to empty for future new state prop entries
     setNewStateProp({});
-    console.log('currentComponent.stateProps:', currentComponent.stateProps);
+    updateUseStateCodes();
+  };
+
+  const updateUseStateCodes = () => {
+    // currently focused component's id
+    const currentId = state.canvasFocus.componentId;
+    // current component
+    const currentComponent = state.components[currentId - 1];
+
+    const localStateCode = [];
+    // iterate thru current component's state props to generate code expression for each new state prop entry
+    currentComponent.stateProps.forEach(el => {
+      const useStateCode = `const [${el.key}, set${el.key
+        .charAt(0)
+        .toUpperCase() + el.key.slice(1)}] = useState<${
+        el.type
+      } | undefined>(${JSON.stringify(el.value)})`;
+      localStateCode.push(useStateCode);
+    });
+    currentComponent.useStateCodes = localStateCode;
   };
 
   return (
@@ -99,22 +119,22 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
               <MenuItem value="">
                 <em>Types</em>
               </MenuItem>
-              <MenuItem id="type-selector" value={`string`}>
+              <MenuItem id="type-selector" value={'string'}>
                 String
               </MenuItem>
-              <MenuItem id="type-selector" value={`number`}>
+              <MenuItem id="type-selector" value={'number'}>
                 Number
               </MenuItem>
-              <MenuItem id="type-selector" value={`boolean`}>
+              <MenuItem id="type-selector" value={'boolean'}>
                 Boolean
               </MenuItem>
-              <MenuItem id="type-selector" value={`array`}>
+              <MenuItem id="type-selector" value={'array'}>
                 Array
               </MenuItem>
-              <MenuItem id="type-selector" value={`undefined`}>
+              <MenuItem id="type-selector" value={'undefined'}>
                 Undefined
               </MenuItem>
-              <MenuItem id="type-selector" value={`any`}>
+              <MenuItem id="type-selector" value={'any'}>
                 Any
               </MenuItem>
             </Select>
@@ -141,13 +161,17 @@ const StatePropsPanel = ({ isThemeLight }): JSX.Element => {
         <label>
           Name: {state.components[state.canvasFocus.componentId - 1].name}
         </label>
+        {/* CARET - HANGING TABLE STATE PROPS */}
+        <div style={{ border: `${3}px solid green` }}>
+          <TableStateProps />
+        </div>
       </div>
     </div>
   );
 };
 
-const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
     inputField: {
       marginTop: '10px',
       borderRadius: '5px',
@@ -254,8 +278,8 @@ const useStyles = makeStyles((theme: Theme) => {
     selectEmpty: {
       marginTop: theme.spacing(2)
     }
-  });
-});
+  })
+);
 
 const MyButton = styled(Button)({
   background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',

app/src/components/right/TableStateProps.tsx

@@ -0,0 +1,72 @@
+// CARET
+import React, { useState, useContext } from 'react';
+import {
+  DataGrid,
+  GridColumns,
+  GridEditRowsModel,
+} from '@material-ui/data-grid';
+
+import StateContext from '../../context/context';
+
+const columns: GridColumns = [
+  {
+    field: 'id',
+    headerName: 'ID',
+    width: 70,
+    editable: false,
+  },
+  {
+    field: 'key',
+    headerName: 'Key',
+    width: 100,
+    editable: true,
+  },
+  {
+    field: 'value',
+    headerName: 'Value',
+    width: 100,
+    editable: true,
+  },
+  {
+    field: 'type',
+    headerName: 'Type',
+    width: 100,
+    editable: false,
+  },
+];
+
+// This function iterates thru current component's state props array to build rows to display in grid below
+const buildRows = () => {
+  const [state] = useContext(StateContext);
+  const currentId = state.canvasFocus.componentId;
+  const currentComponent = state.components[currentId - 1];
+  const rows = [];
+
+  for (let i = 0; i < currentComponent.stateProps.length; i += 1) {
+    const newObj = {};
+    newObj.id = i + 1; // id starts from 1
+    newObj.key = currentComponent.stateProps[i].key;
+    newObj.value = currentComponent.stateProps[i].value;
+    newObj.type = currentComponent.stateProps[i].type;
+
+    rows.push(newObj);
+  }
+  return rows;
+};
+
+export default function DataTable() {
+  const [editRowsModel, setEditRowsModel] = useState < GridEditRowsModel > ({});
+
+  const rows = buildRows();
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        pageSize={5}
+        editRowsModel={editRowsModel}
+      />
+    </div>
+  );
+}

app/src/context/initialState.ts

@@ -16,7 +16,8 @@ const initialState: State = {
       past: [],
       future: [],
       // CARET
-      stateProps: []
+      stateProps: [],
+      useStateCodes: [], // array of strings for each useState codes
       // END CARET
     }
   ],

app/src/interfaces/Interfaces.ts

@@ -36,6 +36,7 @@ export interface Component {
   past: any[];
   future: any[];
   stateProps: StateProp[]; // state: [ { key: value, type }, {key: value, type}, {key: value, type} ]
+  useStateCodes: string[];
 }
 
 export interface StateProp {

app/src/reducers/componentReducer.ts

@@ -220,7 +220,8 @@ const reducer = (state: State, action: Action) => {
         isPage: action.payload.root,
         past: [],
         future: [],
-        stateProps: []
+        stateProps: [],
+        useStateCodes: [],
       };
       components.push(newComponent);
 

package.json

@@ -104,6 +104,7 @@
     "@babel/cli": "^7.10.4",
     "@babel/register": "^7.10.4",
     "@material-ui/core": "^4.11.0",
+    "@material-ui/data-grid": "^4.0.0-alpha.24",
     "@material-ui/icons": "^4.0.1",
     "@material-ui/styles": "^4.9.6",
     "@material-ui/system": "^4.11.2",