Skip to content

Commit 9e31d9d

Browse files
rwieruchrwieruch
committed
session management
1 parent 8f860eb commit 9e31d9d

File tree

8 files changed

+127
-130
lines changed

8 files changed

+127
-130
lines changed

‎src/components/Account/index.js

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import React, { Component } from 'react';
2+
import { connect } from 'react-redux';
23
import { compose } from 'recompose';
34

4-
import {
5-
AuthUserContext,
6-
withAuthorization,
7-
withEmailVerification,
8-
} from '../Session';
5+
import { withAuthorization, withEmailVerification } from '../Session';
96
import { withFirebase } from '../Firebase';
107
import { PasswordForgetForm } from '../PasswordForget';
118
import PasswordChangeForm from '../PasswordChange';
@@ -29,17 +26,13 @@ const SIGN_IN_METHODS = [
2926
},
3027
];
3128

32-
const AccountPage = () => (
33-
<AuthUserContext.Consumer>
34-
{authUser => (
35-
<div>
36-
<h1>Account: {authUser.email}</h1>
37-
<PasswordForgetForm />
38-
<PasswordChangeForm />
39-
<LoginManagement authUser={authUser} />
40-
</div>
41-
)}
42-
</AuthUserContext.Consumer>
29+
const AccountPage = ({ authUser }) => (
30+
<div>
31+
<h1>Account: {authUser.email}</h1>
32+
<PasswordForgetForm />
33+
<PasswordChangeForm />
34+
<LoginManagement authUser={authUser} />
35+
</div>
4336
);
4437

4538
class LoginManagementBase extends Component {
@@ -223,9 +216,14 @@ class DefaultLoginToggle extends Component {
223216

224217
const LoginManagement = withFirebase(LoginManagementBase);
225218

219+
const mapStateToProps = state => ({
220+
authUser: state.sessionState.authUser,
221+
});
222+
226223
const condition = authUser => !!authUser;
227224

228225
export default compose(
226+
connect(mapStateToProps),
229227
withEmailVerification,
230228
withAuthorization(condition),
231229
)(AccountPage);

‎src/components/Messages/Messages.js

+37-41
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
22
import { connect } from 'react-redux';
33
import { compose } from 'recompose';
44

5-
import { AuthUserContext } from '../Session';
65
import { withFirebase } from '../Firebase';
76
import MessageList from './MessageList';
87

@@ -83,52 +82,49 @@ class Messages extends Component {
8382
const { text, loading } = this.state;
8483

8584
return (
86-
<AuthUserContext.Consumer>
87-
{authUser => (
88-
<div>
89-
{!loading && messages && (
90-
<button type="button" onClick={this.onNextPage}>
91-
More
92-
</button>
93-
)}
94-
95-
{loading && <div>Loading ...</div>}
96-
97-
{messages && (
98-
<MessageList
99-
messages={messages.map(message => ({
100-
...message,
101-
user: users
102-
? users[message.userId]
103-
: { userId: message.userId },
104-
}))}
105-
onEditMessage={this.onEditMessage}
106-
onRemoveMessage={this.onRemoveMessage}
107-
/>
108-
)}
109-
110-
{!messages && <div>There are no messages ...</div>}
111-
112-
<form
113-
onSubmit={event =>
114-
this.onCreateMessage(event, authUser)
115-
}
116-
>
117-
<input
118-
type="text"
119-
value={text}
120-
onChange={this.onChangeText}
121-
/>
122-
<button type="submit">Send</button>
123-
</form>
124-
</div>
85+
<div>
86+
{!loading && messages && (
87+
<button type="button" onClick={this.onNextPage}>
88+
More
89+
</button>
12590
)}
126-
</AuthUserContext.Consumer>
91+
92+
{loading && <div>Loading ...</div>}
93+
94+
{messages && (
95+
<MessageList
96+
messages={messages.map(message => ({
97+
...message,
98+
user: users
99+
? users[message.userId]
100+
: { userId: message.userId },
101+
}))}
102+
onEditMessage={this.onEditMessage}
103+
onRemoveMessage={this.onRemoveMessage}
104+
/>
105+
)}
106+
107+
{!messages && <div>There are no messages ...</div>}
108+
109+
<form
110+
onSubmit={event =>
111+
this.onCreateMessage(event, this.props.authUser)
112+
}
113+
>
114+
<input
115+
type="text"
116+
value={text}
117+
onChange={this.onChangeText}
118+
/>
119+
<button type="submit">Send</button>
120+
</form>
121+
</div>
127122
);
128123
}
129124
}
130125

131126
const mapStateToProps = state => ({
127+
authUser: state.sessionState.authUser,
132128
messages: Object.keys(state.messageState.messages || {}).map(
133129
key => ({
134130
...state.messageState.messages[key],

‎src/components/Navigation/index.js

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom';
3+
import { connect } from 'react-redux';
34

4-
import { AuthUserContext } from '../Session';
55
import SignOutButton from '../SignOut';
66
import * as ROUTES from '../../constants/routes';
77
import * as ROLES from '../../constants/roles';
88

9-
const Navigation = () => (
10-
<AuthUserContext.Consumer>
11-
{authUser =>
12-
authUser ? (
13-
<NavigationAuth authUser={authUser} />
14-
) : (
15-
<NavigationNonAuth />
16-
)
17-
}
18-
</AuthUserContext.Consumer>
19-
);
9+
const Navigation = ({ authUser }) =>
10+
authUser ? (
11+
<NavigationAuth authUser={authUser} />
12+
) : (
13+
<NavigationNonAuth />
14+
);
2015

2116
const NavigationAuth = ({ authUser }) => (
2217
<ul>
@@ -51,4 +46,8 @@ const NavigationNonAuth = () => (
5146
</ul>
5247
);
5348

54-
export default Navigation;
49+
const mapStateToProps = state => ({
50+
authUser: state.sessionState.authUser,
51+
});
52+
53+
export default connect(mapStateToProps)(Navigation);

‎src/components/Session/context.js

-5
This file was deleted.

‎src/components/Session/index.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import AuthUserContext from './context';
21
import withAuthentication from './withAuthentication';
32
import withAuthorization from './withAuthorization';
43
import withEmailVerification from './withEmailVerification';
54

65
export {
7-
AuthUserContext,
86
withAuthentication,
97
withAuthorization,
108
withEmailVerification,

‎src/components/Session/withAuthentication.js

+20-12
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
import React from 'react';
2+
import { connect } from 'react-redux';
3+
import { compose } from 'recompose';
24

3-
import AuthUserContext from './context';
45
import { withFirebase } from '../Firebase';
56

67
const withAuthentication = Component => {
78
class WithAuthentication extends React.Component {
89
constructor(props) {
910
super(props);
1011

11-
this.state = {
12-
authUser: JSON.parse(localStorage.getItem('authUser')),
13-
};
12+
this.props.onSetAuthUser(
13+
JSON.parse(localStorage.getItem('authUser')),
14+
);
1415
}
1516

1617
componentDidMount() {
1718
this.listener = this.props.firebase.onAuthUserListener(
1819
authUser => {
1920
localStorage.setItem('authUser', JSON.stringify(authUser));
20-
this.setState({ authUser });
21+
this.props.onSetAuthUser(authUser);
2122
},
2223
() => {
2324
localStorage.removeItem('authUser');
24-
this.setState({ authUser: null });
25+
this.props.onSetAuthUser(null);
2526
},
2627
);
2728
}
@@ -31,15 +32,22 @@ const withAuthentication = Component => {
3132
}
3233

3334
render() {
34-
return (
35-
<AuthUserContext.Provider value={this.state.authUser}>
36-
<Component {...this.props} />
37-
</AuthUserContext.Provider>
38-
);
35+
return <Component {...this.props} />;
3936
}
4037
}
4138

42-
return withFirebase(WithAuthentication);
39+
const mapDispatchToProps = dispatch => ({
40+
onSetAuthUser: authUser =>
41+
dispatch({ type: 'AUTH_USER_SET', authUser }),
42+
});
43+
44+
return compose(
45+
withFirebase,
46+
connect(
47+
null,
48+
mapDispatchToProps,
49+
),
50+
)(WithAuthentication);
4351
};
4452

4553
export default withAuthentication;

‎src/components/Session/withAuthorization.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import { withRouter } from 'react-router-dom';
3+
import { connect } from 'react-redux';
34
import { compose } from 'recompose';
45

5-
import AuthUserContext from './context';
66
import { withFirebase } from '../Firebase';
77
import * as ROUTES from '../../constants/routes';
88

@@ -24,19 +24,20 @@ const withAuthorization = condition => Component => {
2424
}
2525

2626
render() {
27-
return (
28-
<AuthUserContext.Consumer>
29-
{authUser =>
30-
condition(authUser) ? <Component {...this.props} /> : null
31-
}
32-
</AuthUserContext.Consumer>
33-
);
27+
return condition(this.props.authUser) ? (
28+
<Component {...this.props} />
29+
) : null;
3430
}
3531
}
3632

33+
const mapStateToProps = state => ({
34+
authUser: state.sessionState.authUser,
35+
});
36+
3737
return compose(
3838
withRouter,
3939
withFirebase,
40+
connect(mapStateToProps),
4041
)(WithAuthorization);
4142
};
4243

‎src/components/Session/withEmailVerification.js

+35-33
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
2+
import { connect } from 'react-redux';
3+
import { compose } from 'recompose';
24

3-
import AuthUserContext from './context';
45
import { withFirebase } from '../Firebase';
56

67
const needsEmailVerification = authUser =>
@@ -25,43 +26,44 @@ const withEmailVerification = Component => {
2526
};
2627

2728
render() {
28-
return (
29-
<AuthUserContext.Consumer>
30-
{authUser =>
31-
needsEmailVerification(authUser) ? (
32-
<div>
33-
{this.state.isSent ? (
34-
<p>
35-
E-Mail confirmation sent: Check you E-Mails (Spam
36-
folder included) for a confirmation E-Mail.
37-
Refresh this page once you confirmed your E-Mail.
38-
</p>
39-
) : (
40-
<p>
41-
Verify your E-Mail: Check you E-Mails (Spam folder
42-
included) for a confirmation E-Mail or send
43-
another confirmation E-Mail.
44-
</p>
45-
)}
29+
return needsEmailVerification(this.props.authUser) ? (
30+
<div>
31+
{this.state.isSent ? (
32+
<p>
33+
E-Mail confirmation sent: Check you E-Mails (Spam folder
34+
included) for a confirmation E-Mail. Refresh this page
35+
once you confirmed your E-Mail.
36+
</p>
37+
) : (
38+
<p>
39+
Verify your E-Mail: Check you E-Mails (Spam folder
40+
included) for a confirmation E-Mail or send another
41+
confirmation E-Mail.
42+
</p>
43+
)}
4644

47-
<button
48-
type="button"
49-
onClick={this.onSendEmailVerification}
50-
disabled={this.state.isSent}
51-
>
52-
Send confirmation E-Mail
53-
</button>
54-
</div>
55-
) : (
56-
<Component {...this.props} />
57-
)
58-
}
59-
</AuthUserContext.Consumer>
45+
<button
46+
type="button"
47+
onClick={this.onSendEmailVerification}
48+
disabled={this.state.isSent}
49+
>
50+
Send confirmation E-Mail
51+
</button>
52+
</div>
53+
) : (
54+
<Component {...this.props} />
6055
);
6156
}
6257
}
6358

64-
return withFirebase(WithEmailVerification);
59+
const mapStateToProps = state => ({
60+
authUser: state.sessionState.authUser,
61+
});
62+
63+
return compose(
64+
withFirebase,
65+
connect(mapStateToProps),
66+
)(WithEmailVerification);
6567
};
6668

6769
export default withEmailVerification;

0 commit comments

Comments
 (0)