103 lines
2.3 KiB
JavaScript
103 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
|
|
import {
|
|
Heading, IconButton, StarIcon, Pane, TextInput, Text
|
|
} from 'evergreen-ui'
|
|
|
|
import './App.css';
|
|
|
|
const API_URL = 'https://api.jitsi.net/conferenceMapper';
|
|
|
|
class Form extends React.Component {
|
|
constructor() {
|
|
super();
|
|
this.state = {};
|
|
this.handleSubmit = this.handleSubmit.bind(this);
|
|
}
|
|
|
|
handleSubmit(event) {
|
|
event.preventDefault();
|
|
if (!event.target.checkValidity()) {
|
|
this.setState({
|
|
invalid: true,
|
|
displayErrors: true,
|
|
});
|
|
return;
|
|
}
|
|
|
|
const form = event.target;
|
|
const form_data = new FormData(form);
|
|
fetch(`${API_URL}?conference=${form_data.get('meeting-name')}@conference.meet.jit.si`, {
|
|
method: 'GET',
|
|
})
|
|
.then(res => res.json())
|
|
.then((data) => {
|
|
this.setState({
|
|
invalid: false,
|
|
displayErrors: false,
|
|
name: form_data.get('meeting-name'),
|
|
meetingid: data.id
|
|
})
|
|
console.log(this.state.meetingid)
|
|
})
|
|
.catch(console.log);
|
|
}
|
|
|
|
render() {
|
|
const { name, meetingid, invalid, displayErrors } = this.state;
|
|
return (
|
|
<div>
|
|
<form
|
|
onSubmit={this.handleSubmit}
|
|
noValidate
|
|
className={displayErrors ? 'displayErrors' : ''}
|
|
>
|
|
<Heading size={700}>meeting name:</Heading>
|
|
<TextInput
|
|
height={60}
|
|
margin={20}
|
|
name="meeting-name"
|
|
placeholder="YourMeetingNameHere"
|
|
required
|
|
/>
|
|
<IconButton icon={StarIcon} height={60} onClick={this.onClick}/>
|
|
</form>
|
|
|
|
<div className="res-block">
|
|
{invalid && (
|
|
<Pane><Text>Form is not valid</Text></Pane>
|
|
)}
|
|
{!invalid && name && (
|
|
<div>
|
|
<h3>Copy Pasta</h3>
|
|
<p>Notes: https://pad.riseup.net/p/{name}</p>
|
|
<p>Link: https://meet.jit.si/{name}</p>
|
|
<p>PIN: {meetingid}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
class App extends React.Component {
|
|
onClick = () => {
|
|
console.log("Foo");
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<Pane className="App" >
|
|
<Pane
|
|
className="Main"
|
|
>
|
|
<Form />
|
|
</Pane>
|
|
</Pane>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default App;
|