fix: room creation error handling

fix #14
pull/63/head
sualko 2020-06-04 10:16:09 +02:00
parent d862eb0d4d
commit 0074f717ea
2 changed files with 21 additions and 9 deletions

View File

@ -63,10 +63,10 @@ const App: React.FC<Props> = () => {
function addRoom(name: string) { function addRoom(name: string) {
if (!name) { if (!name) {
return; return Promise.resolve();
} }
api.createRoom(name).then(room => { return api.createRoom(name).then(room => {
setRooms(rooms.concat([room])); setRooms(rooms.concat([room]));
}); });
} }

View File

@ -1,29 +1,41 @@
import React, {useState} from 'react'; import React, { useState } from 'react';
type Props = { type Props = {
addRoom: (name: string) => void; addRoom: (name: string) => Promise<void>;
} }
const NewRoomForm: React.FC<Props> = (props) => { const NewRoomForm: React.FC<Props> = (props) => {
const [name, setName] = useState(''); const [name, setName] = useState<string>('');
const [processing, setProcessing] = useState<boolean>(false);
const [error, setError] = useState<string>('');
function addRoom(ev: React.FormEvent) { function addRoom(ev: React.FormEvent) {
ev.preventDefault(); ev.preventDefault();
props.addRoom(name); setProcessing(true);
setError('');
setName(''); props.addRoom(name).then(() => {
setName('');
}).catch(err => {
setError(err.toString());
}).then(() => {
setProcessing(false);
});
} }
return ( return (
<form action="#" onSubmit={addRoom}> <form action="#" onSubmit={addRoom}>
<input <input
className="newgroup-name" className="newgroup-name"
disabled={processing}
value={name} value={name}
placeholder={t('bbb', 'Room name')} placeholder={t('bbb', 'Room name')}
onChange={(event) => {setName(event.target.value);}} /> onChange={(event) => { setName(event.target.value); }} />
<input type="submit" value={t('bbb', 'Create')} /> <input type="submit" disabled={processing} value={t('bbb', 'Create')} />
{error && <p>{error}</p>}
</form> </form>
); );
}; };