added loading indicator and handle failures of repository overview

scm-ui/public/locales/en/repositories.json

@@ -1,7 +0,0 @@
-{
-  "repositories": {
-    "title": "Repositories",
-    "subtitle": "Repositories will be shown here",
-    "body": "Coming soon ..."
-  }
-}

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

@@ -4,13 +4,15 @@ import React from "react";
 import type { RepositoryCollection } from "../types/Repositories";
 
 import { connect } from "react-redux";
-import { fetchRepos, getRepositoryCollection } from "../modules/repos";
+import {fetchRepos, getFetchReposFailure, getRepositoryCollection, isFetchReposPending} from "../modules/repos";
 import { translate } from "react-i18next";
 import { Page } from "../../components/layout";
 import RepositoryList from "../components/RepositoryList";
 
 type Props = {
   collection: RepositoryCollection,
+  loading: boolean,
+  error: Error,
 
   // dispatched functions
   fetchRepos: () => void,
@@ -23,9 +25,9 @@ class Overview extends React.Component<Props> {
     this.props.fetchRepos();
   }
   render() {
-    const { t } = this.props;
+    const { error, loading, t } = this.props;
     return (
-      <Page title={t("overview.title")} subtitle={t("overview.subtitle")}>
+      <Page title={t("overview.title")} subtitle={t("overview.subtitle")} loading={loading} error={error}>
         {this.renderList()}
       </Page>
     );
@@ -44,8 +46,12 @@ class Overview extends React.Component<Props> {
 
 const mapStateToProps = (state, ownProps) => {
   const collection = getRepositoryCollection(state);
+  const loading = isFetchReposPending(state);
+  const error = getFetchReposFailure(state);
   return {
-    collection
+    collection,
+    loading,
+    error
   };
 };
 

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

@@ -3,6 +3,8 @@ import { apiClient } from "../../apiclient";
 import * as types from "../../modules/types";
 import type { Action } from "../../types/Action";
 import type { RepositoryCollection } from "../types/Repositories";
+import {isPending} from "../../modules/pending";
+import {getFailure} from "../../modules/failure";
 
 export const FETCH_REPOS = "scm/repos/FETCH_REPOS";
 export const FETCH_REPOS_PENDING = `${FETCH_REPOS}_${types.PENDING_SUFFIX}`;
@@ -103,3 +105,11 @@ export function getRepositoryCollection(state: Object) {
     };
   }
 }
+
+export function isFetchReposPending(state: Object) {
+  return isPending(state, FETCH_REPOS);
+}
+
+export function getFetchReposFailure(state: Object) {
+  return getFailure(state, FETCH_REPOS);
+}

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

@@ -8,7 +8,7 @@ import reducer, {
   fetchRepos,
   FETCH_REPOS_FAILURE,
   fetchReposSuccess,
-  getRepositoryCollection
+  getRepositoryCollection, FETCH_REPOS, isFetchReposPending, getFetchReposFailure
 } from "./repos";
 import type { Repository, RepositoryCollection } from "../types/Repositories";
 
@@ -267,6 +267,9 @@ describe("repos reducer", () => {
 });
 
 describe("repos selectors", () => {
+
+  const error = new Error("something goes wrong");
+
   it("should return the repositories collection", () => {
     const state = {
       repos: {
@@ -282,4 +285,30 @@ describe("repos selectors", () => {
     const collection = getRepositoryCollection(state);
     expect(collection).toEqual(repositoryCollection);
   });
+
+  it("should return true, when fetch repos is pending", () => {
+    const state = {
+      pending: {
+        [FETCH_REPOS]: true
+      }
+    };
+    expect(isFetchReposPending(state)).toEqual(true);
+  });
+
+  it("should return false, when fetch repos is not pending", () => {
+    expect(isFetchReposPending({})).toEqual(false);
+  });
+
+  it("should return error when fetch repos did fail", () => {
+    const state = {
+      failure: {
+        [FETCH_REPOS]: error
+      }
+    };
+    expect(getFetchReposFailure(state)).toEqual(error);
+  });
+
+  it("should return undefined when fetch repos did not fail", () => {
+    expect(getFetchReposFailure({})).toBe(undefined);
+  });
 });

scm-ui/src/repositories/containers/Repositories.js

@@ -1,24 +0,0 @@
-// @flow
-import React from "react";
-import { Page } from "../../components/layout";
-import { translate } from "react-i18next";
-
-type Props = {
-  t: string => string
-};
-
-class Repositories extends React.Component<Props> {
-  render() {
-    const { t } = this.props;
-    return (
-      <Page
-        title={t("repositories.title")}
-        subtitle={t("repositories.subtitle")}
-      >
-        {t("repositories.body")}
-      </Page>
-    );
-  }
-}
-
-export default translate("repositories")(Repositories);