added loading and error state

This commit is contained in:
Florian Scholdei
2019-02-06 10:42:25 +01:00
parent 1c0f417f9a
commit 6f1615ef0a
5 changed files with 76 additions and 19 deletions

View File

@@ -2,9 +2,18 @@
import React from "react";
import { translate } from "react-i18next";
import type { Group } from "@scm-manager/ui-types";
import { Subtitle, DeleteButton, confirmAlert } from "@scm-manager/ui-components";
import {
Subtitle,
DeleteButton,
confirmAlert
} from "@scm-manager/ui-components";
import { getDeleteGroupFailure, isDeleteGroupPending } from "../modules/groups";
import { connect } from "react-redux";
import { ErrorNotification } from "@scm-manager/ui-components";
type Props = {
loading: boolean,
error: Error,
group: Group,
confirmDialog?: boolean,
deleteGroup: (group: Group) => void,
@@ -43,7 +52,7 @@ export class DeleteGroup extends React.Component<Props> {
};
render() {
const { confirmDialog, t } = this.props;
const { loading, error, confirmDialog, t } = this.props;
const action = confirmDialog ? this.confirmDelete : this.deleteGroup;
if (!this.isDeletable()) {
@@ -53,11 +62,13 @@ export class DeleteGroup extends React.Component<Props> {
return (
<>
<Subtitle subtitle={t("deleteGroup.subtitle")} />
<ErrorNotification error={error} />
<div className="columns">
<div className="column">
<DeleteButton
label={t("deleteGroup.button")}
action={action}
loading={loading}
/>
</div>
</div>
@@ -66,4 +77,13 @@ export class DeleteGroup extends React.Component<Props> {
}
}
export default translate("groups")(DeleteGroup);
const mapStateToProps = (state, ownProps) => {
const loading = isDeleteGroupPending(state, ownProps.group.name);
const error = getDeleteGroupFailure(state, ownProps.group.name);
return {
loading,
error
};
};
export default connect(mapStateToProps)(translate("groups")(DeleteGroup));

View File

@@ -7,8 +7,6 @@ import {
deleteGroup,
getModifyGroupFailure,
isModifyGroupPending,
getDeleteGroupFailure,
isDeleteGroupPending,
modifyGroupReset
} from "../modules/groups";
import type { History } from "history";
@@ -67,7 +65,7 @@ class EditGroup extends React.Component<Props> {
};
render() {
const { group, loading, error } = this.props;
const { loading, error, group } = this.props;
return (
<div>
<ErrorNotification error={error} />
@@ -80,17 +78,15 @@ class EditGroup extends React.Component<Props> {
loadUserSuggestions={this.loadUserAutocompletion}
/>
<hr />
<DeleteGroup
group={group}
deleteGroup={this.deleteGroup} />
<DeleteGroup group={group} deleteGroup={this.deleteGroup} />
</div>
);
}
}
const mapStateToProps = (state, ownProps) => {
const loading = isModifyGroupPending(state, ownProps.group.name) || isDeleteGroupPending(state, ownProps.group.name);
const error = getModifyGroupFailure(state, ownProps.group.name) || getDeleteGroupFailure(state, ownProps.group.name);
const loading = isModifyGroupPending(state, ownProps.group.name);
const error = getModifyGroupFailure(state, ownProps.group.name);
const autocompleteLink = getUserAutoCompleteLink(state);
return {
loading,

View File

@@ -2,9 +2,18 @@
import React from "react";
import { translate } from "react-i18next";
import type { Repository } from "@scm-manager/ui-types";
import { Subtitle, DeleteButton, confirmAlert } from "@scm-manager/ui-components";
import {
Subtitle,
DeleteButton,
confirmAlert
} from "@scm-manager/ui-components";
import { getDeleteRepoFailure, isDeleteRepoPending } from "../modules/repos";
import { connect } from "react-redux";
import { ErrorNotification } from "@scm-manager/ui-components";
type Props = {
loading: boolean,
error: Error,
repository: Repository,
confirmDialog?: boolean,
@@ -47,7 +56,7 @@ class DeleteRepo extends React.Component<Props> {
};
render() {
const { confirmDialog, t } = this.props;
const { loading, error, confirmDialog, t } = this.props;
const action = confirmDialog ? this.confirmDelete : this.deleteRepo;
if (!this.isDeletable()) {
@@ -57,11 +66,13 @@ class DeleteRepo extends React.Component<Props> {
return (
<>
<Subtitle subtitle={t("deleteRepo.subtitle")} />
<ErrorNotification error={error} />
<div className="columns">
<div className="column">
<DeleteButton
label={t("deleteRepo.button")}
action={action}
loading={loading}
/>
</div>
</div>
@@ -70,4 +81,14 @@ class DeleteRepo extends React.Component<Props> {
}
}
export default translate("repos")(DeleteRepo);
const mapStateToProps = (state, ownProps) => {
const { namespace, name } = ownProps.repository;
const loading = isDeleteRepoPending(state, namespace, name);
const error = getDeleteRepoFailure(state, namespace, name);
return {
loading,
error
};
};
export default connect(mapStateToProps)(translate("repos")(DeleteRepo));

View File

@@ -2,9 +2,18 @@
import React from "react";
import { translate } from "react-i18next";
import type { User } from "@scm-manager/ui-types";
import { Subtitle, DeleteButton, confirmAlert } from "@scm-manager/ui-components";
import {
Subtitle,
DeleteButton,
confirmAlert
} from "@scm-manager/ui-components";
import { getDeleteUserFailure, isDeleteUserPending } from "../modules/users";
import { connect } from "react-redux";
import { ErrorNotification } from "@scm-manager/ui-components";
type Props = {
loading: boolean,
error: Error,
user: User,
confirmDialog?: boolean,
@@ -47,7 +56,7 @@ class DeleteUser extends React.Component<Props> {
};
render() {
const { confirmDialog, t } = this.props;
const { loading, error, confirmDialog, t } = this.props;
const action = confirmDialog ? this.confirmDelete : this.deleteUser;
if (!this.isDeletable()) {
@@ -57,11 +66,13 @@ class DeleteUser extends React.Component<Props> {
return (
<>
<Subtitle subtitle={t("deleteUser.subtitle")} />
<ErrorNotification error={error} />
<div className="columns">
<div className="column">
<DeleteButton
label={t("deleteUser.button")}
action={action}
loading={loading}
/>
</div>
</div>
@@ -70,4 +81,13 @@ class DeleteUser extends React.Component<Props> {
}
}
export default translate("users")(DeleteUser);
const mapStateToProps = (state, ownProps) => {
const loading = isDeleteUserPending(state, ownProps.user.name);
const error = getDeleteUserFailure(state, ownProps.user.name);
return {
loading,
error
};
};
export default connect(mapStateToProps)(translate("users")(DeleteUser));

View File

@@ -71,8 +71,8 @@ class EditUser extends React.Component<Props> {
}
const mapStateToProps = (state, ownProps) => {
const loading = isModifyUserPending(state, ownProps.user.name) || isDeleteUserPending(state, ownProps.user.name);
const error = getModifyUserFailure(state, ownProps.user.name) || getDeleteUserFailure(state, ownProps.user.name);
const loading = isModifyUserPending(state, ownProps.user.name);
const error = getModifyUserFailure(state, ownProps.user.name);
return {
loading,
error