From ac32b88256eb46449028f98d16488894e4fa115d Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 26 Jul 2018 15:30:28 +0200
Subject: [PATCH 1/7] start implementation of pagination for users

---
 scm-ui/public/locales/en/commons.json         |   4 +
 scm-ui/public/locales/en/users.json           |   6 +-
 scm-ui/src/components/Paginator.js            | 119 +++++++++
 scm-ui/src/components/Paginator.test.js       | 227 ++++++++++++++++++
 scm-ui/src/components/buttons/Button.js       |  20 +-
 scm-ui/src/containers/Main.js                 |   6 +
 scm-ui/src/types/Collection.js                |  12 +
 .../components/buttons/CreateUserButton.js    |  30 +++
 scm-ui/src/users/containers/Users.js          |  78 ++++--
 scm-ui/src/users/modules/users.js             |  33 ++-
 scm-ui/src/users/modules/users.test.js        |   5 +-
 11 files changed, 508 insertions(+), 32 deletions(-)
 create mode 100644 scm-ui/src/components/Paginator.js
 create mode 100644 scm-ui/src/components/Paginator.test.js
 create mode 100644 scm-ui/src/types/Collection.js
 create mode 100644 scm-ui/src/users/components/buttons/CreateUserButton.js

diff --git a/scm-ui/public/locales/en/commons.json b/scm-ui/public/locales/en/commons.json
index cfa2032bdd..e6d8fb305e 100644
--- a/scm-ui/public/locales/en/commons.json
+++ b/scm-ui/public/locales/en/commons.json
@@ -32,5 +32,9 @@
     "repositories": "Repositories",
     "users": "Users",
     "logout": "Logout"
+  },
+  "paginator": {
+    "next": "Next",
+    "previous": "Previous"
   }
 }
