Skip to content

Commit 2210d51

Browse files
mikelpmcmikelpmc
committed
feat: refactor to modern react
1 parent 8913c90 commit 2210d51

29 files changed

Lines changed: 11887 additions & 538 deletions

‎client/package-lock.json‎

Lines changed: 11233 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
{
2-
"name": "context-api",
3-
"version": "0.1.0",
4-
"private": true,
5-
"dependencies": {
6-
"normalize.css": "^8.0.0",
7-
"react": "^16.5.0",
8-
"react-dom": "^16.5.0",
9-
"react-router-dom": "^4.3.1",
10-
"react-scripts": "1.1.5"
11-
},
12-
"scripts": {
13-
"start": "react-scripts start",
14-
"build": "react-scripts build",
15-
"test": "react-scripts test --env=jsdom",
16-
"eject": "react-scripts eject"
17-
},
18-
"devDependencies": {}
2+
"name": "context-api",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"normalize.css": "^8.0.0",
7+
"react": "^17.0.2",
8+
"react-dom": "^17.0.2",
9+
"react-router-dom": "^5.2.0",
10+
"react-scripts": "1.1.5"
11+
},
12+
"scripts": {
13+
"start": "react-scripts start",
14+
"build": "react-scripts build",
15+
"test": "react-scripts test --env=jsdom",
16+
"eject": "react-scripts eject"
17+
},
18+
"devDependencies": {}
1919
}

‎client/public/index.html‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7-
<meta name="theme-color" content="#000000">
8-
<!--
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<!--
911
manifest.json provides metadata used when your web app is added to the
1012
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1113
-->
12-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14-
<!--
14+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
16+
<!--
1517
Notice the use of %PUBLIC_URL% in the tags above.
1618
It will be replaced with the URL of the `public` folder during the build.
1719
Only files inside the `public` folder can be referenced from the HTML.
@@ -20,15 +22,15 @@
2022
work correctly both with client-side routing and a non-root public URL.
2123
Learn how to configure a non-root public URL by running `npm run build`.
2224
-->
23-
<title>Context test</title>
24-
</head>
25+
<title>React Context API Auth</title>
26+
</head>
2527

26-
<body>
27-
<noscript>
28-
You need to enable JavaScript to run this app.
29-
</noscript>
30-
<div id="root"></div>
31-
<!--
28+
<body>
29+
<noscript>
30+
You need to enable JavaScript to run this app.
31+
</noscript>
32+
<div id="root"></div>
33+
<!--
3234
This HTML file is a template.
3335
If you open it directly in the browser, you will see an empty page.
3436
@@ -37,7 +39,5 @@
3739
3840
To begin the development, run `npm start` or `yarn start`.
3941
To create a production bundle, use `npm run build` or `yarn build`.
40-
-->
41-
</body>
42-
43-
</html>
42+
--></body>
43+
</html>

‎client/src/App.js‎

