Skip to content

Commit f97c936

Browse files
dentonwongdentonwong
authored
Merge pull request #5 from oslabs-beta/victor/routing
add router fix
2 parents 270bf47 + d1b3713 commit f97c936

File tree

9 files changed

+224
-151
lines changed

9 files changed

+224
-151
lines changed

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

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
1-
import React, { useState, useCallback, useEffect } from 'react';
2-
import { LoginInt } from '../../interfaces/Interfaces';
3-
import { Link as RouteLink, RouteComponentProps } from 'react-router-dom';
4-
import { sessionIsCreated } from '../../helperFunctions/auth';
1+
import React, { useCallback, useEffect, useState } from 'react';
2+
import { RouteComponentProps, Link as RouteLink } from 'react-router-dom';
3+
import {
4+
SigninDark,
5+
SigninLight
6+
} from '../../../../app/src/public/styles/theme';
7+
import {
8+
StyledEngineProvider,
9+
Theme,
10+
ThemeProvider
11+
} from '@mui/material/styles';
12+
import { useDispatch, useSelector } from 'react-redux';
13+
514
import Avatar from '@mui/material/Avatar';
15+
import Box from '@mui/material/Box';
16+
import Brightness3Icon from '@mui/icons-material/Brightness3';
17+
import Brightness5Icon from '@mui/icons-material/Brightness5';
618
import Button from '@mui/material/Button';
19+
import Container from '@mui/material/Container';
720
import CssBaseline from '@mui/material/CssBaseline';
8-
import TextField from '@mui/material/TextField';
921
import Grid from '@mui/material/Grid';
10-
import Box from '@mui/material/Box';
22+
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
23+
import { LoginInt } from '../../interfaces/Interfaces';
24+
import { RootState } from '../../redux/store';
25+
import TextField from '@mui/material/TextField';
1126
import Typography from '@mui/material/Typography';
27+
import config from '../../../../config.js';
1228
import makeStyles from '@mui/styles/makeStyles';
13-
import Container from '@mui/material/Container';
14-
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
1529
import { newUserIsCreated } from '../../helperFunctions/auth';
1630
import randomPassword from '../../helperFunctions/randomPassword';
31+
import { sessionIsCreated } from '../../helperFunctions/auth';
1732
import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
18-
import { useSelector, useDispatch } from 'react-redux';
19-
import {
20-
ThemeProvider,
21-
Theme,
22-
StyledEngineProvider
23-
} from '@mui/material/styles';
24-
import {
25-
SigninDark,
26-
SigninLight
27-
} from '../../../../app/src/public/styles/theme';
28-
import Brightness3Icon from '@mui/icons-material/Brightness3';
29-
import Brightness5Icon from '@mui/icons-material/Brightness5';
30-
import { RootState } from '../../redux/store';
3133

32-
import config from '../../../../config.js';
3334
const { API_BASE_URL } = config;
3435

