implemented repository create form

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

@@ -0,0 +1,71 @@
+// @flow
+import React from "react";
+import { connect } from "react-redux";
+import { translate } from "react-i18next";
+import { Page } from "../../components/layout";
+import RepositoryForm from "../components/RepositoryForm";
+import type { RepositoryType } from "../types/RepositoryTypes";
+import {
+  fetchRepositoryTypesIfNeeded,
+  getFetchRepositoryTypesFailure,
+  getRepositoryTypes,
+  isFetchRepositoryTypesPending
+} from "../modules/repository-types";
+
+type Props = {
+  repositoryTypes: RepositoryType[],
+  typesLoading: boolean,
+  error: Error,
+
+  // dispatch functions
+  fetchRepositoryTypesIfNeeded: () => void,
+
+  // context props
+  t: string => string
+};
+
+class Create extends React.Component<Props> {
+  componentDidMount() {
+    this.props.fetchRepositoryTypesIfNeeded();
+  }
+
+  render() {
+    const { typesLoading, repositoryTypes, error } = this.props;
+
+    const { t } = this.props;
+    return (
+      <Page
+        title={t("create.title")}
+        subtitle={t("create.subtitle")}
+        loading={typesLoading}
+        error={error}
+      >
+        <RepositoryForm repositoryTypes={repositoryTypes} />
+      </Page>
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  const repositoryTypes = getRepositoryTypes(state);
+  const typesLoading = isFetchRepositoryTypesPending(state);
+  const error = getFetchRepositoryTypesFailure(state);
+  return {
+    repositoryTypes,
+    typesLoading,
+    error
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchRepositoryTypesIfNeeded: () => {
+      dispatch(fetchRepositoryTypesIfNeeded());
+    }
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(translate("repos")(Create));

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

@@ -4,13 +4,21 @@ import React from "react";
 import type { RepositoryCollection } from "../types/Repositories";
 
 import { connect } from "react-redux";
-import {fetchRepos, fetchReposByLink, fetchReposByPage, 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 Paginator from "../../components/Paginator";
+import { withRouter } from "react-router-dom";
 import type { History } from "history";
+import CreateButton from "../../components/buttons/CreateButton";
 
 type Props = {
   page: number,
@@ -44,24 +52,33 @@ class Overview extends React.Component<Props> {
         this.props.history.push(`/repos/${statePage}`);
       }
     }
-  };
+  }
 
   render() {
     const { error, loading, t } = this.props;
     return (
-      <Page title={t("overview.title")} subtitle={t("overview.subtitle")} loading={loading} error={error}>
+      <Page
+        title={t("overview.title")}
+        subtitle={t("overview.subtitle")}
+        loading={loading}
+        error={error}
+      >
         {this.renderList()}
       </Page>
     );
   }
 
   renderList() {
-    const { collection, fetchReposByLink } = this.props;
+    const { collection, fetchReposByLink, t } = this.props;
     if (collection) {
       return (
         <div>
           <RepositoryList repositories={collection._embedded.repositories} />
           <Paginator collection={collection} onPageChange={fetchReposByLink} />
+          <CreateButton
+            label={t("overview.create-button")}
+            link="/repos/create"
+          />
         </div>
       );
     }
@@ -98,10 +115,10 @@ const mapDispatchToProps = dispatch => {
       dispatch(fetchRepos());
     },
     fetchReposByPage: (page: number) => {
-      dispatch(fetchReposByPage(page))
+      dispatch(fetchReposByPage(page));
     },
     fetchReposByLink: (link: string) => {
-      dispatch(fetchReposByLink(link))
+      dispatch(fetchReposByLink(link));
     }
   };
 };