Merge branch 'dev' into sb/cleanup

Author: sophia-bui

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>
   );
 }

app/src/helperFunctions/auth.ts

@@ -1,10 +1,14 @@
 const fetch = require('node-fetch');
 const isDev = process.env.NODE_ENV === 'development';
 const { DEV_PORT, API_BASE_URL } = require('../../../config');
+
 let serverURL = API_BASE_URL;
+
+//checks if we're in dev mode or not to reset the serverURL to localhost:8080
 if (isDev) {
   serverURL = `http://localhost:${DEV_PORT}`;
 }
+
 export const sessionIsCreated = (
   username: string,
   password: string,
@@ -37,6 +41,7 @@ export const sessionIsCreated = (
     .catch((err) => 'Error');
   return result;
 };
+
 export const newUserIsCreated = (
   username: string,
   email: string,

app/src/helperFunctions/cssRefresh.tsx

@@ -1,4 +1,5 @@
 // Removes old link to css and creates a new stylesheet link on demo render
+// this is not currently being used for the website version
 const cssRefresher = () => {
   const oldStylesheet = document.getElementById('Render Stylesheet')
   console.log(oldStylesheet);

app/src/helperFunctions/generateCode.ts

@@ -468,33 +468,8 @@ const generateUnformattedCode = (
   );`
     generatedCode += `\n}`;
     return generatedCode;
-    // return `${`import React, { useState, useEffect, useContext} from 'react';`}
-    // ${currComponent.name === 'App' ? contextImports : ''}
-    // ${
-    //   importReactRouter
-    //     ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';`
-    //     : ``
-    // }
-    // ${createContextImport()}
-    // ${importsMapped}
-    // ${`const ${currComponent.name} = (props) => {`}
-    // ${createUseContextHook()}
-    // ${`${writeStateProps(currComponent.useStateCodes)}`}
-    // //  ------------------------------------------- added code below  -------------------------------------------
-    // ${createEventHandler()}
-    // //  ------------------------------------------- added code above  -------------------------------------------
-
-    //   return(
-    //     <>
-    // ${createRender()}
-    //     </>
-    //   );
-    // ${`}\n`}
-    // export default ${currComponent.name}
-    // `;
   }
-  //
-  // next.js component code
+  
   else if (projectType === 'Next.js') {
     return `
     import React, { useState } from 'react';
@@ -549,8 +524,6 @@ const generateUnformattedCode = (
 };
 // formats code with prettier linter
 const formatCode = (code: string) => {
-  // in test environment, window.api is not defined,
-  // so we reference original prettier format function instead
   if (process.env.NODE_ENV === 'test') {
     const { format } = require('prettier');
     return format(code, {
@@ -560,8 +533,6 @@ const formatCode = (code: string) => {
       jsxBracketSameLine: true,
       parser: 'babel'
     });
-    // } else if (process.env.NODE_ENV === 'production') {
-    // return window.api.formatCode(code);
   } else {
     return code;
   }

app/src/helperFunctions/projectGetSaveDel.ts

@@ -1,12 +1,12 @@
-import { letterSpacing } from '@mui/system';
-
 const isDev = process.env.NODE_ENV === 'development';
 const { DEV_PORT, API_BASE_URL } = require('../../../config.js');
 let serverURL = API_BASE_URL;
 
+//check if we're in dev mode
 if (isDev) {
   serverURL = `http://localhost:${DEV_PORT}`;
 }
+
 export const getProjects = (): Promise<any> => {
   let userId = window.localStorage.getItem('ssid');
   const body = JSON.stringify({ userId });

app/src/helperFunctions/renderChildren.tsx

@@ -1,19 +1,19 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { ChildElement } from '../interfaces/Interfaces';
 import DirectChildComponent from '../components/main/DirectChildComponent';
 import DirectChildHTML from '../components/main/DirectChildHTML';
 import DirectChildHTMLNestable from '../components/main/DirectChildHTMLNestable';
 import SeparatorChild from '../components/main/SeparatorChild';
 import RouteLink from '../components/main/RouteLink';
-import StateContext from '../context/context';
 import { useSelector } from 'react-redux';
+import { RootState } from '../redux/store';
 
 // helper method to render all direct children of a component
 // direct children are clickable and draggable
 // direct children may also have their own indirect children (grandchildren, great-grandchildren, etc) which are not draggable and clickable
 // there are four types of direct children that can be rendered on the screen
 const renderChildren = (children: ChildElement[]) => {
-  const state = useSelector(store => store.appState)
+  const state = useSelector((store: RootState) => store.appState)
 
   return children.map((child: ChildElement, i: number) => {
     const { type, style, childId, children, attributes, name } = child;

app/src/helperFunctions/zipFiles.ts

@@ -1,17 +1,24 @@
 import { saveAs } from 'file-saver';
 const JSZip = require("jszip");
 
+//function to create a zip file for export in web app
 const zipFiles = (state) => {
+  //initializes zip
   var zip = new JSZip();
   let reacTypeApp = zip.folder('ReacTypeApp');
+  //creates component folder inside of zip folder
   let componentFolder = reacTypeApp.folder('componentfolder');
+  //writes a file with default index.html code
   reacTypeApp.file('index.html', '<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8" />     <link rel="stylesheet" href="styles.css">     <title>ReacType App</title>   </head>   <body>     <div id="root"></div>   </body> </html>');
+  //writes each component as its own file in the component folder
   for (let i in state.components){
     componentFolder.file(`${state.components[i].name}.jsx`, state.components[i].code);
   }
+  //writes our css file if we have a css file stored in local storage
   if(localStorage.getItem('css')){
     reacTypeApp.file('style.css', localStorage.getItem('css'));
   }
+  //zips the file and saves to local machine
   zip.generateAsync({type:"blob"})
   .then(function(content) {
     // see FileSaver.js

app/src/redux/HTMLTypes.ts

@@ -9,6 +9,8 @@ import {
   HTMLType
 } from '../interfaces/Interfaces';
 
+//properties for all HTML components
+
 const HTMLTypes: HTMLType[] = [
   {
     id: 11,