Implemented error handling for creating groups

This commit is contained in:
Philipp Czora
2018-08-01 16:28:06 +02:00
parent f426c14f70
commit aa6e128023
2 changed files with 26 additions and 10 deletions

View File

@@ -9,7 +9,8 @@ import * as validator from "./groupValidation";
type Props = { type Props = {
t: string => string, t: string => string,
submitForm: Group => void submitForm: Group => void,
loading?: boolean
}; };
type State = { type State = {
@@ -53,7 +54,7 @@ class GroupForm extends React.Component<Props, State> {
}; };
render() { render() {
const { t } = this.props; const { t, loading } = this.props;
return ( return (
<form onSubmit={this.onSubmit}> <form onSubmit={this.onSubmit}>
<InputField <InputField
@@ -68,7 +69,7 @@ class GroupForm extends React.Component<Props, State> {
onChange={this.handleDescriptionChange} onChange={this.handleDescriptionChange}
validationError={false} validationError={false}
/> />
<SubmitButton label={t("group-form.submit")} /> <SubmitButton label={t("group-form.submit")} loading={loading}/>
</form> </form>
); );
} }

View File

@@ -5,25 +5,32 @@ import Page from "../../components/layout/Page";
import { translate } from "react-i18next"; import { translate } from "react-i18next";
import GroupForm from "../components/GroupForm"; import GroupForm from "../components/GroupForm";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createGroup } from "../modules/groups"; import { createGroup, isCreateGroupPending, getCreateGroupFailure, createGroupReset } from "../modules/groups";
import type { Group } from "../types/Group"; import type { Group } from "../types/Group";
import type { History } from "history"; import type { History } from "history";
type Props = { type Props = {
t: string => string, t: string => string,
createGroup: (group: Group, callback?: () => void) => void, createGroup: (group: Group, callback?: () => void) => void,
history: History history: History,
loading?: boolean,
error?: Error,
resetForm: () => void,
}; };
type State = {}; type State = {};
class AddGroup extends React.Component<Props, State> { class AddGroup extends React.Component<Props, State> {
componentDidMount() {
this.props.resetForm();
}
render() { render() {
const { t } = this.props; const { t, loading, error } = this.props;
return ( return (
<Page title={t("add-group.title")} subtitle={t("add-group.subtitle")}> <Page title={t("add-group.title")} subtitle={t("add-group.subtitle")} error={error}>
<div> <div>
<GroupForm submitForm={group => this.createGroup(group)} /> <GroupForm submitForm={group => this.createGroup(group)} loading={loading}/>
</div> </div>
</Page> </Page>
); );
@@ -40,12 +47,20 @@ class AddGroup extends React.Component<Props, State> {
const mapDispatchToProps = dispatch => { const mapDispatchToProps = dispatch => {
return { return {
createGroup: (group: Group, callback?: () => void) => createGroup: (group: Group, callback?: () => void) =>
dispatch(createGroup(group, callback)) dispatch(createGroup(group, callback)),
resetForm: () => {
dispatch(createGroupReset());
}
}; };
}; };
const mapStateToProps = state => { const mapStateToProps = state => {
return {} const loading = isCreateGroupPending(state);
const error = getCreateGroupFailure(state);
return {
loading,
error
};
}; };
export default connect( export default connect(