Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5d8cdac

Browse files
committed
refactor Admin page with Users
1 parent 1ccc935 commit 5d8cdac

File tree

4 files changed

+181
-145
lines changed

4 files changed

+181
-145
lines changed

‎src/components/Admin/index.js‎

Lines changed: 3 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React,{Component} from 'react';
2-
import { Switch, Route,Link } from 'react-router-dom';
1+
import React from 'react';
2+
import { Switch, Route } from 'react-router-dom';
33
import { compose } from 'recompose';
44

5-
import { withFirebase } from '../Firebase';
65
import { withAuthorization, withEmailVerification } from '../Session';
6+
import { UserList, UserItem } from '../Users';
77
import * as ROLES from '../../constants/roles';
88
import * as ROUTES from '../../constants/routes';
99

@@ -19,148 +19,6 @@ const AdminPage = () => (
1919
</div>
2020
);
2121

22-
class UserListBase extends Component {
23-
constructor(props) {
24-
super(props);
25-
26-
this.state = {
27-
loading: false,
28-
users: [],
29-
};
30-
}
31-
32-
componentDidMount() {
33-
this.setState({ loading: true });
34-
35-
this.props.firebase.users().on('value', snapshot => {
36-
const usersObject = snapshot.val();
37-
38-
const usersList = Object.keys(usersObject).map(key => ({
39-
...usersObject[key],
40-
uid: key,
41-
}));
42-
43-
this.setState({
44-
users: usersList,
45-
loading: false,
46-
});
47-
});
48-
}
49-
50-
componentWillUnmount() {
51-
this.props.firebase.users().off();
52-
}
53-
54-
render() {
55-
const { users, loading } = this.state;
56-
57-
return (
58-
<div>
59-
<h2>Users</h2>
60-
{loading && <div>Loading ...</div>}
61-
<ul>
62-
{users.map(user => (
63-
<li key={user.uid}>
64-
<span>
65-
<strong>ID:</strong> {user.uid}
66-
</span>
67-
<span>
68-
<strong>E-Mail:</strong> {user.email}
69-
</span>
70-
<span>
71-
<strong>Username:</strong> {user.username}
72-
</span>
73-
<span>
74-
<Link
75-
to={{
76-
pathname: `${ROUTES.ADMIN}/${user.uid}`,
77-
state: { user },
78-
}}
79-
>
80-
Details
81-
</Link>
82-
</span>
83-
</li>
84-
))}
85-
</ul>
86-
</div>
87-
);
88-
}
89-
}
90-
91-
class UserItemBase extends Component {
92-
constructor(props) {
93-
super(props);
94-
95-
this.state = {
96-
loading: false,
97-
user: null,
98-
...props.location.state,
99-
};
100-
}
101-
102-
componentDidMount() {
103-
if (this.state.user) {
104-
return;
105-
}
106-
107-
this.setState({ loading: true });
108-
109-
this.props.firebase
110-
.user(this.props.match.params.id)
111-
.on('value', snapshot => {
112-
this.setState({
113-
user: snapshot.val(),
114-
loading: false,
115-
});
116-
});
117-
}
118-
119-
componentWillUnmount() {
120-
this.props.firebase.user(this.props.match.params.id).off();
121-
}
122-
123-
onSendPasswordResetEmail = () => {
124-
this.props.firebase.doPasswordReset(this.state.user.email);
125-
};
126-
127-
render() {
128-
const { user, loading } = this.state;
129-
130-
return (
131-
<div>
132-
<h2>User ({this.props.match.params.id})</h2>
133-
{loading && <div>Loading ...</div>}
134-
135-
{user && (
136-
<div>
137-
<span>
138-
<strong>ID:</strong> {user.uid}
139-
</span>
140-
<span>
141-
<strong>E-Mail:</strong> {user.email}
142-
</span>
143-
<span>
144-
<strong>Username:</strong> {user.username}
145-
</span>
146-
<span>
147-
<button
148-
type="button"
149-
onClick={this.onSendPasswordResetEmail}
150-
>
151-
Send Password Reset
152-
</button>
153-
</span>
154-
</div>
155-
)}
156-
</div>
157-
);
158-
}
159-
}
160-
161-
const UserList = withFirebase(UserListBase);
162-
const UserItem = withFirebase(UserItemBase);
163-
16422
const condition = authUser =>
16523
authUser && authUser.roles.includes(ROLES.ADMIN);
16624

