Skip to content

Commit 5b5ebcc

Browse files
YohezeYoheze
authored
Merge pull request #4 from oslabs-beta/mike/rtkinstall
Mike/rtkinstall
2 parents af25ae0 + 1cf01c5 commit 5b5ebcc

File tree

17 files changed

+149
-162
lines changed

17 files changed

+149
-162
lines changed

‎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'

‎app/src/components/login/SignIn.tsx

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import React, { useState, useCallback, useEffect, createContext } from 'react';
1+
import React, { useState, useCallback, useEffect } from 'react';
22
import { LoginInt } from '../../interfaces/Interfaces';
33
import {
44
Link as RouteLink,
5-
withRouter,
65
RouteComponentProps
76
} from 'react-router-dom';
87
import { sessionIsCreated } from '../../helperFunctions/auth';
@@ -18,8 +17,9 @@ import Container from '@mui/material/Container';
1817
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
1918
import { newUserIsCreated } from '../../helperFunctions/auth';
2019
import randomPassword from '../../helperFunctions/randomPassword';
21-
import { connect } from 'react-redux';
22-
import * as actions from '../../redux/actions/actions.js';
20+
// Imports for redux toolkit usage
21+
import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
22+
import { useSelector, useDispatch } from 'react-redux';
2323

2424
import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
2525
import { SigninDark, SigninLight } from '../../../../app/src/public/styles/theme';
@@ -32,19 +32,6 @@ declare module '@mui/styles/defaultTheme' {
3232
interface DefaultTheme extends Theme {}
3333
}
3434

35-
36-
const mapDispatchToProps = (dispatch) => ({
37-
darkModeToggle: () => {
38-
dispatch(actions.darkModeToggle());
39-
}
40-
});
41-
42-
const mapStateToProps = (state) => {
43-
return {
44-
darkMode: state.darkModeSlice.darkMode
45-
}
46-
};
47-
4835
function Copyright() {
4936
return (
5037
<Typography variant="body2" color="textSecondary" align="center">
@@ -83,10 +70,13 @@ const useStyles = makeStyles(theme => ({
8370

8471
const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
8572
const classes = useStyles();
73+
const dispatch = useDispatch();
8674

8775
const [username, setUsername] = useState('');
8876
const [password, setPassword] = useState('');
8977

78+
const isDarkMode = useSelector(state => state.darkMode.isDarkMode);
79+
9080
const [invalidUserMsg, setInvalidUserMsg] = useState('');
9181
const [invalidPassMsg, setInvalidPassMsg] = useState('');
9282
const [invalidUser, setInvalidUser] = useState(false);
@@ -205,12 +195,17 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
205195
}
206196
};
207197

198+
// NEW DARK MODE
199+
const handleDarkModeToggle = () => {
200+
dispatch(toggleDarkMode());
201+
};
202+
208203
const classBtn =
209204
'MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-fullWidth';
210205

211206
return (
212207
<StyledEngineProvider injectFirst>
213-
<ThemeProvider theme={!props.darkMode ? SigninLight : SigninDark}>
208+
<ThemeProvider theme={!isDarkMode ? SigninLight : SigninDark}>
214209
<Container component="main" maxWidth="xs">
215210
<CssBaseline />
216211
<div className={classes.paper}>
@@ -224,13 +219,11 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
224219
}}
225220
// variant="contained"
226221
endIcon={
227-
props.darkMode ? <Brightness3Icon /> : <Brightness5Icon />
222+
!isDarkMode ? <Brightness3Icon /> : <Brightness5Icon />
228223
}
229-
onClick={() => {
230-
props.darkModeToggle();
231-
}}
224+
onClick={handleDarkModeToggle}
232225
>
233-
{`Dark Mode: ${props.darkMode}`}
226+
{isDarkMode ? `Light Mode`: `Dark Mode`}
234227
</Button>
235228
<Avatar className={classes.avatar}>
236229
<LockOutlinedIcon />
@@ -302,12 +295,12 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
302295
</Button>
303296
<Grid container>
304297
<Grid item xs>
305-
<RouteLink style={{color: props.darkMode ? '#aaaaaa' : 'black'}} to={`/signup`} className="nav_link">
298+
<RouteLink style={{color: isDarkMode ? '#aaaaaa' : 'black'}} to={`/signup`} className="nav_link">
306299
Forgot password?
307300
</RouteLink>
308301
</Grid>
309302
<Grid item>
310-
<RouteLink style={{color: props.darkMode ? '#aaaaaa' : 'black'}} to={`/signup`} className="nav_link">
303+
<RouteLink style={{color: isDarkMode ? '#aaaaaa' : 'black'}} to={`/signup`} className="nav_link">
311304
Don't have an account? Sign Up
312305
</RouteLink>
313306
</Grid>
@@ -322,4 +315,4 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
322315
);
323316
};
324317

325-
export default connect(mapStateToProps, mapDispatchToProps)(SignIn);
318+
export default SignIn;

0 commit comments

Comments
 (0)