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

scm-ui/src/repos/sources/containers/Sources.js

@@ -1,35 +1,28 @@
 // @flow
 import React from "react";
 import { connect } from "react-redux";
+import { Route, withRouter } from "react-router-dom";
 import type { Repository, Branch, File } from "@scm-manager/ui-types";
 import FileTree from "../components/FileTree";
 import { ErrorNotification, Loading } from "@scm-manager/ui-components";
-import {
-  fetchSources,
-  getFetchSourcesFailure,
-  getSources,
-  isFetchSourcesPending
-} from "../modules/sources";
 import BranchSelector from "../../containers/BranchSelector";
-import { fetchBranches, getBranches } from "../../modules/branches";
+import {
+  fetchBranches,
+  getBranches,
+  getFetchBranchesFailure,
+  isFetchBranchesPending
+} from "../../modules/branches";
+import { compose } from "redux";
 
 type Props = {
   repository: Repository,
-  sources: File,
   loading: boolean,
   error: Error,
-  revision: string,
-  path: string,
   baseUrl: string,
   branches: Branch[],
 
   // dispatch props
   fetchBranches: Repository => void,
-  fetchSources: (
-    repository: Repository,
-    revision: string,
-    path: string
-  ) => void,
 
   // Context props
   history: any,
@@ -38,57 +31,41 @@ type Props = {
 
 class Sources extends React.Component<Props> {
   componentDidMount() {
-    const {
+    const { fetchBranches, repository } = this.props;
-      fetchSources,
-      fetchBranches,
-      repository,
-      revision,
-      path
-    } = this.props;
 
     fetchBranches(repository);
-    fetchSources(repository, revision, path);
   }
 
   branchSelected = (branch?: Branch) => {
-    const { path, baseUrl, history } = this.props;
+    const { baseUrl, history } = this.props;
     let url;
     if (branch) {
-      if (path) {
+      url = `${baseUrl}/${branch.name}`;
-        url = `${baseUrl}/${branch.name}/${path}`;
-      } else {
-        url = `${baseUrl}/${branch.name}`;
-      }
     } else {
       url = `${baseUrl}/`;
     }
     history.push(url);
   };
 
-  findSelectedBranch = () => {
-    const { revision, branches } = this.props;
-    return branches.find((branch: Branch) => branch.name === revision);
-  };
-
   render() {
-    const { sources, revision, path, baseUrl, loading, error } = this.props;
+    const { repository, baseUrl, loading, error } = this.props;
 
     if (error) {
       return <ErrorNotification error={error} />;
     }
 
-    if (!sources || loading) {
+    if (loading) {
       return <Loading />;
     }
 
     return (
       <>
         {this.renderBranchSelector()}
-        <FileTree
+        <Route
-          tree={sources}
+          path={`${baseUrl}/:revision/:path*`}
-          revision={revision}
+          component={() => (
-          path={path}
+            <FileTree repository={repository} baseUrl={baseUrl} />
-          baseUrl={baseUrl}
+          )}
         />
       </>
     );
@@ -111,36 +88,32 @@ class Sources extends React.Component<Props> {
 }
 
 const mapStateToProps = (state, ownProps) => {
-  const { repository, match } = ownProps;
+  const { repository } = ownProps;
-  const { revision, path } = match.params;
 
-  const loading = isFetchSourcesPending(state, repository, revision, path);
+  const loading = isFetchBranchesPending(state, repository);
-  const error = getFetchSourcesFailure(state, repository, revision, path);
+  const error = getFetchBranchesFailure(state, repository);
   const branches = getBranches(state, repository);
-  const sources = getSources(state, repository, revision, path);
 
   return {
+    repository,
     loading,
     error,
-    sources,
-    revision,
-    path,
     branches
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
-    fetchSources: (repository: Repository, revision: string, path: string) => {
-      dispatch(fetchSources(repository, revision, path));
-    },
     fetchBranches: (repository: Repository) => {
       dispatch(fetchBranches(repository));
     }
   };
 };
 
-export default connect(
+export default compose(
-  mapStateToProps,
+  withRouter,
-  mapDispatchToProps
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )
 )(Sources);