Skip to content

Commit 4151646

Browse files
iancdavisiancdavis
committed
Merge branch 'dev' into ian/feature/working-with-react17
2 parents 5f8a9e6 + b73ed63 commit 4151646

29 files changed

+669
-474
lines changed

‎app/src/components/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const App = (): JSX.Element => {
9393
>
9494
ReacType
9595
</header>
96-
<StateContext.Provider value={[state, dispatch]}>
96+
<StateContext.Provider value = {[state, dispatch]}>
9797
<AppContainer />
9898
</StateContext.Provider>
9999
</DndProvider>

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React, { useContext, useState, Fragment, useEffect } from 'react';
22
import DataTable from '../CreateTab/components/DataTable';
3-
import { useStore, useDispatch } from 'react-redux';
43
import ContextDropDown from './components/ContextDropDown';
54
import ComponentDropDown from './components/ComponentDropDrown';
65
import Divider from '@mui/material/Divider';
76
import Grid from '@mui/material/Grid';
87
import ComponentTable from './components/ComponentTable';
98
import { Button } from '@mui/material';
109
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
11-
import * as actions from '../../../redux/actions/actions';
10+
// import * as actions from '../../../redux/actions/actions';
1211
import StateContext from '../../../context/context';
12+
import {addComponentToContext} from '../../../redux/reducers/slice/contextReducer'
13+
import {useSelector, useDispatch , useStore,} from 'react-redux';
1314

1415
const AssignContainer = () => {
1516
const store = useStore();
@@ -22,11 +23,12 @@ const AssignContainer = () => {
2223
const [componentInput, setComponentInput] = React.useState(null);
2324
const [componentTable, setComponentTable] = useState([]);
2425
const [stateContext, dispatchContext] = useContext(StateContext);
26+
const allContext = useSelector(state => state.contextSlice);
2527

2628
//fetching data from redux store
2729
useEffect(() => {
28-
setState(store.getState().contextSlice);
29-
}, []);
30+
setState(allContext);
31+
}, [allContext]);
3032

3133
const renderTable = targetContext => {
3234
if (targetContext === null || !targetContext.values) {
@@ -65,7 +67,7 @@ const AssignContainer = () => {
6567
)
6668
return;
6769
dispatch(
68-
actions.addComponentToContext({
70+
addComponentToContext({
6971
context: contextInput,
7072
component: componentInput
7173
})
@@ -76,7 +78,7 @@ const AssignContainer = () => {
7678
payload: 'FAKE_ID'
7779
});
7880

79-
setState(store.getState().contextSlice);
81+
// setState(allContext);
8082
renderComponentTable(componentInput);
8183
};
8284

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,36 @@
11
import React, { useEffect, useState, useContext } from 'react';
22
import { useStore } from 'react-redux';
3-
import { useDispatch } from 'react-redux';
43
import Divider from '@mui/material/Divider';
54
import Grid from '@mui/material/Grid';
65
import DataTable from './components/DataTable';
76
import AddDataForm from './components/AddDataForm';
87
import AddContextForm from './components/AddContextForm';
9-
import * as actions from '../../../redux/actions/actions';
8+
// import * as actions from '../../../redux/actions/actions';
109
import { Typography } from '@mui/material';
1110
import StateContext from '../../../context/context';
11+
import { addContext, addContextValues, deleteContext, getAllContext, addComponentToContext} from '../../../redux/reducers/slice/contextReducer';
12+
import {useSelector, useDispatch } from 'react-redux';
1213

1314
const CreateContainer = () => {
1415
const defaultTableData = [{ key: 'Enter Key', value: 'Enter value' }];
16+
const allContext = useSelector(state => state.contextSlice);
17+
1518
const store = useStore();
1619
const [state, setState] = useState([]);
1720
const [tableState, setTableState] = React.useState(defaultTableData);
1821
const [contextInput, setContextInput] = React.useState(null);
1922
const [stateContext, dispatchContext] = useContext(StateContext);
23+
const dispatch = useDispatch();
2024

2125
//pulling data from redux store
2226
useEffect(() => {
23-
setState(store.getState().contextSlice);
24-
}, []);
27+
console.log('allcon',allContext)
28+
setState(allContext)
29+
// setState(store.getState().contextSlice);
30+
31+
}, [allContext]);
32+
2533

26-
const dispatch = useDispatch();
2734

2835
//update data store when user adds a new context
2936
const handleClickSelectContext = () => {
@@ -34,23 +41,24 @@ const CreateContainer = () => {
3441
}
3542
}
3643
setContextInput('');
37-
dispatch(actions.addContextActionCreator(contextInput));
38-
setState(store.getState().contextSlice);
44+
dispatch(addContext(contextInput));
45+
46+
// setState(allContext);
3947
};
4048

4149
//update data store when user add new key-value pair to context
4250
const handleClickInputData = ({ name }, { inputKey, inputValue }) => {
4351
dispatch(
44-
actions.addContextValuesActionCreator({ name, inputKey, inputValue })
52+
addContext({ name, inputKey, inputValue })
4553
);
46-
setState(store.getState().contextSlice);
54+
// setState(allContext);
4755
};
4856

4957
//update data store when user deletes context
5058
const handleDeleteContextClick = () => {
51-
dispatch(actions.deleteContext(contextInput));
59+
dispatch(deleteContext(contextInput));
5260
setContextInput('');
53-
setState(store.getState().contextSlice);
61+
// setState(allContext);
5462
setTableState(defaultTableData);
5563
dispatchContext({
5664
type: 'DELETE ELEMENT',

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

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { unpkgPathPlugin } from '../../plugins/unpkg-path-plugin';
1515
import { fetchPlugin } from '../../plugins/fetch-plugin';
1616
import * as esbuild from 'esbuild-wasm';
1717
import store from '../../redux/store';
18+
import {codePreviewSave, codePreviewInput} from "../../redux/reducers/slice/codePreviewSlice";
19+
import { useDispatch } from 'react-redux';
1820
// import { store } from './../../index';
1921
const CodePreview: React.FC<{
2022
theme: string | null;
@@ -31,6 +33,7 @@ const CodePreview: React.FC<{
3133
wasmURL: 'https://unpkg.com/[email protected]/esbuild.wasm'
3234
});
3335
};
36+
const dispatch = useDispatch();
3437

3538
const wrapper = useRef();
3639
const dimensions = useResizeObserver(wrapper);
@@ -54,10 +57,11 @@ const CodePreview: React.FC<{
5457

5558
useEffect(() => {
5659
setInput(currentComponent.code);
57-
store.dispatch({
58-
type: 'CODE_PREVIEW_INPUT',
59-
payload: currentComponent.code
60-
});
60+
dispatch(codePreviewInput(currentComponent.code));
61+
// store.dispatch({
62+
// type: 'CODE_PREVIEW_INPUT',
63+
// payload: currentComponent.code
64+
// });
6165
}, [currentComponent, state.components]);
6266

6367
/**
@@ -67,7 +71,8 @@ const CodePreview: React.FC<{
6771
const handleChange = async (data) => {
6872
// console.log('changed');
6973
setInput(data);
70-
store.dispatch({ type: 'CODE_PREVIEW_INPUT', payload: data });
74+
dispatch(codePreviewInput(data));
75+
// store.dispatch({ type: 'CODE_PREVIEW_INPUT', payload: data });
7176
if (!ref.current) {
7277
return;
7378
}
@@ -83,10 +88,11 @@ const CodePreview: React.FC<{
8388
global: 'window'
8489
}
8590
});
86-
store.dispatch({
87-
type: 'CODE_PREVIEW_SAVE',
88-
payload: result.outputFiles[0].text
89-
});
91+
dispatch(codePreviewSave(result.outputFiles[0].text))
92+
// store.dispatch({
93+
// type: 'CODE_PREVIEW_SAVE',
94+
// payload: result.outputFiles[0].text
95+
// });
9096
};
9197

9298
return (

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Grid from '@mui/material/Grid';
33
import StateContext from '../../context/context';
44
import HTMLItem from './HTMLItem';
55

6+
import { useSelector } from 'react-redux';
7+
68
/*
79
DESCRIPTION: This is the top half of the left panel, starting from the 'HTML
810
Elements' header. The boxes containing each HTML element are rendered in
@@ -18,7 +20,8 @@ Hook state:
1820
// Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
1921
const DragDropPanel = (props): JSX.Element => {
2022
const [state, dispatch] = useContext(StateContext);
21-
const { isThemeLight } = props;
23+
// const { isThemeLight } = props;
24+
const isDarkMode = useSelector(state => state.darkMode.isDarkMode);
2225

2326
const handleDelete = (id: number): void => {
2427
dispatch({
@@ -34,7 +37,7 @@ const DragDropPanel = (props): JSX.Element => {
3437
<Grid
3538
id="HTMLItemsGrid"
3639
>
37-
<h3 style={ {color: isThemeLight ? '#000' : '#fff'} }>HTML ELEMENTS</h3>
40+
<h3 style={ {color: !isDarkMode ? '#000' : '#fff'} }>HTML ELEMENTS</h3>
3841
{htmlTypesToRender.map(option => {
3942
if (!['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(option.name)) {
4043
return (
@@ -44,13 +47,13 @@ const DragDropPanel = (props): JSX.Element => {
4447
id={option.id}
4548
Icon={option.icon}
4649
handleDelete={handleDelete}
47-
isThemeLight={isThemeLight}
50+
4851
/>
4952
);
5053
}
5154

5255
})}
53-
{state.projectType === "Classic React" ? <h3 style={ {color: isThemeLight ? '#000' : '#fff' } }>REACT ROUTER</h3> : null}
56+
{state.projectType === "Classic React" ? <h3 style={ {color: !isDarkMode ? '#000' : '#fff' } }>REACT ROUTER</h3> : null}
5457
{htmlTypesToRender.map(option => {
5558
if ((option.name === 'Switch' || option.name === 'LinkTo' || option.name === 'Route') && state.projectType === "Classic React") {
5659
return (
@@ -60,13 +63,13 @@ const DragDropPanel = (props): JSX.Element => {
6063
id={option.id}
6164
Icon={option.icon}
6265
handleDelete={handleDelete}
63-
isThemeLight={isThemeLight}
66+
6467
/>
6568
);
6669
}
6770
})}
6871

69-
{state.projectType === "Next.js" ? <h3 style={ {color: isThemeLight? '#000': "#fff"} }>Next.js</h3> : null}
72+
{state.projectType === "Next.js" ? <h3 style={ {color: !isDarkMode? '#000': "#fff"} }>Next.js</h3> : null}
7073
{htmlTypesToRender.map(option => {
7174
if ((option.framework === 'nextjs') && state.projectType === "Next.js") {
7275
return (
@@ -76,7 +79,7 @@ const DragDropPanel = (props): JSX.Element => {
7679
id={option.id}
7780
Icon={option.icon}
7881
handleDelete={handleDelete}
79-
isThemeLight={isThemeLight}
82+
8083
/>
8184
);
8285
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import List from '@mui/material/List';
77
import ListItem from '@mui/material/ListItem';
88
import ListItemText from '@mui/material/ListItemText';
99
import createModal from '../right/createModal';
10+
import { useSelector } from 'react-redux';
1011

1112
const useStyles = makeStyles({
1213
HTMLPanelItem: {
@@ -40,12 +41,11 @@ const HTMLItem : React.FC<{
4041
id: number;
4142
Icon: any;
4243
handleDelete: (id: number) => void;
43-
isThemeLight: boolean;
44-
}> = ({ name, id, Icon, handleDelete, isThemeLight }) => {
44+
}> = ({ name, id, Icon, handleDelete }) => {
4545

4646
const classes = useStyles();
4747
const [modal, setModal] = useState(null);
48-
48+
const isDarkMode = useSelector(state => state.darkMode.isDarkMode);
4949
const [{ isDragging }, drag] = useDrag({
5050
item: {
5151
type: ItemTypes.INSTANCE,
@@ -120,16 +120,16 @@ const HTMLItem : React.FC<{
120120
return ( // HTML Elements
121121
<Grid item xs={5} key={`html-g${name}`}>
122122
{ id <= 20 &&
123-
<div ref={drag} style={ { borderColor: isThemeLight? '#000' : '#fff' } } className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
123+
<div ref={drag} style={ { borderColor: !isDarkMode ? '#000' : '#fff' } } className={!isDarkMode ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
124124
<h3>{name}</h3>
125125
</div>
126126
}
127127
{ id > 20 &&
128128
<span id="customHTMLElement">
129-
<div ref={drag} style={ { borderColor: isThemeLight? '#000' : '#fff' } } className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
129+
<div ref={drag} style={ { borderColor: !isDarkMode ? '#000' : '#fff' } } className={!isDarkMode ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
130130
<h3>{name}</h3>
131131
</div>
132-
<button id="newElement" style={{color: isThemeLight ? '#186BB4' : 'white' }} onClick={() => deleteAllInstances(id)} >X</button>
132+
<button id="newElement" style={{color: !isDarkMode ? '#186BB4' : 'white' }} onClick={() => deleteAllInstances(id)} >X</button>
133133
</span>
134134
}
135135
{modal}

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useCallback, useContext, useEffect } from 'react';
22
import StateContext from '../../context/context';
3+
import { useSelector } from 'react-redux';
34

45
import { styled } from '@mui/material/styles';
56
import makeStyles from '@mui/styles/makeStyles';
@@ -30,7 +31,8 @@ const HTMLPanel = (props): JSX.Element => {
3031
const [errorMsg, setErrorMsg] = useState('');
3132
const [errorStatus, setErrorStatus] = useState(false);
3233
const [state, dispatch] = useContext(StateContext);
33-
const {isThemeLight} = props;
34+
// const {isDarkMode} = props;
35+
const isDarkMode = useSelector(state => state.darkMode.isDarkMode);
3436
let startingID = 0;
3537
state.HTMLTypes.forEach(element => {
3638
if (element.id >= startingID) startingID = element.id;
@@ -160,8 +162,8 @@ const HTMLPanel = (props): JSX.Element => {
160162
<div className={classes.inputWrapper}>
161163
<form onSubmit={handleSubmit} className="customForm">
162164

163-
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor } value = "New HTML Tag">New HTML Tag: </h4>
164-
<InputLabel className={isThemeLight ? `${classes.inputLabel} ${classes.lightThemeFontColor}` : `${classes.inputLabel} ${classes.darkThemeFontColor}`}>
165+
<h4 className={!isDarkMode ? classes.lightThemeFontColor : classes.darkThemeFontColor } value = "New HTML Tag">New HTML Tag: </h4>
166+
<InputLabel className={!isDarkMode ? `${classes.inputLabel} ${classes.lightThemeFontColor}` : `${classes.inputLabel} ${classes.darkThemeFontColor}`}>
165167
Tag:
166168
</InputLabel>
167169
<TextField
@@ -173,22 +175,22 @@ const HTMLPanel = (props): JSX.Element => {
173175
value={tag}
174176
autoComplete="off"
175177
onChange={handleTagChange}
176-
className={isThemeLight ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
178+
className={!isDarkMode ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
177179
style={{ margin: '10px' }}
178180
InputProps={{
179181
style: {
180-
color: isThemeLight ? 'black' : 'white'
182+
color: !isDarkMode ? 'black' : 'white'
181183
}
182184
}}
183185
/>
184186

185187
{(!tag.charAt(0).match(/[A-Za-z]/) || !alphanumeric(tag) || tag.trim() === '' || checkNameDupe(tag))
186-
&& <span className={isThemeLight ? `${classes.errorMessage} ${classes.errorMessageLight}` : `${classes.errorMessage} ${classes.errorMessageDark}`}>
188+
&& <span className={!isDarkMode ? `${classes.errorMessage} ${classes.errorMessageLight}` : `${classes.errorMessage} ${classes.errorMessageDark}`}>
187189
<em>{errorMsg}</em>
188190
</span>}
189191

190192
<br></br>
191-
<InputLabel className={isThemeLight ? `${classes.inputLabel} ${classes.lightThemeFontColor}` : `${classes.inputLabel} ${classes.darkThemeFontColor}`}>
193+
<InputLabel className={!isDarkMode ? `${classes.inputLabel} ${classes.lightThemeFontColor}` : `${classes.inputLabel} ${classes.darkThemeFontColor}`}>
192194
Element Name:
193195
</InputLabel>
194196
<TextField
@@ -200,21 +202,21 @@ const HTMLPanel = (props): JSX.Element => {
200202
value={name}
201203
onChange={handleNameChange}
202204
autoComplete="off"
203-
className={isThemeLight ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
205+
className={!isDarkMode ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
204206
style={{}}
205207
InputProps={{
206208
style: {
207-
color: isThemeLight ? 'black' : 'white'
209+
color: !isDarkMode ? 'black' : 'white'
208210
}
209211
}}
210212
/>
211213
{(!name.charAt(0).match(/[A-Za-z]/) || !alphanumeric(name) || name.trim() === '' || name.length > 10 || checkNameDupe(name))
212-
&& <span className={isThemeLight ? `${classes.errorMessage} ${classes.errorMessageLight}` : `${classes.errorMessage} ${classes.errorMessageDark}`}>
214+
&& <span className={!isDarkMode ? `${classes.errorMessage} ${classes.errorMessageLight}` : `${classes.errorMessage} ${classes.errorMessageDark}`}>
213215
<em>{errorMsg}</em>
214216
</span>}
215217
<br></br>
216218
<Button
217-
className={isThemeLight ? `${classes.addElementButton} ${classes.lightThemeFontColor}` : `${classes.addElementButton} ${classes.darkThemeFontColor}`}
219+
className={!isDarkMode ? `${classes.addElementButton} ${classes.lightThemeFontColor}` : `${classes.addElementButton} ${classes.darkThemeFontColor}`}
218220
id="submitButton"
219221
type="submit"
220222
color='primary'

0 commit comments

Comments
 (0)