From 60347ac34ae4ad56c134ed562b7f571cecc34c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Thu, 20 Sep 2018 08:22:50 +0200
Subject: [PATCH] change routing that selector is working

---
 .../src/changesets/containers/Changesets.js   | 158 ++++++++++--------
 scm-ui/src/repos/containers/RepositoryRoot.js |  36 ++--
 2 files changed, 111 insertions(+), 83 deletions(-)

diff --git a/scm-ui/src/changesets/containers/Changesets.js b/scm-ui/src/changesets/containers/Changesets.js
index 024376692b..9da1fd05f4 100644
--- a/scm-ui/src/changesets/containers/Changesets.js
+++ b/scm-ui/src/changesets/containers/Changesets.js
@@ -1,26 +1,35 @@
-import React from "react"
-import {connect} from "react-redux";
-import {ErrorNotification, Loading} from "@scm-manager/ui-components";
+import React from "react";
+import { connect } from "react-redux";
+import { ErrorNotification, Loading } from "@scm-manager/ui-components";
 
 import {
-  fetchChangesetsByNamespaceAndName, fetchChangesetsByNamespaceNameAndBranch,
-  getChangesets, getFetchChangesetsFailure, isFetchChangesetsPending,
+  fetchChangesetsByNamespaceAndName,
+  fetchChangesetsByNamespaceNameAndBranch,
+  getChangesets,
+  getFetchChangesetsFailure,
+  isFetchChangesetsPending
 } from "../modules/changesets";
-import type {History} from "history";
-import {fetchBranchesByNamespaceAndName, getBranchNames} from "../../repos/modules/branches";
-import type {Repository} from "@scm-manager/ui-types";
+import type { History } from "history";
+import {
+  fetchBranchesByNamespaceAndName,
+  getBranchNames
+} from "../../repos/modules/branches";
+import type { Repository } from "@scm-manager/ui-types";
 import ChangesetTable from "../components/ChangesetTable";
 import DropDown from "../components/DropDown";
