135 lines
3.4 KiB
JavaScript
135 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
|
|
import {
|
|
Heading, Text, Spinner, Link,
|
|
IconButton, StarIcon, Pane, TextInput,
|
|
ListItem, UnorderedList,
|
|
EditIcon, LockIcon, PhoneIcon, ApplicationIcon
|
|
} from 'evergreen-ui'
|
|
|
|
import './App.css';
|
|
|
|
const API_URL = 'https://api.jitsi.net/';
|
|
|
|
class Form extends React.Component {
|
|
constructor() {
|
|
super();
|
|
this.state = {};
|
|
this.handleSubmit = this.handleSubmit.bind(this);
|
|
}
|
|
|
|
async handleSubmit(event) {
|
|
event.preventDefault();
|
|
this.setState({
|
|
loading: true,
|
|
name: null
|
|
});
|
|
|
|
if (!event.target.checkValidity()) {
|
|
this.setState({
|
|
invalid: true,
|
|
displayErrors: true,
|
|
loading: false,
|
|
});
|
|
return;
|
|
}
|
|
|
|
const form = event.target;
|
|
const form_data = new FormData(form);
|
|
|
|
let name = form_data.get('meeting-name');
|
|
|
|
let [data_id, data_numbers] = await Promise.all([
|
|
fetch(`${API_URL}conferenceMapper?conference=${name}@conference.meet.jit.si`).then(res => res.json()),
|
|
fetch(`${API_URL}phoneNumberList?conference=${name}@conference.meet.jit.si`).then(res => res.json()),
|
|
])
|
|
|
|
console.log(data_id);
|
|
console.log(data_numbers);
|
|
|
|
this.setState({
|
|
invalid: false,
|
|
displayErrors: false,
|
|
name: name,
|
|
meetingid: data_id.id,
|
|
phone: data_numbers.numbers.UK,
|
|
loading: false,
|
|
})
|
|
}
|
|
|
|
render() {
|
|
const { name, meetingid, invalid, phone, loading, displayErrors } = this.state;
|
|
return (
|
|
<div>
|
|
<form
|
|
onSubmit={this.handleSubmit}
|
|
noValidate
|
|
className={displayErrors ? 'displayErrors' : ''}
|
|
>
|
|
<Heading size={700}>meeting name:</Heading>
|
|
<TextInput
|
|
height={60}
|
|
name="meeting-name"
|
|
placeholder="YourMeetingNameHere"
|
|
required
|
|
/>
|
|
{!loading && (
|
|
<IconButton icon={StarIcon} height={60} onClick={this.onClick}/>
|
|
)}
|
|
</form>
|
|
|
|
<div className="res-block">
|
|
{invalid && (
|
|
<Pane><Text>Form is not valid</Text></Pane>
|
|
)}
|
|
{loading && (
|
|
<Spinner marginX="auto" />
|
|
)}
|
|
{!invalid && name && (
|
|
<Pane className="center">
|
|
<h3>details for "{name}"</h3>
|
|
<UnorderedList size={500}>
|
|
<ListItem icon={EditIcon}>
|
|
Notes: <Link href="https://pad.riseup.net/p/{name}">https://pad.riseup.net/p/{name}</Link>
|
|
</ListItem>
|
|
<ListItem icon={ApplicationIcon}>
|
|
Computer / app: <Link href="https://meet.jit.si/{name}">https://meet.jit.si/{name}</Link>
|
|
</ListItem>
|
|
<ListItem icon={PhoneIcon}>
|
|
Phone: {phone}
|
|
</ListItem>
|
|
<ListItem icon={LockIcon}>
|
|
PIN: {meetingid}
|
|
</ListItem>
|
|
</UnorderedList>
|
|
</Pane>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
class App extends React.Component {
|
|
onClick = () => {
|
|
console.log("Foo");
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<Pane className="App" >
|
|
<Pane
|
|
className="Main"
|
|
>
|
|
<Form />
|
|
<Pane className="Meta">
|
|
horizonevent by @3wc. <Link href="https://git.autonomic.zone/3wordchant/horizonevent/">source</Link>
|
|
</Pane>
|
|
</Pane>
|
|
</Pane>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|