From 8fefe5ff741767fe4c3806bbaf16782e62d30912 Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Thu, 20 Sep 2018 16:28:41 +0200
Subject: [PATCH] page numbers for Changesets are now present in the URL

---
 .../src/repos/components/ChangesetAvatar.js   |  6 +-
 scm-ui/src/repos/containers/Changesets.js     | 91 ++++++++++++++-----
 scm-ui/src/repos/containers/RepositoryRoot.js | 52 +++++++----
 scm-ui/src/repos/modules/changesets.js        | 13 ++-
 4 files changed, 112 insertions(+), 50 deletions(-)

diff --git a/scm-ui/src/repos/components/ChangesetAvatar.js b/scm-ui/src/repos/components/ChangesetAvatar.js
index eb461d374d..f7d6ab21af 100644
--- a/scm-ui/src/repos/components/ChangesetAvatar.js
+++ b/scm-ui/src/repos/components/ChangesetAvatar.js
@@ -1,8 +1,8 @@
 //@flow
 import React from "react";
-import {ExtensionPoint} from "@scm-manager/ui-extensions";
-import type {Changeset} from "@scm-manager/ui-types";
-import {Image} from "@scm-manager/ui-components";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import type { Changeset } from "@scm-manager/ui-types";
+import { Image } from "@scm-manager/ui-components";
 
 type Props = {
   changeset: Changeset
diff --git a/scm-ui/src/repos/containers/Changesets.js b/scm-ui/src/repos/containers/Changesets.js
index 48a2f0d476..a3aa093907 100644
--- a/scm-ui/src/repos/containers/Changesets.js
+++ b/scm-ui/src/repos/containers/Changesets.js
@@ -4,17 +4,18 @@ import { connect } from "react-redux";
 import {
   ErrorNotification,
   Loading,
+  Page,
   Paginator
 } from "@scm-manager/ui-components";
 
 import {
-  fetchChangesets,
-  fetchChangesetsByNamespaceNameAndBranch,
   getFetchChangesetsFailure,
   isFetchChangesetsPending,
   selectListAsCollection,
   fetchChangesetsByLink,
-  getChangesetsFromState
+  getChangesetsFromState,
+  fetchChangesetsByPage,
+  fetchChangesetsByBranchAndPage
 } from "../modules/changesets";
 import type { History } from "history";
 import {
@@ -40,7 +41,7 @@ type Props = {
   page: number
 };
 
-class Changesets extends React.Component<State, Props> {
+class Changesets extends React.PureComponent<State, Props> {
   constructor(props) {
     super(props);
     this.state = {};
@@ -56,26 +57,57 @@ class Changesets extends React.Component<State, Props> {
     const { namespace, name } = this.props.repository;
     const branchName = this.props.match.params.branch;
     const {
-      fetchChangesetsByNamespaceNameAndBranch,
-      fetchChangesetsByNamespaceAndName,
-      fetchBranchesByNamespaceAndName
+      fetchBranchesByNamespaceAndName,
+      fetchChangesetsByPage,
+      fetchChangesetsByBranchAndPage
     } = this.props;
     if (branchName) {
-      fetchChangesetsByNamespaceNameAndBranch(namespace, name, branchName);
+      fetchChangesetsByBranchAndPage(
+        namespace,
+        name,
+        branchName,
+        this.props.page
+      );
     } else {
-      fetchChangesetsByNamespaceAndName(namespace, name);
+      fetchChangesetsByPage(namespace, name, this.props.page);
     }
     fetchBranchesByNamespaceAndName(namespace, name);
   }
 
+  componentDidUpdate() {
+    const { page, list, repository, match } = this.props;
+    const { namespace, name } = repository;
+    const branch = match.params.branch;
+
+    if (list && (list.page || list.page === 0)) {
+      // backend starts paging at 0
+      const statePage: number = list.page + 1;
+      if (page !== statePage) {
+        if (branch) {
+          this.props.history.push(
+            `/repo/${namespace}/${name}/${branch}/history/${statePage}`
+          );
+        } else {
+          this.props.history.push(
+            `/repo/${namespace}/${name}/history/${statePage}`
+          );
+        }
+      }
+    }
+  }
+
   render() {
     const { changesets, loading, error } = this.props;
+
     if (loading || !changesets) {
       return <Loading />;
     }
+
+    if (error) {
+      return <ErrorNotification error={error} />;
+    }
     return (
       <div>
-        <ErrorNotification error={error} />
         {this.renderTable()}
         {this.renderPaginator()}
       </div>
@@ -114,7 +146,7 @@ class Changesets extends React.Component<State, Props> {
   branchChanged = (branchName: string): void => {
     const { history, repository } = this.props;
     history.push(
-      `/repo/${repository.namespace}/${repository.name}/history/${branchName}`
+      `/repo/${repository.namespace}/${repository.name}/${branchName}/history`
     );
   };
 }
@@ -131,6 +163,16 @@ const createKey = (
   return key;
 };
 
+const getPageFromProps = props => {
+  let page = props.match.params.page;
+  if (page) {
+    page = parseInt(page, 10);
+  } else {
+    page = 1;
+  }
+  return page;
+};
+
 const mapStateToProps = (state, ownProps: Props) => {
   const { namespace, name } = ownProps.repository;
   const { branch } = ownProps.match.params;
@@ -140,33 +182,34 @@ const mapStateToProps = (state, ownProps: Props) => {
   const branchNames = getBranchNames(namespace, name, state);
   const error = getFetchChangesetsFailure(state, namespace, name, branch);
   const list = selectListAsCollection(state, key);
+  const page = getPageFromProps(ownProps);
 
   return {
     loading,
     changesets,
     branchNames,
     error,
-    list
+    list,
+    page
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
-    fetchChangesetsByNamespaceAndName: (namespace: string, name: string) => {
-      dispatch(fetchChangesets(namespace, name));
-    },
-    fetchChangesetsByNamespaceNameAndBranch: (
-      namespace: string,
-      name: string,
-      branch: string
-    ) => {
-      dispatch(
-        fetchChangesetsByNamespaceNameAndBranch(namespace, name, branch)
-      );
-    },
     fetchBranchesByNamespaceAndName: (namespace: string, name: string) => {
       dispatch(fetchBranchesByNamespaceAndName(namespace, name));
     },
+    fetchChangesetsByPage: (namespace: string, name: string, page: number) => {
+      dispatch(fetchChangesetsByPage(namespace, name, page));
+    },
+    fetchChangesetsByBranchAndPage: (
+      namespace: string,
+      name: string,
+      branch: string,
+      page: number
+    ) => {
+      dispatch(fetchChangesetsByBranchAndPage(namespace, name, branch, page));
+    },
     fetchChangesetsByLink: (
       namespace: string,
       name: string,
diff --git a/scm-ui/src/repos/containers/RepositoryRoot.js b/scm-ui/src/repos/containers/RepositoryRoot.js
index e1352fba31..1cb7521e24 100644
--- a/scm-ui/src/repos/containers/RepositoryRoot.js
+++ b/scm-ui/src/repos/containers/RepositoryRoot.js
@@ -7,9 +7,9 @@ import {
   getRepository,
   isFetchRepoPending
 } from "../modules/repos";
-import {connect} from "react-redux";
-import {Route} from "react-router-dom";
-import type {Repository} from "@scm-manager/ui-types";
+import { connect } from "react-redux";
+import { Route } from "react-router-dom";
+import type { Repository } from "@scm-manager/ui-types";
 import {
   Page,
   Loading,
@@ -18,12 +18,12 @@ import {
   NavLink,
   Section
 } from "@scm-manager/ui-components";
-import {translate} from "react-i18next";
+import { translate } from "react-i18next";
 import RepositoryDetails from "../components/RepositoryDetails";
 import DeleteNavAction from "../components/DeleteNavAction";
 import Edit from "../containers/Edit";
 
-import type {History} from "history";
+import type { History } from "history";
 import EditNavLink from "../components/EditNavLink";
 import Changesets from "./Changesets";
 
@@ -46,7 +46,7 @@ type Props = {
 
 class RepositoryRoot extends React.Component<Props> {
   componentDidMount() {
-    const {fetchRepo, namespace, name} = this.props;
+    const { fetchRepo, namespace, name } = this.props;
 
     fetchRepo(namespace, name);
   }
@@ -71,7 +71,7 @@ class RepositoryRoot extends React.Component<Props> {
   };
 
   render() {
-    const {loading, error, repository, t} = this.props;
+    const { loading, error, repository, t } = this.props;
 
     if (error) {
       return (
@@ -84,7 +84,7 @@ class RepositoryRoot extends React.Component<Props> {
     }
 
     if (!repository || loading) {
-      return <Loading/>;
+      return <Loading />;
     }
 
     const url = this.matchedUrl();
@@ -96,33 +96,47 @@ class RepositoryRoot extends React.Component<Props> {
             <Route
               path={url}
               exact
-              component={() => <RepositoryDetails repository={repository}/>}
+              component={() => <RepositoryDetails repository={repository} />}
             />
             <Route
               path={`${url}/edit`}
-              component={() => <Edit repository={repository}/>}
+              component={() => <Edit repository={repository} />}
             />
             <Route
               exact
               path={`${url}/history`}
-              component={() => <Changesets repository={repository}/>}
+              component={() => <Changesets repository={repository} />}
             />
             <Route
               exact
-              path={`${url}/history/:branch`}
-              component={() => <Changesets repository={repository}/>}
+              path={`${url}/history/:page`}
+              component={() => <Changesets repository={repository} />}
+            />
+            <Route
+              exact
+              path={`${url}/:branch/history`}
+              component={() => <Changesets repository={repository} />}
+            />
+            <Route
+              exact
+              path={`${url}/:branch/history/:page`}
+              component={() => <Changesets repository={repository} />}
             />
           </div>
           <div className="column">
             <Navigation>
               <Section label={t("repository-root.navigation-label")}>
-                <NavLink to={url} label={t("repository-root.information")}/>
-                <NavLink activeOnlyWhenExact={false} to={`${url}/history`} label={t("repository-root.history")}/>
-                <EditNavLink repository={repository} editUrl={`${url}/edit`}/>
+                <NavLink to={url} label={t("repository-root.information")} />
+                <NavLink
+                  activeOnlyWhenExact={false}
+                  to={`${url}/history`}
+                  label={t("repository-root.history")}
+                />
+                <EditNavLink repository={repository} editUrl={`${url}/edit`} />
               </Section>
               <Section label={t("repository-root.actions-label")}>
-                <DeleteNavAction repository={repository} delete={this.delete}/>
-                <NavLink to="/repos" label={t("repository-root.back-label")}/>
+                <DeleteNavAction repository={repository} delete={this.delete} />
+                <NavLink to="/repos" label={t("repository-root.back-label")} />
               </Section>
             </Navigation>
           </div>
@@ -133,7 +147,7 @@ class RepositoryRoot extends React.Component<Props> {
 }
 
 const mapStateToProps = (state, ownProps) => {
-  const {namespace, name} = ownProps.match.params;
+  const { namespace, name } = ownProps.match.params;
   const repository = getRepository(state, namespace, name);
   const loading = isFetchRepoPending(state, namespace, name);
   const error = getFetchRepoFailure(state, namespace, name);
diff --git a/scm-ui/src/repos/modules/changesets.js b/scm-ui/src/repos/modules/changesets.js
index 658821534b..0ab85183a8 100644
--- a/scm-ui/src/repos/modules/changesets.js
+++ b/scm-ui/src/repos/modules/changesets.js
@@ -10,7 +10,6 @@ import { isPending } from "../../modules/pending";
 import { getFailure } from "../../modules/failure";
 import { combineReducers } from "redux";
 import type { Action, Changeset, PagedCollection } from "@scm-manager/ui-types";
-import ChangesetAvatar from "../components/ChangesetAvatar";
 
 export const FETCH_CHANGESETS = "scm/repos/FETCH_CHANGESETS";
 export const FETCH_CHANGESETS_PENDING = `${FETCH_CHANGESETS}_${PENDING_SUFFIX}`;
@@ -28,7 +27,7 @@ export function fetchChangesetsByLink(
   branch?: string
 ) {
   return function(dispatch: any) {
-    // dispatch(fetchChangesetsPending(namespace, name, branch));
+    dispatch(fetchChangesetsPending(namespace, name, branch));
     return apiClient
       .get(link)
       .then(response => response.json())
@@ -55,6 +54,7 @@ export function fetchChangesetsWithOptions(
   if (suffix) {
     link = link + `${suffix}`;
   }
+
   return function(dispatch: any) {
     dispatch(fetchChangesetsPending(namespace, name, branch));
     return apiClient
@@ -78,7 +78,7 @@ export function fetchChangesetsByPage(
   name: string,
   page: number
 ) {
-  return fetchChangesetsWithOptions(namespace, name, "", `?page=${page}`);
+  return fetchChangesetsWithOptions(namespace, name, "", `?page=${page - 1}`);
 }
 
 export function fetchChangesetsByBranchAndPage(
@@ -87,7 +87,12 @@ export function fetchChangesetsByBranchAndPage(
   branch: string,
   page: number
 ) {
-  return fetchChangesetsWithOptions(namespace, name, branch, `?page=${page}`);
+  return fetchChangesetsWithOptions(
+    namespace,
+    name,
+    branch,
+    `?page=${page - 1}`
+  );
 }
 
 export function fetchChangesetsByNamespaceNameAndBranch(