Get phone number too, dump into <pre>

This commit is contained in:
3wc 2020-11-13 03:20:15 +02:00
parent 06ecdcd45b
commit 560b7ec663
2 changed files with 35 additions and 26 deletions

View File

@ -24,7 +24,11 @@ body {
.App .Main form { .App .Main form {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
margin-bottom: 20px;
}
.App .Main form * {
margin: 0 5px;
} }

View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import { import {
Heading, IconButton, StarIcon, Pane, TextInput, Text, Spinner Heading, IconButton, StarIcon, Pane, TextInput, Text, Spinner, Textarea
} from 'evergreen-ui' } from 'evergreen-ui'
import './App.css'; import './App.css';
const API_URL = 'https://api.jitsi.net/conferenceMapper'; const API_URL = 'https://api.jitsi.net/';
class Form extends React.Component { class Form extends React.Component {
constructor() { constructor() {
@ -15,7 +15,7 @@ class Form extends React.Component {
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this);
} }
handleSubmit(event) { async handleSubmit(event) {
event.preventDefault(); event.preventDefault();
this.setState({ this.setState({
loading: true, loading: true,
@ -32,25 +32,33 @@ class Form extends React.Component {
const form = event.target; const form = event.target;
const form_data = new FormData(form); const form_data = new FormData(form);
fetch(`${API_URL}?conference=${form_data.get('meeting-name')}@conference.meet.jit.si`, {
method: 'GET', let name = form_data.get('meeting-name');
})
.then(res => res.json()) let [data_id, data_numbers] = await Promise.all([
.then((data) => { 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({ this.setState({
invalid: false, invalid: false,
displayErrors: false, displayErrors: false,
name: form_data.get('meeting-name'), name: name,
meetingid: data.id, meetingid: data_id.id,
phone: data_numbers.numbers.UK,
loading: false, loading: false,
str: `Notes: https://pad.riseup.net/p/${name}
Computer / app: https://meet.jit.si/${name}
Phone: ${data_numbers.numbers.UK}
PIN: ${data_id.id}`
}) })
console.log('Meeting ID: ' + this.state.meetingid)
})
.catch(console.log);
} }
render() { render() {
const { name, meetingid, invalid, loading, displayErrors } = this.state; const { str, name, meetingid, invalid, phone, loading, displayErrors } = this.state;
return ( return (
<div> <div>
<form <form
@ -61,7 +69,6 @@ class Form extends React.Component {
<Heading size={700}>meeting name:</Heading> <Heading size={700}>meeting name:</Heading>
<TextInput <TextInput
height={60} height={60}
margin={20}
name="meeting-name" name="meeting-name"
placeholder="YourMeetingNameHere" placeholder="YourMeetingNameHere"
required required
@ -79,12 +86,10 @@ class Form extends React.Component {
<Spinner marginX="auto" /> <Spinner marginX="auto" />
)} )}
{!invalid && name && ( {!invalid && name && (
<div> <Pane>
<h3>Copy Pasta</h3> <h3>Copy Pasta</h3>
<p>Notes: https://pad.riseup.net/p/{name}</p> <Textarea value={str} />
<p>Link: https://meet.jit.si/{name}</p> </Pane>
<p>PIN: {meetingid}</p>
</div>
)} )}
</div> </div>
</div> </div>