Skip to content

Commit c15b8c0

Browse files
mikelpmcmikelpmc
committed
refactor context with higher order component and actions
1 parent c3de52d commit c15b8c0

File tree

10 files changed

+261
-249
lines changed

10 files changed

+261
-249
lines changed

‎app/src/components/App.js

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { Component } from 'react';
22
import { Route, Switch, Redirect } from 'react-router-dom';
33

4-
import { AuthConsumer } from './../context/';
4+
import withState from './../utils/withState';
5+
56
import PrivateRoute from './../utils/PrivateRoute';
67

78
import Header from './Header/';
@@ -12,46 +13,43 @@ import Register from './Register/';
1213

1314
class App extends Component {
1415
render() {
16+
const {
17+
store: { isLoggedIn }
18+
} = this.props;
19+
1520
return (
1621
<div className="App">
1722
<Header />
1823

1924
<Switch>
20-
<AuthConsumer>
21-
{context => (
22-
<React.Fragment>
23-
<Route exact path="/" component={Landing} />
24-
<PrivateRoute
25-
path="/dashboard"
26-
component={Dashboard}
27-
/>
28-
<Route
29-
path="/login"
30-
render={() =>
31-
context.state.isLoggedIn ? (
32-
<Redirect to="/dashboard" />
33-
) : (
34-
<Login />
35-
)
36-
}
37-
/>
38-
<Route
39-
path="/register"
40-
render={() =>
41-
context.state.isLoggedIn ? (
42-
<Redirect to="/dashboard" />
43-
) : (
44-
<Register />
45-
)
46-
}
47-
/>
48-
</React.Fragment>
49-
)}
50-
</AuthConsumer>
25+
<React.Fragment>
26+
<Route exact path="/" component={Landing} />
27+
<PrivateRoute path="/dashboard" component={Dashboard} />
28+
<Route
29+
path="/login"
30+
render={() =>
31+
isLoggedIn ? (
32+
<Redirect to="/dashboard" />
33+
) : (
34+
<Login />
35+
)
36+
}
37+
/>
38+
<Route
39+
path="/register"
40+
render={() =>
41+
isLoggedIn ? (
42+
<Redirect to="/dashboard" />
43+
) : (
44+
<Register />
45+
)
46+
}
47+
/>
48+
</React.Fragment>
5149
</Switch>
5250
</div>
5351
);
5452
}
5553
}
5654

57-
export default App;
55+
export default withState(App);

‎app/src/components/Dashboard/index.js

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,28 @@
11
import React, { Component } from 'react';
2-
import { AuthConsumer } from './../../context/';
2+
import withState from './../../utils/withState';
33