‎src/components/Users/UserItem.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React, { Component } from 'react';
2+
import { connect } from 'react-redux';
3+
import { compose } from 'recompose';
4+
5+
import { withFirebase } from '../Firebase';
6+
7+
class UserItem extends Component {
8+
constructor(props) {
9+
super(props);
10+
11+
this.state = {
12+
loading: false,
13+
};
14+
}
15+
16+
componentDidMount() {
17+
if (!this.props.user) {
18+
this.setState({ loading: true });
19+
20+
this.props.firebase
21+
.user(this.props.match.params.id)
22+
.on('value', snapshot => {
23+
this.props.onSetUser(
24+
snapshot.val(),
25+
this.props.match.params.id,
26+
);
27+
28+
this.setState({ loading: false });
29+
});
30+
}
31+
}
32+
33+
componentWillUnmount() {
34+
this.props.firebase.user(this.props.match.params.id).off();
35+
}
36+
37+
onSendPasswordResetEmail = () => {
38+
this.props.firebase.doPasswordReset(this.props.user.email);
39+
};
40+
41+
render() {
42+
const { user } = this.props;
43+
const { loading } = this.state;
44+
45+
return (
46+
<div>
47+
<h2>User ({this.props.match.params.id})</h2>
48+
{loading && <div>Loading ...</div>}
49+
50+
{user && (
51+
<div>
52+
<span>
53+
<strong>ID:</strong> {user.uid}
54+
</span>
55+
<span>
56+
<strong>E-Mail:</strong> {user.email}
57+
</span>
58+
<span>
59+
<strong>Username:</strong> {user.username}
60+
</span>
61+
<span>
62+
<button
63+
type="button"
64+
onClick={this.onSendPasswordResetEmail}
65+
>
66+
Send Password Reset
67+
</button>
68+
</span>
69+
</div>
70+
)}
71+
</div>
72+
);
73+
}
74+
}
75+
76+
const mapStateToProps = (state, props) => ({
77+
user: (state.userState.users || {})[props.match.params.id],
78+
});
79+
80+
const mapDispatchToProps = dispatch => ({
81+
onSetUser: (user, uid) => dispatch({ type: 'USER_SET', user, uid }),
82+
});
83+
84+
export default compose(
85+
withFirebase,
86+
connect(
87+
mapStateToProps,
88+
mapDispatchToProps,
89+
),
90+
)(UserItem);

‎src/components/Users/UserList.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React, { Component } from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { connect } from 'react-redux';
4+
import { compose } from 'recompose';
5+
6+
import { withFirebase } from '../Firebase';
7+
import * as ROUTES from '../../constants/routes';
8+
9+
class UserList extends Component {
10+
constructor(props) {
11+
super(props);
12+
13+
this.state = {
14+
loading: false,
15+
};
16+
}
17+
18+
componentDidMount() {
19+
if (!this.props.users.length) {
20+
this.setState({ loading: true });
21+
}
22+
23+
this.props.firebase.users().on('value', snapshot => {
24+
this.props.onSetUsers(snapshot.val());
25+
26+
this.setState({ loading: false });
27+
});
28+
}
29+
30+
componentWillUnmount() {
31+
this.props.firebase.users().off();
32+
}
33+
34+
render() {
35+
const { users } = this.props;
36+
const { loading } = this.state;
37+
38+
return (
39+
<div>
40+
<h2>Users</h2>
41+
{loading && <div>Loading ...</div>}
42+
<ul>
43+
{users.map(user => (
44+
<li key={user.uid}>
45+
<span>
46+
<strong>ID:</strong> {user.uid}
47+
</span>
48+
<span>
49+
<strong>E-Mail:</strong> {user.email}
50+
</span>
51+
<span>
52+
<strong>Username:</strong> {user.username}
53+
</span>
54+
<span>
55+
<Link to={`${ROUTES.ADMIN}/${user.uid}`}>
56+
Details
57+
</Link>
58+
</span>
59+
</li>
60+
))}
61+
</ul>
62+
</div>
63+
);
64+
}
65+
}
66+
67+
const mapStateToProps = state => ({
68+
users: Object.keys(state.userState.users || {}).map(key => ({
69+
...state.userState.users[key],
70+
uid: key,
71+
})),
72+
});
73+
74+
const mapDispatchToProps = dispatch => ({
75+
onSetUsers: users => dispatch({ type: 'USERS_SET', users }),
76+
});
77+
78+
export default compose(
79+
withFirebase,
80+
connect(
81+
mapStateToProps,
82+
mapDispatchToProps,
83+
),
84+
)(UserList);

‎src/components/Users/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import UserList from './UserList';
2+
import UserItem from './UserItem';
3+
4+
export { UserList, UserItem };

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /