Skip to content

Commit 4159bd9

Browse files
sophia-buisophia-bui
committed
Merge branch 'dev' into sb/cleanup
2 parents b32f0d7 + 4bb2edd commit 4159bd9

File tree

18 files changed

+74
-90
lines changed

18 files changed

+74
-90
lines changed

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

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import ComponentTable from './components/ComponentTable';
88
import { Button } from '@mui/material';
99
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
1010
import { addComponentToContext } from '../../../redux/reducers/slice/contextReducer';
11-
import { useSelector, useDispatch, useStore } from 'react-redux';
11+
import { useSelector, useDispatch } from 'react-redux';
1212
import { deleteElement } from '../../../redux/reducers/slice/appStateSlice';
1313
import { RootState } from '../../../redux/store';
1414

@@ -19,31 +19,21 @@ const AssignContainer = () => {
1919
const [contextInput, setContextInput] = React.useState(null);
2020
const [componentInput, setComponentInput] = React.useState(null);
2121
const [componentTable, setComponentTable] = useState([]);
22-
const { state, contextParam } = useSelector((store:RootState) => ({
22+
const { state, contextParam } = useSelector((store: RootState) => ({
2323
state: store.appState,
2424
contextParam: store.contextSlice
2525
}));
2626

27-
28-
27+
//sets table data if it exists
2928
const renderTable = (targetContext) => {
30-
if (targetContext === null || !targetContext.values) {
31-
setTableState(defaultTableData);
32-
} else {
33-
setTableState(targetContext.values);
34-
}
29+
targetContext?.values && setTableState(targetContext.values);
3530
};
3631

3732
//construct data for table displaying component table
3833
const renderComponentTable = (targetComponent) => {
3934
//target Component is main
40-
4135
const listOfContexts = [];
42-
if (
43-
!Array.isArray(state) &&
44-
targetComponent !== null &&
45-
targetComponent.name
46-
) {
36+
if (!Array.isArray(state) && targetComponent?.name) {
4737
contextParam.allContext.forEach((context) => {
4838
if (context.components.includes(targetComponent.name)) {
4939
listOfContexts.push(context.name);

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,12 @@ import React, { Fragment } from 'react';
22
import TextField from '@mui/material/TextField';
33
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
44
import Box from '@mui/material/Box';
5-
65
import { useSelector } from 'react-redux';
76
import { RootState } from '../../../../redux/store';
87

98
const filter = createFilterOptions();
109

1110
const ComponentDropDown = ({
12-
contextStore,
1311
renderComponentTable,
1412
componentInput,
1513
setComponentInput

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,9 @@ const CreateContainer = () => {
2626

2727
//update data store when user adds a new context
2828
const handleClickSelectContext = () => {
29-
//prevent user from adding duplicate context
3029
let letters = /[a-zA-Z]/;
3130
let error;
32-
console.log(state.allContext, contextInput, 'error test');
31+
//checking for input error / setting error type
3332
if (!contextInput || contextInput.trim() === '') {
3433
error = 'empty';
3534
} else if (!contextInput.charAt(0).match(letters)) {

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,20 @@ const AddContextForm = ({
3232
}));
3333
const color = isDarkMode ? 'white' : 'black';
3434

35-
const handleClick = () => {
35+
//handler for submitting new context for creation
36+
const handleSubmit = () => {
3637
handleClickSelectContext();
3738
setOpen(true);
3839
};
3940

41+
//form control for new context field
4042
const handleChange = (e) => {
4143
setErrorStatus(false);
4244
setOpen(false);
4345
setContextInput(e.target.value);
4446
};
4547

48+
//event handle for confirmation modal
4649
const handleClose = (
4750
event: React.SyntheticEvent | Event,
4851
reason?: string
@@ -61,6 +64,7 @@ const AddContextForm = ({
6164
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
6265
});
6366

67+
//creating options for context dropdown
6468
const contexts = allContext.length ? (
6569
allContext.map((context) => {
6670
return (
@@ -109,7 +113,7 @@ const AddContextForm = ({
109113
</Snackbar>
110114
<Button
111115
variant="contained"
112-
onClick={handleClick}
116+
onClick={handleSubmit}
113117
disabled={btnDisabled}
114118
>
115119
Create

‎app/src/components/bottom/BottomPanel.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { RefObject, useEffect, useRef } from 'react';
1+
import React, { useEffect, useRef } from 'react';
22
import BottomTabs from './BottomTabs';
33

44
const BottomPanel = (props): JSX.Element => {
@@ -15,7 +15,7 @@ const BottomPanel = (props): JSX.Element => {
1515

1616
document.addEventListener('mousemove', mouseMoveHandler);
1717
document.addEventListener('mouseup', mouseUpHandler);
18-
}
18+
};
1919

2020
const mouseMoveHandler = function (e: MouseEvent): void {
2121
// How far the mouse has been moved
@@ -26,19 +26,21 @@ const BottomPanel = (props): JSX.Element => {
2626
};
2727

2828
const mouseUpHandler = function () {
29-
// Remove the handlers of `mousemove` and `mouseup`
30-
document.removeEventListener('mousemove', mouseMoveHandler);
31-
document.removeEventListener('mouseup', mouseUpHandler);
29+
// Remove the handlers of `mousemove` and `mouseup`
30+
document.removeEventListener('mousemove', mouseMoveHandler);
31+
document.removeEventListener('mouseup', mouseUpHandler);
3232
};
3333

3434
useEffect(() => {
3535
node.current.style.height = '50vh';
36-
},[]);
36+
}, []);
3737

3838
return (
39-
<div className="bottom-panel" id='resize' ref={node}>
40-
<div id='resize-drag' onMouseDown={mouseDownHandler} tabIndex = {0} >......</div>
41-
<BottomTabs isThemeLight={props.isThemeLight}/>
39+
<div className="bottom-panel" id="resize" ref={node}>
40+
<div id="resize-drag" onMouseDown={mouseDownHandler} tabIndex={0}>
41+
......
42+
</div>
43+
<BottomTabs isThemeLight={props.isThemeLight} />
4244
</div>
4345
);
4446
};

‎app/src/components/bottom/BottomTabs.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,7 @@ const BottomTabs = (props): JSX.Element => {
4141
const projectType = event.target.value;
4242
dispatch(changeProjectType({ projectType, contextParam }));
4343
};
44-
const { components, HTMLTypes } = state;
45-
46-
const changeTheme = (e) => {
47-
setTheme(e.target.value);
48-
};
44+
const { components } = state;
4945

5046
// Render's the highliting arrow feature that draws an arrow from the Canvas to the DemoRender
5147
arrow.renderArrow(state.canvasFocus?.childId);

‎app/src/components/bottom/UseStateModal.tsx‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,45 @@
1-
import React, {useState, useRef} from 'react';
1+
import React, { useState, useRef } from 'react';
22
import Modal from '@mui/material/Modal';
33
import TableStateProps from '../StateManagement/CreateTab/components/TableStateProps';
44

5-
function UseStateModal({ updateAttributeWithState, attributeToChange, childId }) {
5+
function UseStateModal({ updateAttributeWithState, attributeToChange }) {
66
const [open, setOpen] = useState(false);
77
const [stateKey, setStateKey] = useState('');
88
const [statePropsId, setStatePropsId] = useState(-1);
9-
const [componentProviderId, setComponentProviderId] = useState(1);
9+
const [componentProviderId, setComponentProviderId] = useState(1);
1010
const container = useRef(null);
1111
// table to choose state from
1212
const body = (
1313
<div className="useState-position">
1414
<div className="useState-header">
1515
<span>Choose State</span>
1616
<button
17-
style={{ margin: '5px 5px' ,padding: '1px', float: 'right' }}
17+
style={{ margin: '5px 5px', padding: '1px', float: 'right' }}
1818
onClick={() => {
1919
setStateKey('');
2020
setStatePropsId(-1);
21-
setOpen(false)}}
21+
setOpen(false);
22+
}}
2223
>
2324
X
24-
</button>
25+
</button>
2526
</div>
2627
<div className="useState-window">
2728
<div className="useState-stateDisplay">
2829
<TableStateProps
29-
providerId = {componentProviderId}
30-
canDeleteState = {false}
30+
providerId={componentProviderId}
31+
canDeleteState={false}
3132
selectHandler={(table) => {
32-
updateAttributeWithState(attributeToChange, componentProviderId, statePropsId > 0 ? statePropsId : table.row.id, table.row, stateKey + table.row.key);
33-
setStateKey('')
34-
setStatePropsId(-1);
35-
setOpen(false);
33+
updateAttributeWithState(
34+
attributeToChange,
35+
componentProviderId,
36+
statePropsId > 0 ? statePropsId : table.row.id,
37+
table.row,
38+
stateKey + table.row.key
39+
);
40+
setStateKey('');
41+
setStatePropsId(-1);
42+
setOpen(false);
3643
}}
3744
isThemeLight={true}
3845
/>
@@ -43,8 +50,12 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
4350

4451
return (
4552
<div ref={container}>
46-
<button className="useState-btn" onClick={() => setOpen(true)}>USE STATE</button>
47-
<Modal open={open} container={container.current}>{body}</Modal>
53+
<button className="useState-btn" onClick={() => setOpen(true)}>
54+
USE STATE
55+
</button>
56+
<Modal open={open} container={container.current}>
57+
{body}
58+
</Modal>
4859
</div>
4960
);
5061
}

‎app/src/helperFunctions/auth.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
const fetch = require('node-fetch');
22
const isDev = process.env.NODE_ENV === 'development';
33
const { DEV_PORT, API_BASE_URL } = require('../../../config');
4+
45
let serverURL = API_BASE_URL;
6+
7+
//checks if we're in dev mode or not to reset the serverURL to localhost:8080
58
if (isDev) {
69
serverURL = `http://localhost:${DEV_PORT}`;
710
}
11+
812
export const sessionIsCreated = (
913
username: string,
1014
password: string,
@@ -37,6 +41,7 @@ export const sessionIsCreated = (
3741
.catch((err) => 'Error');
3842
return result;
3943
};
44+
4045
export const newUserIsCreated = (
4146
username: string,
4247
email: string,

‎app/src/helperFunctions/cssRefresh.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// Removes old link to css and creates a new stylesheet link on demo render
2+
// this is not currently being used for the website version
23
const cssRefresher = () => {
34
const oldStylesheet = document.getElementById('Render Stylesheet')
45
console.log(oldStylesheet);

‎app/src/helperFunctions/generateCode.ts‎

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -468,33 +468,8 @@ const generateUnformattedCode = (
468468
);`
469469
generatedCode += `\n}`;
470470
return generatedCode;
471-
// return `${`import React, { useState, useEffect, useContext} from 'react';`}
472-
// ${currComponent.name === 'App' ? contextImports : ''}
473-
// ${
474-
// importReactRouter
475-
// ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';`
476-
// : ``
477-
// }
478-
// ${createContextImport()}
479-
// ${importsMapped}
480-
// ${`const ${currComponent.name} = (props) => {`}
481-
// ${createUseContextHook()}
482-
// ${`${writeStateProps(currComponent.useStateCodes)}`}
483-
// // ------------------------------------------- added code below -------------------------------------------
484-
// ${createEventHandler()}
485-
// // ------------------------------------------- added code above -------------------------------------------
486-
487-
// return(
488-
// <>
489-
// ${createRender()}
490-
// </>
491-
// );
492-
// ${`}\n`}
493-
// export default ${currComponent.name}
494-
// `;
495471
}
496-
//
497-
// next.js component code
472+
498473
else if (projectType === 'Next.js') {
499474
return `
500475
import React, { useState } from 'react';
@@ -549,8 +524,6 @@ const generateUnformattedCode = (
549524
};
550525
// formats code with prettier linter
551526
const formatCode = (code: string) => {
552-
// in test environment, window.api is not defined,
553-
// so we reference original prettier format function instead
554527
if (process.env.NODE_ENV === 'test') {
555528
const { format } = require('prettier');
556529
return format(code, {
@@ -560,8 +533,6 @@ const formatCode = (code: string) => {
560533
jsxBracketSameLine: true,
561534
parser: 'babel'
562535
});
563-
// } else if (process.env.NODE_ENV === 'production') {
564-
// return window.api.formatCode(code);
565536
} else {
566537
return code;
567538
}

0 commit comments

Comments
 (0)