public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Work in progress on a React-based error reporting mechanism.

Browse source 
The idea is that REST handlers always fail with throwing an Error (subclass of InteroperableError). The InteroperableError contains type and data field which are JSON-serialized and sent to client. It's up to the client to interpret the error and choose an appropriate way to present it.
This commit is contained in:
Tomas Bures 2017-06-05 00:52:59 +02:00
parent 4504d539c5
commit 79ea9e1897
10 changed files with 304 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

30
client/src/namespaces/Edit.js
View file

@ -3,8 +3,9 @@
import React, { Component } from 'react';
import { translate } from 'react-i18next';
import csfrToken from 'csfrToken';
import { withForm, Form, InputField, TextArea, ButtonRow, Button } from '../lib/form';
import { withForm, Form, InputField, TextArea, ButtonRow, Button} from '../lib/form';
import { Title } from "../lib/page";
import axios from 'axios';
@translate()
@withForm
@ -15,11 +16,11 @@ export default class Edit extends Component {
this.nsId = parseInt(this.props.match.params.nsId);
this.initFormState();
this.populateFormStateFromURL(`/namespaces/rest/namespaces/${this.nsId}`);
this.populateFormValuesFromURL(`/namespaces/rest/namespaces/${this.nsId}`);
}
validateFormState(state) {
validateFormValues(state) {
const t = this.props.t;
if (!state.getIn(['name','value']).trim()) {
@ -29,13 +30,22 @@ export default class Edit extends Component {
}
}
submitHandler(evt) {
evt.preventDefault();
this.showFormValidation();
async submitHandler() {
if (this.isFormWithoutErrors()) {
const data = this.getFormValues();
console.log(data);
const response = await axios.put(`/namespaces/rest/namespaces/${this.nsId}`);
console.log(response);
} else {
this.showFormValidation();
}
}
deleteHandler() {
this.hideFormValidation();
async deleteHandler() {
this.setFormStatusMessage('Deleting namespace')
this.setFormStatusMessage()
}
render() {
@ -45,13 +55,13 @@ export default class Edit extends Component {
<div>
<Title>{t('Edit Namespace')}</Title>
<Form stateOwner={this} onSubmit={::this.submitHandler}>
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
<InputField id="name" label={t('Name')} description={t('Namespace Name')}/>
<TextArea id="description" label={t('Description')} description={t('Description')}/>
<ButtonRow>
<Button type="submit" className="btn-primary" icon="ok" label={t('Update')}/>
<Button className="btn-danger" icon="remove" label={t('Delete Namespace')} onClick={::this.deleteHandler}/>
<Button className="btn-danger" icon="remove" label={t('Delete Namespace')} onClickAsync={::this.deleteHandler}/>
</ButtonRow>
</Form>
</div>