Merge pull request #17 from oslabs-beta/RachTeoTSCleanup

25 Files Optimized for TS

Author: rachelk585

app/src/components/App.tsx

@@ -8,7 +8,7 @@ import { saveProject } from '../helperFunctions/projectGetSaveDel';
 import Cookies from 'js-cookie';
 //redux toolkit addition
 import { useSelector, useDispatch } from 'react-redux';
-import { setInitialState, toggleLoggedIn, configToggle } from '../redux/reducers/slice/appStateSlice';
+import { setInitialState, toggleLoggedIn} from '../redux/reducers/slice/appStateSlice';
 
 import { RootState } from '../redux/store';
 

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

@@ -10,6 +10,7 @@ import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
 import { addComponentToContext } from '../../../redux/reducers/slice/contextReducer';
 import { useSelector, useDispatch, useStore } from 'react-redux';
 import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../../redux/store';
 
 const AssignContainer = () => {
   const dispatch = useDispatch();
@@ -18,7 +19,7 @@ const AssignContainer = () => {
   const [contextInput, setContextInput] = React.useState(null);
   const [componentInput, setComponentInput] = React.useState(null);
   const [componentTable, setComponentTable] = useState([]);
-  const { state, contextParam } = useSelector((store) => ({
+  const { state, contextParam } = useSelector((store:RootState) => ({
     state: store.appState,
     contextParam: store.contextSlice
   }));

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

@@ -4,7 +4,7 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 
 import { useSelector } from 'react-redux';
-import { Store } from 'redux';
+import { RootState } from '../../../../redux/store';
 
 const filter = createFilterOptions();
 
@@ -16,7 +16,7 @@ const ComponentDropDown = ({
 }) => {
   const { allContext } = contextStore;
   // const [componentList] = useContext(StateContext);
-  const {state, isDarkMode} = useSelector(store =>({
+  const {state, isDarkMode} = useSelector((store:RootState) =>({
     state:  store.appState,
     isDarkMode: store.darkMode.isDarkMode
   } ))

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

@@ -1,10 +1,9 @@
 import React, { Fragment, useState, useEffect } from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-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();
 
@@ -16,7 +15,7 @@ const ContextDropDown = ({
 }) => {
   const { allContext } = contextStore;
 
-  const isDarkMode = useSelector(store => store.darkMode.isDarkMode)
+  const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode)
 const color = isDarkMode ? "white":"black"
   const onChange = (event, newValue) => {
     if (typeof newValue === 'string') {

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/bottom/BottomTabs.tsx

@@ -13,14 +13,15 @@ import Tree from '../../tree/TreeChart';
 import FormControl from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
-import Arrow from '../main/Arrow';
+import arrow from '../main/Arrow';
 import { useDispatch, useSelector } from 'react-redux';
 import { changeProjectType } from '../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../redux/store';
 
 const BottomTabs = (props): JSX.Element => {
   // state that controls which tab the user is on
   const dispatch = useDispatch();
-  const { state, contextParam, style } = useSelector((store) => ({
+  const { state, contextParam, style } = useSelector((store: RootState) => ({
     state: store.appState,
     contextParam: store.contextSlice,
     style: store.styleSlice,
@@ -47,7 +48,7 @@ const BottomTabs = (props): JSX.Element => {
   };
 
   // Render's the highliting arrow feature that draws an arrow from the Canvas to the DemoRender
-  Arrow.renderArrow(state.canvasFocus?.childId);
+  arrow.renderArrow(state.canvasFocus?.childId);
 
   return (
     <div

app/src/components/bottom/CodePreview.tsx

@@ -15,6 +15,7 @@ import { fetchPlugin } from '../../plugins/fetch-plugin';
 import * as esbuild from 'esbuild-wasm';
 import {codePreviewSave, codePreviewInput} from "../../redux/reducers/slice/codePreviewSlice";
 import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../redux/store';
 
 const CodePreview: React.FC<{
   theme: string | null;
@@ -36,13 +37,13 @@ const CodePreview: React.FC<{
   const wrapper = useRef();
   const dimensions = useResizeObserver(wrapper);
   const { height } = dimensions || 0;
-  const state = useSelector(store => store.appState)
+  const state = useSelector((store:RootState) => store.appState)
   const [, setDivHeight] = useState(0);
   let currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
 
-  const [input, setInput] = useState();
+  const [input, setInput] = useState('');
 
   useEffect(() => {
     startService();

app/src/components/bottom/CreationPanel.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import ComponentPanel from '../right/ComponentPanel'
 import HTMLPanel from '../left/HTMLPanel'
 import { useSelector } from 'react-redux';
+import { RootState } from '../../redux/store';
 
 // Creation panel holds all of the creation functionality of the application. ComponentPanel, HTMLPanel, and StatePropsPanel are all hanged here.
 // This allows users to create all aspects of this application in one place.
 const CreationPanel = (props): JSX.Element => {
-  const style = useSelector((store) => store.styleSlice);
+  const style = useSelector((store: RootState) => store.styleSlice);
   return (
     <div className="creation-panel" style={style.style}>
       <ComponentPanel isThemeLight={props.isThemeLight}/>

app/src/components/bottom/TableStateProps.tsx

@@ -10,9 +10,10 @@ import makeStyles from '@mui/styles/makeStyles';
 import { StatePropsPanelProps } from '../../interfaces/Interfaces';
 import { useDispatch, useSelector } from 'react-redux';
 import { deleteState } from '../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../redux/store';
 
 const TableStateProps = props => {
-  const { state, contextParam } = useSelector((store) => ({
+  const { state, contextParam } = useSelector((store: RootState) => ({
     state: store.appState,
     contextParam: store.contextSlice,
   }));

app/src/components/bottom/UseStateModal.tsx

@@ -34,7 +34,6 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
                 setStatePropsId(-1);
                 setOpen(false);
             }}
-            deleteHandler={() => func()}
             isThemeLight={true}
           />
         </div>

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;