diff --git a/scm-ui/public/locales/en/users.json b/scm-ui/public/locales/en/users.json
index 7f8e026fb9..2f8a225c2a 100644
--- a/scm-ui/public/locales/en/users.json
+++ b/scm-ui/public/locales/en/users.json
@@ -9,8 +9,10 @@
   },
   "users": {
     "title": "Users",
-    "subtitle": "Create, read, update and delete users",
-    "add-button": "Add User"
+    "subtitle": "Create, read, update and delete users"
+  },
+  "create-user-button": {
+    "label": "Create"
   },
   "delete-user-button": {
     "label": "Delete",
diff --git a/scm-ui/src/components/Paginator.js b/scm-ui/src/components/Paginator.js
new file mode 100644
index 0000000000..8eb56c243b
--- /dev/null
+++ b/scm-ui/src/components/Paginator.js
@@ -0,0 +1,119 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { PagedCollection } from "../types/Collection";
+import { Button } from "./buttons";
+
+type Props = {
+  collection: PagedCollection,
+  onPageChange: string => void,
+  t: string => string
+};
+
+class Paginator extends React.Component<Props> {
+  isLinkUnavailable(linkType: string) {
+    return !this.props.collection || !this.props.collection._links[linkType];
+  }
+
+  createAction = (linkType: string) => () => {
+    const { collection, onPageChange } = this.props;
+    const link = collection._links[linkType].href;
+    onPageChange(link);
+  };
+
+  renderFirstButton() {
+    return this.renderPageButton(1, "first");
+  }
+
+  renderPreviousButton() {
+    return this.renderButton(
+      "pagination-previous",
+      "paginator.previous",
+      "prev"
+    );
+  }
+
+  renderNextButton() {
+    return this.renderButton("pagination-next", "paginator.next", "next");
+  }
+
+  renderLastButton() {
+    const { collection } = this.props;
+    return this.renderPageButton(collection.pageTotal, "last");
+  }
+
+  renderPageButton(page: number, linkType: string) {
+    return this.renderButton("pagination-link", page.toString(), linkType);
+  }
+
+  renderButton(className: string, label: string, linkType: string) {
+    const { t } = this.props;
+    return (
+      <Button
+        className={className}
+        label={t(label)}
+        disabled={this.isLinkUnavailable(linkType)}
+        action={this.createAction(linkType)}
+      />
+    );
+  }
+
+  seperator() {
+    return <span className="pagination-ellipsis">&hellip;</span>;
+  }
+
+  currentPage(page: number) {
+    return (
+      <Button
+        className="pagination-link is-current"
+        label={page}
+        disabled={true}
+      />
+    );
+  }
+
+  pageLinks() {
+    const { collection } = this.props;
+
+    const links = [];
+    const page = collection.page + 1;
+    const pageTotal = collection.pageTotal;
+    if (page > 1) {
+      links.push(this.renderFirstButton());
+    }
+    if (page > 3) {
+      links.push(this.seperator());
+    }
+    if (page > 2) {
+      links.push(this.renderPageButton(page - 1, "prev"));
+    }
+
+    links.push(this.currentPage(page));
+
+    if (page + 1 < pageTotal) {
+      links.push(this.renderPageButton(page + 1, "next"));
+      links.push(this.seperator());
+    }
+    if (page < pageTotal) {
+      links.push(this.renderLastButton());
+    }
+
+    return links;
+  }
+
+  render() {
+    return (
+      <nav className="pagination is-centered" aria-label="pagination">
+        {this.renderPreviousButton()}
+        {this.renderNextButton()}
+        <ul className="pagination-list">
+          {this.pageLinks().map((link, index) => {
+            return <li key={index}>{link}</li>;
+          })}
+        </ul>
+      </nav>
+    );
+  }
+}
+
+export default translate("commons")(Paginator);
diff --git a/scm-ui/src/components/Paginator.test.js b/scm-ui/src/components/Paginator.test.js
new file mode 100644
index 0000000000..6f7e4aa212
--- /dev/null
+++ b/scm-ui/src/components/Paginator.test.js
@@ -0,0 +1,227 @@
+// @flow
+import React from "react";
+import type { PagedCollection } from "../types/Collection";
+import { mount, shallow } from "enzyme";
+import "../tests/enzyme";
+import "../tests/i18n";
+
+import Paginator from "./Paginator";
+
+describe("paginator rendering tests", () => {
+  const dummyLink = {
+    href: "https://dummy"
+  };
+
+  it("should render all buttons but disabled, without links", () => {
+    const collection = {
+      page: 10,
+      pageTotal: 20,
+      _links: {}
+    };
+
+    const paginator = shallow(<Paginator collection={collection} />);
+    const buttons = paginator.find("Button");
+    expect(buttons.length).toBe(7);
+    for (let button of buttons) {
+      expect(button.props.disabled).toBeTruthy();
+    }
+  });
+
+  it("should render buttons for first page", () => {
+    const collection = {
+      page: 0,
+      pageTotal: 148,
+      _links: {
+        first: dummyLink,
+        next: dummyLink,
+        last: dummyLink
+      }
+    };
+
+    const paginator = shallow(<Paginator collection={collection} />);
+    const buttons = paginator.find("Button");
+    expect(buttons.length).toBe(5);
+
+    // previous button
+    expect(buttons.get(0).props.disabled).toBeTruthy();
+    // last button
+    expect(buttons.get(1).props.disabled).toBeFalsy();
+    // first button
+    const firstButton = buttons.get(2).props;
+    expect(firstButton.disabled).toBeTruthy();
+    expect(firstButton.label).toBe(1);
+
+    // next button
+    const nextButton = buttons.get(3).props;
+    expect(nextButton.disabled).toBeFalsy();
+    expect(nextButton.label).toBe("2");
+
+    // last button
+    const lastButton = buttons.get(4).props;
+    expect(lastButton.disabled).toBeFalsy();
+    expect(lastButton.label).toBe("148");
+  });
+
+  it("should render buttons for second page", () => {
+    const collection = {
+      page: 1,
+      pageTotal: 148,
+      _links: {
+        first: dummyLink,
+        prev: dummyLink,
+        next: dummyLink,
+        last: dummyLink
+      }
+    };
+
+    const paginator = shallow(<Paginator collection={collection} />);
+    const buttons = paginator.find("Button");
+    expect(buttons.length).toBe(6);
+
+    // previous button
+    expect(buttons.get(0).props.disabled).toBeFalsy();
+    // last button
+    expect(buttons.get(1).props.disabled).toBeFalsy();
+    // first button
+    const firstButton = buttons.get(2).props;
+    expect(firstButton.disabled).toBeFalsy();
+    expect(firstButton.label).toBe("1");
+
+    // current button
+    const currentButton = buttons.get(3).props;
+    expect(currentButton.disabled).toBeTruthy();
+    expect(currentButton.label).toBe(2);
+
+    // next button
+    const nextButton = buttons.get(4).props;
+    expect(nextButton.disabled).toBeFalsy();
+    expect(nextButton.label).toBe("3");
+
+    // last button
+    const lastButton = buttons.get(5).props;
+    expect(lastButton.disabled).toBeFalsy();
+    expect(lastButton.label).toBe("148");
+  });
+
+  it("should render buttons for last page", () => {
+    const collection = {
+      page: 147,
+      pageTotal: 148,
+      _links: {
+        first: dummyLink,
+        prev: dummyLink
+      }
+    };
+
+    const paginator = shallow(<Paginator collection={collection} />);
+    const buttons = paginator.find("Button");
+    expect(buttons.length).toBe(5);
+
+    // previous button
+    expect(buttons.get(0).props.disabled).toBeFalsy();
+    // last button
+    expect(buttons.get(1).props.disabled).toBeTruthy();
+    // first button
+    const firstButton = buttons.get(2).props;
+    expect(firstButton.disabled).toBeFalsy();
+    expect(firstButton.label).toBe("1");
+
+    // next button
+    const nextButton = buttons.get(3).props;
+    expect(nextButton.disabled).toBeFalsy();
+    expect(nextButton.label).toBe("147");
+
+    // last button
+    const lastButton = buttons.get(4).props;
+    expect(lastButton.disabled).toBeTruthy();
+    expect(lastButton.label).toBe(148);
+  });
+
+  it("should render buttons for penultimate page", () => {
+    const collection = {
+      page: 146,
+      pageTotal: 148,
+      _links: {
+        first: dummyLink,
+        prev: dummyLink,
+        next: dummyLink,
+        last: dummyLink
+      }
+    };
+
+    const paginator = shallow(<Paginator collection={collection} />);
+    const buttons = paginator.find("Button");
+    expect(buttons.length).toBe(6);
+
+    // previous button
+    expect(buttons.get(0).props.disabled).toBeFalsy();
+    // last button
+    expect(buttons.get(1).props.disabled).toBeFalsy();
+
+    // first button
+    const firstButton = buttons.get(2).props;
+    expect(firstButton.disabled).toBeFalsy();
+    expect(firstButton.label).toBe("1");
+
+    const currentButton = buttons.get(3).props;
+    expect(currentButton.disabled).toBeFalsy();
+    expect(currentButton.label).toBe("146");
+
+    // current button
+    const nextButton = buttons.get(4).props;
+    expect(nextButton.disabled).toBeTruthy();
+    expect(nextButton.label).toBe(147);
+
+    // last button
+    const lastButton = buttons.get(5).props;
+    expect(lastButton.disabled).toBeFalsy();
+    expect(lastButton.label).toBe("148");
+  });
+
+  it("should render buttons for a page in the middle", () => {
+    const collection = {
+      page: 41,
+      pageTotal: 148,
+      _links: {
+        first: dummyLink,
+        prev: dummyLink,
+        next: dummyLink,
+        last: dummyLink
+      }
+    };
+
+    const paginator = shallow(<Paginator collection={collection} />);
+    const buttons = paginator.find("Button");
+    expect(buttons.length).toBe(7);
+
+    // previous button
+    expect(buttons.get(0).props.disabled).toBeFalsy();
+    // next button
+    expect(buttons.get(1).props.disabled).toBeFalsy();
+
+    // first button
+    const firstButton = buttons.get(2).props;
+    expect(firstButton.disabled).toBeFalsy();
+    expect(firstButton.label).toBe("1");
+
+    // previous Button
+    const previousButton = buttons.get(3).props;
+    expect(previousButton.disabled).toBeFalsy();
+    expect(previousButton.label).toBe("41");
+
+    // current button
+    const currentButton = buttons.get(4).props;
+    expect(currentButton.disabled).toBeTruthy();
+    expect(currentButton.label).toBe(42);
+
+    // next button
+    const nextButton = buttons.get(5).props;
+    expect(nextButton.disabled).toBeFalsy();
+    expect(nextButton.label).toBe("43");
+
+    // last button
+    const lastButton = buttons.get(6).props;
+    expect(lastButton.disabled).toBeFalsy();
+    expect(lastButton.label).toBe("148");
+  });
+});
diff --git a/scm-ui/src/components/buttons/Button.js b/scm-ui/src/components/buttons/Button.js
index 37664cc508..242950ef11 100644
--- a/scm-ui/src/components/buttons/Button.js
+++ b/scm-ui/src/components/buttons/Button.js
@@ -9,7 +9,8 @@ export type ButtonProps = {
   disabled?: boolean,
   action?: () => void,
   link?: string,
-  fullWidth?: boolean
+  fullWidth?: boolean,
+  className?: string
 };
 
 type Props = ButtonProps & {
@@ -17,8 +18,20 @@ type Props = ButtonProps & {
 };
 
 class Button extends React.Component<Props> {
+  static defaultProps = {
+    type: "default"
+  };
+
   renderButton = () => {
-    const { label, loading, disabled, type, action, fullWidth } = this.props;
+    const {
+      label,
+      loading,
+      disabled,
+      type,
+      action,
+      fullWidth,
+      className
+    } = this.props;
     const loadingClass = loading ? "is-loading" : "";
     const fullWidthClass = fullWidth ? "is-fullwidth" : "";
     return (
@@ -29,7 +42,8 @@ class Button extends React.Component<Props> {
           "button",
           "is-" + type,
           loadingClass,
-          fullWidthClass
+          fullWidthClass,
+          className
         )}
       >
         {label}
diff --git a/scm-ui/src/containers/Main.js b/scm-ui/src/containers/Main.js
index 1b29d985e8..536227aec6 100644
--- a/scm-ui/src/containers/Main.js
+++ b/scm-ui/src/containers/Main.js
@@ -42,6 +42,12 @@ class Main extends React.Component<Props> {
             path="/users/add"
             component={AddUser}
           />
+          <ProtectedRoute
+            exact
+            path="/users/:page"
+            component={Users}
+            authenticated={authenticated}
+          />
           <ProtectedRoute
             authenticated={authenticated}
             path="/user/:name"
diff --git a/scm-ui/src/types/Collection.js b/scm-ui/src/types/Collection.js
new file mode 100644
index 0000000000..ffcbf78166
--- /dev/null
+++ b/scm-ui/src/types/Collection.js
@@ -0,0 +1,12 @@
+// @flow
+import type { Links } from "./hal";
+
+export type Collection = {
+  _embedded: Object,
+  _links: Links
+};
+
+export type PagedCollection = Collection & {
+  page: number,
+  pageTotal: number
+};
diff --git a/scm-ui/src/users/components/buttons/CreateUserButton.js b/scm-ui/src/users/components/buttons/CreateUserButton.js
new file mode 100644
index 0000000000..91d4292509
--- /dev/null
+++ b/scm-ui/src/users/components/buttons/CreateUserButton.js
@@ -0,0 +1,30 @@
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import { translate } from "react-i18next";
+import { AddButton } from "../../../components/buttons";
+import classNames from "classnames";
+
+const styles = {
+  spacing: {
+    margin: "1em 0 0 1em"
+  }
+};
+
+type Props = {
+  t: string => string,
+  classes: any
+};
+
+class CreateUserButton extends React.Component<Props> {
+  render() {
+    const { classes, t } = this.props;
+    return (
+      <div className={classNames("is-pulled-right", classes.spacing)}>
+        <AddButton label={t("create-user-button.label")} link="/users/add" />
+      </div>
+    );
+  }
+}
+
+export default translate("users")(injectSheet(styles)(CreateUserButton));
diff --git a/scm-ui/src/users/containers/Users.js b/scm-ui/src/users/containers/Users.js
index 92a467fc3b..34c2fb5915 100644
--- a/scm-ui/src/users/containers/Users.js
+++ b/scm-ui/src/users/containers/Users.js
@@ -1,31 +1,61 @@
 // @flow
 import React from "react";
+import type { History } from "history";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
 
-import { fetchUsers, getUsersFromState } from "../modules/users";
+import {
+  fetchUsersByPage,
+  fetchUsersByLink,
+  getUsersFromState,
+  selectList
+} from "../modules/users";
+
 import { Page } from "../../components/layout";
 import { UserTable } from "./../components/table";
 import type { User } from "../types/User";
 import { AddButton } from "../../components/buttons";
 import type { UserEntry } from "../types/UserEntry";
+import type { PagedCollection } from "../../types/Collection";
+import Paginator from "../../components/Paginator";
+import CreateUserButton from "../components/buttons/CreateUserButton";
 
 type Props = {
   loading?: boolean,
   error: Error,
   t: string => string,
   userEntries: Array<UserEntry>,
-  fetchUsers: () => void,
-  canAddUsers: boolean
+  fetchUsersByPage: (page: number) => void,
+  fetchUsersByLink: (link: string) => void,
+  canAddUsers: boolean,
+  list?: PagedCollection,
+  history: History,
+  match: any,
+  page: number
 };
 
 class Users extends React.Component<Props, User> {
   componentDidMount() {
-    this.props.fetchUsers();
+    this.props.fetchUsersByPage(this.props.page);
   }
 
+  onPageChange = (link: string) => {
+    this.props.fetchUsersByLink(link);
+  };
+
+  componentDidUpdate = (prevProps: Props) => {
+    const { page, list } = this.props;
+    if (list) {
+      // backend starts with 0
+      const statePage: number = list.page + 1;
+      if (page !== statePage) {
+        this.props.history.push(`/users/${statePage}`);
+      }
+    }
+  };
+
   render() {
-    const { userEntries, loading, t, error } = this.props;
+    const { userEntries, list, loading, t, error } = this.props;
     return (
       <Page
         title={t("users.title")}
@@ -34,26 +64,36 @@ class Users extends React.Component<Props, User> {
         error={error}
       >
         <UserTable entries={userEntries} />
+        {this.renderPaginator()}
         {this.renderAddButton()}
       </Page>
     );
   }
 
+  renderPaginator() {
+    const { list } = this.props;
+    if (list) {
+      return <Paginator collection={list} onPageChange={this.onPageChange} />;
+    }
+    return null;
+  }
+
   renderAddButton() {
-    const { canAddUsers, t } = this.props;
-    if (canAddUsers) {
-      return (
-        <div>
-          <AddButton label={t("users.add-button")} link="/users/add" />
-        </div>
-      );
+    if (this.props.canAddUsers) {
+      return <CreateUserButton />;
     } else {
       return;
     }
   }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state, ownProps) => {
+  let page = ownProps.match.params.page;
+  if (page) {
+    page = parseInt(page, 10);
+  } else {
+    page = 1;
+  }
   const userEntries = getUsersFromState(state);
   let error = null;
   let loading = false;
@@ -63,18 +103,24 @@ const mapStateToProps = state => {
     canAddUsers = state.users.list.userCreatePermission;
     loading = state.users.list.loading;
   }
+  const list = selectList(state);
   return {
     userEntries,
     error,
     loading,
-    canAddUsers
+    canAddUsers,
+    list,
+    page
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
-    fetchUsers: () => {
-      dispatch(fetchUsers());
+    fetchUsersByPage: (page: number) => {
+      dispatch(fetchUsersByPage(page));
+    },
+    fetchUsersByLink: (link: string) => {
+      dispatch(fetchUsersByLink(link));
     }
   };
 };
diff --git a/scm-ui/src/users/modules/users.js b/scm-ui/src/users/modules/users.js
index f6c01e7939..8a30072ec5 100644
--- a/scm-ui/src/users/modules/users.js
+++ b/scm-ui/src/users/modules/users.js
@@ -32,18 +32,20 @@ const CONTENT_TYPE_USER = "application/vnd.scmm-user+json;v=2";
 //fetch users
 
 export function fetchUsers() {
+  return fetchUsersByLink(USERS_URL);
+}
+
+export function fetchUsersByPage(page: number) {
+  // backend start counting by 0
+  return fetchUsersByLink(USERS_URL + "?page=" + (page - 1));
+}
+
+export function fetchUsersByLink(link: string) {
   return function(dispatch: any) {
     dispatch(fetchUsersPending());
     return apiClient
-      .get(USERS_URL)
-      .then(response => {
-        return response;
-      })
-      .then(response => {
-        if (response.ok) {
-          return response.json();
-        }
-      })
+      .get(link)
+      .then(response => response.json())
       .then(data => {
         dispatch(fetchUsersSuccess(data));
       })
@@ -345,7 +347,10 @@ export default function reducer(state: any = {}, action: any = {}) {
           error: null,
           entries: userNames,
           loading: false,
-          userCreatePermission: action.payload._links.create ? true : false
+          userCreatePermission: action.payload._links.create ? true : false,
+          page: action.payload.page,
+          pageTotal: action.payload.pageTotal,
+          _links: action.payload._links
         },
         byNames
       };
@@ -450,3 +455,11 @@ export default function reducer(state: any = {}, action: any = {}) {
       return state;
   }
 }
+
+// selectors
+
+export const selectList = (state: Object) => {
+  if (state.users && state.users.list && state.users.list._links) {
+    return state.users.list;
+  }
+};
diff --git a/scm-ui/src/users/modules/users.test.js b/scm-ui/src/users/modules/users.test.js
index 4c8a09d66d..d79bacb4b6 100644
--- a/scm-ui/src/users/modules/users.test.js
+++ b/scm-ui/src/users/modules/users.test.js
@@ -359,7 +359,10 @@ describe("users reducer", () => {
       entries: ["zaphod", "ford"],
       error: null,
       loading: false,
-      userCreatePermission: true
+      userCreatePermission: true,
+      page: 0,
+      pageTotal: 1,
+      _links: responseBody._links
     });
 
     expect(newState.byNames).toEqual({

From 9421359f872a829b1ba76e5d9805b7ffba1cf21b Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Fri, 27 Jul 2018 07:30:40 +0200
Subject: [PATCH 2/7] added test for button click

---
 scm-ui/src/components/Paginator.test.js | 27 +++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/scm-ui/src/components/Paginator.test.js b/scm-ui/src/components/Paginator.test.js
index 6f7e4aa212..13cc913354 100644
--- a/scm-ui/src/components/Paginator.test.js
+++ b/scm-ui/src/components/Paginator.test.js
@@ -224,4 +224,31 @@ describe("paginator rendering tests", () => {
     expect(lastButton.disabled).toBeFalsy();
     expect(lastButton.label).toBe("148");
   });
+
+  it("should call the function with the last previous url", () => {
+    const collection = {
+      page: 41,
+      pageTotal: 148,
+      _links: {
+        first: dummyLink,
+        prev: {
+          href: "https://www.scm-manager.org"
+        },
+        next: dummyLink,
+        last: dummyLink
+      }
+    };
+
+    let urlToOpen;
+    const callMe = (url: string) => {
+      urlToOpen = url;
+    };
+
+    const paginator = mount(
+      <Paginator collection={collection} onPageChange={callMe} />
+    );
+    paginator.find("Button.pagination-previous").simulate("click");
+
+    expect(urlToOpen).toBe("https://www.scm-manager.org");
+  });
 });

From 968d4efd0dee6c343bb248a8a9ab49e576f8421b Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Fri, 27 Jul 2018 08:04:48 +0200
Subject: [PATCH 3/7] simplify users by using selectors

---
 scm-ui/src/types/Collection.js         |  6 +++
 scm-ui/src/users/containers/Users.js   | 75 +++++++++++++-------------
 scm-ui/src/users/modules/users.js      | 40 +++++++++++---
 scm-ui/src/users/modules/users.test.js | 63 +++++++++++++++++++---
 scm-ui/src/users/types/User.js         |  2 +-
 5 files changed, 133 insertions(+), 53 deletions(-)

diff --git a/scm-ui/src/types/Collection.js b/scm-ui/src/types/Collection.js
index ffcbf78166..901982a47a 100644
--- a/scm-ui/src/types/Collection.js
+++ b/scm-ui/src/types/Collection.js
@@ -10,3 +10,9 @@ export type PagedCollection = Collection & {
   page: number,
   pageTotal: number
 };
+
+export type PageCollectionStateSlice = {
+  entry?: PagedCollection,
+  error?: Error,
+  loading?: boolean
+};
diff --git a/scm-ui/src/users/containers/Users.js b/scm-ui/src/users/containers/Users.js
index 34c2fb5915..8794954988 100644
--- a/scm-ui/src/users/containers/Users.js
+++ b/scm-ui/src/users/containers/Users.js
@@ -8,33 +8,33 @@ import {
   fetchUsersByPage,
   fetchUsersByLink,
   getUsersFromState,
-  selectList
+  selectListAsCollection,
+  isPermittedToCreateUsers
 } from "../modules/users";
 
 import { Page } from "../../components/layout";
 import { UserTable } from "./../components/table";
-import type { User } from "../types/User";
-import { AddButton } from "../../components/buttons";
 import type { UserEntry } from "../types/UserEntry";
-import type { PagedCollection } from "../../types/Collection";
+import type { PageCollectionStateSlice } from "../../types/Collection";
 import Paginator from "../../components/Paginator";
 import CreateUserButton from "../components/buttons/CreateUserButton";
 
 type Props = {
-  loading?: boolean,
-  error: Error,
-  t: string => string,
-  userEntries: Array<UserEntry>,
-  fetchUsersByPage: (page: number) => void,
-  fetchUsersByLink: (link: string) => void,
+  userEntries: UserEntry[],
   canAddUsers: boolean,
-  list?: PagedCollection,
+  list: PageCollectionStateSlice,
+  page: number,
+
+  // context objects
+  t: string => string,
   history: History,
-  match: any,
-  page: number
+
+  // dispatch functions
+  fetchUsersByPage: (page: number) => void,
+  fetchUsersByLink: (link: string) => void
 };
 
-class Users extends React.Component<Props, User> {
+class Users extends React.Component<Props> {
   componentDidMount() {
     this.props.fetchUsersByPage(this.props.page);
   }
@@ -43,11 +43,14 @@ class Users extends React.Component<Props, User> {
     this.props.fetchUsersByLink(link);
   };
 
+  /**
+   * reflect page transitions in the uri
+   */
   componentDidUpdate = (prevProps: Props) => {
     const { page, list } = this.props;
-    if (list) {
-      // backend starts with 0
-      const statePage: number = list.page + 1;
+    if (list.entry) {
+      // backend starts paging by 0
+      const statePage: number = list.entry.page + 1;
       if (page !== statePage) {
         this.props.history.push(`/users/${statePage}`);
       }
@@ -55,30 +58,32 @@ class Users extends React.Component<Props, User> {
   };
 
   render() {
-    const { userEntries, list, loading, t, error } = this.props;
+    const { userEntries, list, t } = this.props;
     return (
       <Page
         title={t("users.title")}
         subtitle={t("users.subtitle")}
-        loading={loading || !userEntries}
-        error={error}
+        loading={list.loading || !userEntries}
+        error={list.error}
       >
         <UserTable entries={userEntries} />
         {this.renderPaginator()}
-        {this.renderAddButton()}
+        {this.renderCreateButton()}
       </Page>
     );
   }
 
   renderPaginator() {
     const { list } = this.props;
-    if (list) {
-      return <Paginator collection={list} onPageChange={this.onPageChange} />;
+    if (list.entry) {
+      return (
+        <Paginator collection={list.entry} onPageChange={this.onPageChange} />
+      );
     }
     return null;
   }
 
-  renderAddButton() {
+  renderCreateButton() {
     if (this.props.canAddUsers) {
       return <CreateUserButton />;
     } else {
@@ -87,27 +92,23 @@ class Users extends React.Component<Props, User> {
   }
 }
 
-const mapStateToProps = (state, ownProps) => {
-  let page = ownProps.match.params.page;
+const getPageFromProps = props => {
+  let page = props.match.params.page;
   if (page) {
     page = parseInt(page, 10);
   } else {
     page = 1;
   }
+  return page;
+};
+
+const mapStateToProps = (state, ownProps) => {
+  const page = getPageFromProps(ownProps);
   const userEntries = getUsersFromState(state);
-  let error = null;
-  let loading = false;
-  let canAddUsers = false;
-  if (state.users && state.users.list) {
-    error = state.users.list.error;
-    canAddUsers = state.users.list.userCreatePermission;
-    loading = state.users.list.loading;
-  }
-  const list = selectList(state);
+  const canAddUsers = isPermittedToCreateUsers(state);
+  const list = selectListAsCollection(state);
   return {
     userEntries,
-    error,
-    loading,
     canAddUsers,
     list,
     page
diff --git a/scm-ui/src/users/modules/users.js b/scm-ui/src/users/modules/users.js
index 8a30072ec5..2aaa4b5adb 100644
--- a/scm-ui/src/users/modules/users.js
+++ b/scm-ui/src/users/modules/users.js
@@ -4,6 +4,7 @@ import type { User } from "../types/User";
 import type { UserEntry } from "../types/UserEntry";
 import { Dispatch } from "redux";
 import type { Action } from "../../types/Action";
+import type { PageCollectionStateSlice } from "../../types/Collection";
 
 export const FETCH_USERS_PENDING = "scm/users/FETCH_USERS_PENDING";
 export const FETCH_USERS_SUCCESS = "scm/users/FETCH_USERS_SUCCESS";
@@ -345,12 +346,14 @@ export default function reducer(state: any = {}, action: any = {}) {
         ...state,
         list: {
           error: null,
-          entries: userNames,
           loading: false,
-          userCreatePermission: action.payload._links.create ? true : false,
-          page: action.payload.page,
-          pageTotal: action.payload.pageTotal,
-          _links: action.payload._links
+          entries: userNames,
+          entry: {
+            userCreatePermission: action.payload._links.create ? true : false,
+            page: action.payload.page,
+            pageTotal: action.payload.pageTotal,
+            _links: action.payload._links
+          }
         },
         byNames
       };
@@ -458,8 +461,31 @@ export default function reducer(state: any = {}, action: any = {}) {
 
 // selectors
 
-export const selectList = (state: Object) => {
-  if (state.users && state.users.list && state.users.list._links) {
+const selectList = (state: Object) => {
+  if (state.users && state.users.list) {
     return state.users.list;
   }
+  return {};
+};
+
+const selectListEntry = (state: Object) => {
+  const list = selectList(state);
+  if (list.entry) {
+    return list.entry;
+  }
+  return {};
+};
+
+export const selectListAsCollection = (
+  state: Object
+): PageCollectionStateSlice => {
+  return selectList(state);
+};
+
+export const isPermittedToCreateUsers = (state: Object): boolean => {
+  const permission = selectListEntry(state).userCreatePermission;
+  if (permission) {
+    return true;
+  }
+  return false;
 };
diff --git a/scm-ui/src/users/modules/users.test.js b/scm-ui/src/users/modules/users.test.js
index d79bacb4b6..1322a3ca54 100644
--- a/scm-ui/src/users/modules/users.test.js
+++ b/scm-ui/src/users/modules/users.test.js
@@ -38,7 +38,9 @@ import {
   deleteUserSuccess,
   fetchUsersPending,
   fetchUserPending,
-  fetchUserFailure
+  fetchUserFailure,
+  selectListAsCollection,
+  isPermittedToCreateUsers
 } from "./users";
 
 import reducer from "./users";
@@ -359,10 +361,12 @@ describe("users reducer", () => {
       entries: ["zaphod", "ford"],
       error: null,
       loading: false,
-      userCreatePermission: true,
-      page: 0,
-      pageTotal: 1,
-      _links: responseBody._links
+      entry: {
+        userCreatePermission: true,
+        page: 0,
+        pageTotal: 1,
+        _links: responseBody._links
+      }
     });
 
     expect(newState.byNames).toEqual({
@@ -374,7 +378,7 @@ describe("users reducer", () => {
       }
     });
 
-    expect(newState.list.userCreatePermission).toBeTruthy();
+    expect(newState.list.entry.userCreatePermission).toBeTruthy();
   });
 
   test("should update state correctly according to DELETE_USER action", () => {
@@ -464,10 +468,10 @@ describe("users reducer", () => {
     expect(newState.byNames["ford"]).toBeDefined();
   });
 
-  it("should set userCreatePermission to true if update link is present", () => {
+  it("should set userCreatePermission to true if create link is present", () => {
     const newState = reducer({}, fetchUsersSuccess(responseBody));
 
-    expect(newState.list.userCreatePermission).toBeTruthy();
+    expect(newState.list.entry.userCreatePermission).toBeTruthy();
   });
 
   it("should update state correctly according to CREATE_USER_PENDING action", () => {
@@ -577,3 +581,46 @@ describe("users reducer", () => {
     expect(newState.byNames["ford"].entry).toBeFalsy();
   });
 });
+
+describe("selector tests", () => {
+  it("should return an empty object", () => {
+    expect(selectListAsCollection({})).toEqual({});
+    expect(selectListAsCollection({ users: { a: "a" } })).toEqual({});
+  });
+
+  it("should return a state slice collection", () => {
+    const state = {
+      users: {
+        list: {
+          loading: false
+        }
+      }
+    };
+    expect(selectListAsCollection(state)).toEqual({ loading: false });
+  });
+
+  it("should return false", () => {
+    expect(isPermittedToCreateUsers({})).toBe(false);
+    expect(isPermittedToCreateUsers({ users: { list: { entry: {} } } })).toBe(
+      false
+    );
+    expect(
+      isPermittedToCreateUsers({
+        users: { list: { entry: { userCreatePermission: false } } }
+      })
+    ).toBe(false);
+  });
+
+  it("should return true", () => {
+    const state = {
+      users: {
+        list: {
+          entry: {
+            userCreatePermission: true
+          }
+        }
+      }
+    };
+    expect(isPermittedToCreateUsers(state)).toBe(true);
+  });
+});
diff --git a/scm-ui/src/users/types/User.js b/scm-ui/src/users/types/User.js
index 0d85aa179c..b113f7f795 100644
--- a/scm-ui/src/users/types/User.js
+++ b/scm-ui/src/users/types/User.js
@@ -1,5 +1,5 @@
 //@flow
-import type { Link, Links } from "../../types/hal";
+import type { Links } from "../../types/hal";
 
 export type User = {
   displayName: string,

From 7bd03ed8b5bcd8f084952acb2d96be8d56bf9bd2 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Fri, 27 Jul 2018 08:05:51 +0200
Subject: [PATCH 4/7] remove unused import

---
 scm-ui/src/components/Paginator.test.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scm-ui/src/components/Paginator.test.js b/scm-ui/src/components/Paginator.test.js
index 13cc913354..ce77eedd7f 100644
--- a/scm-ui/src/components/Paginator.test.js
+++ b/scm-ui/src/components/Paginator.test.js
@@ -1,6 +1,5 @@
 // @flow
 import React from "react";
-import type { PagedCollection } from "../types/Collection";
 import { mount, shallow } from "enzyme";
 import "../tests/enzyme";
 import "../tests/i18n";

From e5f7621bad1e5c98e6588fe3114c6bd1e93c925c Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Fri, 27 Jul 2018 11:52:08 +0200
Subject: [PATCH 5/7] Fixed minor issues

---
 scm-ui/src/components/Paginator.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/scm-ui/src/components/Paginator.js b/scm-ui/src/components/Paginator.js
index 8eb56c243b..5b306b8240 100644
--- a/scm-ui/src/components/Paginator.js
+++ b/scm-ui/src/components/Paginator.js
@@ -26,15 +26,17 @@ class Paginator extends React.Component<Props> {
   }
 
   renderPreviousButton() {
+    const { t } = this.props;
     return this.renderButton(
       "pagination-previous",
-      "paginator.previous",
+      t("paginator.previous"),
       "prev"
     );
   }
 
   renderNextButton() {
-    return this.renderButton("pagination-next", "paginator.next", "next");
+    const { t } = this.props;
+    return this.renderButton("pagination-next", t("paginator.next"), "next");
   }
 
   renderLastButton() {
@@ -47,11 +49,10 @@ class Paginator extends React.Component<Props> {
   }
 
   renderButton(className: string, label: string, linkType: string) {
-    const { t } = this.props;
     return (
       <Button
         className={className}
-        label={t(label)}
+        label={label}
         disabled={this.isLinkUnavailable(linkType)}
         action={this.createAction(linkType)}
       />

From 82f50c340426c7e0cd55ef868421a34d83921ac0 Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Mon, 30 Jul 2018 09:12:33 +0200
Subject: [PATCH 6/7] Fixed test structure for users

---
 scm-ui/src/users/modules/users.test.js | 457 +++++++++++++------------
 1 file changed, 230 insertions(+), 227 deletions(-)

diff --git a/scm-ui/src/users/modules/users.test.js b/scm-ui/src/users/modules/users.test.js
index e56c8b68ae..c6da4a0248 100644
--- a/scm-ui/src/users/modules/users.test.js
+++ b/scm-ui/src/users/modules/users.test.js
@@ -376,246 +376,249 @@ describe("users reducer", () => {
 
     expect(newState.list.entry.userCreatePermission).toBeTruthy();
   });
-});
 
-it("should not replace whole byNames map when fetching users", () => {
-  const oldState = {
-    byNames: {
-      ford: {
-        entry: userFord
-      }
-    }
-  };
-
-  const newState = reducer(oldState, fetchUsersSuccess(responseBody));
-  expect(newState.byNames["zaphod"]).toBeDefined();
-  expect(newState.byNames["ford"]).toBeDefined();
-});
-
-test("should update state correctly according to DELETE_USER_PENDING action", () => {
-  const state = {
-    byNames: {
-      zaphod: {
-        loading: false,
-        error: null,
-        entry: userZaphod
-      }
-    }
-  };
-
-  const newState = reducer(state, deleteUserPending(userZaphod));
-  const zaphod = newState.byNames["zaphod"];
-  expect(zaphod.loading).toBeTruthy();
-  expect(zaphod.entry).toBe(userZaphod);
-});
-
-it("should not effect other users if one user will be deleted", () => {
-  const state = {
-    byNames: {
-      zaphod: {
-        loading: false,
-        error: null,
-        entry: userZaphod
-      },
-      ford: {
-        loading: false
-      }
-    }
-  };
-
-  const newState = reducer(state, deleteUserPending(userZaphod));
-  const ford = newState.byNames["ford"];
-  expect(ford.loading).toBeFalsy();
-});
-
-it("should set the error of user which could not be deleted", () => {
-  const state = {
-    byNames: {
-      zaphod: {
-        loading: true,
-        entry: userZaphod
-      }
-    }
-  };
-
-  const error = new Error("error");
-  const newState = reducer(state, deleteUserFailure(userZaphod, error));
-  const zaphod = newState.byNames["zaphod"];
-  expect(zaphod.loading).toBeFalsy();
-  expect(zaphod.error).toBe(error);
-});
-
-it("should not effect other users if one user could not be deleted", () => {
-  const state = {
-    byNames: {
-      zaphod: {
-        loading: false,
-        error: null,
-        entry: userZaphod
-      },
-      ford: {
-        loading: false
-      }
-    }
-  };
-
-  const error = new Error("error");
-  const newState = reducer(state, deleteUserFailure(userZaphod, error));
-  const ford = newState.byNames["ford"];
-  expect(ford.loading).toBeFalsy();
-});
-
-it("should remove user from state when delete succeeds", () => {
-  const state = {
-    list: {
-      entries: ["ford", "zaphod"]
-    },
-    byNames: {
-      zaphod: {
-        loading: true,
-        error: null,
-        entry: userZaphod
-      },
-      ford: {
-        loading: true,
-        error: null,
-        entry: userFord
-      }
-    }
-  };
-
-  const newState = reducer(state, deleteUserSuccess(userFord));
-  expect(newState.byNames["zaphod"]).toBeDefined();
-  expect(newState.byNames["ford"]).toBeFalsy();
-  expect(newState.list.entries).toEqual(["zaphod"]);
-});
-
-it("should set userCreatePermission to true if create link is present", () => {
-  const newState = reducer({}, fetchUsersSuccess(responseBody));
-
-  expect(newState.list.entry.userCreatePermission).toBeTruthy();
-  expect(newState.list.entries).toEqual(["zaphod", "ford"]);
-  expect(newState.byNames["ford"]).toBeTruthy();
-  expect(newState.byNames["zaphod"]).toBeTruthy();
-});
-
-it("should update state correctly according to CREATE_USER_PENDING action", () => {
-  const newState = reducer({}, createUserPending(userZaphod));
-  expect(newState.create.loading).toBeTruthy();
-  expect(newState.create.error).toBeFalsy();
-});
-
-it("should update state correctly according to CREATE_USER_SUCCESS action", () => {
-  const newState = reducer({ create: { loading: true } }, createUserSuccess());
-  expect(newState.create.loading).toBeFalsy();
-  expect(newState.create.error).toBeFalsy();
-});
-
-it("should set the loading to false and the error if user could not be created", () => {
-  const newState = reducer(
-    { create: { loading: true, error: null } },
-    createUserFailure(userFord, new Error("kaputt kaputt"))
-  );
-  expect(newState.create.loading).toBeFalsy();
-  expect(newState.create.error).toEqual(new Error("kaputt kaputt"));
-});
-
-it("should update state according to FETCH_USER_PENDING action", () => {
-  const newState = reducer({}, fetchUserPending("zaphod"));
-  expect(newState.byNames["zaphod"].loading).toBeTruthy();
-});
-
-it("should not affect list state", () => {
-  const newState = reducer(
-    {
-      list: {
-        entries: ["ford"]
-      }
-    },
-    fetchUserPending("zaphod")
-  );
-  expect(newState.byNames["zaphod"].loading).toBeTruthy();
-  expect(newState.list.entries).toEqual(["ford"]);
-});
-
-it("should update state according to FETCH_USER_FAILURE action", () => {
-  const error = new Error("kaputt!");
-  const newState = reducer({}, fetchUserFailure(userFord.name, error));
-  expect(newState.byNames["ford"].error).toBe(error);
-  expect(newState.byNames["ford"].loading).toBeFalsy();
-});
-
-it("should update state according to FETCH_USER_SUCCESS action", () => {
-  const newState = reducer({}, fetchUserSuccess(userFord));
-  expect(newState.byNames["ford"].loading).toBeFalsy();
-  expect(newState.byNames["ford"].entry).toBe(userFord);
-});
-
-it("should affect users state nor the state of other users", () => {
-  const newState = reducer(
-    {
-      list: {
-        entries: ["zaphod"]
-      }
-    },
-    fetchUserSuccess(userFord)
-  );
-  expect(newState.byNames["ford"].loading).toBeFalsy();
-  expect(newState.byNames["ford"].entry).toBe(userFord);
-  expect(newState.list.entries).toEqual(["zaphod"]);
-});
-
-it("should update state according to MODIFY_USER_PENDING action", () => {
-  const newState = reducer(
-    {
+  it("should not replace whole byNames map when fetching users", () => {
+    const oldState = {
       byNames: {
         ford: {
-          error: new Error("something"),
-          entry: {}
+          entry: userFord
         }
       }
-    },
-    modifyUserPending(userFord)
-  );
-  expect(newState.byNames["ford"].loading).toBeTruthy();
-  expect(newState.byNames["ford"].error).toBeFalsy();
-  expect(newState.byNames["ford"].entry).toBeFalsy();
-});
+    };
 
-it("should update state according to MODIFY_USER_SUCCESS action", () => {
-  const newState = reducer(
-    {
+    const newState = reducer(oldState, fetchUsersSuccess(responseBody));
+    expect(newState.byNames["zaphod"]).toBeDefined();
+    expect(newState.byNames["ford"]).toBeDefined();
+  });
+
+  it("should update state correctly according to DELETE_USER_PENDING action", () => {
+    const state = {
       byNames: {
+        zaphod: {
+          loading: false,
+          error: null,
+          entry: userZaphod
+        }
+      }
+    };
+
+    const newState = reducer(state, deleteUserPending(userZaphod));
+    const zaphod = newState.byNames["zaphod"];
+    expect(zaphod.loading).toBeTruthy();
+    expect(zaphod.entry).toBe(userZaphod);
+  });
+
+  it("should not effect other users if one user will be deleted", () => {
+    const state = {
+      byNames: {
+        zaphod: {
+          loading: false,
+          error: null,
+          entry: userZaphod
+        },
+        ford: {
+          loading: false
+        }
+      }
+    };
+
+    const newState = reducer(state, deleteUserPending(userZaphod));
+    const ford = newState.byNames["ford"];
+    expect(ford.loading).toBeFalsy();
+  });
+
+  it("should set the error of user which could not be deleted", () => {
+    const state = {
+      byNames: {
+        zaphod: {
+          loading: true,
+          entry: userZaphod
+        }
+      }
+    };
+
+    const error = new Error("error");
+    const newState = reducer(state, deleteUserFailure(userZaphod, error));
+    const zaphod = newState.byNames["zaphod"];
+    expect(zaphod.loading).toBeFalsy();
+    expect(zaphod.error).toBe(error);
+  });
+
+  it("should not effect other users if one user could not be deleted", () => {
+    const state = {
+      byNames: {
+        zaphod: {
+          loading: false,
+          error: null,
+          entry: userZaphod
+        },
+        ford: {
+          loading: false
+        }
+      }
+    };
+
+    const error = new Error("error");
+    const newState = reducer(state, deleteUserFailure(userZaphod, error));
+    const ford = newState.byNames["ford"];
+    expect(ford.loading).toBeFalsy();
+  });
+
+  it("should remove user from state when delete succeeds", () => {
+    const state = {
+      list: {
+        entries: ["ford", "zaphod"]
+      },
+      byNames: {
+        zaphod: {
+          loading: true,
+          error: null,
+          entry: userZaphod
+        },
         ford: {
           loading: true,
-          error: new Error("something"),
-          entry: {}
+          error: null,
+          entry: userFord
         }
       }
-    },
-    modifyUserSuccess(userFord)
-  );
-  expect(newState.byNames["ford"].loading).toBeFalsy();
-  expect(newState.byNames["ford"].error).toBeFalsy();
-  expect(newState.byNames["ford"].entry).toBe(userFord);
-});
+    };
 
-it("should update state according to MODIFY_USER_SUCCESS action", () => {
-  const error = new Error("something went wrong");
-  const newState = reducer(
-    {
-      byNames: {
-        ford: {
-          loading: true,
-          entry: {}
+    const newState = reducer(state, deleteUserSuccess(userFord));
+    expect(newState.byNames["zaphod"]).toBeDefined();
+    expect(newState.byNames["ford"]).toBeFalsy();
+    expect(newState.list.entries).toEqual(["zaphod"]);
+  });
+
+  it("should set userCreatePermission to true if create link is present", () => {
+    const newState = reducer({}, fetchUsersSuccess(responseBody));
+
+    expect(newState.list.entry.userCreatePermission).toBeTruthy();
+    expect(newState.list.entries).toEqual(["zaphod", "ford"]);
+    expect(newState.byNames["ford"]).toBeTruthy();
+    expect(newState.byNames["zaphod"]).toBeTruthy();
+  });
+
+  it("should update state correctly according to CREATE_USER_PENDING action", () => {
+    const newState = reducer({}, createUserPending(userZaphod));
+    expect(newState.create.loading).toBeTruthy();
+    expect(newState.create.error).toBeFalsy();
+  });
+
+  it("should update state correctly according to CREATE_USER_SUCCESS action", () => {
+    const newState = reducer(
+      { create: { loading: true } },
+      createUserSuccess()
+    );
+    expect(newState.create.loading).toBeFalsy();
+    expect(newState.create.error).toBeFalsy();
+  });
+
+  it("should set the loading to false and the error if user could not be created", () => {
+    const newState = reducer(
+      { create: { loading: true, error: null } },
+      createUserFailure(userFord, new Error("kaputt kaputt"))
+    );
+    expect(newState.create.loading).toBeFalsy();
+    expect(newState.create.error).toEqual(new Error("kaputt kaputt"));
+  });
+
+  it("should update state according to FETCH_USER_PENDING action", () => {
+    const newState = reducer({}, fetchUserPending("zaphod"));
+    expect(newState.byNames["zaphod"].loading).toBeTruthy();
+  });
+
+  it("should not affect list state", () => {
+    const newState = reducer(
+      {
+        list: {
+          entries: ["ford"]
         }
-      }
-    },
-    modifyUserFailure(userFord, error)
-  );
-  expect(newState.byNames["ford"].loading).toBeFalsy();
-  expect(newState.byNames["ford"].error).toBe(error);
-  expect(newState.byNames["ford"].entry).toBeFalsy();
+      },
+      fetchUserPending("zaphod")
+    );
+    expect(newState.byNames["zaphod"].loading).toBeTruthy();
+    expect(newState.list.entries).toEqual(["ford"]);
+  });
+
+  it("should update state according to FETCH_USER_FAILURE action", () => {
+    const error = new Error("kaputt!");
+    const newState = reducer({}, fetchUserFailure(userFord.name, error));
+    expect(newState.byNames["ford"].error).toBe(error);
+    expect(newState.byNames["ford"].loading).toBeFalsy();
+  });
+
+  it("should update state according to FETCH_USER_SUCCESS action", () => {
+    const newState = reducer({}, fetchUserSuccess(userFord));
+    expect(newState.byNames["ford"].loading).toBeFalsy();
+    expect(newState.byNames["ford"].entry).toBe(userFord);
+  });
+
+  it("should affect users state nor the state of other users", () => {
+    const newState = reducer(
+      {
+        list: {
+          entries: ["zaphod"]
+        }
+      },
+      fetchUserSuccess(userFord)
+    );
+    expect(newState.byNames["ford"].loading).toBeFalsy();
+    expect(newState.byNames["ford"].entry).toBe(userFord);
+    expect(newState.list.entries).toEqual(["zaphod"]);
+  });
+
+  it("should update state according to MODIFY_USER_PENDING action", () => {
+    const newState = reducer(
+      {
+        byNames: {
+          ford: {
+            error: new Error("something"),
+            entry: {}
+          }
+        }
+      },
+      modifyUserPending(userFord)
+    );
+    expect(newState.byNames["ford"].loading).toBeTruthy();
+    expect(newState.byNames["ford"].error).toBeFalsy();
+    expect(newState.byNames["ford"].entry).toBeFalsy();
+  });
+
+  it("should update state according to MODIFY_USER_SUCCESS action", () => {
+    const newState = reducer(
+      {
+        byNames: {
+          ford: {
+            loading: true,
+            error: new Error("something"),
+            entry: {}
+          }
+        }
+      },
+      modifyUserSuccess(userFord)
+    );
+    expect(newState.byNames["ford"].loading).toBeFalsy();
+    expect(newState.byNames["ford"].error).toBeFalsy();
+    expect(newState.byNames["ford"].entry).toBe(userFord);
+  });
+
+  it("should update state according to MODIFY_USER_SUCCESS action", () => {
+    const error = new Error("something went wrong");
+    const newState = reducer(
+      {
+        byNames: {
+          ford: {
+            loading: true,
+            entry: {}
+          }
+        }
+      },
+      modifyUserFailure(userFord, error)
+    );
+    expect(newState.byNames["ford"].loading).toBeFalsy();
+    expect(newState.byNames["ford"].error).toBe(error);
+    expect(newState.byNames["ford"].entry).toBeFalsy();
+  });
 });
 
 describe("selector tests", () => {

From 46a3dd3a759b9f9a38119377363bfc29cb1de38c Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Mon, 30 Jul 2018 07:19:59 +0000
Subject: [PATCH 7/7] Close branch feature/ui_users_paging