implemented create repository

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

@@ -11,26 +11,50 @@ import {
   getRepositoryTypes,
   isFetchRepositoryTypesPending
 } from "../modules/repository-types";
+import {
+  createRepo,
+  createRepoReset,
+  getCreateRepoFailure,
+  isCreateRepoPending
+} from "../modules/repos";
+import type { Repository } from "../types/Repositories";
+import type { History } from "history";
 
 type Props = {
   repositoryTypes: RepositoryType[],
   typesLoading: boolean,
+  createLoading: boolean,
   error: Error,
 
   // dispatch functions
   fetchRepositoryTypesIfNeeded: () => void,
+  createRepo: (Repository, callback: () => void) => void,
+  resetForm: () => void,
 
   // context props
-  t: string => string
+  t: string => string,
+  history: History
 };
 
 class Create extends React.Component<Props> {
   componentDidMount() {
+    this.props.resetForm();
     this.props.fetchRepositoryTypesIfNeeded();
   }
 
+  repoCreated = () => {
+    const { history } = this.props;
+    history.push("/repos");
+  };
+
   render() {
-    const { typesLoading, repositoryTypes, error } = this.props;
+    const {
+      typesLoading,
+      createLoading,
+      repositoryTypes,
+      createRepo,
+      error
+    } = this.props;
 
     const { t } = this.props;
     return (
@@ -39,8 +63,15 @@ class Create extends React.Component<Props> {
         subtitle={t("create.subtitle")}
         loading={typesLoading}
         error={error}
+        showContentOnError={true}
       >
-        <RepositoryForm repositoryTypes={repositoryTypes} />
+        <RepositoryForm
+          repositoryTypes={repositoryTypes}
+          loading={createLoading}
+          submitForm={repo => {
+            createRepo(repo, this.repoCreated);
+          }}
+        />
       </Page>
     );
   }
@@ -49,10 +80,13 @@ class Create extends React.Component<Props> {
 const mapStateToProps = state => {
   const repositoryTypes = getRepositoryTypes(state);
   const typesLoading = isFetchRepositoryTypesPending(state);
-  const error = getFetchRepositoryTypesFailure(state);
+  const createLoading = isCreateRepoPending(state);
+  const error =
+    getFetchRepositoryTypesFailure(state) || getCreateRepoFailure(state);
   return {
     repositoryTypes,
     typesLoading,
+    createLoading,
     error
   };
 };
@@ -61,6 +95,12 @@ const mapDispatchToProps = dispatch => {
   return {
     fetchRepositoryTypesIfNeeded: () => {
       dispatch(fetchRepositoryTypesIfNeeded());
+    },
+    createRepo: (repository: Repository, callback: () => void) => {
+      dispatch(createRepo(repository, callback));
+    },
+    resetForm: () => {
+      dispatch(createRepoReset());
     }
   };
 };

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

@@ -10,6 +10,7 @@ import {
   fetchReposByPage,
   getFetchReposFailure,
   getRepositoryCollection,
+  isAbleToCreateRepos,
   isFetchReposPending
 } from "../modules/repos";
 import { translate } from "react-i18next";
@@ -25,11 +26,13 @@ type Props = {
   collection: RepositoryCollection,
   loading: boolean,
   error: Error,
+  showCreateButton: boolean,
 
   // dispatched functions
   fetchRepos: () => void,
   fetchReposByPage: number => void,
   fetchReposByLink: string => void,
+
   // context props
   t: string => string,
   history: History
@@ -69,21 +72,31 @@ class Overview extends React.Component<Props> {
   }
 
   renderList() {
-    const { collection, fetchReposByLink, t } = this.props;
+    const { collection, fetchReposByLink } = 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"
-          />
+          {this.renderCreateButton()}
         </div>
       );
     }
     return null;
   }
+
+  renderCreateButton() {
+    const { showCreateButton, t } = this.props;
+    if (showCreateButton) {
+      return (
+        <CreateButton
+          label={t("overview.create-button")}
+          link="/repos/create"
+        />
+      );
+    }
+    return null;
+  }
 }
 
 const getPageFromProps = props => {
@@ -101,11 +114,13 @@ const mapStateToProps = (state, ownProps) => {
   const collection = getRepositoryCollection(state);
   const loading = isFetchReposPending(state);
   const error = getFetchReposFailure(state);
+  const showCreateButton = isAbleToCreateRepos(state);
   return {
     page,
     collection,
     loading,
-    error
+    error,
+    showCreateButton
   };
 };