From 948a089af614c1a1d6da37d903ce6dbb37bade29 Mon Sep 17 00:00:00 2001
From: Damien <damien.armillon@gmail.com>
Date: Sun, 5 May 2019 17:28:21 +0200
Subject: [PATCH] Change gestion des erreurs
---
backend/routes/routesToucan.js | 2 +-
front/src/App.js | 20 +++++++------
front/src/FormToucan.js | 54 +++++++++++++++++++++++++++-------
3 files changed, 55 insertions(+), 21 deletions(-)
diff --git a/backend/routes/routesToucan.js b/backend/routes/routesToucan.js
index b0516a4..b23b150 100644
--- a/backend/routes/routesToucan.js
+++ b/backend/routes/routesToucan.js
@@ -42,7 +42,7 @@ router.route("/toucans")
var newPath = file.destination+"/"+id+extension;
fs.rename(file.path,newPath, err => {
if (err) {
- res.err(err);
+ res.status(400).send(err);
}
});
}
diff --git a/front/src/App.js b/front/src/App.js
index 03bafa9..aa740d9 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -1,19 +1,21 @@
import React from 'react';
-import {Segment} from 'semantic-ui-react';
+import {Segment, SegmentGroup} from 'semantic-ui-react';
import ToucanTable from './ToucanTable';
import FormToucan from './FormToucan'
import './App.css';
function App() {
return (
- <div>
- <Segment padded style={{margin:"3%"}}>
- <FormToucan />
- </Segment>
- <Segment textAlign="center" padded style={{margin:"3%"}} >
- <ToucanTable />
- </Segment>
- </div>
+ <Segment.Group >
+ <Segment padded style={{margin:"3%"}}>
+ <h2 style={{textAlign:"center"}}>Rajout de Toucan</h2>
+ <FormToucan />
+ </Segment>
+ <Segment textAlign="center" padded style={{margin:"3%"}} >
+ <h2>Les Toucans</h2>
+ <ToucanTable style={{margin:"50px"}}/>
+ </Segment>
+ </Segment.Group>
);
}
diff --git a/front/src/FormToucan.js b/front/src/FormToucan.js
index 1d35720..68f73ab 100644
--- a/front/src/FormToucan.js
+++ b/front/src/FormToucan.js
@@ -19,6 +19,8 @@ class FormToucan extends Component {
dateShown:"",
date: undefined,
+
+ responseMessage:"",
}
}
@@ -54,6 +56,7 @@ class FormToucan extends Component {
}
onSubmit = () => {
+ this.setState({responseMessage:""});
const {date, title, toucan, cover} = this.state;
const form = new FormData()
@@ -66,8 +69,24 @@ class FormToucan extends Component {
method: 'POST',
body: form
})
- .then(() => window.location.reload())
- .catch((err)=>console.log(err))
+ .then((response) => {
+ if (response.ok) {
+ window.location.reload()
+ } else {
+ try {
+ response.json().then((json)=>{
+ if(json.errmsg.split(" ")[0]==="E11000"){ // L'erreur la plus probable
+ this.setState({responseMessage:"La date sélectionnée existe déjà"})
+ } else {
+ this.setState({responseMessage:json.errmsg})
+ }
+ });
+ } catch {
+ response.text().then(text => this.setState({responseMessage:text}))
+
+ }};
+ } )
+ .catch((err)=> this.setState({responseMessage:err}))
}
render() {
@@ -78,8 +97,11 @@ class FormToucan extends Component {
const formError= errorMessage.length !== 0; //Le formulaire a une erreur si errorMessage a au moins 1 erreure
return (
+ <div>
<Form error={formError} onSubmit={this.onSubmit}>
+ <Form.Group style={{margin:"auto"}}>
<Form.Input
+ style={{height:"inherit"}}
type="text"
label="Thème Toucan"
placeholder="Thème"
@@ -90,6 +112,19 @@ class FormToucan extends Component {
required
/>
+ <DateInput
+ style={{width:"10em",}}
+ pickerStyle={{active:{backgroundColor:"red"}}}
+ hideMobileKeyboard
+ label="Date"
+ localization="fr"
+ name="date"
+ onChange={this.onDateChange}
+ value={this.state.dateShown}
+ required
+ />
+ </Form.Group>
+ <Form.Group>
<Form.Input
label="PDF du Toucan"
onChange={this.onFileChange}
@@ -107,22 +142,19 @@ class FormToucan extends Component {
accept="image/png, image/jpeg"
required
/>
- <DateInput
- label="Date"
- localization="fr"
- name="date"
- onChange={this.onDateChange}
- value={this.state.dateShown}
- required
- />
+ <Form.Button disabled={formError} content="C'est parti !" />
+ </Form.Group>
<Message error header="Formulaire incomplet" content={
<ul>
{errorMessage.map((err) => {return <li>{err}</li>})}
</ul>
} />
- <Form.Button disabled={formError} content="C'est parti !" />
</Form>
+ {console.log(this.state.responseMessage)}
+ {this.state.responseMessage ?
+ <Message negative header="Erreur Serveur" content={this.state.responseMessage}></Message>: null}
+ </div>
)
}
--
GitLab