From 06ca71ce8683d5a65ced7f8626abe926c13e2eca Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Tue, 10 Jul 2018 08:38:38 +0200
Subject: [PATCH] Added bootstrapping for user table

---
 scm-ui/src/users/containers/UserRow.js | 20 +++++++
 scm-ui/src/users/containers/Users.js   | 74 +++++++++++++++++---------
 scm-ui/src/users/modules/users.js      | 34 +++++++++---
 3 files changed, 95 insertions(+), 33 deletions(-)
 create mode 100644 scm-ui/src/users/containers/UserRow.js

diff --git a/scm-ui/src/users/containers/UserRow.js b/scm-ui/src/users/containers/UserRow.js
new file mode 100644
index 0000000000..d9184d3586
--- /dev/null
+++ b/scm-ui/src/users/containers/UserRow.js
@@ -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>
+    );
+  }
+}
diff --git a/scm-ui/src/users/containers/Users.js b/scm-ui/src/users/containers/Users.js
index e3f3c5190d..9a628c6fc2 100644
--- a/scm-ui/src/users/containers/Users.js
+++ b/scm-ui/src/users/containers/Users.js
@@ -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>
       );
-
-  }
-
-}
-
-const mapStateToProps = (state) => {
-  return null;
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    fetchUsersIfNeeded: () => {
-      dispatch(fetchUsersIfNeeded())
+    } else {
+      return <div>Loading...</div>;
     }
   }
+}
+
+const mapStateToProps = state => {
+  return {
+    users: state.users.users
+  };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Users);
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchUsersIfNeeded: () => {
+      dispatch(fetchUsersIfNeeded());
+    },
+    fetchUsers: () => {
+      dispatch(fetchUsers());
+    }
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Users);
diff --git a/scm-ui/src/users/modules/users.js b/scm-ui/src/users/modules/users.js
index c1103d60f3..192e13e0eb 100644
--- a/scm-ui/src/users/modules/users.js
+++ b/scm-ui/src/users/modules/users.js
@@ -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 {