Skip to content

Commit 59e4006

Browse files
rachelk585rachelk585
authored
Merge pull request #18 from oslabs-beta/RachTeoTSCleanup
25 more files optimized for TS
2 parents b72bf66 + 940b68d commit 59e4006

26 files changed

+516
-487
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ import {
1515
import TableStateProps from './TableStateProps';
1616
import TableParentProps from './TableParentProps';
1717
import TablePassedInProps from './TablePassedInProps';
18+
import { RootState } from '../../../../redux/store';
1819

1920
const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
20-
const { state, contextParam } = useSelector((store) => ({
21+
const { state, contextParam } = useSelector((store:RootState) => ({
2122
state: store.appState,
2223
contextParam: store.contextSlice
2324
}));
@@ -234,7 +235,7 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
234235
: `${classes.selectEmpty} ${classes.rootUnderlineDark} ${classes.inputTextDark}`
235236
}
236237
value={inputType}
237-
onChange={(event, index) => setInputType(index.props.value)}
238+
onChange={(event) => setInputType(event.target.value)}
238239
MenuProps={{ disablePortal: true }}
239240
style={
240241
isThemeLight

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import {
55
GridEditRowsModel,
66
} from '@mui/x-data-grid';
77
import Button from '@mui/material/Button';
8-
import StateContext from "../../../../context/context";
98
import makeStyles from '@mui/styles/makeStyles';
109
import { StatePropsPanelProps } from '../../../../interfaces/Interfaces';
1110
import AddIcon from '@mui/icons-material/Add';
1211
import { addPassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
12+
import { RootState } from '../../../../redux/store'
1313

1414
const TableParentProps = props => {
15-
const { state, contextParam } = useSelector((store) => ({
15+
const { state, contextParam } = useSelector((store:RootState) => ({
1616
state: store.appState,
1717
contextParam: store.contextSlice,
1818
}));

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ import ClearIcon from '@mui/icons-material/Clear';
88
import makeStyles from '@mui/styles/makeStyles';
99
import { useDispatch, useSelector } from 'react-redux';
1010
import { deletePassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
11+
import { RootState } from '../../../../redux/store'
1112

1213

1314
const TablePassedInProps = props => {
14-
const { state, contextParam } = useSelector((store) => ({
15+
const { state, contextParam } = useSelector((store:RootState) => ({
1516
state: store.appState,
1617
contextParam: store.contextSlice,
1718
}));
@@ -92,7 +93,8 @@ const TablePassedInProps = props => {
9293
}, [state.canvasFocus.componentId]);
9394

9495
// fill data grid rows with all of the passed in props from parent component (if there are any)
95-
let rows = passedInProps?.slice();
96+
let rows: any = passedInProps?.slice();
97+
//let rows: readonly StateProp[] = passedInProps?.slice() || [];
9698

9799
return (
98100
<div className={'state-prop-grid'}>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import makeStyles from '@mui/styles/makeStyles';
99
import { StatePropsPanelProps } from '../../../../interfaces/Interfaces';
1010
import { useDispatch, useSelector } from 'react-redux';
1111
import { deletePassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
12+
import { RootState } from '../../../../redux/store'
1213

1314
const TableStateProps = props => {
14-
const { state, contextParam } = useSelector((store) => ({
15+
const { state, contextParam } = useSelector((store:RootState) => ({
1516
state: store.appState,
1617
contextParam: store.contextSlice,
1718
}));

‎app/src/components/StateManagement/DisplayTab/DataTable.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import TableRow from '@mui/material/TableRow';
77
import Paper from '@mui/material/Paper';
88
import { styled } from '@mui/material/styles';
99
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
10-
import StateContext from '../../../context/context';
1110
import { useSelector } from 'react-redux';
11+
import { RootState } from '../../../redux/store'
1212

1313
const StyledTableCell = styled(TableCell)(({ theme }) => ({
1414
[`&.${tableCellClasses.head}`]: {
@@ -34,7 +34,7 @@ export default function DataTable(props) {
3434
const {
3535
currComponentState, parentProps, clickedComp, data,
3636
} = props;
37-
const state = useSelector(store => store.appState)
37+
const state = useSelector((store:RootState) => store.appState)
3838

3939
// determine if the current component is a root component
4040
let isRoot = false;

‎app/src/components/StateManagement/DisplayTab/DisplayContainer.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import Grid from '@mui/material/Grid';
44
import { Typography } from '@mui/material';
55
import DataTable from './DataTable';
66
import Tree from './Tree';
7-
import StateContext from '../../../context/context';
87
import { useSelector } from 'react-redux';
8+
import { RootState } from '../../../redux/store'
99

1010
function DisplayContainer({ data, props }) { // "data" is referring to components from state - passed in from StateManagement
1111
// grabbing intialized state from App using UseContext
1212
const [currComponentState, setCurrComponentState] = useState([]);
1313
const [parentProps, setParentProps] = useState([]);
14-
const state = useSelector(store => store.appState)
14+
const state = useSelector((store:RootState) => store.appState)
1515

1616
let root = '';
1717

@@ -33,7 +33,7 @@ function DisplayContainer({ data, props }) { // "data" is referring to component
3333

3434
return (
3535
<div style={{ display: 'flex' }}>
36-
<Tree data={data} currComponentState={currComponentState} setCurrComponentState={setCurrComponentState} parentProps={parentProps} setParentProps={setParentProps} setClickedComp={setClickedComp} />
36+
<Tree data={data} setCurrComponentState={setCurrComponentState} setParentProps={setParentProps} setClickedComp={setClickedComp} />
3737
<Divider orientation="vertical" variant="middle" flexItem />
3838
<Grid item>
3939
<Typography
@@ -60,3 +60,7 @@ function DisplayContainer({ data, props }) { // "data" is referring to component
6060
);
6161
}
6262
export default DisplayContainer;
63+
64+
//deleted these from returned Tree props:
65+
//currComponentState={currComponentState}
66+
//parentProps={parentProps}

‎app/src/components/StateManagement/DisplayTab/Tree.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import {
55
import cloneDeep from 'lodash/cloneDeep';
66
import useResizeObserver from './useResizeObserver';
77
import { useSelector } from 'react-redux';
8+
import { ChildElement } from '../../../interfaces/Interfaces';
9+
import { RootState } from '../../../redux/store'
810

911
function usePrevious(value) {
1012
const ref = useRef();
@@ -15,7 +17,7 @@ function usePrevious(value) {
1517
function Tree({
1618
data, setCurrComponentState, setParentProps, setClickedComp,
1719
}) {
18-
const state = useSelector(store => store.appState)
20+
const state = useSelector((store:RootState) => store.appState)
1921
const svgRef = useRef();
2022
const wrapperRef = useRef();
2123
const xPosition = 50;
@@ -24,7 +26,7 @@ function Tree({
2426
// we save data to see if it changed
2527
const previouslyRenderedData = usePrevious(data);
2628
// function to filter out separators to prevent render on tree chart
27-
const removeHTMLElements = (arr: object[]) => {
29+
const removeHTMLElements = (arr: ChildElement[]) => {
2830
for (let i = 0; i < arr.length; i++) {
2931
if (arr[i] === undefined) continue;
3032
// if element is separator, remove it
@@ -67,8 +69,11 @@ function Tree({
6769
// use dimensions from useResizeObserver,
6870
// but use getBoundingClientRect on initial render
6971
// (dimensions are null for the first render)
72+
73+
// if (wrapperRef.current) {
7074
const { width, height } = dimensions || wrapperRef.current.getBoundingClientRect();
7175
// transform hierarchical data
76+
// }
7277

7378
let root;
7479
let rootName;

‎app/src/components/main/DirectChildComponent.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
77
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
88
import { useDispatch, useSelector } from 'react-redux';
99
import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
10+
import { RootState } from '../../redux/store';
1011

1112
function DirectChildComponent({
1213
childId,
1314
type,
1415
typeId,
1516
name
1617
}: ChildElement) {
17-
const state = useSelector(store => store.appState);
18+
const state = useSelector((store:RootState) => store.appState);
1819
const dispatch = useDispatch();
1920

2021
// find the top-level component corresponding to this instance of the component
@@ -57,10 +58,7 @@ function DirectChildComponent({
5758
};
5859

5960
const combinedStyle = combineStyles(
60-
combineStyles(
61-
combineStyles(globalDefaultStyle, referencedComponent.style)
62-
// style
63-
),
61+
combineStyles(globalDefaultStyle, referencedComponent.style),
6462
interactiveStyle
6563
);
6664
// Renders name and not children of subcomponents to clean up Canvas view when dragging components

‎app/src/components/main/DirectChildHTML.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
77
import DeleteButton from './DeleteButton';
88
import { useDispatch, useSelector } from 'react-redux';
99
import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
10+
import { RootState } from '../../redux/store';
1011

1112
function DirectChildHTML({ childId, name, type, typeId, style }: ChildElement) {
12-
const {state, isThemeLight }= useSelector(store =>({
13+
const {state, isThemeLight }= useSelector((store:RootState) =>({
1314
state: store.appState,
1415
isThemeLight: store.styleSlice
1516
} ));

‎app/src/components/main/DirectChildHTMLNestable.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import componentNest from '../../helperFunctions/componentNestValidation';
1111
import AddRoute from './AddRoute';
1212
import AddLink from './AddLink';
1313
import { useDispatch, useSelector } from 'react-redux';
14+
import { RootState } from '../../redux/store';
1415

1516
import { changeFocus, changePosition, addChild, snapShotAction } from '../../redux/reducers/slice/appStateSlice';
1617

@@ -25,7 +26,7 @@ function DirectChildHTMLNestable({
2526
attributes
2627
}: ChildElement) {
2728

28-
const { state, contextParam, isThemeLight, isDarkMode } = useSelector((store) => ({
29+
const { state, contextParam, isThemeLight, isDarkMode } = useSelector((store:RootState) => ({
2930
state: store.appState,
3031
contextParam: store.contextSlice,
3132
isThemeLight: store.styleSlice,
@@ -155,7 +156,6 @@ function DirectChildHTMLNestable({
155156
<AddLink
156157
id={childId}
157158
onClickHandler={onClickHandler}
158-
name={name}
159159
linkDisplayed={
160160
attributes && attributes.compLink ? `${attributes.compLink}` : null
161161
}

‎app/src/components/main/IndirectChild.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Component } from '../../interfaces/Interfaces';
55
import DeleteButton from './DeleteButton';
66
import { useDispatch, useSelector } from 'react-redux';
77
import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
8+
import { RootState } from '../../redux/store';
89

910
function IndirectChild({
1011
style,
@@ -14,7 +15,7 @@ function IndirectChild({
1415
childId,
1516
name
1617
}) {
17-
const state = useSelector(store => store.appState);
18+
const state = useSelector((store:RootState) => store.appState);
1819
const dispatch = useDispatch();
1920
let combinedStyle = combineStyles(globalDefaultStyle, style);
2021
// when a user clicks a link, the focus should change to that component

‎app/src/components/main/RouteLink.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import { combineStyles } from '../../helperFunctions/combineStyles';
66
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
77
import { useDispatch, useSelector } from 'react-redux';
88
import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
9+
import { RootState } from '../../redux/store';
910

1011
function RouteLink({ childId, type, typeId, style }: ChildElement) {
11-
const state = useSelector(store => store.appState);
12+
const state = useSelector((store:RootState) => store.appState);
1213
const dispatch = useDispatch();
1314

1415
// find the name of the Component corresponding with this link

‎app/src/components/main/SeparatorChild.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import renderChildren from '../../helperFunctions/renderChildren';
88
import validateNewParent from '../../helperFunctions/changePositionValidation'
99
import componentNest from '../../helperFunctions/componentNestValidation'
1010
import { useDispatch, useSelector } from 'react-redux';
11-
11+
import { RootState } from '../../redux/store';
1212
import { changeFocus, changePosition, addChild } from '../../redux/reducers/slice/appStateSlice';
1313

1414

@@ -20,7 +20,7 @@ function DirectChildHTMLNestable({
2020
style,
2121
children
2222
}: ChildElement) {
23-
const { state, contextParam } = useSelector((store) => ({
23+
const { state, contextParam } = useSelector((store:RootState) => ({
2424
state: store.appState,
2525
contextParam: store.contextSlice,
2626
}));

‎app/src/components/right/ComponentDrag.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@ import Grid from '@mui/material/Grid';
33
import ComponentPanelItem from './ComponentPanelItem';
44
import makeStyles from '@mui/styles/makeStyles';
55
import { useSelector } from 'react-redux';
6+
import { RootState } from '../../redux/store';
67
// The component panel section of the left panel displays all components and has the ability to add new components
78
const ComponentDrag = ({ isThemeLight }): JSX.Element => {
89
const classes = useStyles();
9-
const state = useSelector(store => store.appState)
10-
const isDarkMode = useSelector(store => store.darkMode.isDarkMode);
10+
const state = useSelector((store:RootState) => store.appState)
11+
const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
1112
const isFocus = (targetId: Number) => {
1213
return state.canvasFocus.componentId === targetId ? true : false;
1314
};

‎app/src/components/right/ComponentPanel.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ import { Button, Checkbox, FormControlLabel, InputLabel } from '@mui/material';
55
import TextField from '@mui/material/TextField';
66
import { useDispatch, useSelector } from 'react-redux';
77
import { addComponent } from '../../redux/reducers/slice/appStateSlice';
8+
import { RootState } from '../../redux/store';
89

910
// The component panel section of the left panel displays all components and has the ability to add new components
1011
const ComponentPanel = ({ isThemeLight }): JSX.Element => {
1112
const classes = useStyles();
12-
const { state, contextParam } = useSelector((store) => ({
13+
const { state, contextParam } = useSelector((store:RootState) => ({
1314
state: store.appState,
1415
contextParam: store.contextSlice
1516
}));
@@ -186,7 +187,7 @@ const ComponentPanel = ({ isThemeLight }): JSX.Element => {
186187
: `${classes.inputField} ${classes.darkThemeFontColor}`
187188
}
188189
// inputprops and helpertext must be lowercase
189-
inputProps={{ className: classes.input }}
190+
// inputProps={{ className: classes.input }}
190191
value={compName}
191192
// Doesn't accept boolean value needs to be a string
192193
error={errorStatus}

‎app/src/components/right/ComponentPanelItem.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useDrag } from 'react-dnd';
55
import { ItemTypes } from '../../constants/ItemTypes';
66
import { useDispatch, useSelector } from 'react-redux';
77
import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
8+
import { RootState } from '../../redux/store';
89
/*
910
DESCRIPTION: This component is each box beneath the 'root components' and
1011
'reusable components' (in classic React mode) headings. Drag-and-drop
@@ -22,7 +23,7 @@ const ComponentPanelItem: React.FC<{
2223
isThemeLight: boolean;
2324
}> = ({ name, id, root, isFocus, isThemeLight }) => {
2425
const classes = useStyles();
25-
const state = useSelector(store => store.appState);
26+
const state = useSelector((store:RootState) => store.appState);
2627
const dispatch = useDispatch();
2728
// useDrag hook allows components in left panel to be drag source
2829
const [{ isDragging }, drag] = useDrag({

‎app/src/components/right/ComponentPanelRoutingItem.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useContext, useState } from 'react';
22
import Grid from '@mui/material/Grid';
33
import makeStyles from '@mui/styles/makeStyles';
4-
import StateContext from '../../context/context';
54
import { useDrag } from 'react-dnd';
65
import { ItemTypes } from '../../constants/ItemTypes';
76
import Select from '@mui/material/Select';
87
import { useSelector } from 'react-redux';
8+
import { RootState } from '../../redux/store';
99

1010
// ------------------------------------------------
1111
import MenuItem from '@mui/material/MenuItem';
@@ -27,8 +27,7 @@ Dragging works in the same manner as in ComponentPanelItem.tsx
2727
// a component panel routing item is a Next.js component that allows the user to navigate between pages
2828
const ComponentPanelRoutingItem: React.FC<{}> = () => {
2929
const classes = useStyles(); 's there, '
30-
// const [state,] = useContext(StateContext);
31-
const state = useSelector(store => store.appState)
30+
const state = useSelector((store:RootState) => store.appState)
3231

3332
// find the root components that can be associated with a route
3433
// These will be the components that are displayed in the dropdown adjacent to "Route Link"

‎app/src/components/right/DeleteProjects.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import {
1616
} from '../../helperFunctions/projectGetSaveDel';
1717
import localforage from 'localforage';
1818
import { useSelector, useDispatch } from 'react-redux';
19-
import { setInitialState } from '../../redux/reducers/slice/appStateSlice';
19+
import { setInitialState, initialState } from '../../redux/reducers/slice/appStateSlice';
20+
import { RootState } from '../../redux/store';
2021
export interface ProjectDialogProps {
2122
open: boolean;
2223
projects: Array<Object>;
@@ -26,7 +27,7 @@ export interface ProjectDialogProps {
2627
function ProjectsDialog(props: ProjectDialogProps) {
2728
const classes = useStyles();
2829
const { onClose, open, projects } = props;
29-
const state = useSelector(store => store.appState);
30+
const state = useSelector((store:RootState) => store.appState);
3031
const dispatch = useDispatch();
3132

3233
// If no projects selected, keep the name of the current displayed

‎app/src/components/right/ExportButton.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect } from 'react';
22
import List from '@mui/material/List';
33
import ListItem from '@mui/material/ListItem';
44
import ListItemText from '@mui/material/ListItemText';
5+
//these 3 lines below are for the electron version
56
import GetAppIcon from '@mui/icons-material/GetApp';
67
import Button from '@mui/material/Button';
78
import exportProject from '../../utils/exportProject.util';

‎app/src/components/right/LoginButton.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import React from 'react';
22
import { useSelector, useDispatch } from 'react-redux';
33
import { toggleLoggedIn } from '../../redux/reducers/slice/appStateSlice';
44
import config from '../../../../config.js';
5+
import { RootState } from '../../redux/store';
56
const { API_BASE_URL, API_BASE_URL2 } = config;
67

78
export default function LoginButton() {
8-
const state = useSelector((store) => store.appState);
9+
const state = useSelector((store:RootState) => store.appState);
910
const dispatch = useDispatch();
1011

1112
const handleLogout = () => {

0 commit comments

Comments
 (0)