44
class Dashboard extends Component {
55
componentDidMount() {
6-
this.props.context.retrieveUser();
6+
this.props.actions.retrieveUser();
77
}
88

99
render() {
10-
const { user } = this.props.context.state;
10+
const { user } = this.props.store;
1111

1212
return (
1313
<React.Fragment>
1414
<h1>Dashboard</h1>
15-
{user && (
15+
{Object.keys(user).length > 0 ? (
1616
<React.Fragment>
1717
<p>Name: {user.name || 'No name'}</p>
1818
<p>Email: {user.email || 'No email'}</p>
1919
</React.Fragment>
20+
) : (
21+
'Loading user info...'
2022
)}
2123
</React.Fragment>
2224
);
2325
}
2426
}
2527

26-
const WrappedComponent = () => {
27-
return (
28-
<AuthConsumer>
29-
{context => <Dashboard context={context} />}
30-
</AuthConsumer>
31-
);
32-
};
33-
34-
export default WrappedComponent;
28+
export default withState(Dashboard);

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

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,27 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
33

4-
import { AuthConsumer } from './../../context/';
4+
import withState from './../../utils/withState';
55

6-
const Header = () => {
6+
const Header = ({ store, actions }) => {
77
return (
88
<header>
9-
<AuthConsumer>
10-
{context => (
11-
<nav>
12-
<Link to="/">Landing</Link>{' '}
13-
{context.state.isLoggedIn ? (
14-
<React.Fragment>
15-
<Link to="/dashboard">Dashboard</Link>{' '}
16-
<button onClick={context.onLogout}>
17-
Logout
18-
</button>
19-
</React.Fragment>
20-
) : (
21-
<React.Fragment>
22-
<Link to="/register">Register</Link>{' '}
23-
<Link to="/login">Login</Link>
24-
</React.Fragment>
25-
)}
26-
</nav>
9+
<nav>
10+
<Link to="/">Landing</Link>{' '}
11+
{store.isLoggedIn ? (
12+
<React.Fragment>
13+
<Link to="/dashboard">Dashboard</Link>{' '}
14+
<button onClick={actions.onLogout}>Logout</button>
15+
</React.Fragment>
16+
) : (
17+
<React.Fragment>
18+
<Link to="/register">Register</Link>{' '}
19+
<Link to="/login">Login</Link>
20+
</React.Fragment>
2721
)}
28-
</AuthConsumer>
22+
</nav>
2923
</header>
3024
);
3125
};
3226

33-
export default Header;
27+
export default withState(Header);

‎app/src/components/Login/index.js

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,36 @@
11
import React from 'react';
22
import { withRouter } from 'react-router-dom';
33

4-
import { AuthConsumer } from './../../context/';
4+
import withState from './../../utils/withState';
55

6-
const Login = () => {
6+
const Login = ({ store, actions }) => {
77
return (
8-
<AuthConsumer>
9-
{context => (
10-
<React.Fragment>
11-
{context.state.error && <p>{context.state.error}</p>}
12-
<form onSubmit={context.onLogin}>
13-
<label htmlFor="email">Email</label>
14-
<input
15-
type="text"
16-
value={context.state.email || ''}
17-
name="email"
18-
onChange={e => context.handleChange(e)}
19-
/>
20-
<br />
21-
<label htmlFor="password">Password</label>
22-
<input
23-
type="password"
24-
value={context.state.password || ''}
25-
name="password"
26-
onChange={e => context.handleChange(e)}
27-
/>
28-
<br />
29-
<input type="submit" value="Login" />
30-
</form>
31-
</React.Fragment>
32-
)}
33-
</AuthConsumer>
8+
<React.Fragment>
9+
{store.error && <p>{store.error}</p>}
10+
11+
<form onSubmit={actions.onLogin}>
12+
<label htmlFor="email">Email</label>
13+
<input
14+
type="text"
15+
value={store.email || ''}
16+
name="email"
17+
onChange={e => actions.handleChange(e)}
18+
/>
19+
<br />
20+
21+
<label htmlFor="password">Password</label>
22+
<input
23+
type="password"
24+
value={store.password || ''}
25+
name="password"
26+
onChange={e => actions.handleChange(e)}
27+
/>
28+
<br />
29+
30+
<input type="submit" value="Login" />
31+
</form>
32+
</React.Fragment>
3433
);
3534
};
3635

37-
export default withRouter(Login);
36+
export default withRouter(withState(Login));

‎app/src/components/Register/index.js

Lines changed: 36 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,45 @@
11
import React from 'react';
22
import { withRouter } from 'react-router-dom';
33

4-
import { AuthConsumer } from './../../context/';
4+
import withState from './../../utils/withState';
55

6-
const Register = () => {
6+
const Register = ({ store, actions }) => {
77
return (
8-
<AuthConsumer>
9-
{context => (
10-
<React.Fragment>
11-
{context.state.error && <p>{context.state.error}!</p>}
8+
<React.Fragment>
9+
{store.error && <p>{store.error}!</p>}
1210

13-
<form onSubmit={context.onRegister}>
14-
<label htmlFor="name">Name</label>
15-
<input
16-
type="text"
17-
value={context.state.name}
18-
name="name"
19-
onChange={e => context.handleChange(e)}
20-
/>
21-
<br />
22-
<label htmlFor="email">Email</label>
23-
<input
24-
type="text"
25-
value={context.state.email}
26-
name="email"
27-
onChange={e => context.handleChange(e)}
28-
/>
29-
<br />
30-
<label htmlFor="password">Password</label>
31-
<input
32-
type="password"
33-
value={context.state.password}
34-
name="password"
35-
onChange={e => context.handleChange(e)}
36-
/>
37-
<br />
38-
<input type="submit" value="Register" />
39-
</form>
40-
</React.Fragment>
41-
)}
42-
</AuthConsumer>
11+
<form onSubmit={actions.onRegister}>
12+
<label htmlFor="name">Name</label>
13+
<input
14+
type="text"
15+
value={store.name}
16+
name="name"
17+
onChange={e => actions.handleChange(e)}
18+
/>
19+
<br />
20+
21+
<label htmlFor="email">Email</label>
22+
<input
23+
type="text"
24+
value={store.email}
25+
name="email"
26+
onChange={e => actions.handleChange(e)}
27+
/>
28+
<br />
29+
30+
<label htmlFor="password">Password</label>
31+
<input
32+
type="password"
33+
value={store.password}
34+
name="password"
35+
onChange={e => actions.handleChange(e)}
36+
/>
37+
<br />
38+
39+
<input type="submit" value="Register" />
40+
</form>
41+
</React.Fragment>
4342
);
4443
};
4544

46-
export default withRouter(Register);
45+
export default withRouter(withState(Register));

0 commit comments

Comments
 (0)