25 files optimized for TS

Co-authored-by: Matteo <[email protected]>
Co-authored-by: Sophia Bui <[email protected]>

Author: 3 people

app/src/components/ContextAPIManager/ContextManager.tsx

@@ -1,5 +1,3 @@
-
-
 import React, { useContext } from 'react';
 import { makeStyles } from '@mui/styles';
 import Box from '@mui/material/Box';
@@ -12,6 +10,7 @@ import CreateContainer from './CreateTab/CreateContainer';
 import AssignContainer from './AssignTab/AssignContainer';
 import DisplayContainer from './DisplayTab/DisplayContainer';
 import { useSelector } from 'react-redux'
+import { RootState } from '../../redux/store';
 
 
 const useStyles = makeStyles({
@@ -22,7 +21,7 @@ const useStyles = makeStyles({
 });
 
 const ContextManager = (props): JSX.Element => {
-  const { isDarkMode, style } = useSelector((store) => ({
+  const { isDarkMode, style } = useSelector((store:RootState) => ({
     isDarkMode: store.darkMode.isDarkMode,
     style: store.styleSlice
   }));
@@ -40,7 +39,7 @@ const ContextManager = (props): JSX.Element => {
     <React.Fragment>
       <div className={classes.contextContainer} style={style.style}>
         <Box sx={{ width: '100%', typography: 'body1' }}>
-          <TabContext value={value} sx={{color:color}}>
+          <TabContext value={value}>
             <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
               <TabList onChange={handleChange} centered={true} sx={{color:color}}>
                 <Tab   style={ { color: color }}label="Create/Edit" value="1" />

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

@@ -7,16 +7,16 @@ import AddDataForm from './components/AddDataForm';
 import AddContextForm from './components/AddContextForm';
 // import * as actions from '../../../redux/actions/actions';
 import { Typography } from '@mui/material';
-import StateContext from '../../../context/context';
 import { addContext, deleteContext, addContextValues } from '../../../redux/reducers/slice/contextReducer';
 import { useSelector, useDispatch } from 'react-redux';
 import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../../redux/store';
 
 const CreateContainer = () => {
   const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
-  const state = useSelector(store => store.contextSlice);
+  const state = useSelector((store:RootState) => store.contextSlice);
 
-  const store = useStore();
+  // const store = useStore();
   // const [state, setState] = useState([]);
   const [tableState, setTableState] = React.useState(defaultTableData);
   const [contextInput, setContextInput] = React.useState(null);

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

@@ -5,6 +5,7 @@ import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { Typography } from '@mui/material';
 import { useSelector } from 'react-redux';
+import { RootState } from '../../../../redux/store';
 
 const filter = createFilterOptions();
 
@@ -19,7 +20,7 @@ const AddContextForm = ({
   const { allContext } = contextStore;
   const [btnDisabled, setBtnDisabled] = useState(false);
   // const [state, dispatch] = useContext(StateContext);
-  const { state, isDarkMode } = useSelector(store => ({
+  const { state, isDarkMode } = useSelector((store:RootState) => ({
     isDarkMode: store.darkMode.isDarkMode,
     state: store.appState
   }))

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

@@ -4,12 +4,13 @@ import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
 import { Typography } from '@mui/material';
 import {useSelector} from 'react-redux'
+import { RootState } from '../../../../redux/store';
 
 const AddDataForm = ({ handleClickInputData, contextInput }) => {
   //const [contextInput, setContextInput] = React.useState(null);
   const defaultInputData = {inputKey: '', inputValue: ''};
   const [dataContext, setDataContext] = React.useState(defaultInputData);
-const {isDarkMode} = useSelector(store=> store.darkMode.isDarkMode)
+const { isDarkMode } = useSelector((store:RootState)=> store.darkMode)
   const saveData = () => {
     setDataContext(defaultInputData);
     handleClickInputData(contextInput, dataContext)

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

@@ -7,7 +7,6 @@ import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 import TableCell, { tableCellClasses } from '@mui/material/TableCell';
-import TableFooter from '@mui/material/TableFooter';
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {

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

@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import { useStore } from 'react-redux';
+import React, { useEffect, useState} from 'react';
+import { useStore, useSelector } from 'react-redux';
 import { Chart } from 'react-google-charts';
 import Grid from '@mui/material/Grid';
+import { RootState } from '../../../redux/store';
 
 const DisplayContainer = () => {
-  const store = useStore();
-  const { allContext } = store.getState().contextSlice;
+  const allContext = useSelector((store:RootState) => store.contextSlice);
+  // const { allContext } = store.getState().contextSlice;
   const [contextData, setContextData] = useState([]);
 
   //build data for Google charts, tree rendering

app/src/components/form/Selector.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';

app/src/components/left/DragDropPanel.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Grid from '@mui/material/Grid';
 import HTMLItem from './HTMLItem';
-
+import { RootState } from '../../redux/store';
 import { useSelector, useDispatch } from 'react-redux';
 import { deleteElement } from '../../redux/reducers/slice/appStateSlice';
 
@@ -19,9 +19,9 @@ Hook state:
 */
 // Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
 const DragDropPanel = (props): JSX.Element => {
-  const isDarkMode = useSelector(store => store.darkMode.isDarkMode);
+  const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
 const dispatch = useDispatch();
-const { state, contextParam } = useSelector((store) => ({
+const { state, contextParam } = useSelector((store:RootState) => ({
   state: store.appState,
   contextParam: store.contextSlice,
 }));

app/src/components/left/HTMLItem.tsx

@@ -8,6 +8,7 @@ import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import createModal from '../right/createModal';
 import { useSelector } from 'react-redux';
+import { RootState } from '../../redux/store';
 
 const useStyles = makeStyles({
   HTMLPanelItem: {
@@ -45,7 +46,7 @@ const HTMLItem : React.FC<{
 
   const classes = useStyles();
   const [modal, setModal] = useState(null);
-  const isDarkMode = useSelector(store => store.darkMode.isDarkMode);
+  const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
   const [{ isDragging }, drag] = useDrag({
     item: {
       type: ItemTypes.INSTANCE,

app/src/components/left/HTMLPanel.tsx

@@ -8,6 +8,7 @@ import {
   // TextField,
 } from '@mui/material';
 import TextField from '@mui/material/TextField';
+import { RootState } from '../../redux/store';
 
 /*
 DESCRIPTION: This is the bottom half of the left panel, starting from the 'HTML
@@ -28,8 +29,8 @@ const HTMLPanel = (props): JSX.Element => {
   const [name, setName] = useState('');
   const [errorMsg, setErrorMsg] = useState('');
   const [errorStatus, setErrorStatus] = useState(false);
-  const isDarkMode = useSelector((store) => store.darkMode.isDarkMode);
-  const state = useSelector((store) => store.appState);
+  const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
+  const state = useSelector((store:RootState) => store.appState);
   const dispatch = useDispatch();
   let startingID = 0;
   state.HTMLTypes.forEach((element) => {
@@ -166,7 +167,7 @@ const HTMLPanel = (props): JSX.Element => {
                   ? classes.lightThemeFontColor
                   : classes.darkThemeFontColor
               }
-              value="New HTML Tag"
+              //value="New HTML Tag"
             >
               New HTML Tag:{' '}
             </h4>

app/src/components/login/FBPassWord.tsx

@@ -1,4 +1,4 @@
-import React, {  useState} from 'react';
+import React, {  useState, MouseEvent} from 'react';
 import { LoginInt } from '../../interfaces/Interfaces';
 import {
   Link as RouteLink,

app/src/components/login/SignIn.tsx

@@ -27,6 +27,7 @@ import {
 } from '../../../../app/src/public/styles/theme';
 import Brightness3Icon from '@mui/icons-material/Brightness3';
 import Brightness5Icon from '@mui/icons-material/Brightness5';
+import { RootState } from '../../redux/store';
 
 import config from '../../../../config.js';
 const { API_BASE_URL } = config;
@@ -79,7 +80,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
-  const isDarkMode = useSelector((store) => store.darkMode.isDarkMode);
+  const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
 
   const [invalidUserMsg, setInvalidUserMsg] = useState('');
   const [invalidPassMsg, setInvalidPassMsg] = useState('');

app/src/components/login/SignUp.tsx

@@ -16,11 +16,11 @@ import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 import Container from '@mui/material/Container';
 import AssignmentIcon from '@mui/icons-material/Assignment';
-
 import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
 import { useSelector, useDispatch } from 'react-redux';
 import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
 import { SigninDark, SigninLight } from '../../../../app/src/public/styles/theme';
+import { RootState } from '../../redux/store';
 
 declare module '@mui/styles/defaultTheme' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -77,7 +77,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
   const [invalidUsername, setInvalidUsername] = useState(false);
   const [invalidPassword, setInvalidPassword] = useState(false);
   const [invalidVerifyPassword, setInvalidVerifyPassword] = useState(false);
-  const isDarkMode = useSelector(store => store.darkMode.isDarkMode);
+  const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let inputVal = e.target.value;

app/src/components/main/AddLink.tsx

@@ -5,10 +5,11 @@ import Select from '@mui/material/Select';
 import { InputLabel } from '@mui/material';
 import {useDispatch, useSelector} from 'react-redux';
 import { updateAttributes } from '../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../redux/store';
 
 function AddLink({ id, onClickHandler, linkDisplayed }) {
 
-  const { state, contextParam, isThemeLight } = useSelector((store) => ({
+  const { state, contextParam, isThemeLight } = useSelector((store:RootState) => ({
     state: store.appState,
     contextParam: store.contextSlice,
     isThemeLight: store.styleSlice
@@ -34,7 +35,7 @@ function AddLink({ id, onClickHandler, linkDisplayed }) {
         const state = JSON.parse(JSON.stringify(element));
         state.childId = id;
         state.attributes.compLink = event.target.value;
-        dispatch(updateAttributes(state, contextParam))
+        dispatch(updateAttributes({attributes: state, contextParam: contextParam}))
         return true;
       }
     });
@@ -47,7 +48,7 @@ function AddLink({ id, onClickHandler, linkDisplayed }) {
 
   return (
     <div style={{float: 'right'}}>
-      <FormControl variant='outlined' focused='true' style={ {width: '100%'} }>
+      <FormControl variant='outlined' focused={true} style={ {width: '100%'} }>
       <InputLabel id='page-select-label' style={ {color: isThemeLight? '#000' : '#fff'} }>Pages</InputLabel>
           <Select 
             label='Pages'

app/src/components/main/AddRoute.tsx

@@ -2,18 +2,19 @@ import { AddRoutes } from '../../interfaces/Interfaces'
 import React from 'react';
 import {useDispatch, useSelector} from 'react-redux'
 import { addChild} from '../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../redux/store';
 
 function AddRoute({
   id
 }: AddRoutes) {
 const dispatch = useDispatch();
-const contextParam = useSelector(store => store.contextSlice)
+const contextParam = useSelector((store:RootState) => store.contextSlice)
   const handleClick = (id) => {
     dispatch(addChild({
       type: 'HTML Element',
       typeId: -1,
       childId: id, // this is the id of the parent to attach it to
-      contextParam: store.contextSlice
+      contextParam: contextParam
     }))
 
   }

app/src/components/main/Canvas.tsx

@@ -7,10 +7,11 @@ import renderChildren from '../../helperFunctions/renderChildren';
 import Arrow from './Arrow';
 import { useDispatch, useSelector } from 'react-redux';
 import { changeFocus, addChild, snapShotAction } from '../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../redux/store';
 
 function Canvas(props): JSX.Element {
 
-  const { state, contextParam,isDarkMode } = useSelector((store) => ({
+  const { state, contextParam,isDarkMode } = useSelector((store:RootState) => ({
     state: store.appState,
     contextParam: store.contextSlice,
     isDarkMode: store.darkMode.isDarkMode
@@ -84,7 +85,7 @@ function Canvas(props): JSX.Element {
                 break;
               } else {
                 // if false
-                setCopiedComp(child);
+                // setCopiedComp(child);
                 hasDiffParent = true;
                 newChildName = child.name;
                 i = components.length;

app/src/components/main/DeleteButton.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { DeleteButtons } from '../../interfaces/Interfaces';
-
 import { useDispatch, useSelector } from 'react-redux';
 import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../redux/store';
 
 function DeleteButton({ id, name }: DeleteButtons) {
-  const { state, contextParam } = useSelector((store) => ({
+  const { state, contextParam } = useSelector((store:RootState) => ({
     state: store.appState,
     contextParam: store.contextSlice,
   }));

app/src/components/main/DemoRender.tsx

@@ -6,11 +6,12 @@ import { Component } from '../../interfaces/Interfaces';
 import ReactDOMServer from 'react-dom/server';
 import { useDispatch, useSelector } from 'react-redux';
 import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../redux/store';
 
 // DemoRender is the full sandbox demo of our user's custom built React components. DemoRender references the design specifications stored in state to construct
 // real react components that utilize hot module reloading to depict the user's prototype application.
 const DemoRender = (): JSX.Element => {
-  const state = useSelector(store => store.appState);
+  const state = useSelector((store:RootState) => store.appState);
   const dispatch = useDispatch();
   let currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
@@ -28,10 +29,6 @@ const DemoRender = (): JSX.Element => {
   const html = `
     <html>
       <head>
-      <link
-      rel="stylesheet"
-      href="./fake.css"
-    />
       </head>
       <body>
         <div id="app">
@@ -74,7 +71,7 @@ const DemoRender = (): JSX.Element => {
 
   //  This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo
   //   Material UI is utilized to incorporate the apporpriate tags with specific configuration designs as necessitated by HTML standards.
-  const componentBuilder = (array: object, key: number = 0) => {
+  const componentBuilder = (array: any, key: number = 0) => {
     const componentsToRender = [];
     for (const element of array) {
       if (element.name !== 'separator') {

app/src/components/main/fake.css

@@ -61,6 +61,7 @@ export interface Action {
 }
 
 export interface Payload {}
+
 export interface Reduce {
   state: Context;
   action: Action;