diff --git a/ts/Manager/App.tsx b/ts/Manager/App.tsx index b4b2309..91966fa 100644 --- a/ts/Manager/App.tsx +++ b/ts/Manager/App.tsx @@ -63,10 +63,10 @@ const App: React.FC = () => { function addRoom(name: string) { if (!name) { - return; + return Promise.resolve(); } - api.createRoom(name).then(room => { + return api.createRoom(name).then(room => { setRooms(rooms.concat([room])); }); } diff --git a/ts/Manager/NewRoomForm.tsx b/ts/Manager/NewRoomForm.tsx index 0e165f0..aa94b82 100644 --- a/ts/Manager/NewRoomForm.tsx +++ b/ts/Manager/NewRoomForm.tsx @@ -1,29 +1,41 @@ -import React, {useState} from 'react'; +import React, { useState } from 'react'; type Props = { - addRoom: (name: string) => void; + addRoom: (name: string) => Promise; } const NewRoomForm: React.FC = (props) => { - const [name, setName] = useState(''); + const [name, setName] = useState(''); + const [processing, setProcessing] = useState(false); + const [error, setError] = useState(''); function addRoom(ev: React.FormEvent) { ev.preventDefault(); - props.addRoom(name); + setProcessing(true); + setError(''); - setName(''); + props.addRoom(name).then(() => { + setName(''); + }).catch(err => { + setError(err.toString()); + }).then(() => { + setProcessing(false); + }); } return (
{setName(event.target.value);}} /> + onChange={(event) => { setName(event.target.value); }} /> - + + + {error &&

{error}

}
); };