implemented paging for repository overview

scm-ui/src/containers/Main.js

@@ -32,6 +32,12 @@ class Main extends React.Component<Props> {
             component={Overview}
             authenticated={authenticated}
           />
+          <ProtectedRoute
+            exact
+            path="/repos/:page"
+            component={Overview}
+            authenticated={authenticated}
+          />
           <ProtectedRoute
             exact
             path="/users"

scm-ui/src/repos/containers/Overview.js

@@ -4,26 +4,48 @@ import React from "react";
 import type { RepositoryCollection } from "../types/Repositories";
 
 import { connect } from "react-redux";
-import {fetchRepos, getFetchReposFailure, getRepositoryCollection, isFetchReposPending} from "../modules/repos";
+import {fetchRepos, fetchReposByLink, fetchReposByPage, getFetchReposFailure, getRepositoryCollection, isFetchReposPending} from "../modules/repos";
 import { translate } from "react-i18next";
 import { Page } from "../../components/layout";
 import RepositoryList from "../components/RepositoryList";
+import Paginator from '../../components/Paginator';
+import {withRouter} from 'react-router-dom';
+import type { History } from "history";
 
 type Props = {
+  page: number,
   collection: RepositoryCollection,
   loading: boolean,
   error: Error,
 
   // dispatched functions
   fetchRepos: () => void,
+  fetchReposByPage: number => void,
+  fetchReposByLink: string => void,
   // context props
-  t: string => string
+  t: string => string,
+  history: History
 };
 
 class Overview extends React.Component<Props> {
   componentDidMount() {
-    this.props.fetchRepos();
+    this.props.fetchReposByPage(this.props.page);
   }
+
+  /**
+   * reflect page transitions in the uri
+   */
+  componentDidUpdate() {
+    const { page, collection } = this.props;
+    if (collection) {
+      // backend starts paging by 0
+      const statePage: number = collection.page + 1;
+      if (page !== statePage) {
+        this.props.history.push(`/repos/${statePage}`);
+      }
+    }
+  };
+
   render() {
     const { error, loading, t } = this.props;
     return (
@@ -34,21 +56,36 @@ class Overview extends React.Component<Props> {
   }
 
   renderList() {
-    const { collection } = this.props;
+    const { collection, fetchReposByLink } = this.props;
     if (collection) {
       return (
+        <div>
           <RepositoryList repositories={collection._embedded.repositories} />
+          <Paginator collection={collection} onPageChange={fetchReposByLink} />
+        </div>
       );
     }
     return null;
   }
 }
 
+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 collection = getRepositoryCollection(state);
   const loading = isFetchReposPending(state);
   const error = getFetchReposFailure(state);
   return {
+    page,
     collection,
     loading,
     error
@@ -59,10 +96,16 @@ const mapDispatchToProps = dispatch => {
   return {
     fetchRepos: () => {
       dispatch(fetchRepos());
+    },
+    fetchReposByPage: (page: number) => {
+      dispatch(fetchReposByPage(page))
+    },
+    fetchReposByLink: (link: string) => {
+      dispatch(fetchReposByLink(link))
     }
   };
 };
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(Overview));
+)(translate("repos")(withRouter(Overview)));

scm-ui/src/repos/modules/repos.js

@@ -15,10 +15,32 @@ const REPOS_URL = "repositories";
 const SORT_BY = "sortBy=namespaceAndName";
 
 export function fetchRepos() {
+  return fetchReposByLink(REPOS_URL);
+}
+
+export function fetchReposByPage(page: number) {
+  return fetchReposByLink(`${REPOS_URL}?page=${page - 1}`);
+}
+
+function appendSortByLink(url: string) {
+  if (url.includes(SORT_BY)) {
+    return url;
+  }
+  let urlWithSortBy = url;
+  if (url.includes("?")) {
+    urlWithSortBy += "&";
+  } else {
+    urlWithSortBy += "?";
+  }
+  return urlWithSortBy + SORT_BY;
+}
+
+export function fetchReposByLink(link: string) {
+  const url = appendSortByLink(link);
   return function(dispatch: any) {
     dispatch(fetchReposPending());
     return apiClient
-      .get(`${REPOS_URL}?${SORT_BY}`)
+      .get(url)
       .then(response => response.json())
       .then(repositories => {
         dispatch(fetchReposSuccess(repositories));
@@ -76,15 +98,14 @@ export default function reducer(
   state: Object = {},
   action: Action = { type: "UNKNOWN" }
 ): Object {
-  switch (action.type) {
-    case FETCH_REPOS_SUCCESS:
+  if (action.type === FETCH_REPOS_SUCCESS) {
     if (action.payload) {
       return normalizeByNamespaceAndName(action.payload);
     } else {
       // TODO ???
       return state;
     }
-    default:
+  } else {
     return state;
   }
 }

scm-ui/src/repos/modules/repos.test.js

@@ -8,7 +8,12 @@ import reducer, {
   fetchRepos,
   FETCH_REPOS_FAILURE,
   fetchReposSuccess,
-  getRepositoryCollection, FETCH_REPOS, isFetchReposPending, getFetchReposFailure
+  getRepositoryCollection,
+  FETCH_REPOS,
+  isFetchReposPending,
+  getFetchReposFailure,
+  fetchReposByLink,
+  fetchReposByPage
 } from "./repos";
 import type { Repository, RepositoryCollection } from "../types/Repositories";
 
@@ -203,7 +208,26 @@ describe("repos fetch", () => {
   });
 
   it("should successfully fetch repos", () => {
-    fetchMock.getOnce(REPOS_URL, repositoryCollection);
+    const url = REPOS_URL + "&page=42";
+    fetchMock.getOnce(url, repositoryCollection);
+
+    const expectedActions = [
+      { type: FETCH_REPOS_PENDING },
+      {
+        type: FETCH_REPOS_SUCCESS,
+        payload: repositoryCollection
+      }
+    ];
+
+    const store = mockStore({});
+    return store.dispatch(fetchRepos()).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+
+  it("should successfully fetch page 42", () => {
+    const url = REPOS_URL + "&page=42";
+    fetchMock.getOnce(url, repositoryCollection);
 
     const expectedActions = [
       { type: FETCH_REPOS_PENDING },
@@ -215,7 +239,49 @@ describe("repos fetch", () => {
 
     const store = mockStore({});
 
-    return store.dispatch(fetchRepos()).then(() => {
+    return store.dispatch(fetchReposByPage(43)).then(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+    });
+  });
+
+  it("should successfully fetch repos from link", () => {
+    fetchMock.getOnce(REPOS_URL, repositoryCollection);
+
+    const expectedActions = [
+      { type: FETCH_REPOS_PENDING },
+      {
+        type: FETCH_REPOS_SUCCESS,
+        payload: repositoryCollection
+      }
+    ];
+
+    const store = mockStore({});
+    return store
+      .dispatch(
+        fetchReposByLink("/repositories?sortBy=namespaceAndName&page=42")
+      )
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
+
+  it("should append sortby parameter and successfully fetch repos from link", () => {
+    fetchMock.getOnce(
+      "/scm/api/rest/v2/repositories?one=1&sortBy=namespaceAndName",
+      repositoryCollection
+    );
+
+    const expectedActions = [
+      { type: FETCH_REPOS_PENDING },
+      {
+        type: FETCH_REPOS_SUCCESS,
+        payload: repositoryCollection
+      }
+    ];
+
+    const store = mockStore({});
+
+    return store.dispatch(fetchReposByLink("/repositories?one=1")).then(() => {
       expect(store.getActions()).toEqual(expectedActions);
     });
   });
@@ -267,7 +333,6 @@ describe("repos reducer", () => {
 });
 
 describe("repos selectors", () => {
-
   const error = new Error("something goes wrong");
 
   it("should return the repositories collection", () => {