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
import React from 'react';
import { connect } from 'react-redux';
import React from "react";
import { connect } from "react-redux";
import { fetchUsersIfNeeded } from '../modules/users';
import Login from '../../containers/Login';
import { fetchUsersIfNeeded, fetchUsers } from "../modules/users";
import Login from "../../containers/Login";
import UserRow from "./UserRow";
type Props = {
login: boolean,
error: any,
users: any,
fetchUsersIfNeeded: () => void
}
fetchUsersIfNeeded: () => void,
fetchUsers: () => void
};
class Users extends React.Component<Props> {
componentDidMount() {
this.props.fetchUsersIfNeeded();
componentWillMount() {
this.props.fetchUsers();
}
render() {
const { login, error, users } = this.props;
if (this.props.users) {
return (
<div>
<h1>SCM</h1>
<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>
);
} else {
return <div>Loading...</div>;
}
}
}
const mapStateToProps = (state) => {
return null;
const mapStateToProps = state => {
return {
users: state.users.users
};
};
const mapDispatchToProps = (dispatch) => {
const mapDispatchToProps = dispatch => {
return {
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_FAILURE = "scm/users/FETCH_FAILURE";
const USERS_URL = "/scm/api/rest/v2/users";
function requestUsers() {
return {
type: FETCH_USERS
};
}
function fetchUsers() {
export function fetchUsers() {
return function(dispatch) {
dispatch(requestUsers());
return null;
// dispatch(requestUsers());
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:
return {
...state,
login: true,
error: null
users: [{ name: "" }]
};
case FETCH_USERS_SUCCESS:
return {
...state,
login: false,
timestamp: action.timestamp,
error: null,
users: action.payload
users: action.payload._embedded.users
};
case FETCH_USERS_FAILURE:
return {