Lines changed: 47 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,52 @@
1-
import React, { Component } from 'react';
2-
import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
3-
4-
import withState from './../utils/withState';
5-
6-
import PrivateRoute from './utils/PrivateRoute';
7-
1+
import React, { useEffect } from 'react';
2+
import { Route, Switch, Redirect, useHistory } from 'react-router-dom';
3+
import { useAuthState, useAuthDispatch } from './providers/authProvider';
4+
import PrivateRoute from './components/PrivateRoute';
85
import Header from './components/Header';
9-
import Dashboard from './pages/Dashboard/';
10-
import Landing from './pages/Landing/';
11-
import Login from './pages/Login/';
12-
import Register from './pages/Register/';
13-
import NotFound from './pages/NotFound/';
14-
15-
class App extends Component {
16-
componentDidMount() {
17-
this.unlisten = this.props.history.listen((location, action) => {
18-
if (this.props.store.error !== '') {
19-
this.props.actions.clearErrors();
20-
}
21-
});
22-
}
23-
24-
componentWillUnmount() {
25-
this.unlisten();
26-
}
6+
import Dashboard from './pages/Dashboard';
7+
import Landing from './pages/Landing/landing';
8+
import Login from './pages/Login';
9+
import Register from './pages/Register';
10+
import NotFound from './pages/NotFound/notFound';
2711

28-
render() {
29-
const {
30-
store: { isLoggedIn }
31-
} = this.props;
12+
const App = () => {
13+
const { onClearErrors } = useAuthDispatch();
14+
const { isLoggedIn, error } = useAuthState();
3215

33-
return (
34-
<div className="App">
35-
<Header />
16+
const history = useHistory();
3617

37-
<Switch>
38-
<Route exact path="/" component={Landing} />
39-
<PrivateRoute path="/dashboard" component={Dashboard} />
40-
<Route
41-
path="/login"
42-
render={() =>
43-
isLoggedIn ? (
44-
<Redirect to="/dashboard" />
45-
) : (
46-
<Login />
47-
)
48-
}
49-
/>
50-
<Route
51-
path="/register"
52-
render={() =>
53-
isLoggedIn ? (
54-
<Redirect to="/dashboard" />
55-
) : (
56-
<Register />
57-
)
58-
}
59-
/>
60-
61-
<NotFound />
62-
</Switch>
63-
</div>
64-
);
65-
}
66-
}
18+
useEffect(() => {
19+
const unlisten = history.listen(() => {
20+
error && onClearErrors();
21+
});
6722

68-
export default withRouter(withState(App));
23+
return () => unlisten();
24+
}, [error]);
25+
26+
return (
27+
<main className="App">
28+
<Header />
29+
<Switch>
30+
<Route exact path="/" component={Landing} />
31+
<PrivateRoute path="/dashboard" redirectTo="/">
32+
<Dashboard />
33+
</PrivateRoute>
34+
<Route
35+
path="/login"
36+
render={() =>
37+
isLoggedIn ? <Redirect to="/dashboard" /> : <Login />
38+
}
39+
/>
40+
<Route
41+
path="/register"
42+
render={() =>
43+
isLoggedIn ? <Redirect to="/dashboard" /> : <Register />
44+
}
45+
/>
46+
<NotFound />
47+
</Switch>
48+
</main>
49+
);
50+
};
51+
52+
export default App;

‎client/src/components/App.js‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎client/src/components/App.test.js‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎client/src/components/Header/header.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { Fragment } from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { useAuthState, useAuthDispatch } from '../../providers/authProvider';
4+
import './index.css';
5+
6+
const Header = () => {
7+
const { onLogout } = useAuthDispatch();
8+
const { isLoggedIn } = useAuthState();
9+
10+
return (
11+
<header>
12+
<nav>
13+
<ul className="navbar">
14+
<li className="navbar__item">
15+
<Link to="/">Landing</Link>
16+
</li>
17+
{isLoggedIn ? (
18+
<Fragment>
19+
<li className="navbar__item">
20+
<Link to="/dashboard">Dashboard</Link>
21+
</li>
22+
<li className="navbar__item navbar__item--right">
23+
<button onClick={onLogout}>Logout</button>
24+
</li>
25+
</Fragment>
26+
) : (
27+
<Fragment>
28+
<li className="navbar__item navbar__item--right">
29+
<Link to="/register">Register</Link>
30+
</li>
31+
<li className="navbar__item">
32+
<Link to="/login">Login</Link>
33+
</li>
34+
</Fragment>
35+
)}
36+
</ul>
37+
</nav>
38+
</header>
39+
);
40+
};
41+
42+
export default Header;

‎client/src/components/Header/index.js‎

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,3 @@
1-
import React from 'react';
2-
import { Link } from 'react-router-dom';
1+
import Header from './header';
32

4-
import withState from './../../utils/withState';
5-
6-
import './index.css';
7-
8-
const Header = ({ store, actions }) => {
9-
return (
10-
<header>
11-
<nav>
12-
<ul className="navbar">
13-
<li className="navbar__item">
14-
<Link to="/">Landing</Link>
15-
</li>
16-
{store.isLoggedIn ? (
17-
<React.Fragment>
18-
<li className="navbar__item">
19-
<Link to="/dashboard">Dashboard</Link>
20-
</li>
21-
<li className="navbar__item navbar__item--right">
22-
<button onClick={actions.onLogout}>
23-
Logout
24-
</button>
25-
</li>
26-
</React.Fragment>
27-
) : (
28-
<React.Fragment>
29-
<li className="navbar__item navbar__item--right">
30-
<Link to="/register">Register</Link>
31-
</li>
32-
<li className="navbar__item">
33-
<Link to="/login">Login</Link>
34-
</li>
35-
</React.Fragment>
36-
)}
37-
</ul>
38-
</nav>
39-
</header>
40-
);
41-
};
42-
43-
export default withState(Header);
3+
export default Header;

‎client/src/components/PrivateRoute/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import PrivateRoute from './privateRoute';
2+
3+
export default PrivateRoute;

0 commit comments

Comments
 (0)