Merge branch 'dev' into RachCleanup2

Author: Rachel Kucharski

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

@@ -8,7 +8,7 @@ import ComponentTable from './components/ComponentTable';
 import { Button } from '@mui/material';
 import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
 import { addComponentToContext } from '../../../redux/reducers/slice/contextReducer';
-import { useSelector, useDispatch, useStore } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
 import { RootState } from '../../../redux/store';
 
@@ -19,31 +19,21 @@ const AssignContainer = () => {
   const [contextInput, setContextInput] = React.useState(null);
   const [componentInput, setComponentInput] = React.useState(null);
   const [componentTable, setComponentTable] = useState([]);
-  const { state, contextParam } = useSelector((store:RootState) => ({
+  const { state, contextParam } = useSelector((store: RootState) => ({
     state: store.appState,
     contextParam: store.contextSlice
   }));
 
-
-
+  //sets table data if it exists
   const renderTable = (targetContext) => {
-    if (targetContext === null || !targetContext.values) {
-      setTableState(defaultTableData);
-    } else {
-      setTableState(targetContext.values);
-    }
+    targetContext?.values && setTableState(targetContext.values);
   };
 
   //construct data for table displaying component table
   const renderComponentTable = (targetComponent) => {
     //target Component is main
-
     const listOfContexts = [];
-    if (
-      !Array.isArray(state) &&
-      targetComponent !== null &&
-      targetComponent.name
-    ) {
+    if (!Array.isArray(state) && targetComponent?.name) {
       contextParam.allContext.forEach((context) => {
         if (context.components.includes(targetComponent.name)) {
           listOfContexts.push(context.name);

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

@@ -2,14 +2,12 @@ import React, { Fragment } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
-
 import { useSelector } from 'react-redux';
 import { RootState } from '../../../../redux/store';
 
 const filter = createFilterOptions();
 
 const ComponentDropDown = ({
-  contextStore,
   renderComponentTable,
   componentInput,
   setComponentInput

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

@@ -26,10 +26,9 @@ const CreateContainer = () => {
 
   //update data store when user adds a new context
   const handleClickSelectContext = () => {
-    //prevent user from adding duplicate context
     let letters = /[a-zA-Z]/;
     let error;
-    console.log(state.allContext, contextInput, 'error test');
+    //checking for input error / setting error type
     if (!contextInput || contextInput.trim() === '') {
       error = 'empty';
     } else if (!contextInput.charAt(0).match(letters)) {

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

@@ -32,17 +32,20 @@ const AddContextForm = ({
   }));
   const color = isDarkMode ? 'white' : 'black';
 
-  const handleClick = () => {
+  //handler for submitting new context for creation
+  const handleSubmit = () => {
     handleClickSelectContext();
     setOpen(true);
   };
 
+  //form control for new context field
   const handleChange = (e) => {
     setErrorStatus(false);
     setOpen(false);
     setContextInput(e.target.value);
   };
 
+  //event handle for confirmation modal
   const handleClose = (
     event: React.SyntheticEvent | Event,
     reason?: string
@@ -61,6 +64,7 @@ const AddContextForm = ({
     return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
   });
 
+  //creating options for context dropdown
   const contexts = allContext.length ? (
     allContext.map((context) => {
       return (
@@ -109,7 +113,7 @@ const AddContextForm = ({
         </Snackbar>
         <Button
           variant="contained"
-          onClick={handleClick}
+          onClick={handleSubmit}
           disabled={btnDisabled}
         >
           Create

app/src/components/bottom/BottomPanel.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import BottomTabs from './BottomTabs';
 
 const BottomPanel = (props): JSX.Element => {
@@ -15,7 +15,7 @@ const BottomPanel = (props): JSX.Element => {
 
     document.addEventListener('mousemove', mouseMoveHandler);
     document.addEventListener('mouseup', mouseUpHandler);
-  }
+  };
 
   const mouseMoveHandler = function (e: MouseEvent): void {
     // How far the mouse has been moved
@@ -26,19 +26,21 @@ const BottomPanel = (props): JSX.Element => {
   };
 
   const mouseUpHandler = function () {
-      // Remove the handlers of `mousemove` and `mouseup`
-      document.removeEventListener('mousemove', mouseMoveHandler);
-      document.removeEventListener('mouseup', mouseUpHandler);
+    // Remove the handlers of `mousemove` and `mouseup`
+    document.removeEventListener('mousemove', mouseMoveHandler);
+    document.removeEventListener('mouseup', mouseUpHandler);
   };
 
   useEffect(() => {
     node.current.style.height = '50vh';
-  },[]);
+  }, []);
 
   return (
-    <div className="bottom-panel" id='resize' ref={node}>
-      <div id='resize-drag' onMouseDown={mouseDownHandler} tabIndex = {0} >......</div>
-      <BottomTabs isThemeLight={props.isThemeLight}/>
+    <div className="bottom-panel" id="resize" ref={node}>
+      <div id="resize-drag" onMouseDown={mouseDownHandler} tabIndex={0}>
+        ......
+      </div>
+      <BottomTabs isThemeLight={props.isThemeLight} />
     </div>
   );
 };

app/src/components/bottom/BottomTabs.tsx

@@ -41,11 +41,7 @@ const BottomTabs = (props): JSX.Element => {
     const projectType = event.target.value;
     dispatch(changeProjectType({ projectType, contextParam }));
   };
-  const { components, HTMLTypes } = state;
-
-  const changeTheme = (e) => {
-    setTheme(e.target.value);
-  };
+  const { components } = state;
 
   // Render's the highliting arrow feature that draws an arrow from the Canvas to the DemoRender
   arrow.renderArrow(state.canvasFocus?.childId);

app/src/components/bottom/UseStateModal.tsx

@@ -1,38 +1,45 @@
-import React, {useState, useRef} from 'react';
+import React, { useState, useRef } from 'react';
 import Modal from '@mui/material/Modal';
 import TableStateProps from '../StateManagement/CreateTab/components/TableStateProps';
 
-function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
+function UseStateModal({ updateAttributeWithState, attributeToChange }) {
   const [open, setOpen] = useState(false);
   const [stateKey, setStateKey] = useState('');
   const [statePropsId, setStatePropsId] = useState(-1);
-  const [componentProviderId, setComponentProviderId] = useState(1);  
+  const [componentProviderId, setComponentProviderId] = useState(1);
   const container = useRef(null);
   // table to choose state from
   const body = (
     <div className="useState-position">
       <div className="useState-header">
         <span>Choose State</span>
         <button
-          style={{ margin: '5px 5px' ,padding: '1px', float: 'right' }}
+          style={{ margin: '5px 5px', padding: '1px', float: 'right' }}
           onClick={() => {
             setStateKey('');
             setStatePropsId(-1);
-            setOpen(false)}}
+            setOpen(false);
+          }}
         >
           X
-        </button> 
+        </button>
       </div>
       <div className="useState-window">
         <div className="useState-stateDisplay">
           <TableStateProps
-            providerId = {componentProviderId}
-            canDeleteState = {false}
+            providerId={componentProviderId}
+            canDeleteState={false}
             selectHandler={(table) => {
-                updateAttributeWithState(attributeToChange, componentProviderId, statePropsId > 0 ? statePropsId : table.row.id, table.row, stateKey + table.row.key);
-                setStateKey('')
-                setStatePropsId(-1);
-                setOpen(false);
+              updateAttributeWithState(
+                attributeToChange,
+                componentProviderId,
+                statePropsId > 0 ? statePropsId : table.row.id,
+                table.row,
+                stateKey + table.row.key
+              );
+              setStateKey('');
+              setStatePropsId(-1);
+              setOpen(false);
             }}
             isThemeLight={true}
           />
@@ -43,8 +50,12 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
 
   return (
     <div ref={container}>
-      <button className="useState-btn" onClick={() => setOpen(true)}>USE STATE</button>
-      <Modal open={open} container={container.current}>{body}</Modal>
+      <button className="useState-btn" onClick={() => setOpen(true)}>
+        USE STATE
+      </button>
+      <Modal open={open} container={container.current}>
+        {body}
+      </Modal>
     </div>
   );
 }