Skip to content

Commit 55ba1c2

Browse files
HadriChanHadriChan
committed
partial TS conversion
1 parent 1f3d37b commit 55ba1c2

File tree

9 files changed

+184
-96
lines changed

9 files changed

+184
-96
lines changed

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

Lines changed: 70 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,101 @@
1-
import React, { useState } from 'react';
1+
import React, { useState } from 'react';
22
import FormControl from '@mui/material/FormControl';
33
import MenuItem from '@mui/material/MenuItem';
44
import Select from '@mui/material/Select';
55
import { InputLabel } from '@mui/material';
6-
import {useDispatch, useSelector} from 'react-redux';
6+
import { useDispatch, useSelector } from 'react-redux';
77
import { updateAttributes } from '../../redux/reducers/slice/appStateSlice';
88
import { RootState } from '../../redux/store';
99

1010
function AddLink({ id, onClickHandler, linkDisplayed }) {
11-
12-
const { state, contextParam, isThemeLight } = useSelector((store:RootState) => ({
13-
state: store.appState,
14-
contextParam: store.contextSlice,
15-
isThemeLight: store.styleSlice
16-
}));
11+
const { state, contextParam, isThemeLight } = useSelector(
12+
(store: RootState) => ({
13+
state: store.appState,
14+
contextParam: store.contextSlice,
15+
isThemeLight: store.styleSlice
16+
})
17+
);
1718
const dispatch = useDispatch();
1819
//this function allows the link to be functional when it's nested
1920
function deepIterate(arr) {
2021
const output = [];
21-
for(let i = 0; i < arr.length; i++) {
22-
if(arr[i].typeId === 1000) continue;
22+
for (let i = 0; i < arr.length; i++) {
23+
if (arr[i].typeId === 1000) continue;
2324
output.push(arr[i]);
24-
if(arr[i].children.length) {
25+
if (arr[i].children.length) {
2526
output.push(...deepIterate(arr[i].children));
2627
}
2728
}
2829
return output;
2930
}
3031

31-
const handlePageSelect = event => {
32-
const currComponent = state.components.find(element => element.id === state.canvasFocus.componentId);
33-
deepIterate(currComponent.children).some(element => {
34-
if(element.childId === id) {
32+
const handlePageSelect = (event) => {
33+
const currComponent = state.components.find(
34+
(element) => element.id === state.canvasFocus.componentId
35+
);
36+
deepIterate(currComponent.children).some((element) => {
37+
if (element.childId === id) {
3538
const state = JSON.parse(JSON.stringify(element));
3639
state.childId = id;
3740
state.attributes.compLink = event.target.value;
38-
dispatch(updateAttributes({attributes: state, contextParam: contextParam}))
41+
dispatch(
42+
updateAttributes({ attributes: state, contextParam: contextParam })
43+
);
3944
return true;
4045
}
4146
});
42-
}
47+
};
4348

44-
const pagesItems = state.components.filter(comp => state.rootComponents.includes(comp.id));
45-
const dropDown = [<MenuItem style={{ color: '#000' }} disabled hidden selected>Pages</MenuItem>].concat(pagesItems.map(comp => <MenuItem style={{ color: '#000' }} value={comp.name}>{comp.name}</MenuItem>));
49+
const pagesItems = state.components.filter((comp) =>
50+
state.rootComponents.includes(comp.id)
51+
);
52+
const dropDown = [
53+
<MenuItem style={{ color: '#000' }} disabled hidden selected>
54+
Pages
55+
</MenuItem>
56+
].concat(
57+
pagesItems.map((comp) => (
58+
<MenuItem style={{ color: '#000' }} value={comp.name}>
59+
{comp.name}
60+
</MenuItem>
61+
))
62+
);
4663

4764
return (
48-
<div style={{float: 'right'}}>
49-
<FormControl variant='outlined' focused={true} style={ {width: '100%'} }>
50-
<InputLabel id='page-select-label' style={ {color: isThemeLight? '#000' : '#fff'} }>Pages</InputLabel>
51-
<Select
52-
label='Pages'
53-
onMouseDown={onClickHandler}
54-
onChange={handlePageSelect}
55-
id="page-select"
56-
value={linkDisplayed}
57-
style={ isThemeLight
58-
? {backgroundColor: '#eef0f1', color: '#000', border: '1px solid black', height: '28px', width: '200px'}
59-
: {backgroundColor: 'gray', color: '#fff', border: '1px solid white', height: '28px', width: '200px'}}
60-
>
61-
{dropDown}
62-
</Select>
65+
<div style={{ float: 'right' }}>
66+
<FormControl variant="outlined" focused={true} style={{ width: '100%' }}>
67+
<InputLabel
68+
id="page-select-label"
69+
style={{ color: isThemeLight ? '#000' : '#fff' }}
70+
>
71+
Pages
72+
</InputLabel>
73+
<Select
74+
label="Pages"
75+
onMouseDown={onClickHandler}
76+
onChange={handlePageSelect}
77+
id="page-select"
78+
value={linkDisplayed}
79+
style={
80+
isThemeLight
81+
? {
82+
backgroundColor: '#eef0f1',
83+
color: '#000',
84+
border: '1px solid black',
85+
height: '28px',
86+
width: '200px'
87+
}
88+
: {
89+
backgroundColor: 'gray',
90+
color: '#fff',
91+
border: '1px solid white',
92+
height: '28px',
93+
width: '200px'
94+
}
95+
}
96+
>
97+
{dropDown}
98+
</Select>
6399
</FormControl>
64100
</div>
65101
);

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

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
import { AddRoutes } from '../../interfaces/Interfaces'
1+
import { AddRoutes } from '../../interfaces/Interfaces';
22
import React from 'react';
3-
import {useDispatch, useSelector} from 'react-redux'
4-
import { addChild} from '../../redux/reducers/slice/appStateSlice';
3+
import { useDispatch, useSelector } from 'react-redux';
4+
import { addChild } from '../../redux/reducers/slice/appStateSlice';
55
import { RootState } from '../../redux/store';
66

7-
function AddRoute({
8-
id
9-
}: AddRoutes) {
10-
const dispatch = useDispatch();
11-
const contextParam = useSelector((store:RootState) => store.contextSlice)
12-
const handleClick = (id) => {
13-
dispatch(addChild({
14-
type: 'HTML Element',
15-
typeId: -1,
16-
childId: id, // this is the id of the parent to attach it to
17-
contextParam: contextParam
18-
}))
19-
20-
}
7+
function AddRoute({ id }: AddRoutes): JSX.Element {
8+
const dispatch = useDispatch();
9+
const contextParam = useSelector((store: RootState) => store.contextSlice);
10+
const handleClick = (id: number): void => {
11+
dispatch(
12+
addChild({
13+
type: 'HTML Element',
14+
typeId: -1,
15+
childId: id, // this is the id of the parent to attach it to
16+
contextParam: contextParam
17+
})
18+
);
19+
};
2120

2221
return (
2322
<div style={{ padding: '1px', float: 'right' }}>
24-
<button id={'routeBtn' + id} onClick={() => handleClick(id)}>+</button>
23+
<button id={'routeBtn' + id} onClick={() => handleClick(id)}>
24+
+
25+
</button>
2526
</div>
2627
);
2728
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { RootState } from '../../redux/store';
1414
import { combineStyles } from '../../helperFunctions/combineStyles';
1515
import renderChildren from '../../helperFunctions/renderChildren';
1616

17-
function Canvas(props): JSX.Element {
17+
function Canvas(props: {}): JSX.Element {
1818
const { state, contextParam } = useSelector((store: RootState) => ({
1919
state: store.appState,
2020
contextParam: store.contextSlice
@@ -35,7 +35,7 @@ function Canvas(props): JSX.Element {
3535
dispatch(changeFocus({ componentId, childId }));
3636
};
3737
// onClickHandler is responsible for changing the focused component and child component
38-
function onClickHandler(event) {
38+
function onClickHandler(event: React.MouseEvent) {
3939
event.stopPropagation();
4040
changeFocusFunction(state.canvasFocus.componentId, null);
4141
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function DirectChildHTMLNestable({
2828
children,
2929
name,
3030
attributes
31-
}: ChildElement) {
31+
}: ChildElement): JSX.Element {
3232
const { state, contextParam, isThemeLight } = useSelector(
3333
(store: RootState) => ({
3434
state: store.appState,

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,13 @@ import { useDispatch, useSelector } from 'react-redux';
88
import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
99
import { RootState } from '../../redux/store';
1010

11-
function RouteLink({ childId, type, typeId, style }: ChildElement) {
12-
const state = useSelector((store:RootState) => store.appState);
11+
function RouteLink({
12+
childId,
13+
type,
14+
typeId,
15+
style
16+
}: ChildElement): JSX.Element {
17+
const state = useSelector((store: RootState) => store.appState);
1318
const dispatch = useDispatch();
1419

1520
// find the name of the Component corresponding with this link
@@ -32,8 +37,7 @@ function RouteLink({ childId, type, typeId, style }: ChildElement) {
3237
})
3338
});
3439
const changeFocusFunction = (componentId: number, childId: number | null) => {
35-
dispatch(changeFocus({ componentId, childId}));
36-
40+
dispatch(changeFocus({ componentId, childId }));
3741
};
3842
// onClickHandler is responsible for changing the focused component and child component
3943
function onClickHandlerFocus(event) {

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

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
1-
import React, { useRef } from 'react';
2-
import { ChildElement, HTMLType } from '../../interfaces/Interfaces';
1+
import React, { useRef } from 'react';
2+
import { ChildElement, HTMLType, DragItem } from '../../interfaces/Interfaces';
33
import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
44
import { ItemTypes } from '../../constants/ItemTypes';
55
import { combineStyles } from '../../helperFunctions/combineStyles';
66
import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
77
import renderChildren from '../../helperFunctions/renderChildren';
8-
import validateNewParent from '../../helperFunctions/changePositionValidation'
9-
import componentNest from '../../helperFunctions/componentNestValidation'
8+
import validateNewParent from '../../helperFunctions/changePositionValidation';
9+
import componentNest from '../../helperFunctions/componentNestValidation';
1010
import { useDispatch, useSelector } from 'react-redux';
1111
import { RootState } from '../../redux/store';
12-
import { changeFocus, changePosition, addChild } from '../../redux/reducers/slice/appStateSlice';
13-
14-
12+
import {
13+
changeFocus,
14+
changePosition,
15+
addChild
16+
} from '../../redux/reducers/slice/appStateSlice';
1517

1618
function DirectChildHTMLNestable({
1719
childId,
1820
type,
1921
typeId,
2022
style,
2123
children
22-
}: ChildElement) {
23-
const { state, contextParam } = useSelector((store:RootState) => ({
24+
}: ChildElement): JSX.Element {
25+
const { state, contextParam } = useSelector((store: RootState) => ({
2426
state: store.appState,
25-
contextParam: store.contextSlice,
27+
contextParam: store.contextSlice
2628
}));
2729
const dispatch = useDispatch();
2830
const ref = useRef(null);
@@ -55,28 +57,43 @@ function DirectChildHTMLNestable({
5557
const [{ isOver }, drop] = useDrop({
5658
accept: ItemTypes.INSTANCE,
5759
// triggered on drop
58-
drop: (item: any, monitor: DropTargetMonitor) => {
60+
drop: (item: DragItem, monitor: DropTargetMonitor) => {
5961
const didDrop = monitor.didDrop();
6062
if (didDrop) {
6163
return;
6264
}
6365
// updates state with new instance
6466
// if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
6567
if (item.newInstance) {
66-
if ((item.instanceType === 'Component' && componentNest(state.components[item.instanceTypeId - 1].children, childId)) || item.instanceType !== 'Component') {
67-
dispatch(addChild( {
68-
type: item.instanceType,
69-
typeId: item.instanceTypeId,
70-
childId: childId,
71-
contextParam: contextParam
72-
}))
68+
if (
69+
(item.instanceType === 'Component' &&
70+
componentNest(
71+
state.components[item.instanceTypeId - 1].children,
72+
childId
73+
)) ||
74+
item.instanceType !== 'Component'
75+
) {
76+
dispatch(
77+
addChild({
78+
type: item.instanceType,
79+
typeId: item.instanceTypeId,
80+
childId: childId,
81+
contextParam: contextParam
82+
})
83+
);
7384
}
7485
}
7586
// if item is not a new instance, change position of element dragged inside separator so that separator is new parent (until replacement)
7687
else {
7788
// check to see if the selected child is trying to nest within itself
7889
if (validateNewParent(state, item.childId, childId) === true) {
79-
dispatch(changePosition({currentChildId: item.childId, newParentChildId: childId, contextParam: contextParam}))
90+
dispatch(
91+
changePosition({
92+
currentChildId: item.childId,
93+
newParentChildId: childId,
94+
contextParam: contextParam
95+
})
96+
);
8097
}
8198
}
8299
},
@@ -89,8 +106,7 @@ function DirectChildHTMLNestable({
89106
});
90107

91108
const changeFocusFunction = (componentId: number, childId: number | null) => {
92-
dispatch(changeFocus({ componentId, childId}));
93-
109+
dispatch(changeFocus({ componentId, childId }));
94110
};
95111

96112
// onClickHandler is responsible for changing the focused component and child component
@@ -104,10 +120,12 @@ function DirectChildHTMLNestable({
104120
const defaultNestableStyle = { ...globalDefaultStyle };
105121
const separatorStyle = {
106122
padding: '2px 10px',
107-
margin: '1px 10px',
123+
margin: '1px 10px'
108124
};
109125

110-
defaultNestableStyle['backgroundColor'] = isOver ? '#cee2f5' : 'rgba(0, 0, 255, 0.0)';
126+
defaultNestableStyle['backgroundColor'] = isOver
127+
? '#cee2f5'
128+
: 'rgba(0, 0, 255, 0.0)';
111129

112130
const combinedStyle = combineStyles(
113131
combineStyles(combineStyles(defaultNestableStyle, HTMLType.style), style),

0 commit comments

Comments
 (0)