From 9ee7fc7499c6c538362a7596d1c949c592f2facf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maren=20S=C3=BCwer?= Date: Tue, 25 Sep 2018 15:08:57 +0200 Subject: [PATCH] complete module and show changesets, error and loading --- scm-ui/public/locales/en/changesets.json | 4 ++ .../src/repos/components/ChangesetDetails.js | 48 +++++++++++++++ scm-ui/src/repos/containers/ChangesetView.js | 58 ++++++++++++++----- scm-ui/src/repos/modules/changesets.js | 15 ++++- 4 files changed, 109 insertions(+), 16 deletions(-) create mode 100644 scm-ui/src/repos/components/ChangesetDetails.js diff --git a/scm-ui/public/locales/en/changesets.json b/scm-ui/public/locales/en/changesets.json index b3e996e094..c1816db311 100644 --- a/scm-ui/public/locales/en/changesets.json +++ b/scm-ui/public/locales/en/changesets.json @@ -9,5 +9,9 @@ "author": { "name": "Author", "mail": "Mail" + }, + "changeset-error": { + "title": "Error", + "subtitle": "Unknown changeset error" } } diff --git a/scm-ui/src/repos/components/ChangesetDetails.js b/scm-ui/src/repos/components/ChangesetDetails.js new file mode 100644 index 0000000000..b3084a7552 --- /dev/null +++ b/scm-ui/src/repos/components/ChangesetDetails.js @@ -0,0 +1,48 @@ +//@flow +import React from "react"; +import type { Changeset } from "@scm-manager/ui-types"; +import { translate } from "react-i18next"; +import { MailLink, DateFromNow } from "@scm-manager/ui-components"; + +type Props = { + changeset: Changeset, + t: string => string +}; + +class ChangesetDetails extends React.Component { + render() { + const { changeset, t } = this.props; + return ( + + + + + + + + + + + + + + + + + + + + + + + +
{t("changeset.id")}{changeset.id}
{t("author.name")}{changeset.author.name}
{t("author.mail")} + +
{t("changeset.description")}{changeset.description}
{t("changeset.date")} + +
+ ); + } +} + +export default translate("changesets")(ChangesetDetails); diff --git a/scm-ui/src/repos/containers/ChangesetView.js b/scm-ui/src/repos/containers/ChangesetView.js index 729ca40020..afc2f3d208 100644 --- a/scm-ui/src/repos/containers/ChangesetView.js +++ b/scm-ui/src/repos/containers/ChangesetView.js @@ -2,43 +2,68 @@ import React from "react"; import { connect } from "react-redux"; import { withRouter } from "react-router-dom"; -import type { Changeset } from "@scm-manager/ui-types"; -import { fetchChangesetIfNeeded } from "../modules/changesets"; +import type { Changeset, Repository } from "@scm-manager/ui-types"; +import { + fetchChangesetIfNeeded, + fetchChangesetReset, + getChangeset, + getFetchChangesetFailure, + isFetchChangesetPending +} from "../modules/changesets"; +import ChangesetDetails from "../components/ChangesetDetails"; +import { translate } from "react-i18next"; +import { Loading, ErrorPage } from "@scm-manager/ui-components"; type Props = { id: string, changeset: Changeset, repository: Repository, - repositories: Repository[], + loading: boolean, + error: Error, fetchChangesetIfNeeded: ( namespace: string, repoName: string, id: string - ) => void + ) => void, + resetForm: (namespace: string, repoName: string, id: string) => void, + match: any, + t: string => string }; -class ChangesetView extends React.Component { - constructor(props) { - super(props); - this.state = {}; - } - +class ChangesetView extends React.Component { componentDidMount() { const { fetchChangesetIfNeeded, repository } = this.props; const id = this.props.match.params.id; - //state macht keinen Sinn?! repositories holen! fetchChangesetIfNeeded(repository.namespace, repository.name, id); + this.props.resetForm(repository.namespace, repository.name, id); } render() { - const id = this.props.match.params.id; + const { changeset, loading, error, t } = this.props; - return
Hallo! Changesets here! {id}
; + if (error) { + return ( + + ); + } + + if (!changeset || loading) return ; + + return ; } } const mapStateToProps = (state, ownProps: Props) => { - return null; + const { namespace, name } = ownProps.repository; + const id = ownProps.match.params.id; + const changeset = getChangeset(state, namespace, name, id); + const loading = isFetchChangesetPending(state, namespace, name, id); + const error = getFetchChangesetFailure(state, namespace, name, id); + return { changeset, error, loading }; }; const mapDispatchToProps = dispatch => { @@ -49,6 +74,9 @@ const mapDispatchToProps = dispatch => { id: string ) => { dispatch(fetchChangesetIfNeeded(namespace, repoName, id)); + }, + resetForm: (namespace: string, repoName: string, id: string) => { + dispatch(fetchChangesetReset(namespace, repoName, id)); } }; }; @@ -57,5 +85,5 @@ export default withRouter( connect( mapStateToProps, mapDispatchToProps - )(ChangesetView) + )(translate("changesets")(ChangesetView)) ); diff --git a/scm-ui/src/repos/modules/changesets.js b/scm-ui/src/repos/modules/changesets.js index 7e68e66f15..22755137da 100644 --- a/scm-ui/src/repos/modules/changesets.js +++ b/scm-ui/src/repos/modules/changesets.js @@ -10,6 +10,8 @@ import { isPending } from "../../modules/pending"; import { getFailure } from "../../modules/failure"; import { combineReducers } from "redux"; import type { Action, PagedCollection } from "@scm-manager/ui-types"; +import * as types from "../../modules/types"; +import { CREATE_USER_RESET } from "../../users/modules/users"; export const FETCH_CHANGESETS = "scm/repos/FETCH_CHANGESETS"; export const FETCH_CHANGESETS_PENDING = `${FETCH_CHANGESETS}_${PENDING_SUFFIX}`; @@ -22,6 +24,7 @@ export const FETCH_CHANGESET = "scm/repos/FETCH_CHANGESET"; export const FETCH_CHANGESET_PENDING = `${FETCH_CHANGESET}_${PENDING_SUFFIX}`; export const FETCH_CHANGESET_SUCCESS = `${FETCH_CHANGESET}_${SUCCESS_SUFFIX}`; export const FETCH_CHANGESET_FAILURE = `${FETCH_CHANGESET}_${FAILURE_SUFFIX}`; +export const FETCH_CHANGESET_RESET = `${FETCH_CHANGESET}_${types.RESET_SUFFIX}`; //********end of detailed view add @@ -57,7 +60,6 @@ export function fetchChangeset( dispatch(fetchChangesetSuccess(data, namespace, repoName, id)) ) .catch(err => { - console.log(err); dispatch(fetchChangesetFailure(namespace, repoName, id, err)); }); }; @@ -109,6 +111,17 @@ function fetchChangesetFailure( itemId: createItemId(namespace, repoName, id) }; } + +export function fetchChangesetReset( + namespace: string, + repoName: string, + id: string +) { + return { + type: FETCH_CHANGESET_RESET, + itemId: createItemId(namespace, repoName, id) + }; +} //********end of detailed view add export function fetchChangesetsWithOptions(