Get phone number too, dump into <pre>

src/App.css

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

src/App.js

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