cloud_bbb/ts/Manager/NewRoomForm.tsx

43 lines
957 B
TypeScript
Raw Permalink Normal View History

import React, { useState } from 'react';
2020-04-26 11:36:41 +02:00
type Props = {
addRoom: (name: string) => Promise<void>;
2020-04-26 11:36:41 +02:00
}
const NewRoomForm: React.FC<Props> = (props) => {
const [name, setName] = useState<string>('');
const [processing, setProcessing] = useState<boolean>(false);
const [error, setError] = useState<string>('');
2020-04-26 11:36:41 +02:00
function addRoom(ev: React.FormEvent) {
ev.preventDefault();
2020-04-26 11:36:41 +02:00
setProcessing(true);
setError('');
2020-04-26 11:36:41 +02:00
props.addRoom(name).then(() => {
setName('');
}).catch(err => {
setError(err.toString());
}).then(() => {
setProcessing(false);
});
2020-04-26 11:36:41 +02:00
}
return (
<form action="#" onSubmit={addRoom}>
<input
className="newgroup-name"
disabled={processing}
value={name}
2020-05-16 14:44:21 +02:00
placeholder={t('bbb', 'Room name')}
onChange={(event) => { setName(event.target.value); }} />
<input type="submit" disabled={processing} value={t('bbb', 'Create')} />
{error && <p>{error}</p>}
</form>
2020-04-27 16:50:45 +02:00
);
};
2020-04-26 11:36:41 +02:00
export default NewRoomForm;