Added bootstrapping for user table

This commit is contained in:
Philipp Czora
2018-07-10 08:38:38 +02:00
parent 3c3c2647b9
commit 06ca71ce86
3 changed files with 95 additions and 33 deletions

View File

@@ -0,0 +1,20 @@
// @flow
import React from "react";
type Props = {
user: any
};
export default class UserRow extends React.Component<Props> {
render() {
return (
<tr>
<td>{this.props.user.displayName}</td>
<td>{this.props.user.mail}</td>
<td>
<input type="checkbox" id="admin" checked={this.props.user.admin} />
</td>
</tr>
);
}
}

View File

@@ -1,48 +1,70 @@
// @flow // @flow
import React from 'react'; import React from "react";
import { connect } from 'react-redux'; import { connect } from "react-redux";
import { fetchUsersIfNeeded } from '../modules/users'; import { fetchUsersIfNeeded, fetchUsers } from "../modules/users";
import Login from '../../containers/Login'; import Login from "../../containers/Login";
import UserRow from "./UserRow";
type Props = { type Props = {
login: boolean, login: boolean,
error: any, error: any,
users: any, users: any,
fetchUsersIfNeeded: () => void fetchUsersIfNeeded: () => void,
} fetchUsers: () => void
};
class Users extends React.Component<Props> { class Users extends React.Component<Props> {
componentWillMount() {
componentDidMount() { this.props.fetchUsers();
this.props.fetchUsersIfNeeded();
} }
render() { render() {
const { login, error, users } = this.props; if (this.props.users) {
return ( return (
<div> <div>
<h1>SCM</h1> <h1>SCM</h1>
<h2>Users</h2> <h2>Users</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>E-Mail</th>
<th>Admin</th>
</tr>
</thead>
<tbody>
{this.props.users.map((user, index) => {
return <UserRow key={index} user={user} />;
})}
</tbody>
</table>
</div> </div>
); );
} else {
return <div>Loading...</div>;
}
} }
} }
const mapStateToProps = (state) => { const mapStateToProps = state => {
return null; return {
users: state.users.users
};
}; };
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = dispatch => {
return { return {
fetchUsersIfNeeded: () => { fetchUsersIfNeeded: () => {
dispatch(fetchUsersIfNeeded()) dispatch(fetchUsersIfNeeded());
} },
fetchUsers: () => {
dispatch(fetchUsers());
} }
};
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Users); export default connect(
mapStateToProps,
mapDispatchToProps
)(Users);

View File

@@ -4,16 +4,38 @@ const FETCH_USERS = "scm/users/FETCH";
const FETCH_USERS_SUCCESS = "scm/users/FETCH_SUCCESS"; const FETCH_USERS_SUCCESS = "scm/users/FETCH_SUCCESS";
const FETCH_USERS_FAILURE = "scm/users/FETCH_FAILURE"; const FETCH_USERS_FAILURE = "scm/users/FETCH_FAILURE";
const USERS_URL = "/scm/api/rest/v2/users";
function requestUsers() { function requestUsers() {
return { return {
type: FETCH_USERS type: FETCH_USERS
}; };
} }
function fetchUsers() { export function fetchUsers() {
return function(dispatch) { return function(dispatch) {
dispatch(requestUsers()); // dispatch(requestUsers());
return null; return fetch(USERS_URL, {
credentials: "same-origin",
headers: {
Cache: "no-cache"
}
})
.then(response => {
if (response.ok) {
return response.json();
}
})
.then(data => {
dispatch(fetchUsersSuccess(data));
});
};
}
function fetchUsersSuccess(users: any) {
return {
type: FETCH_USERS_SUCCESS,
payload: users
}; };
} }
@@ -35,16 +57,14 @@ export default function reducer(state: any = {}, action: any = {}) {
case FETCH_USERS: case FETCH_USERS:
return { return {
...state, ...state,
login: true, users: [{ name: "" }]
error: null
}; };
case FETCH_USERS_SUCCESS: case FETCH_USERS_SUCCESS:
return { return {
...state, ...state,
login: false,
timestamp: action.timestamp, timestamp: action.timestamp,
error: null, error: null,
users: action.payload users: action.payload._embedded.users
}; };
case FETCH_USERS_FAILURE: case FETCH_USERS_FAILURE:
return { return {