Skip to content
This repository was archived by the owner on Oct 5, 2022. It is now read-only.

Commit 6a16325

Browse files
BryanVeBryanVe
committed
1.3.0 (firebase authentication was added)
1 parent 654db5f commit 6a16325

File tree

36 files changed

+1265
-552
lines changed

36 files changed

+1265
-552
lines changed

‎changelog.md

+12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
# Changelog
22

3+
## 1.3.0
4+
5+
### Added
6+
7+
- [`universal-cookie`](https://www.npmjs.com/package/universal-cookie) was added for storing and getting cookies from the browser.
8+
- New view was added in case if the user doesn't have an email associated to their info in the database.
9+
10+
### Updated
11+
12+
- [`firebase`](https://www.npmjs.com/package/firebase), [`react-redux-firebase`](https://www.npmjs.com/package/react-redux-firebase) and [`redux-firestore`](https://www.npmjs.com/package/redux-firestore) deps were added into the project.
13+
- We use [Firebase Authentication](https://firebase.google.com/docs/auth) in order to auth the user into the system.
14+
315
## 1.2.1a
416

517
### Hotfix

‎package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "rhoades-frontend",
3-
"version": "1.2.1",
3+
"version": "1.3.0",
44
"private": true,
55
"dependencies": {
66
"@material-ui/core": "^4.11.0",
@@ -11,18 +11,18 @@
1111
"@testing-library/user-event": "^7.1.2",
1212
"aes-js": "^3.1.2",
1313
"axios": "^0.20.0",
14-
"browser-crypto": "^1.1.2",
15-
"crypto-js": "^4.0.0",
16-
"generate-password": "^1.5.1",
14+
"firebase": "^8.0.0",
1715
"react": "^16.14.0",
1816
"react-dom": "^16.14.0",
1917
"react-redux": "^7.2.1",
18+
"react-redux-firebase": "^3.7.0",
2019
"react-router-dom": "^5.2.0",
2120
"react-scripts": "3.4.3",
2221
"redux": "^4.0.5",
22+
"redux-firestore": "^0.14.0",
2323
"redux-saga": "^1.1.3",
2424
"scrypt-js": "^3.0.1",
25-
"string-to-arraybuffer": "^1.0.2",
25+
"universal-cookie": "^4.0.4",
2626
"webfontloader": "^1.6.28"
2727
},
2828
"scripts": {

‎src/App.js

+79-36
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,93 @@
11
import React from 'react';
2-
2+
import { useSelector } from 'react-redux';
33
import { Switch, Route, Redirect } from 'react-router-dom';
4-
// import { useSelector } from 'react-redux';
5-
// import { isLoaded } from 'react-redux-firebase';
4+
import { isLoaded } from 'react-redux-firebase';
65

7-
import { AlertSnackbar } from 'components';
6+
import { AlertSnackbar, Spinner } from 'components';
87
import routes from 'routes';
98

10-
// // set load spinning if auth or profile is starting
11-
// const AuthIsLoaded = ({ children }) => {
12-
// const auth = useSelector((state) => state.firebase.auth);
13-
// if (!isLoaded(auth)) return <Spinner />;
14-
// return children;
15-
// };
9+
import {
10+
PublicLayout,
11+
StudentLayout,
12+
TeacherLayout,
13+
ErrorLayout,
14+
} from 'layouts';
15+
import withAuthentication from 'hocs/withAuthentication';
16+
17+
// set load spinning if auth or profile is starting
18+
const AuthIsLoaded = ({ children }) => {
19+
const auth = useSelector((state) => state.firebase.auth);
20+
if (!isLoaded(auth)) return <Spinner />;
21+
return children;
22+
};
1623

17-
// const ProfileIsLoaded = ({ children }) => {
18-
// const profile = useSelector((state) => state.firebase.profile);
19-
// if (!isLoaded(profile)) return <Spinner />;
20-
// return children;
21-
// };
24+
const ProfileIsLoaded = ({ children }) => {
25+
const profile = useSelector((state) => state.firebase.profile);
26+
if (!isLoaded(profile)) return <Spinner />;
27+
return children;
28+
};
2229

2330
const App = () => {
2431
return (
2532
<React.Fragment>
2633
<AlertSnackbar />
27-
{/* // <AuthIsLoaded>
28-
// <ProfileIsLoaded> */}
29-
<Switch>
30-
{routes.map(({ layout: Layout, views }) =>
31-
views.map(({ path, component: Component }) => (
32-
<Route
33-
key={path}
34-
exact
35-
path={path}
36-
render={() => (
37-
<Layout>
38-
<Component />
39-
</Layout>
40-
)}
41-
/>
42-
))
43-
)}
44-
<Route component={() => <Redirect to="/error/404" />} />
45-
</Switch>
46-
{/* // </ProfileIsLoaded>
47-
// </AuthIsLoaded> */}
34+
<AuthIsLoaded>
35+
<ProfileIsLoaded>
36+
<Switch>
37+
<Route path="/student/:path?">
38+
<StudentLayout>
39+
<Switch>
40+
{routes.student.map(({ path, component: Component }) => (
41+
<Route
42+
exact
43+
key={path}
44+
path={path}
45+
component={withAuthentication('student', Component)}
46+
/>
47+
))}
48+
<Route component={() => <Redirect to="/error/404" />} />
49+
</Switch>
50+
</StudentLayout>
51+
</Route>
52+
<Route path="/teacher/:path?">
53+
<TeacherLayout>
54+
<Switch>
55+
{routes.teacher.map(({ path, component: Component }) => (
56+
<Route
57+
exact
58+
key={path}
59+
path={path}
60+
component={withAuthentication('teacher', Component)}
61+
/>
62+
))}
63+
<Route component={() => <Redirect to="/error/404" />} />
64+
</Switch>
65+
</TeacherLayout>
66+
</Route>
67+
<Route path="/error/:path?" exact>
68+
<ErrorLayout>
69+
<Switch>
70+
{routes.error.map(({ path, component: Component }) => (
71+
<Route exact key={path} path={path} component={Component} />
72+
))}
73+
<Route component={() => <Redirect to="/error/404" />} />
74+
</Switch>
75+
</ErrorLayout>
76+
</Route>
77+
<Route>
78+
<PublicLayout>
79+
<Switch>
80+
{routes.public.map(({ path, component: Component }) => (
81+
<Route exact key={path} path={path} component={Component} />
82+
))}
83+
<Route component={() => <Redirect to="/error/404" />} />
84+
</Switch>
85+
</PublicLayout>
86+
</Route>
87+
<Route component={() => <Redirect to="/error/404" />} />
88+
</Switch>
89+
</ProfileIsLoaded>
90+
</AuthIsLoaded>
4891
</React.Fragment>
4992
);
5093
};

‎src/assets/images/avatars/male.svg

+1
Loading

‎src/assets/images/avatars/male2.svg

+1
Loading

‎src/assets/images/undraw/redirect_to_search_user.svg

+1
Loading

‎src/components/CustomInput/index.js

+5-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import { Paper, IconButton, InputBase, makeStyles } from '@material-ui/core';
3+
import { Paper, InputBase, makeStyles } from '@material-ui/core';
44

55
const useStyles = makeStyles((theme) => ({
66
inputPaper: {
@@ -9,9 +9,6 @@ const useStyles = makeStyles((theme) => ({
99
alignItems: 'center',
1010
width: '100%',
1111
},
12-
icon: {
13-
padding: 10,
14-
},
1512
input: {
1613
fontFamily: 'Nunito',
1714
marginLeft: theme.spacing(1),
@@ -31,18 +28,13 @@ const useStyles = makeStyles((theme) => ({
3128

3229
const CustomInput = (props) => {
3330
const classes = useStyles();
31+
const { aftericon = null, beforeicon = null } = props;
3432

3533
return (
3634
<Paper component="form" className={classes.inputPaper} elevation={0}>
37-
<IconButton
38-
disabled
39-
type="submit"
40-
className={classes.icon}
41-
aria-label="input-icon"
42-
>
43-
{props.icon}
44-
</IconButton>
45-
<InputBase className={classes.input} {...props} />
35+
{beforeicon}
36+
<InputBase className={classes.input} {...props} spellCheck={false} />
37+
{aftericon}
4638
</Paper>
4739
);
4840
};

‎src/components/CustomSwitch/index.js

+14-16
Original file line numberDiff line numberDiff line change
@@ -38,21 +38,19 @@ const CustomSwitch = withStyles((theme) => ({
3838
},
3939
checked: {},
4040
focusVisible: {},
41-
}))(({ classes, ...props }) => {
42-
return (
43-
<Switch
44-
focusVisibleClassName={classes.focusVisible}
45-
disableRipple
46-
classes={{
47-
root: classes.root,
48-
switchBase: classes.switchBase,
49-
thumb: classes.thumb,
50-
track: classes.track,
51-
checked: classes.checked,
52-
}}
53-
{...props}
54-
/>
55-
);
56-
});
41+
}))(({ classes, ...props }) => (
42+
<Switch
43+
focusVisibleClassName={classes.focusVisible}
44+
disableRipple
45+
classes={{
46+
root: classes.root,
47+
switchBase: classes.switchBase,
48+
thumb: classes.thumb,
49+
track: classes.track,
50+
checked: classes.checked,
51+
}}
52+
{...props}
53+
/>
54+
));
5755

5856
export default CustomSwitch;

‎src/components/CustomTooltip/index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Tooltip, withStyles } from '@material-ui/core';
2+
3+
const CustomTooltip = withStyles((theme) => ({
4+
tooltip: {
5+
backgroundColor: theme.palette.black,
6+
color: theme.palette.custom.white,
7+
boxShadow: theme.shadows[1],
8+
fontSize: 11,
9+
fontWeight: 'bold',
10+
},
11+
}))(Tooltip);
12+
13+
export default CustomTooltip;

‎src/components/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { default as CustomSwitch } from './CustomSwitch';
2+
export { default as CustomTooltip } from './CustomTooltip';
23
export { default as CustomInput } from './CustomInput';
34
export { default as Spinner } from './Spinner';
45
export { default as Navigation } from './Navigation';

0 commit comments

Comments
 (0)