Main.jsx

import React from 'react';
import { trackPromise } from 'react-promise-tracker';

import io from 'socket.io-client'
const socket = io('http://localhost:5000')
let file_name = null;
let room=null;

class Main extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      imageURL: '',
      isLoading: false,
      isDownloadValid: false,
    };
    this.handleUpload = this.handleUpload.bind(this);
  }

  request_account(ev) {
    ev.preventDefault();
    this.setState({ isLoading: true });
    const data = new FormData();
    console.log(this.first_name.value)
    data.append('first_name', this.first_name.value);
    data.append('last_name', this.last_name.value);
    data.append('message', this.message.value);
    socket.emit('request account',{})

  }

  joinRoom (username) {
    room =  username
    socket.emit('join_room', { username })
  }


  handleUpload(ev) {
    ev.preventDefault();
    this.setState({ isLoading: true });
    const data = new FormData();
    console.log(this.first_name.value)
    data.append('first_name', this.first_name.value);
    data.append('last_name', this.last_name.value);
    data.append('message', this.message.value);
    joinRoom(this.first_name.value);
  }



  render() {
    const { isLoading, isDownloadValid } = this.state;
    let download_link = null;
    let file_path = '/return-files/' + file_name;
    //let file_path = '../downloads' + this.uploadInput.files[0] ;
    //if (isLoading) {
    //  return <p>Loading ...</p>;
    //}

    if (isDownloadValid) {
      download_link = <a href={file_path} download>Download File</a>;
    } else {
      download_link = null;
    }

    return (
      <form onSubmit={this.request_account}>
        <div>
          <input ref={(ref) => { this.first_name = ref; }} type="text" placeholder="First Name" />
        </div>
        <div>
          <input ref={(ref) => { this.last_name = ref; }} type="text" placeholder="Last Name" />
        </div>
        <div>
          <textarea ref={(ref) => { this.message = ref; }} placeholder="Reason" />
        </div>
        <div>
          <button>Submit</button>
        </div>
      </form>

    );
  }
}

export default Main;