Load tree in FileTree

scm-ui/src/repos/sources/components/FileTree.js

@@ -1,9 +1,19 @@
 //@flow
 import React from "react";
 import { translate } from "react-i18next";
+import { connect } from "react-redux";
 import injectSheet from "react-jss";
 import FileTreeLeaf from "./FileTreeLeaf";
-import type { File } from "@scm-manager/ui-types";
+import type { Repository, File } from "@scm-manager/ui-types";
+import { ErrorNotification, Loading } from "@scm-manager/ui-components";
+import {
+  fetchSources,
+  getFetchSourcesFailure,
+  isFetchSourcesPending,
+  getSources
+} from "../modules/sources";
+import { withRouter } from "react-router-dom";
+import { compose } from "redux";
 
 const styles = {
   iconColumn: {
@@ -12,19 +22,23 @@ const styles = {
 };
 
 type Props = {
+  loading: boolean,
+  error: Error,
   tree: File,
+  repository: Repository,
   revision: string,
   path: string,
   baseUrl: string,
-
+  fetchSources: (Repository, string, string) => void,
   // context props
   classes: any,
-  t: string => string
+  t: string => string,
+  match: any
 };
 
 export function findParent(path: string) {
   if (path.endsWith("/")) {
-    path = path.substring(path, path.length - 1);
+    path = path.substring(0, path.length - 1);
   }
 
   const index = path.lastIndexOf("/");
@@ -35,8 +49,23 @@ export function findParent(path: string) {
 }
 
 class FileTree extends React.Component<Props> {
+  componentDidMount() {
+    const { fetchSources, repository, revision, path } = this.props;
+
+    fetchSources(repository, revision, path);
+  }
+
   render() {
-    const { tree, revision, path, baseUrl, classes, t } = this.props;
+    const {
+      error,
+      loading,
+      tree,
+      revision,
+      path,
+      baseUrl,
+      classes,
+      t
+    } = this.props;
 
     let baseUrlWithRevision = baseUrl;
     if (revision) {
@@ -61,6 +90,17 @@ class FileTree extends React.Component<Props> {
       }
     };
 
+    if (error) {
+      return <ErrorNotification error={error} />;
+    }
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (!tree) {
+      return null;
+    }
+
     const files = [];
     if (path) {
       files.push({
@@ -97,4 +137,35 @@ class FileTree extends React.Component<Props> {
   }
 }
 
-export default injectSheet(styles)(translate("repos")(FileTree));
+const mapStateToProps = (state: any, ownProps: Props) => {
+  const { repository, match } = ownProps;
+  const { revision, path } = match.params;
+
+  const loading = isFetchSourcesPending(state, repository, revision, path);
+  const error = getFetchSourcesFailure(state, repository, revision, path);
+  const tree = getSources(state, repository, revision, path);
+
+  return {
+    loading,
+    error,
+    revision,
+    path,
+    tree
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchSources: (repository: Repository, revision: string, path: string) => {
+      dispatch(fetchSources(repository, revision, path));
+    }
+  };
+};
+
+export default compose(
+  withRouter,
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )
+)(injectSheet(styles)(translate("repos")(FileTree)));