use reflow to migrate from flow to typescript

scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx

@@ -0,0 +1,240 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import { Branch, Repository } from '@scm-manager/ui-types';
+import FileTree from '../components/FileTree';
+import {
+  BranchSelector,
+  Breadcrumb,
+  ErrorNotification,
+  Loading,
+} from '@scm-manager/ui-components';
+import { translate } from 'react-i18next';
+import {
+  fetchBranches,
+  getBranches,
+  getFetchBranchesFailure,
+  isFetchBranchesPending,
+} from '../../branches/modules/branches';
+import { compose } from 'redux';
+import Content from './Content';
+import { fetchSources, isDirectory } from '../modules/sources';
+
+type Props = {
+  repository: Repository;
+  loading: boolean;
+  error: Error;
+  baseUrl: string;
+  branches: Branch[];
+  revision: string;
+  path: string;
+  currentFileIsDirectory: boolean;
+
+  // dispatch props
+  fetchBranches: (p: Repository) => void;
+  fetchSources: (p1: Repository, p2: string, p3: string) => void;
+
+  // Context props
+  history: any;
+  match: any;
+  location: any;
+  t: (p: string) => string;
+};
+
+type State = {
+  selectedBranch: any;
+};
+
+class Sources extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      selectedBranch: null,
+    };
+  }
+
+  componentDidMount() {
+    const {
+      fetchBranches,
+      repository,
+      revision,
+      path,
+      fetchSources,
+    } = this.props;
+
+    fetchBranches(repository);
+    fetchSources(repository, revision, path);
+
+    this.redirectToDefaultBranch();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { fetchSources, repository, revision, path } = this.props;
+    if (prevProps.revision !== revision || prevProps.path !== path) {
+      fetchSources(repository, revision, path);
+    }
+
+    this.redirectToDefaultBranch();
+  }
+
+  redirectToDefaultBranch = () => {
+    const { branches } = this.props;
+    if (this.shouldRedirectToDefaultBranch()) {
+      const defaultBranches = branches.filter(b => b.defaultBranch);
+
+      if (defaultBranches.length > 0) {
+        this.branchSelected(defaultBranches[0]);
+      }
+    }
+  };
+
+  shouldRedirectToDefaultBranch = () => {
+    const { branches, revision } = this.props;
+    return branches && !revision;
+  };
+
+  branchSelected = (branch?: Branch) => {
+    const { baseUrl, history, path } = this.props;
+    let url;
+    if (branch) {
+      this.setState({
+        selectedBranch: branch,
+      });
+      if (path) {
+        url = `${baseUrl}/${encodeURIComponent(branch.name)}/${path}`;
+      } else {
+        url = `${baseUrl}/${encodeURIComponent(branch.name)}/`;
+      }
+    } else {
+      this.setState({
+        selectedBranch: null,
+      });
+      url = `${baseUrl}/`;
+    }
+    history.push(url);
+  };
+
+  render() {
+    const {
+      repository,
+      baseUrl,
+      loading,
+      error,
+      revision,
+      path,
+      currentFileIsDirectory,
+    } = this.props;
+
+    if (error) {
+      return <ErrorNotification error={error} />;
+    }
+
+    if (loading) {
+      return <Loading />;
+    }
+
+    if (currentFileIsDirectory) {
+      return (
+        <div className="panel">
+          {this.renderBranchSelector()}
+          {this.renderBreadcrumb()}
+          <FileTree
+            repository={repository}
+            revision={revision}
+            path={path}
+            baseUrl={baseUrl}
+          />
+        </div>
+      );
+    } else {
+      return (
+        <Content repository={repository} revision={revision} path={path} />
+      );
+    }
+  }
+
+  renderBranchSelector = () => {
+    const { branches, revision, t } = this.props;
+
+    if (branches) {
+      return (
+        <div className="panel-heading">
+          <BranchSelector
+            branches={branches}
+            selectedBranch={revision}
+            label={t('changesets.branchSelectorLabel')}
+            selected={(b: Branch) => {
+              this.branchSelected(b);
+            }}
+          />
+        </div>
+      );
+    }
+    return null;
+  };
+
+  renderBreadcrumb = () => {
+    const { revision, path, baseUrl, branches, repository } = this.props;
+    const { selectedBranch } = this.state;
+
+    if (revision) {
+      return (
+        <Breadcrumb
+          revision={encodeURIComponent(revision)}
+          path={path}
+          baseUrl={baseUrl}
+          branch={selectedBranch}
+          defaultBranch={
+            branches && branches.filter(b => b.defaultBranch === true)[0]
+          }
+          branches={branches}
+          repository={repository}
+        />
+      );
+    }
+    return null;
+  };
+}
+
+const mapStateToProps = (state, ownProps) => {
+  const { repository, match } = ownProps;
+  const { revision, path } = match.params;
+  const decodedRevision = revision ? decodeURIComponent(revision) : undefined;
+  const loading = isFetchBranchesPending(state, repository);
+  const error = getFetchBranchesFailure(state, repository);
+  const branches = getBranches(state, repository);
+  const currentFileIsDirectory = decodedRevision
+    ? isDirectory(state, repository, decodedRevision, path)
+    : isDirectory(state, repository, revision, path);
+
+  return {
+    repository,
+    revision: decodedRevision,
+    path,
+    loading,
+    error,
+    branches,
+    currentFileIsDirectory,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchBranches: (repository: Repository) => {
+      dispatch(fetchBranches(repository));
+    },
+    fetchSources: (repository: Repository, revision: string, path: string) => {
+      dispatch(fetchSources(repository, revision, path));
+    },
+  };
+};
+
+export default compose(
+  translate('repos'),
+  withRouter,
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  ),
+)(Sources);