Merge pull request #13 from oslabs-beta/cleanUp

Clean up

Author: carlyjackson

app/electron/main.js

@@ -387,7 +387,6 @@ ipcMain.on('github', event => {
   const githubURL = isDev
     ? `http://localhost:${DEV_PORT}/auth/github`
     : `https://reactype-caret.herokuapp.com/auth/github`;
-  console.log(githubURL);
   const options = {
     client_id: process.env.GITHUB_ID,
     client_secret: process.env.GITHUB_SECRET,

app/src/components/ContextAPIManager/AssignTab/components/ComponentDropDrown.tsx

@@ -22,7 +22,6 @@ const ComponentDropDown = ({
       });
     } else if (newValue && newValue.inputValue) {
       // Create a new contextInput from the user input
-      //console.log(newValue,newValue.inputValue)
       setComponentInput({
         name: newValue.inputValue,
         values: []

app/src/components/ContextAPIManager/AssignTab/components/ContextDropDown.tsx

@@ -22,7 +22,6 @@ const ContextDropDown = ({
       });
     } else if (newValue && newValue.inputValue) {
       // Create a new contextInput from the user input
-      //console.log(newValue,newValue.inputValue)
       setContextInput({
         name: newValue.inputValue,
         values: []

app/src/components/ContextAPIManager/CreateTab/components/AddContextForm.tsx

@@ -38,7 +38,6 @@ const AddContextForm = ({
       });
     } else if (newValue && newValue.inputValue) {
       // Create a new contextInput from the user input
-      //console.log(newValue,newValue.inputValue)
       setContextInput({
         name: newValue.inputValue,
         values: []

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

@@ -1,77 +1,17 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useStore } from 'react-redux';
-import { useDispatch } from 'react-redux';
 import Grid from '@mui/material/Grid';
-import * as actions from '../../../redux/actions/actions';
-import StateContext from '../../../context/context';
 import StatePropsPanel from './components/StatePropsPanel';
 
-//LegacyPD added this in here 
-//import StatePropsPanel from '../../right/StatePropsPanel';
-
 const CreateContainer = ({isThemeLight, data}) => {
-  const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
   const store = useStore();
   const [state, setState] = useState([]);
-  const [tableState, setTableState] = useState(defaultTableData);
-  const [contextInput, setContextInput] = useState(null);
-  const [stateContext, dispatchContext] = useContext(StateContext);
-
-  //pass down stateprops and parent props from state management
 
   //pulling data from redux store
   useEffect(() => {
     setState(store.getState().contextSlice);
   }, []);
 
-  const dispatch = useDispatch();
-
-  //update data store when user adds a new context
-  const handleClickSelectContext = () => {
-    //prevent user from adding duplicate context
-    for (let i = 0; i < state.allContext.length; i += 1) {
-      if (state.allContext[i].name === contextInput.name) {
-        return;
-      }
-    }
-    setContextInput('');
-    dispatch(actions.addContextActionCreator(contextInput));
-    setState(store.getState().contextSlice);
-  };
-
-  //update data store when user add new key-value pair to context
-  const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
-    dispatch(
-      actions.addContextValuesActionCreator({ name, inputKey, inputValue })
-    );
-    setState(store.getState().contextSlice);
-  };
-
-  //update data store when user deletes context
-  const handleDeleteContextClick = () => {
-    dispatch(actions.deleteContext(contextInput));
-    setContextInput('');
-    setState(store.getState().contextSlice);
-    setTableState(defaultTableData);
-    dispatchContext({
-      type: 'DELETE ELEMENT',
-      payload: 'FAKE_ID'
-    });
-  };
-
-  //re-render data table when there's new changes
-  const renderTable = targetContext => {
-    if (
-      targetContext === null ||
-      targetContext === undefined ||
-      !targetContext.values
-    ) {
-      // if (targetContext === null || targetContext === undefined) {
-      setTableState(defaultTableData);
-    } else {
-      setTableState(targetContext.values);
-    }
-  };
   return (
       <Grid container display="flex" justifyContent="stretch" flexDirection="column">
         <StatePropsPanel isThemeLight={isThemeLight} data={data}/>

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

@@ -1,27 +1,17 @@
-
-import React, { useState, useContext, useCallback, useEffect } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import {
-  createStyles,
   makeStyles,
   styled,
-  Theme,
-  createTheme,
-  ThemeProvider,
-  withStyles
+  Theme
 } from "@material-ui/core/styles";
 import Button from "@material-ui/core/Button";
 import {
-  Checkbox,
   FormControl,
-  FormControlLabel,
   FormHelperText,
-  FormLabel,
-  Grid,
   MenuItem,
-  Input,
   InputLabel,
   Select,
-  TextField,
+  TextField
 } from "@material-ui/core";
 import StateContext from "../../../../context/context";
 import TableStateProps from "./TableStateProps";
@@ -74,8 +64,8 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
   const resetError = () => {
     setErrorStatus(false);
   };
+
   // submit new stateProps entries to state context
-  let currKey;
   const submitNewState = (e) => {
     e.preventDefault();
 
@@ -95,14 +85,9 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
       return;
     }
 
-    // carly LegacyPD
     // check here to see if state has already been created with the submitted key 
-      // iterate through all the state keys in all of the components in the app 
-        // outer for loop: iterating through all of the components in the app 
     for (let i = 0; i < state.components.length; i++) {
-          // inner for loop iterating through the stateProps array for each component 
       for (let j = 0; j < state.components[i].stateProps.length; j++) {
-        // if find piece of state with the same key as inputKey, create an error
         if (inputKey === state.components[i].stateProps[j]["key"]) {
           setErrorStatus(true);
           setErrorMsg('Key name already in use.');
@@ -127,8 +112,6 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
       type: 'func',
     };
 
-
-
     dispatch({
       type: 'ADD STATE',
       payload: {newState: newState, setNewState: setNewState}
@@ -137,6 +120,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
     resetError();
     clearForm();
   };
+
   // find table row using its id and if it exists, populate form with its details
   const handlerRowSelect = (table) => {
     let exists = false;
@@ -170,10 +154,7 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
         let currChild = currComponent.children[j];
         if (currChild.typeId === childId) {
           const currComponentCopy = JSON.parse(JSON.stringify(currComponent));
-          // currComponentCopy.stateProps.map((el) => {
-          //   console.log(el)
-          //   el['id'] = el['id'] + 0.01; 
-          // })
+
           return {parentProps: currComponentCopy.stateProps, 
                   parentName: currComponentCopy.name,
                   parentComponent: currComponentCopy,

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

@@ -4,21 +4,18 @@ import {
   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';
 import AddIcon from '@mui/icons-material/Add';
 
 const TableParentProps = props => {
-  // console.log('props from table state props', props)
   const [state, dispatch] = useContext(StateContext);
   const classes = useStyles();
   const currentId = state.canvasFocus.componentId;
   const currentComponent = state.components[currentId - 1];
   const [editRowsModel] = useState<GridEditRowsModel>({});
   const [gridColumns, setGridColumns] = useState([]);
-  const [checked, setChecked] = useState(false);
   const parentProps = props.parentProps;
   const parentPassedInProps = props.parentPassedInProps;
   const parentComponent = props.parentComponent;
@@ -77,16 +74,11 @@ const TableParentProps = props => {
     });
   };
 
-
-
   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
-
+  // determine whether or not to include delete column in data grid 
   useEffect(() => {
     if (props.canDeleteState) {
       setGridColumns(columnTabs);
@@ -95,11 +87,11 @@ const TableParentProps = props => {
     }
 
   }, [state.canvasFocus.componentId]);
-  // rows to show are either from current component or from a given provider
-  // legacy pd convert parent props into a row array
-  //let rows = parentProps;
+  
+  
   let rows;
 
+  // check if current component is a root component-- if yes, it shouldn't have any parent props
   if (currentComponent.name === 'App' || currentComponent.name === 'index') {rows = []}
   else { 
     if (parentProps) {
@@ -110,29 +102,6 @@ const TableParentProps = props => {
   }
   }
 
-  // if (!props.providerId) {
-  //   const currentId = state.canvasFocus.componentId;
-  //   const currentComponent = state.components[currentId - 1];
-  //   rows = currentComponent.stateProps.slice();
-  // } else {
-  //   const providerComponent = state.components[props.providerId - 1];
-  //   // changed to get whole object
-  //   if (props.displayObject){
-  //     const displayObject = props.displayObject;
-  //     // format for DataGrid
-  //     let id=1;
-  //     for (const key in displayObject) {
-  //       // if key is a number make it a string with brackets aroung number
-  //       const newKey = isNaN(key) ? key : '[' + key + ']';
-  //       const type = Array.isArray(displayObject[key]) ? 'array' : typeof (displayObject[key]);
-  //       rows.push({ id: id++, key: newKey, value: displayObject[key], type: type});
-  //     }
-  //   } else {
-  //     rows = providerComponent.stateProps.slice();
-  //   }
-  // }
-
-
   return (
     <div className={'state-prop-grid'}> 
       <DataGrid

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

@@ -8,8 +8,6 @@ import ClearIcon from '@material-ui/icons/Clear';
 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 TablePassedInProps = props => {
   const [state, dispatch] = useContext(StateContext);
@@ -20,6 +18,7 @@ const TablePassedInProps = props => {
   const currentComponent = state.components[currentId - 1];
   const passedInProps = (currentComponent.name !== 'App' && currentComponent.name !== 'index')? currentComponent.passedInProps : '';
 
+  //formatting for data grid columns
   const columnTabs = [
     {
       field: 'id',
@@ -66,6 +65,7 @@ const TablePassedInProps = props => {
       }
     }
   ];
+
   const deletePassedInProps = (rowId) => {
     // get the current focused component
     // remove the state that the button is clicked
@@ -80,10 +80,6 @@ const TablePassedInProps = props => {
     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);
@@ -93,41 +89,17 @@ const TablePassedInProps = props => {
 
   }, [state.canvasFocus.componentId]);
 
+  // fill data grid rows with all of the passed in props from parent component (if there are any)
   let rows = passedInProps?.slice();
-  // rows to show are either from current component or from a given provider
-  // legacy pd convert parent props into a row array
-  // if (!props.providerId) {
-  //   const currentId = state.canvasFocus.componentId;
-  //   const currentComponent = state.components[currentId - 1];
-  //   rows = currentComponent.stateProps.slice();
-  // } else {
-  //   const providerComponent = state.components[props.providerId - 1];
-  //   // changed to get whole object
-  //   if (props.displayObject){
-  //     const displayObject = props.displayObject;
-  //     // format for DataGrid
-  //     let id=1;
-  //     for (const key in displayObject) {
-  //       // if key is a number make it a string with brackets aroung number
-  //       const newKey = isNaN(key) ? key : '[' + key + ']';
-  //       const type = Array.isArray(displayObject[key]) ? 'array' : typeof (displayObject[key]);
-  //       rows.push({ id: id++, key: newKey, value: displayObject[key], type: type});
-  //     }
-  //   } else {
-  //     rows = providerComponent.stateProps.slice();
-  //   }
-  // }
-
+  
   return (
     <div className={'state-prop-grid'}>
         <DataGrid
           rows={rows}
           columns={gridColumns}
           pageSize={5}
           editRowsModel={editRowsModel}
-          // onRowClick={deleteParentProps}
           className={props.isThemeLight ? classes.themeLight : classes.themeDark}
-          // checkboxSelection
         />
     </div>
   );

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

@@ -16,9 +16,8 @@ const TableStateProps = props => {
   const [gridColumns, setGridColumns] = useState([]);
   const currentId = state.canvasFocus.componentId;
   const currentComponent = state.components[currentId - 1];
-  const rows1 = props.rows1;
-  const setRows1 = props.setRows1;
 
+  // formatting for data grid columns 
   const columnTabs = [
     {
       field: 'id',
@@ -63,6 +62,7 @@ const TableStateProps = props => {
       }
     }
   ];
+
   const deleteState = (selectedId, stateName) => {
     // get the current focused component
     // send a dispatch to rerender the table
@@ -104,6 +104,7 @@ const TableStateProps = props => {
     }
 
   }, [state.canvasFocus.componentId]);
+
   // rows to show are either from current component or from a given provider
   let rows = [];
   currentComponent.stateProps?.forEach((prop) => rows.push(prop)); 
@@ -119,7 +120,6 @@ const TableStateProps = props => {
         onRowClick={selectHandler}
         className={props.isThemeLight ? classes.themeLight : classes.themeDark}
       />
-  
     </div>
   );
 };