fix routes for sources and changesets // fix typing errors

scm-ui/ui-components/src/BranchSelector.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
 import { Branch } from "@scm-manager/ui-types";
@@ -6,16 +6,12 @@ import DropDown from "./forms/DropDown";
 
 type Props = {
   branches: Branch[];
-  selected: (branch: Branch) => void;
+  onSelectBranch: (branch: Branch | undefined) => void;
   selectedBranch?: string;
   label: string;
   disabled?: boolean;
 };
 
-type State = {
-  selectedBranch?: Branch;
-};
-
 const ZeroflexFieldLabel = styled.div`
   flex-basis: inherit;
   flex-grow: 0;
@@ -29,66 +25,31 @@ const NoBottomMarginField = styled.div`
   margin-bottom: 0 !important;
 `;
 
-export default class BranchSelector extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {};
-  }
-
-  componentDidMount() {
-    const { branches } = this.props;
-    if (branches) {
-      const selectedBranch = branches.find(branch => branch.name === this.props.selectedBranch);
-      this.setState({
-        selectedBranch
-      });
-    }
-  }
-
-  render() {
-    const { branches, label, disabled } = this.props;
-
-    if (branches) {
-      return (
-        <div className={classNames("field", "is-horizontal")}>
-          <ZeroflexFieldLabel className={classNames("field-label", "is-normal")}>
-            <label className={classNames("label", "is-size-6")}>{label}</label>
-          </ZeroflexFieldLabel>
-          <div className="field-body">
-            <NoBottomMarginField className={classNames("field", "is-narrow")}>
-              <MinWidthControl className="control">
-                <DropDown
-                  className="is-fullwidth"
-                  options={branches.map(b => b.name)}
-                  optionSelected={this.branchSelected}
-                  disabled={!!disabled}
-                  preselectedOption={this.state.selectedBranch ? this.state.selectedBranch.name : ""}
-                />
-              </MinWidthControl>
-            </NoBottomMarginField>
-          </div>
+const BranchSelector: FC<Props> = ({ branches, onSelectBranch, selectedBranch, label, disabled }) => {
+  if (branches) {
+    return (
+      <div className={classNames("field", "is-horizontal")}>
+        <ZeroflexFieldLabel className={classNames("field-label", "is-normal")}>
+          <label className={classNames("label", "is-size-6")}>{label}</label>
+        </ZeroflexFieldLabel>
+        <div className="field-body">
+          <NoBottomMarginField className={classNames("field", "is-narrow")}>
+            <MinWidthControl className="control">
+              <DropDown
+                className="is-fullwidth"
+                options={branches.map(b => b.name)}
+                optionSelected={branch => onSelectBranch(branches.filter(b => b.name === branch)[0])}
+                disabled={!!disabled}
+                preselectedOption={selectedBranch && selectedBranch}
+              />
+            </MinWidthControl>
+          </NoBottomMarginField>
         </div>
-      );
-    } else {
-      return null;
-    }
+      </div>
+    );
+  } else {
+    return null;
   }
+};
 
-  branchSelected = (branchName: string) => {
-    const { branches, selected } = this.props;
-
-    if (!branchName) {
-      this.setState({
-        selectedBranch: undefined
-      });
-      selected(undefined);
-      return;
-    }
-    const branch = branches.find(b => b.name === branchName);
-
-    selected(branch);
-    this.setState({
-      selectedBranch: branch
-    });
-  };
-}
+export default BranchSelector;