From eaf89511640955a75f66fa2bf8ca230e9065196d Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Thu, 4 Oct 2018 20:02:18 +0200
Subject: [PATCH] Boostrapped BranchChooser

---
 scm-ui/src/repos/components/DropDown.js      | 31 ++++++-----
 scm-ui/src/repos/containers/BranchChooser.js | 54 ++++++++++++++++++++
 scm-ui/src/repos/modules/branches.js         | 21 ++------
 scm-ui/src/repos/modules/branches.test.js    |  8 +++
 4 files changed, 84 insertions(+), 30 deletions(-)
 create mode 100644 scm-ui/src/repos/containers/BranchChooser.js

diff --git a/scm-ui/src/repos/components/DropDown.js b/scm-ui/src/repos/components/DropDown.js
index d7494d2576..bd44e30f59 100644
--- a/scm-ui/src/repos/components/DropDown.js
+++ b/scm-ui/src/repos/components/DropDown.js
@@ -6,25 +6,30 @@ type Props = {
   options: string[],
   optionSelected: string => void,
   preselectedOption: string
-}
+};
 
 class DropDown extends React.Component<Props> {
   render() {
-    const {options, preselectedOption} = this.props;
-    return <div className="select">
-      <select value={preselectedOption} onChange={this.change}>
-      <option key=""></option>
-      {options.map(option => {
-        return <option key={option}
-                       value={option}>{option}</option>
-      })}
-    </select>
-    </div>
+    const { options, preselectedOption } = this.props;
+    return (
+      <div className="select">
+        <select value={preselectedOption} onChange={this.change}>
+          <option key="" />
+          {options.map(option => {
+            return (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            );
+          })}
+        </select>
+      </div>
+    );
   }
 
-  change = (event) => {
+  change = event => {
     this.props.optionSelected(event.target.value);
-  }
+  };
 }
 
 export default DropDown;
diff --git a/scm-ui/src/repos/containers/BranchChooser.js b/scm-ui/src/repos/containers/BranchChooser.js
new file mode 100644
index 0000000000..9a802275e2
--- /dev/null
+++ b/scm-ui/src/repos/containers/BranchChooser.js
@@ -0,0 +1,54 @@
+// @flow
+
+import React from "react";
+import type {Repository} from "@scm-manager/ui-types";
+import {connect} from "react-redux";
+import {fetchBranches} from "../modules/branches";
+import DropDown from "../components/DropDown";
+
+type Props = {
+  repository: Repository,
+  fetchBranches: Repository => void,
+  callback: Branch => void, //TODO use correct branch type
+  branches: Branch[], //TODO use correct branch type
+  selectedBranchName: string
+};
+
+type State = {};
+
+class BranchChooser extends React.Component<Props, State> {
+  componentDidMount() {
+    const { repository, fetchBranches } = this.props;
+    fetchBranches(repository);
+  }
+
+  render() {
+    const { selectedBranchName, branches } = this.props;
+    return (
+      <DropDown
+        options={branches.map(b => b.name)}
+        preselectedOption={selectedBranchName}
+        optionSelected={branch => this.branchChanged(branch)}
+      />
+    );
+  }
+
+  branchChanged = (branchName: string) => {};
+}
+
+const mapStateToProps = (state: State) => {
+  return {};
+};
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    fetchBranches: (repository: Repository) => {
+      dispatch(fetchBranches(repository));
+    }
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BranchChooser);
diff --git a/scm-ui/src/repos/modules/branches.js b/scm-ui/src/repos/modules/branches.js
index b4cddd63a3..c121652b68 100644
--- a/scm-ui/src/repos/modules/branches.js
+++ b/scm-ui/src/repos/modules/branches.js
@@ -24,23 +24,6 @@ export function fetchBranches(repository: Repository) {
       });
   };
 }
-// export function fetchBranchesByNamespaceAndName(
-//   namespace: string,
-//   name: string
-// ) {
-//   return function(dispatch: any) {
-//     dispatch(fetchBranchesPending(namespace, name));
-//     return apiClient
-//       .get(REPO_URL + "/" + namespace + "/" + name + "/branches")
-//       .then(response => response.json())
-//       .then(data => {
-//         dispatch(fetchBranchesSuccess(data, namespace, name));
-//       })
-//       .catch(error => {
-//         dispatch(fetchBranchesFailure(namespace, name, error));
-//       });
-//   };
-// }
 
 // Action creators
 export function fetchBranchesPending(repository: Repository) {
@@ -133,3 +116,7 @@ export function getBranchNames(state: Object, repository: Repository) {
   }
   return Object.keys(state.branches[key].byNames);
 }
+
+export function getBranches(state: Object, repository: Repository) {
+  return null;
+}
diff --git a/scm-ui/src/repos/modules/branches.test.js b/scm-ui/src/repos/modules/branches.test.js
index f82495f736..98cba858e0 100644
--- a/scm-ui/src/repos/modules/branches.test.js
+++ b/scm-ui/src/repos/modules/branches.test.js
@@ -141,5 +141,13 @@ describe("branches", () => {
       expect(names).toContain("branch1");
       expect(names).toContain("branch2");
     });
+
+    it("should return branches", () => {
+      const state = {
+        branches: {
+          [key]: {}
+        }
+      };
+    });
   });
 });