mirror of https://github.com/sualko/cloud_bbb
parent
d862eb0d4d
commit
0074f717ea
|
@ -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]));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue