diff --git a/scm-ui/src/repos/sources/components/FileTree.js b/scm-ui/src/repos/sources/components/FileTree.js index 1ac98faa5e..b8fa4a0dc4 100644 --- a/scm-ui/src/repos/sources/components/FileTree.js +++ b/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 { + 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 { } }; + if (error) { + return ; + } + + if (loading) { + return ; + } + if (!tree) { + return null; + } + const files = []; if (path) { files.push({ @@ -97,4 +137,35 @@ class FileTree extends React.Component { } } -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))); diff --git a/scm-ui/src/repos/sources/containers/Sources.js b/scm-ui/src/repos/sources/containers/Sources.js index f32141a541..2d75b4193a 100644 --- a/scm-ui/src/repos/sources/containers/Sources.js +++ b/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 { componentDidMount() { - const { - fetchSources, - fetchBranches, - repository, - revision, - path - } = this.props; + const { fetchBranches, repository } = 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}/${path}`; - } else { - url = `${baseUrl}/${branch.name}`; - } + 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 ; } - if (!sources || loading) { + if (loading) { return ; } return ( <> {this.renderBranchSelector()} - ( + + )} /> ); @@ -111,36 +88,32 @@ class Sources extends React.Component { } const mapStateToProps = (state, ownProps) => { - const { repository, match } = ownProps; - const { revision, path } = match.params; + const { repository } = ownProps; - const loading = isFetchSourcesPending(state, repository, revision, path); - const error = getFetchSourcesFailure(state, repository, revision, path); + const loading = isFetchBranchesPending(state, repository); + 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( - mapStateToProps, - mapDispatchToProps +export default compose( + withRouter, + connect( + mapStateToProps, + mapDispatchToProps + ) )(Sources);