Update RouteDelegate only conditionally

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

@@ -48,7 +48,7 @@ class BranchChooser extends React.Component<Props, State> {
   render() {
     console.log("Branch chooser render");
 
-    const { loading, error, t } = this.props;
+    const { loading, error, t, repository } = this.props;
 
     if (error) {
       return (
@@ -60,6 +60,10 @@ class BranchChooser extends React.Component<Props, State> {
       );
     }
 
+    if (!repository) {
+      return null;
+    }
+
     if (loading) {
       return <Loading />;
     }
@@ -85,8 +89,7 @@ class BranchChooser extends React.Component<Props, State> {
 
   renderBranchChooser() {
     const { label, match, branches } = this.props;
-    const selectedBranchName = "";
-    // const selectedBranchName = match.params.branch;
+    const selectedBranchName = match.params.branch;
 
     if (!branches || branches.length === 0) {
       return null;
@@ -127,12 +130,11 @@ const mapStateToProps = (state: any, ownProps: Props) => {
   const { repository, match } = ownProps;
   const loading = isFetchBranchesPending(state, repository);
   const error = getFetchBranchesFailure(state, repository);
-  // const selectedBranch = getBranch(
-  //   state,
-  //   repository,
-  //   decodeURIComponent(match.params.branch)
-  // );
-  const selectedBranch = "";
+  const selectedBranch = getBranch(
+    state,
+    repository,
+    decodeURIComponent(match.params.branch)
+  );
   const branches = getBranches(state, repository);
   return {
     // loading,
@@ -142,7 +144,9 @@ const mapStateToProps = (state: any, ownProps: Props) => {
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(translate("repos")(BranchChooser));
+export default withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(translate("repos")(BranchChooser))
+);

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

@@ -1,7 +1,7 @@
 // @flow
 
 import React from "react";
-import type { Repository } from "@scm-manager/ui-types";
+import type { Repository, Branch } from "@scm-manager/ui-types";
 import BranchChooser from "./BranchChooser";
 import { Route, withRouter } from "react-router-dom";
 import Changesets from "./Changesets";
@@ -36,28 +36,48 @@ class BranchRoot extends React.Component<Props> {
   };
 
   render() {
+    const { repository } = this.props;
     const url = this.matchedUrl();
-
+    if (!repository) {
+      return null;
+    }
     return (
       <BranchChooser
         repository={this.props.repository}
         label={"Branches"}
         branchSelected={this.branchSelected}
       >
-        <Changesets repository={this.props.repository} />
-        {/*<RouteDelegate repository={this.props.repository} url={url} />*/}
+        <RouteDelegate repository={this.props.repository} url={url} />
       </BranchChooser>
     );
   }
 }
 
-function RouteDelegate(props) {
-  return (
-    <Route
-      path={`${props.url}/:branch/changesets/:page?`}
-      component={() => <Changesets repository={props.repository} {...props} />}
-    />
-  );
+type RDProps = {
+  repository: Repository,
+  branch: Branch,
+  url: string
+};
+
+class RouteDelegate extends React.Component<RDProps> {
+  shouldComponentUpdate(nextProps: RDProps, nextState: any) {
+    return (
+      nextProps.repository !== this.props.repository ||
+      nextProps.branch !== this.props.branch ||
+      nextProps.url !== this.props.url
+    );
+  }
+
+  render() {
+    const { url, repository, branch } = this.props;
+    return (
+      <Route
+        exact
+        path={`${url}/:branch/changesets/:page?`}
+        component={() => <Changesets repository={repository} branch={branch} />}
+      />
+    );
+  }
 }
 
 export default withRouter(BranchRoot);

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

@@ -36,7 +36,7 @@ type Props = {
 
 type State = {};
 
-class ChangesetContainer extends React.Component<Props, State> {
+class Changesets extends React.Component<Props, State> {
   componentDidMount() {
     const {
       fetchChangesetsByBranch,
@@ -45,6 +45,9 @@ class ChangesetContainer extends React.Component<Props, State> {
       branch,
       match
     } = this.props;
+
+    console.log("branch");
+    console.log(branch);
     const { page } = match.params;
     if (!page) {
       fetchChangesetsByBranch(repository, branch);
@@ -54,7 +57,11 @@ class ChangesetContainer extends React.Component<Props, State> {
   }
 
   render() {
-    const { changesets, loading, error, t } = this.props;
+    const { repository, branch, changesets, loading, error, t } = this.props;
+
+    if (!repository || !branch) {
+      return null;
+    }
 
     if (error) {
       return (
@@ -121,5 +128,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("repos")(ChangesetContainer))
+  )(translate("repos")(Changesets))
 );