Skip to content

Commit 1b6c324

Browse files
namos2502namos2502
committed
Merge branch 'new' into nam
2 parents 379a43c + 0d5e888 commit 1b6c324

30 files changed

+757
-487
lines changed

‎app/src/components/App.tsx

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import { saveProject } from '../helperFunctions/projectGetSaveDel';
1717

1818
// Intermediary component to wrap main App component with higher order provider components
1919
export const App = (): JSX.Element => {
20-
const state = useSelector((store: RootState) => store.appState);
21-
20+
// const state = useSelector((store: RootState) => store.appState);
21+
2222
const dispatch = useDispatch();
2323
// checks if user is signed in as guest or actual user and changes loggedIn boolean accordingly
2424
useEffect(() => {
@@ -29,21 +29,21 @@ export const App = (): JSX.Element => {
2929

3030
// FOR LOCAL FORAGE: still trying to get this to work
3131

32-
// following useEffect runs on first mount
32+
// // following useEffect runs on first mount
3333
// useEffect(() => {
34-
// // console.log('cookies.get in App', Cookies.get())
34+
// console.log('cookies.get in App', Cookies.get());
3535
// // if user is a guest, see if a project exists in localforage and retrieve it
36-
// // v17 May not currently work yet
36+
// // v17: May not currently work yet
3737
// if (!state.isLoggedIn) {
3838
// localforage.getItem('guestProject').then((project) => {
3939
// // if project exists, use dispatch to set initial state to that project
40+
// console.log('local forage get project', project);
4041
// if (project) {
4142
// dispatch(setInitialState(project));
4243
// }
4344
// });
4445
// } else {
4546
// // otherwise if a user is logged in, use a fetch request to load user's projects from DB
46-
4747
// let userId;
4848
// if (Cookies.get('ssid')) {
4949
// userId = Cookies.get('ssid');
@@ -62,24 +62,26 @@ export const App = (): JSX.Element => {
6262
// });
6363
// }
6464
// }, []);
65+
66+
// // New project save configuration to optimize server load and minimize Ajax requests
6567
// useEffect(() => {
6668
// // provide config properties to legacy projects so new edits can be auto saved
67-
// // if (state.config === undefined) {
68-
// // state.config = { saveFlag: true, saveTimer: false };
69-
// // }
70-
// // New project save configuration to optimize server load and minimize Ajax requests
69+
// if (state.config === undefined) {
70+
// state.config = { saveFlag: true, saveTimer: false };
71+
// }
72+
7173
// if (state.config.saveFlag) {
72-
// // state.config.saveFlag = false;
73-
// // state.config.saveTimer = true;
74-
// // dispatch(configToggle())
74+
// state.config.saveFlag = false;
75+
// state.config.saveTimer = true;
76+
// //dispatch(configToggle());
7577

7678
// let userId;
7779
// if (Cookies.get('ssid')) {
7880
// userId = Cookies.get('ssid');
7981
// } else {
8082
// userId = window.localStorage.getItem('ssid');
8183
// }
82-
// // if (state.isLoggedIn === false) {
84+
8385
// if (!state.isLoggedIn) {
8486
// localforage.setItem('guestProject', state);
8587
// } else if (state.name !== '') {
@@ -95,18 +97,15 @@ export const App = (): JSX.Element => {
9597
// }
9698
// }, [state]);
9799

98-
99100
return (
100101
<div className="app">
101-
102-
<header
103-
style={{ height: '40px', width: '100%', backgroundColor: 'white' }}
104-
>
105-
ReacType
106-
</header>
102+
<header
103+
style={{ height: '40px', width: '100%', backgroundColor: 'white' }}
104+
>
105+
ReacType
106+
</header>
107107

108-
<AppContainer />
109-
108+
<AppContainer />
110109
</div>
111110
);
112111
};

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ const AddContextForm = ({
2525
const { allContext } = contextStore;
2626
const [btnDisabled, setBtnDisabled] = useState(false);
2727
const [open, setOpen] = useState(false);
28-
const { state } = useSelector((store: RootState) => ({
29-
state: store.appState
30-
}));
28+
// const { state } = useSelector((store: RootState) => ({
29+
// state: store.appState
30+
// }));
3131

3232
const color = 'white';
3333

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import TextField from '@mui/material/TextField';
33
import Button from '@mui/material/Button';
44
import Box from '@mui/material/Box';
55
import { Typography } from '@mui/material';
6-
import { useSelector } from 'react-redux';
7-
import { RootState } from '../../../../redux/store';
6+
// import { useSelector } from 'react-redux';
7+
// import { RootState } from '../../../../redux/store';
88

99
const AddDataForm = ({ handleClickInputData, currentContext }) => {
1010
//const [contextInput, setContextInput] = React.useState(null);

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

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
import React, { useState, useEffect } from 'react';
2-
import {
3-
DataGrid,
4-
GridEditRowsModel
5-
} from '@mui/x-data-grid';
2+
import { DataGrid, GridEditRowsModel } from '@mui/x-data-grid';
63
import Button from '@mui/material/Button';
74
import ClearIcon from '@mui/icons-material/Clear';
85
import makeStyles from '@mui/styles/makeStyles';
96
import { useDispatch, useSelector } from 'react-redux';
107
import { deletePassedInProps } from '../../../../redux/reducers/slice/appStateSlice';
11-
import { RootState } from '../../../../redux/store'
8+
import { RootState } from '../../../../redux/store';
9+
import { ColumnTab } from '../../../../interfaces/Interfaces';
1210

13-
14-
const TablePassedInProps = props => {
15-
const { state, contextParam } = useSelector((store:RootState) => ({
11+
const TablePassedInProps = (props) => {
12+
const { state, contextParam } = useSelector((store: RootState) => ({
1613
state: store.appState,
17-
contextParam: store.contextSlice,
14+
contextParam: store.contextSlice
1815
}));
1916
const dispatch = useDispatch();
2017
const classes = useStyles();
2118
const [editRowsModel] = useState<GridEditRowsModel>({});
2219
const [gridColumns, setGridColumns] = useState([]);
2320
const currentId = state.canvasFocus.componentId;
2421
const currentComponent = state.components[currentId - 1];
25-
const passedInProps = (currentComponent.name !== 'App' && currentComponent.name !== 'index') ? currentComponent.passedInProps : [];
22+
const passedInProps =
23+
currentComponent.name !== 'App' && currentComponent.name !== 'index'
24+
? currentComponent.passedInProps
25+
: [];
2626

2727
//formatting for data grid columns
28-
const columnTabs = [
28+
const columnTabs: ColumnTab[] = [
2929
{
3030
field: 'id',
3131
headerName: 'ID',
@@ -66,7 +66,6 @@ const TablePassedInProps = props => {
6666
>
6767
<ClearIcon style={{ width: `${15}px` }} />
6868
</Button>
69-
7069
);
7170
}
7271
}
@@ -76,7 +75,7 @@ const TablePassedInProps = props => {
7675
// get the current focused component
7776
// remove the state that the button is clicked
7877
// send a dispatch to rerender the table
79-
dispatch(deletePassedInProps({ rowId: rowId, contextParam: contextParam }))
78+
dispatch(deletePassedInProps({ rowId: rowId, contextParam: contextParam }));
8079
};
8180

8281
useEffect(() => {
@@ -89,14 +88,12 @@ const TablePassedInProps = props => {
8988
} else {
9089
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
9190
}
92-
9391
}, [state.canvasFocus.componentId]);
9492

9593
// fill data grid rows with all of the passed in props from parent component (if there are any)
9694
let rows: any = passedInProps?.slice();
9795
//let rows: readonly StateProp[] = passedInProps?.slice() || [];
9896

99-
10097
return (
10198
<div className={'state-prop-grid'}>
10299
<DataGrid
@@ -115,10 +112,10 @@ const TablePassedInProps = props => {
115112
const useStyles = makeStyles({
116113
themeLight: {
117114
color: 'white',
118-
'& button:hover':{
115+
'& button:hover': {
119116
backgroundColor: 'LightGray'
120117
},
121-
'& button':{
118+
'& button': {
122119
color: 'white'
123120
},
124121
'& .MuiTablePagination-root': {

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

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,28 @@
11
import React, { useState, useEffect } from 'react';
2-
import {
3-
DataGrid,
4-
GridEditRowsModel
5-
} from '@mui/x-data-grid';
2+
import { DataGrid, GridEditRowsModel } from '@mui/x-data-grid';
63
import Button from '@mui/material/Button';
74
import ClearIcon from '@mui/icons-material/Clear';
85
import makeStyles from '@mui/styles/makeStyles';
96
import { StatePropsPanelProps } from '../../../../interfaces/Interfaces';
107
import { useDispatch, useSelector } from 'react-redux';
118
import { deleteState } from '../../../../redux/reducers/slice/appStateSlice';
12-
import { RootState } from '../../../../redux/store'
13-
14-
// updates state mgmt boxes and data grid
15-
const TableStateProps = props => {
16-
const { state, contextParam } = useSelector((store:RootState) => ({
9+
import { RootState } from '../../../../redux/store';
10+
import { ColumnTab } from '../../../../interfaces/Interfaces';
11+
// updates state mgmt boxes and data grid
12+
const TableStateProps = (props) => {
13+
const { state, contextParam } = useSelector((store: RootState) => ({
1714
state: store.appState,
18-
contextParam: store.contextSlice,
15+
contextParam: store.contextSlice
1916
}));
2017
const dispatch = useDispatch();
2118
const classes = useStyles();
2219
const [editRowsModel] = useState<GridEditRowsModel>({});
2320
const [gridColumns, setGridColumns] = useState([]);
2421
const currentId = state.canvasFocus.componentId;
2522
const currentComponent = state.components[currentId - 1];
26-
27-
// formatting for data grid columns
28-
const columnTabs = [
23+
24+
// formatting for data grid columns
25+
const columnTabs: ColumnTab[] = [
2926
{
3027
field: 'id',
3128
headerName: 'ID',
@@ -43,10 +40,10 @@ const TableStateProps = props => {
4340
headerName: 'Initial Value',
4441
width: 100,
4542
editable: true,
46-
valueGetter: (param) => { //to display the actual object or array instead of [object Object], leave undefined if it is setter function
47-
if(param.row.type === 'func')
48-
return;
49-
return JSON.stringify(param.row.value)
43+
valueGetter: (param) => {
44+
//to display the actual object or array instead of [object Object], leave undefined if it is setter function
45+
if (param.row.type === 'func') return;
46+
return JSON.stringify(param.row.value);
5047
}
5148
},
5249
{
@@ -63,7 +60,7 @@ const TableStateProps = props => {
6360
renderCell: function renderCell(params: any) {
6461
return (
6562
<Button
66-
style={{ width: `${3}px`, color: 'black'}}
63+
style={{ width: `${3}px`, color: 'black' }}
6764
onClick={() => {
6865
handleDeleteState(params.id);
6966
}}
@@ -76,32 +73,39 @@ const TableStateProps = props => {
7673
];
7774

7875
const handleDeleteState = (selectedId) => {
79-
const currentId = state.canvasFocus.componentId;
80-
const currentComponent = state.components[currentId - 1];
81-
const filtered = currentComponent.stateProps.filter(
82-
element => element.id !== selectedId
83-
);
84-
dispatch(deleteState({stateProps: filtered, rowId: selectedId, contextParam: contextParam}))
76+
const currentId = state.canvasFocus.componentId;
77+
const currentComponent = state.components[currentId - 1];
78+
const filtered = currentComponent.stateProps.filter(
79+
(element) => element.id !== selectedId
80+
);
81+
dispatch(
82+
deleteState({
83+
stateProps: filtered,
84+
rowId: selectedId,
85+
contextParam: contextParam
86+
})
87+
);
8588
};
8689

8790
useEffect(() => {
8891
setGridColumns(columnTabs);
8992
}, [props.isThemeLight]);
9093

9194
const { selectHandler }: StatePropsPanelProps = props;
92-
95+
9396
useEffect(() => {
9497
if (props.canDeleteState) {
9598
setGridColumns(columnTabs);
9699
} else {
97100
setGridColumns(columnTabs.slice(0, gridColumns.length - 1));
98101
}
99-
100102
}, [state.canvasFocus.componentId]);
101103

102104
// rows to show are either from current component or from a given provider
103105
let rows = [];
104-
currentComponent.stateProps?.forEach((prop) =>{ rows.push(prop)});
106+
currentComponent.stateProps?.forEach((prop) => {
107+
rows.push(prop);
108+
});
105109

106110
return (
107111
<div className={'state-prop-grid'}>
@@ -122,10 +126,10 @@ const TableStateProps = props => {
122126
const useStyles = makeStyles({
123127
themeLight: {
124128
color: 'white',
125-
'& button:hover':{
129+
'& button:hover': {
126130
backgroundColor: 'LightGray'
127131
},
128-
'& button':{
132+
'& button': {
129133
color: 'white'
130134
}
131135
},

‎app/src/components/left/ElementsContainer.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@ import ComponentDrag from './ComponentDrag';
66
import DragDropPanel from './DragDropPanel';
77

88
import { deleteChild } from '../../redux/reducers/slice/appStateSlice';
9+
import { RootState } from '../../redux/store';
910

1011
// Left-hand portion of the app, where component options are displayed
1112
const ElementsContainer = (props): JSX.Element => {
1213
const [selectedTab, setSelectedTab] = React.useState('files');
1314

14-
const { contextParam, style } = useSelector((store) => ({
15+
const { contextParam, style } = useSelector((store: RootState) => ({
1516
contextParam: store.contextSlice,
1617
style: store.styleSlice
1718
}));

‎app/src/components/left/HTMLItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { RootState } from '../../redux/store';
99
import createModal from '../right/createModal';
1010
import makeStyles from '@mui/styles/makeStyles';
1111
import { useDrag } from 'react-dnd';
12-
import { useSelector } from 'react-redux';
12+
// import { useSelector } from 'react-redux';
1313

1414
const useStyles = makeStyles({
1515
HTMLPanelItem: {

0 commit comments

Comments
 (0)