Boostrapped BranchChooser

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;
+    const { options, preselectedOption } = this.props;
-    return <div className="select">
+    return (
+      <div className="select">
         <select value={preselectedOption} onChange={this.change}>
-      <option key=""></option>
+          <option key="" />
           {options.map(option => {
-        return <option key={option}
+            return (
-                       value={option}>{option}</option>
+              <option key={option} value={option}>
+                {option}
+              </option>
+            );
           })}
         </select>
       </div>
+    );
   }
 
-  change = (event) => {
+  change = event => {
     this.props.optionSelected(event.target.value);
-  }
+  };
 }
 
 export default DropDown;

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);

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;
+}

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]: {}
+        }
+      };
+    });
   });
 });