-import {Route, withRouter} from "react-router-dom";
+import { Route, withRouter } from "react-router-dom";
 import ChangesetView from "../../repos/changesets/containers/ChangesetView";
 
 type Props = {
   repository: Repository,
   branchName: string,
   history: History,
-  fetchChangesetsByNamespaceNameAndBranch: (namespace: string, name: string, branch: string) => void
-}
-
+  fetchChangesetsByNamespaceNameAndBranch: (
+    namespace: string,
+    name: string,
+    branch: string
+  ) => void
+};
 
 class Changesets extends React.Component<State, Props> {
   constructor(props) {
@@ -29,10 +38,14 @@ class Changesets extends React.Component<State, Props> {
   }
 
   componentDidMount() {
-    const {namespace, name} = this.props.repository;
+    const { namespace, name } = this.props.repository;
     const branchName = this.props.match.params.branch;
     if (branchName) {
-      this.props.fetchChangesetsByNamespaceNameAndBranch(namespace, name, branchName);
+      this.props.fetchChangesetsByNamespaceNameAndBranch(
+        namespace,
+        name,
+        branchName
+      );
     } else {
       this.props.fetchChangesetsByNamespaceAndName(namespace, name);
     }
@@ -45,77 +58,76 @@ class Changesets extends React.Component<State, Props> {
   render() {
     const url = this.matchedUrl();
 
-    const {changesets, loading, error, repository} = this.props;
+    const { changesets, loading, error, repository } = this.props;
     if (loading || !changesets) {
-      return <Loading/>
+      return <Loading />;
     }
-    return(
+    return (
       <div className="column is-three-quarters">
-          <Route
-            exact
-            path={url}
-            render={this.renderChangesets}
-          />
-          <Route
-            exact
-            path={`${url}/:branch`}
-            render={this.renderChangesets}
-          />
-          <Route
-            exact
-            path={`${url}/:branch/commit/:id`}
-            component={() => <ChangesetView repository={repository}/>}
-          />
-          <Route
-            exact
-            path={`${url}/commit/:id`}
-            component={() => <ChangesetView repository={repository}/>}
-          />
-        </div>
-      )
-
-
+        <Route exact path={url} render={this.renderChangesets} />
+        <Route
+          exact
+          path={`${url}/commit/:id`}
+          component={() => <ChangesetView repository={repository} />}
+        />
+      </div>
+    );
   }
 
   renderChangesets = () => {
-    return(
+    return (
       <div>
-      <ErrorNotification error={this.props.error}/>
-      {this.renderContent()}
-    </div>
-    )
-  }
+        <ErrorNotification error={this.props.error} />
+        {this.renderContent()}
+      </div>
+    );
+  };
   renderContent = () => {
     const branch = this.props.match.params.branch;
-    const {changesets, branchNames} = this.props;
+    const { changesets, branchNames } = this.props;
 
     if (branchNames) {
-      return (<div>
-        <DropDown options={branchNames} preselectedOption={branch}
-                  optionSelected={branch => this.branchChanged(branch)}/>
-        <ChangesetTable changesets={changesets}/>
-      </div>);
+      return (
+        <div>
+          <DropDown
+            options={branchNames}
+            preselectedOption={branch}
+            optionSelected={branch => this.branchChanged(branch)}
+          />
+          <ChangesetTable changesets={changesets} />
+        </div>
+      );
     }
 
-    return <ChangesetTable changesets={changesets}/>
+    return <ChangesetTable changesets={changesets} />;
   };
 
-
   branchChanged = (branchName: string) => {
-    const {history, repository} = this.props;
-    history.push(`/repo/${repository.namespace}/${repository.name}/history/${branchName}`);
+    const { history, repository } = this.props;
+    history.push(
+      `/repo/${repository.namespace}/${repository.name}/history/${branchName}`
+    );
   };
 }
 
-
 const mapStateToProps = (state, ownProps: Props) => {
-  const {namespace, name} = ownProps.repository;
+  const { namespace, name } = ownProps.repository;
   return {
     loading: isFetchChangesetsPending(namespace, name, state),
-    changesets: getChangesets(state, namespace, name, ownProps.match.params.branch),
+    changesets: getChangesets(
+      state,
+      namespace,
+      name,
+      ownProps.match.params.branch
+    ),
     branchNames: getBranchNames(namespace, name, state),
-    error: getFetchChangesetsFailure(state, namespace, name, ownProps.match.params.branch)
-  }
+    error: getFetchChangesetsFailure(
+      state,
+      namespace,
+      name,
+      ownProps.match.params.branch
+    )
+  };
 };
 
 const mapDispatchToProps = dispatch => {
@@ -123,16 +135,24 @@ const mapDispatchToProps = dispatch => {
     fetchChangesetsByNamespaceAndName: (namespace: string, name: string) => {
       dispatch(fetchChangesetsByNamespaceAndName(namespace, name));
     },
-    fetchChangesetsByNamespaceNameAndBranch: (namespace: string, name: string, branch: string) => {
-      dispatch(fetchChangesetsByNamespaceNameAndBranch(namespace, name, branch));
+    fetchChangesetsByNamespaceNameAndBranch: (
+      namespace: string,
+      name: string,
+      branch: string
+    ) => {
+      dispatch(
+        fetchChangesetsByNamespaceNameAndBranch(namespace, name, branch)
+      );
     },
     fetchBranchesByNamespaceAndName: (namespace: string, name: string) => {
       dispatch(fetchBranchesByNamespaceAndName(namespace, name));
     }
-  }
+  };
 };
 
-export default withRouter(connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Changesets));
+export default withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Changesets)
+);
diff --git a/scm-ui/src/repos/containers/RepositoryRoot.js b/scm-ui/src/repos/containers/RepositoryRoot.js
index 8c079076ee..5eef181e56 100644
--- a/scm-ui/src/repos/containers/RepositoryRoot.js
+++ b/scm-ui/src/repos/containers/RepositoryRoot.js
@@ -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 ChangesetView from "../changesets/containers/ChangesetView";
 import Changesets from "../../changesets/containers/Changesets";
@@ -47,7 +47,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);
   }
@@ -72,7 +72,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 (
@@ -85,7 +85,7 @@ class RepositoryRoot extends React.Component<Props> {
     }
 
     if (!repository || loading) {
-      return <Loading/>;
+      return <Loading />;
     }
 
     const url = this.matchedUrl();
@@ -97,27 +97,35 @@ 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
               path={`${url}/history`}
-              component={() => <Changesets repository={repository}/>}
+              component={() => <Changesets repository={repository} />}
+            />
+            <Route
+              path={`${url}/history/:branch`}
+              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>
@@ -128,7 +136,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);