Merge pull request #8 from oslabs-beta/disableUseState

Disable use state

Author: BenCauffman

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

@@ -1,14 +1,10 @@
 import React, { useEffect, useState, useContext } from 'react';
 import { useStore } from 'react-redux';
 import { useDispatch } from 'react-redux';
-import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
-import DataTable from './components/DataTable';
 import * as actions from '../../../redux/actions/actions';
-import { Typography } from '@mui/material';
 import StateContext from '../../../context/context';
 import StatePropsPanel from './components/StatePropsPanel';
-import TableStateProps from './components/TableStateProps';
 
 //LegacyPD added this in here 
 //import StatePropsPanel from '../../right/StatePropsPanel';

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

@@ -204,7 +204,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
             />
           <TextField
             id="textfield-value"
-            label="value:"
+            label="initial value:"
             variant="outlined"
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}

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

@@ -37,8 +37,8 @@ const TableParentProps = props => {
     },
     {
       field: 'value',
-      headerName: 'Value',
-      width: 90,
+      headerName: 'Initial Value',
+      width: 100,
       editable: true
     },
     {

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

@@ -35,8 +35,8 @@ const TablePassedInProps = props => {
     },
     {
       field: 'value',
-      headerName: 'Value',
-      width: 90,
+      headerName: 'Initial Value',
+      width: 100,
       editable: true
     },
     {

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

@@ -34,8 +34,8 @@ const TableStateProps = props => {
     },
     {
       field: 'value',
-      headerName: 'Value',
-      width: 90,
+      headerName: 'Initial Value',
+      width: 100,
       editable: true
     },
     {

app/src/components/StateManagement/DisplayTab/DataTable.tsx

@@ -31,7 +31,19 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
 }));
 
 export default function DataTable(props) {
-  const { currComponentState, setCurrComponentState, parentProps, setParentProps, clickedComp } = props;
+  const { currComponentState, setCurrComponentState, parentProps, setParentProps, clickedComp, data } = props;
+  const [state, dispatch] = useContext(StateContext);
+
+  //determine if the current component is a root component 
+  let isRoot = false;
+
+  //iterate through the data array and see if clickedComp is in state.rootComponents
+  for (let i = 0; i < data.length; i++) {
+    if (data[i]['name'] === clickedComp) {
+      //check to see if clickedComp is in rootComponents
+      if (state.rootComponents.includes(data[i]['id'])) isRoot = true;
+    }
+  }
 
   return (
     <>
@@ -43,8 +55,8 @@ export default function DataTable(props) {
         >
 
           {/* this table will contain passed down stateProps data from parent component */}
-          {/* we are checking if the clicked component is App-- if it is App, it doesn't have any parents so don't need this table*/}
-        {(clickedComp !== 'App' && 
+          {/* we are checking if the clicked component is a root component-- if it is, it doesn't have any parents so don't need this table*/}
+        {(!isRoot && 
           <>
           <TableHead>
             <TableRow>

app/src/components/StateManagement/DisplayTab/DisplayContainer.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useContext} from 'react';
+import React, {useState, useContext, useEffect} from 'react';
 import Tree from './Tree';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
@@ -12,22 +12,42 @@ function DisplayContainer({data, props}) { // "data" is referring to components
   const [currComponentState, setCurrComponentState] = useState([]);
   const [parentProps, setParentProps] = useState([]);
   const [state, dispatch] = useContext(StateContext);
+ 
+  let root = ''; 
 
-  
-  // check projectType. If it's 'Classic React', title should read 'App'. Otherwise it's Next.js or Gatsby which uses 'index'
-  let root; 
-  if (state.projectType === "Classic React") {
+  // check the canvasFocus
+    // if canvasFocus is a root component, use that root component as "root"
+    if (state.rootComponents.includes(state.canvasFocus.componentId)) {
+      //find the name of the canvasFocus component in data 
+        //set root equal to that name 
+        // iterate through data (which is an array of objects)
+        for (let i = 0; i < data.length; i++) {
+            // find object with id that is equal to state.canvasFocus.componentId 
+            // then set root equal to the name of that component 
+          if (data[i]["id"] === state.canvasFocus.componentId) root = data[i]["name"];
+        }
+    } else if (state.projectType === "Classic React") {
+    // else default to the main root component (aka app or index depending on react vs next/gatsby)
     root = 'App';
-  } else {
+   } else {
     root = 'index';
-  } 
+   } 
+
   const [clickedComp, setClickedComp] = useState(root);
 
   return (
     <div style={{display: 'flex'}}>
-      {<Tree data = {data} currComponentState={currComponentState} setCurrComponentState ={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} setClickedComp={setClickedComp}  />}
+      {<Tree data = {data} currComponentState={currComponentState} setCurrComponentState ={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} setClickedComp={setClickedComp}/>}
       <Divider orientation="vertical" variant="middle" flexItem />
         <Grid item>
+        <Typography
+            style={{ color: 'black' }}
+            variant="subtitle2"
+            gutterBottom={true}
+            align="center"
+          >
+            Click on a component in the graph to see its state!
+          </Typography>
           <Typography
             style={{ color: 'black' }}
             variant="h6"
@@ -36,7 +56,7 @@ function DisplayContainer({data, props}) { // "data" is referring to components
           >
             Total State for {clickedComp}
           </Typography>
-           <DataTable currComponentState={currComponentState} setCurrComponentState ={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} props={props} clickedComp={clickedComp}  /> 
+           <DataTable currComponentState={currComponentState} setCurrComponentState ={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} props={props} clickedComp={clickedComp} data = {data} /> 
         </Grid>
     </div>
   );

app/src/components/StateManagement/DisplayTab/Tree.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useContext } from 'react';
+import React, { useRef, useEffect, useContext, useState } from 'react';
 import { select, hierarchy, tree, linkHorizontal} from 'd3';
 import cloneDeep from 'lodash/cloneDeep';
 import useResizeObserver from './useResizeObserver';
@@ -10,7 +10,7 @@ function usePrevious(value) {
   return ref.current;
 }
 
-function Tree({ data, currComponentState, setCurrComponentState, parentProps, setParentProps, setClickedComp }) { 
+function Tree({ data, currComponentState, setCurrComponentState, parentProps, setParentProps, setClickedComp}) { 
   const [state, dispatch] = useContext(StateContext);
   const svgRef = useRef();
   const wrapperRef = useRef();
@@ -41,7 +41,6 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
   // create a deep clone of data to avoid mutating the actual children array in removing separators
   const dataDeepClone = cloneDeep(data);
 
-  // LEGACYPD to look at when trying to figure out how to convert tab to work for NextJS
   if(state.projectType === 'Next.js') {
     dataDeepClone.forEach(element => {
       element.children = sanitize(element.children).filter(element => !Array.isArray(element));
@@ -57,7 +56,7 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
 
   // remove separators and update components to current versions
   dataDeepClone.forEach(component => removeHTMLElements(component.children));
-  
+
   // will be called initially and on every data change
   useEffect(() => {
     const svg = select(svgRef.current);
@@ -66,7 +65,31 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
     // (dimensions are null for the first render)
     const { width, height } = dimensions || wrapperRef.current.getBoundingClientRect();
     // transform hierarchical data
-    const root = hierarchy(dataDeepClone[0]); 
+
+    let root;
+    let rootName; 
+
+    if (state.rootComponents.includes(state.canvasFocus.componentId)) {
+      // find out if canvasFocus is a root component 
+      // if yes, set root to be that canvasFocus component 
+        // find that component inside dataDeepClone
+        for (let i = 0; i < dataDeepClone.length; i++) {
+          if (dataDeepClone[i]['id'] === state.canvasFocus.componentId) {
+            // reassign root to be dataDeepClone at that element  
+
+            root = hierarchy(dataDeepClone[i]);
+            rootName = dataDeepClone[i]["name"];
+            
+          }
+        }
+    } else {
+    // if no, set root to be dataDeepClone[0]
+    root = hierarchy(dataDeepClone[0]); 
+    rootName = dataDeepClone[0]["name"];
+    }
+
+    setClickedComp(rootName);
+
     const treeLayout = tree().size([height, width - 125]);
     // Returns a new link generator with horizontal display.
     // To visualize links in a tree diagram rooted on the left edge of the display
@@ -76,7 +99,7 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
 
     // insert our data into the tree layout
     treeLayout(root);
-    
+
     svg
       .selectAll('.node')
       .data(root.descendants())
@@ -99,7 +122,7 @@ function Tree({ data, currComponentState, setCurrComponentState, parentProps, se
         let passedInProps;
         let componentStateProps;
 
-        // iterate through data array to find stateProps for parent and clicked element
+        // iterate through data array to find stateProps and passedInProps
         for(let i = 0; i < data.length; i++) {
           if(data[i]["name"] === nameOfClicked) {
             componentStateProps = data[i]["stateProps"];

app/src/components/bottom/TableStateProps.tsx

@@ -0,0 +1,145 @@
+
+import React, { useState, useContext, useEffect } from 'react';
+import {
+  DataGrid,
+  GridEditRowsModel,
+} from '@mui/x-data-grid';
+import Button from '@material-ui/core/Button';
+import ClearIcon from '@material-ui/icons/Clear';
+import StateContext from '../../context/context';
+import { makeStyles } from '@material-ui/core/styles';
+import { StatePropsPanelProps } from '../../interfaces/Interfaces';
+
+const TableStateProps = props => {
+  const [state, dispatch] = useContext(StateContext);
+  const classes = useStyles();
+  const [editRowsModel] = useState<GridEditRowsModel>({});
+  const [gridColumns, setGridColumns] = useState([]);
+  const columnTabs = [
+    {
+      field: 'id',
+      headerName: 'ID',
+      width: 70,
+      editable: false
+    },
+    {
+      field: 'key',
+      headerName: 'Key',
+      width: 90,
+      editable: true
+    },
+    {
+      field: 'value',
+      headerName: 'Initial Value',
+      width: 100,
+      editable: true
+    },
+    {
+      field: 'type',
+      headerName: 'Type',
+      width: 90,
+      editable: false
+    },
+    {
+      field: 'delete',
+      headerName: 'X',
+      width: 70,
+      editable: false,
+      renderCell: function renderCell(params: any) {
+        return (
+          <Button
+            style={{ width: `${3}px` }}
+            onClick={() => {
+              deleteState(params.id);
+            }}
+          >
+            <ClearIcon style={{ width: `${15}px` }} />
+          </Button>
+        );
+      }
+    }
+  ];
+  const deleteState = selectedId => {
+    // get the current focused component
+    // remove the state that the button is clicked
+    // send a dispatch to rerender the table
+    const currentId = state.canvasFocus.componentId;
+    const currentComponent = state.components[currentId - 1];
+    const filtered = currentComponent.stateProps.filter(
+      element => element.id !== selectedId
+    );
+    dispatch({
+      type: 'DELETE STATE',
+      payload: { stateProps: filtered, rowId: selectedId }
+    });
+  };
+
+  useEffect(() => {
+    setGridColumns(columnTabs);
+  }, [props.isThemeLight]);
+
+  const { selectHandler }: StatePropsPanelProps = props;
+  // the delete button needs to be updated to remove
+  // the states from the current focused component
+  useEffect(() => {
+    if (props.canDeleteState) {
+      setGridColumns(columnTabs);
+    } else {
+      setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
+    }
+  }, [state.canvasFocus.componentId]);
+
+  // 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 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 (
+    <div className={'state-prop-grid'}>
+      <DataGrid
+        rows={rows}
+        columns={gridColumns}
+        pageSize={5}
+        editRowsModel={editRowsModel}
+        onRowClick={selectHandler}
+        className={props.isThemeLight ? classes.themeLight : classes.themeDark}
+      />
+    </div>
+  );
+};
+
+const useStyles = makeStyles({
+  themeLight: {
+    color: 'rgba(0,0,0,0.54)',
+    '& .MuiTablePagination-root': {
+      color: 'rbga(0,0,0,0.54)'
+    }
+  },
+  themeDark: {
+    color: 'white',
+    '& .MuiTablePagination-root': {
+      color: 'white'
+    },
+    '& .MuiIconButton-root': {
+      color: 'white'
+    },
+    '& .MuiSvgIcon-root': {
+      color: 'white'
+    },
+    '& .MuiDataGrid-window': {
+      backgroundColor: 'rgba(0,0,0,0.54)'
+    }
+  }
+});
+
+export default TableStateProps;