Skip to content

Commit 24f26ef

Browse files
namos2502namos2502
authored
Merge pull request #17 from oslabs-beta/hadrian/ts
Hadrian/ts
2 parents 8457d60 + e86e3c2 commit 24f26ef

21 files changed

+392
-286
lines changed

‎__tests__/projects.test.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
const { Mongoose } = require('mongoose');
66
const request = require('supertest');
77
// initializes the project to be sent to server/DB
8-
import mockData from '../mockData'
9-
import app from ('../server/server');
10-
const http = require('http')
11-
const {state, projectToSave } = mockData
8+
import mockData from '../mockData';
9+
import app from '../server/server';
10+
const http = require('http');
11+
const { state, projectToSave } = mockData;
1212

1313
// save and get projects endpoint testing
1414
describe('Project endpoints tests', () => {

‎app/src/components/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import localforage from 'localforage';
1616
import { saveProject } from '../helperFunctions/projectGetSaveDel';
1717

1818
// Intermediary component to wrap main App component with higher order provider components
19-
export const App = (): JSX.Element => {
19+
export const App: React.FC = (): JSX.Element => {
2020
// const state = useSelector((store: RootState) => store.appState);
2121

2222
const dispatch = useDispatch();

‎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: 7 additions & 4 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
}
@@ -121,7 +121,7 @@ function Canvas(props): JSX.Element {
121121
});
122122

123123
// Styling for Canvas
124-
const defaultCanvasStyle = {
124+
const defaultCanvasStyle: React.CSSProperties = {
125125
width: '100%',
126126
minHeight: '100%',
127127
backgroundColor: isOver ? '#191919' : '#191919',
@@ -134,7 +134,10 @@ function Canvas(props): JSX.Element {
134134
// The render children function renders all direct children of a given component
135135
// Direct children are draggable/clickable
136136

137-
const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
137+
const canvasStyle: React.CSSProperties = combineStyles(
138+
defaultCanvasStyle,
139+
currentComponent.style
140+
);
138141

139142
return (
140143
<div

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

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,54 +9,45 @@ import { Button } from '@mui/material';
99
// The CanvasContainer sets the boundaries on the width/height of the canvas
1010
function CanvasContainer(props): JSX.Element {
1111
const [theme, setTheme] = useState('solarized_light'); // theme for ACE editor, taken from BottomTabs
12-
const { state } = useSelector(
13-
(store: RootState) => ({
14-
state: store.appState,
15-
})
16-
);
12+
const { state } = useSelector((store: RootState) => ({
13+
state: store.appState
14+
}));
1715
const dispatch = useDispatch();
1816

1917
// onClickCodePreview swaps the rendered component from the canvas to the code preview editor
2018
const onClickCodePreview = () => {
2119
dispatch(toggleCodePreview());
22-
}
20+
};
2321

24-
const canvasContainerStyle = {
22+
const canvasContainerStyle: React.CSSProperties = {
2523
width: '100%',
2624
backgroundColor: 'lightgrey',
2725
border: '2px solid grey',
2826
borderBottom: 'none',
29-
overflow: 'auto',
27+
overflow: 'auto'
3028
};
3129

32-
const codePreviewStyle = {
30+
const codePreviewStyle: React.CSSProperties = {
3331
position: 'fixed',
3432
width: 'max-content',
3533
height: 'max-content',
36-
bottom: '100px',
37-
right: '51vw',
34+
bottom: '100px',
35+
right: '51vw',
3836
textAlign: 'center',
39-
color: '#ffffff',
37+
color: '#ffffff',
4038
backgroundColor: '#151515',
4139
zIndex: 0,
4240
border: '2px solid #186BB4'
43-
44-
45-
4641
} as const;
4742

4843
return (
4944
<div style={canvasContainerStyle}>
50-
{state.codePreview && <CodePreview theme={theme} setTheme={setTheme}/>}
51-
{!state.codePreview && <Canvas isThemeLight={props.isThemeLight}/>}
52-
53-
<Button
54-
style={codePreviewStyle}
55-
onClick={onClickCodePreview}
56-
>
45+
{state.codePreview && <CodePreview theme={theme} setTheme={setTheme} />}
46+
{!state.codePreview && <Canvas isThemeLight={props.isThemeLight} />}
47+
48+
<Button style={codePreviewStyle} onClick={onClickCodePreview}>
5749
Code Preview
5850
</Button>
59-
6051
</div>
6152
);
6253
}

‎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) {

0 commit comments

Comments
 (0)