3536
declare module '@mui/styles/defaultTheme' {
@@ -286,7 +287,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
286287
width="16"
287288
height="16"
288289
fill="currentColor"
289-
class="bi bi-person-check"
290+
className="bi bi-person-check"
290291
viewBox="0 0 16 16"
291292
style={{ marginLeft: '5px' }}
292293
>
@@ -311,7 +312,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
311312
width="16"
312313
height="16"
313314
fill="currentColor"
314-
class="bi bi-github"
315+
className="bi bi-github"
315316
viewBox="0 0 16 16"
316317
style={{ marginLeft: '5px' }}
317318
>
@@ -337,7 +338,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
337338
width="16"
338339
height="16"
339340
fill="currentColor"
340-
class="bi bi-google"
341+
className="bi bi-google"
341342
viewBox="0 0 16 16"
342343
style={{ marginLeft: '5px' }}
343344
>
@@ -360,7 +361,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = (props) => {
360361
width="16"
361362
height="16"
362363
fill="currentColor"
363-
class="bi bi-person-circle"
364+
className="bi bi-person-circle"
364365
viewBox="0 0 16 16"
365366
style={{ marginLeft: '5px' }}
366367
>

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

Lines changed: 59 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,34 @@
11
import React, { useState } from 'react';
2-
import { LoginInt } from '../../interfaces/Interfaces';
32
import {
3+
RouteComponentProps,
44
Link as RouteLink,
5-
withRouter,
6-
RouteComponentProps
5+
withRouter
76
} from 'react-router-dom';
8-
import { newUserIsCreated } from '../../helperFunctions/auth';
7+
import {
8+
SigninDark,
9+
SigninLight
10+
} from '../../../../app/src/public/styles/theme';
11+
import {
12+
StyledEngineProvider,
13+
Theme,
14+
ThemeProvider
15+
} from '@mui/material/styles';
16+
import { useDispatch, useSelector } from 'react-redux';
17+
18+
import AssignmentIcon from '@mui/icons-material/Assignment';
919
import Avatar from '@mui/material/Avatar';
20+
import Box from '@mui/material/Box';
1021
import Button from '@mui/material/Button';
22+
import Container from '@mui/material/Container';
1123
import CssBaseline from '@mui/material/CssBaseline';
12-
import TextField from '@mui/material/TextField';
1324
import Grid from '@mui/material/Grid';
14-
import Box from '@mui/material/Box';
25+
import { LoginInt } from '../../interfaces/Interfaces';
26+
import { RootState } from '../../redux/store';
27+
import TextField from '@mui/material/TextField';
1528
import Typography from '@mui/material/Typography';
1629
import makeStyles from '@mui/styles/makeStyles';
17-
import Container from '@mui/material/Container';
18-
import AssignmentIcon from '@mui/icons-material/Assignment';
30+
import { newUserIsCreated } from '../../helperFunctions/auth';
1931
import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
20-
import { useSelector, useDispatch } from 'react-redux';
21-
import { ThemeProvider, Theme, StyledEngineProvider } from '@mui/material/styles';
22-
import { SigninDark, SigninLight } from '../../../../app/src/public/styles/theme';
23-
import { RootState } from '../../redux/store';
2432

2533
declare module '@mui/styles/defaultTheme' {
2634
// eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -37,7 +45,7 @@ function Copyright() {
3745
);
3846
}
3947

40-
const useStyles = makeStyles(theme => ({
48+
const useStyles = makeStyles((theme) => ({
4149
paper: {
4250
display: 'flex',
4351
flexDirection: 'column',
@@ -47,18 +55,17 @@ const useStyles = makeStyles(theme => ({
4755
backgroundColor: '#3EC1AC'
4856
},
4957
form: {
50-
width: '100%', // Fix IE 11 issue.
51-
},
52-
submit: {
58+
width: '100%' // Fix IE 11 issue.
5359
},
60+
submit: {},
5461
root: {
5562
'& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
5663
borderColor: '#3EC1AC'
5764
}
5865
}
5966
}));
6067

61-
const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
68+
const SignUp: React.FC<LoginInt & RouteComponentProps> = (props) => {
6269
const classes = useStyles();
6370
const dispatch = useDispatch();
6471
const [email, setEmail] = useState('');
@@ -73,7 +80,9 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
7380
const [invalidUsername, setInvalidUsername] = useState(false);
7481
const [invalidPassword, setInvalidPassword] = useState(false);
7582
const [invalidVerifyPassword, setInvalidVerifyPassword] = useState(false);
76-
const isDarkMode = useSelector((store:RootState) => store.darkMode.isDarkMode);
83+
const isDarkMode = useSelector(
84+
(store: RootState) => store.darkMode.isDarkMode
85+
);
7786

7887
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
7988
let inputVal = e.target.value;
@@ -172,7 +181,7 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
172181
setInvalidVerifyPassword(false);
173182
}
174183

175-
newUserIsCreated(username, email, password).then(userCreated => {
184+
newUserIsCreated(username, email, password).then((userCreated) => {
176185
if (userCreated === 'Success') {
177186
props.history.push('/');
178187
} else {
@@ -190,11 +199,10 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
190199
});
191200
};
192201

193-
//NEW DARK MODE
194-
const handleDarkModeToggle = () => {
195-
dispatch(toggleDarkMode());
196-
197-
};
202+
//NEW DARK MODE
203+
const handleDarkModeToggle = () => {
204+
dispatch(toggleDarkMode());
205+
};
198206

199207
return (
200208
<StyledEngineProvider injectFirst>
@@ -204,20 +212,25 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
204212
<div className={classes.paper}>
205213
<Button
206214
color="primary"
207-
style={{
215+
style={{
208216
minWidth: '113.97px',
209217
top: 10,
210218
right: 20,
211-
position: "absolute"
219+
position: 'absolute'
212220
}}
213221
onClick={handleDarkModeToggle}
214222
>
215223
{`Dark Mode: ${isDarkMode}`}
216224
</Button>
217-
<Avatar className={classes.avatar} sx={{marginTop: '10vh'}}>
225+
<Avatar className={classes.avatar} sx={{ marginTop: '10vh' }}>
218226
<AssignmentIcon />
219227
</Avatar>
220-
<Typography component="h1" variant="h5" color="textPrimary" sx={{marginBottom: '10px'}}>
228+
<Typography
229+
component="h1"
230+
variant="h5"
231+
color="textPrimary"
232+
sx={{ marginBottom: '10px' }}
233+
>
221234
Sign up
222235
</Typography>
223236
<form className={classes.form} noValidate>
@@ -296,21 +309,33 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
296309
variant="contained"
297310
color="primary"
298311
className={classes.submit}
299-
onClick={e => handleSignUp(e)}
312+
onClick={(e) => handleSignUp(e)}
300313
sx={{
301314
marginTop: '15px',
302315
marginBottom: '5px'
303316
}}
304317
>
305318
Sign Up
306-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-add" viewBox="0 0 16 16" style={{marginLeft: '5px'}}>
307-
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
308-
<path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/>
319+
<svg
320+
xmlns="http://www.w3.org/2000/svg"
321+
width="16"
322+
height="16"
323+
fill="currentColor"
324+
className="bi bi-person-add"
325+
viewBox="0 0 16 16"
326+
style={{ marginLeft: '5px' }}
327+
>
328+
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
329+
<path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z" />
309330
</svg>
310331
</Button>
311332
<Grid container justifyContent="flex-end">
312333
<Grid item>
313-
<RouteLink style={{color: isDarkMode ? '#aaaaaa' : 'black'}} to={`/login`} className="nav_link">
334+
<RouteLink
335+
style={{ color: isDarkMode ? '#aaaaaa' : 'black' }}
336+
to={`/login`}
337+
className="nav_link"
338+
>
314339
Already have an account? Sign In
315340
</RouteLink>
316341
</Grid>
@@ -326,4 +351,4 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
326351
);
327352
};
328353

329-
export default withRouter(SignUp);
354+
export default withRouter(SignUp);

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import { Link, Route, BrowserRouter as Router, Switch } from 'react-router-dom';
12
import React, { useEffect, useRef } from 'react';
2-
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
3+
import { useDispatch, useSelector } from 'react-redux';
4+
35
import Box from '@mui/material/Box';
46
import { Component } from '../../interfaces/Interfaces';
57
import ReactDOMServer from 'react-dom/server';
6-
import { useDispatch, useSelector } from 'react-redux';
7-
import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
88
import { RootState } from '../../redux/store';
9+
import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
910

1011
// DemoRender is the full sandbox demo of our user's custom built React components. DemoRender references the design specifications stored in state to construct
1112
// real react components that utilize hot module reloading to depict the user's prototype application.
@@ -52,16 +53,23 @@ const DemoRender = (): JSX.Element => {
5253
</html>
5354
`;
5455

55-
//Switch between components when clicking on a link in the live render
5656
window.onmessage = (event) => {
57-
if (event.data === undefined) return;
58-
const component: string = event.data.data?.split('/').at(-1);
59-
const componentId =
60-
component &&
61-
state.components?.find((el) => {
62-
return el.name.toLowerCase() === component.toLowerCase();
63-
}).id;
64-
componentId && dispatch(changeFocus({ componentId, childId: null }));
57+
// If event.data or event.data.data is undefined, return early
58+
if (!event.data || typeof event.data.data !== 'string') return;
59+
60+
const component: string = event.data.data.split('/').at(-1);
61+
62+
// If components aren't defined or component isn't a string, return early
63+
if (!state.components || !component) return;
64+
65+
const matchedComponent = state.components.find(
66+
(el) => el.name.toLowerCase() === component.toLowerCase()
67+
);
68+
69+
// If matchedComponent is undefined or doesn't have an id, return early
70+
if (!matchedComponent || matchedComponent.id === undefined) return;
71+
72+
dispatch(changeFocus({ componentId: matchedComponent.id, childId: null }));
6573
};
6674

6775
// This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo

‎app/src/components/right/MarketplaceButton.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Button } from '@mui/material';
2+
import { Link } from 'react-router-dom'; // Import the Link component
3+
import React from 'react';
4+
5+
const MarketplaceButton = () => {
6+
return (
7+
<Link to="/marketplace" style={{ textDecoration: 'none' }}>
8+
<Button>Marketplace</Button>
9+
</Link>
10+
);
11+
};
12+
13+
export default MarketplaceButton;

0 commit comments

Comments
 (0)