Rewrite with React Hooks

react/src/components/Main.jsx

-import React from 'react';
-import { trackPromise } from 'react-promise-tracker';
-
+import Button from 'react-bootstrap/Button';
+import Container from 'react-bootstrap/Container';
+import Form from 'react-bootstrap/Form';
 import io from 'socket.io-client'
-const socket = io('http://localhost:5000')
-let file_name = null;
-let room=null;
+import Modal from 'react-bootstrap/Modal';
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
+import React, { useRef, useState, useEffect } from 'react';
+import Spinner from 'react-bootstrap/Spinner';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
-class Main extends React.Component {
-  constructor(props) {
-    super(props);
+// use REMOTE_USER for production
+const username = 'louistw';
 
-    this.state = {
-      imageURL: '',
-      isLoading: false,
-      isDownloadValid: false,
-    };
-  this.handleUpload = this.handleUpload.bind(this);
-  }
+function Main(props) {
+  // Setup states
+  const [isConnected, setIsConnected] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [validated, setValidated] = useState(false);
+  const [modalTitle, setModalTitle] = useState("Your account request has been submitted.");
+  const [modalBody, setModalBody] = useState(<Spinner animation="border" variant="success" />);
 
-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',{})
+  // Setup refs for easy access
+  const {current: socket} = useRef(io("ws://localhost:5000"));
+  const firstName = useRef(null);
+  const lastName = useRef(null);
+  const reason = useRef(null);
 
-  }
+  // Define functions
+  const hideModal = () => setIsLoading(false);
+  const showModal = () => setIsLoading(true);
+  const handleSubmit = (e) => {
+    e.preventDefault();
 
-joinRoom (username) {
-    room =  username
-    socket.emit('join_room', { username })
+    const form = e.currentTarget;
+    setValidated(true);
+    if (form.checkValidity() === false) {
+      e.stopPropagation();
+    } else {
+      showModal();
+      console.log('Modal showed')
+      socket.emit('request', {
+        'username': username,
+        'firstName': firstName.current.value,
+        'lastName': lastName.current.value,
+        'reason': reason.current.value
+      });
+    }
   }
 
+  useEffect(() => {
+    console.log(socket.rooms)
 
-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); 
-  }
+    // Define socketio events
+  if (!isConnected) {
+    socket.emit('join_room', {username}, () => setIsConnected(true));
+    socket.on('message', data => {
+      console.log(data + ' ' + socket.id);
+    });
 
+    socket.on('connect', data => {
+      console.log('on connect: ' + socket.id);
+    });
+    socket.on('requested', data => {
+      console.log('Account requested');
+      showModal();
+    });
+    socket.on('created', data => {
+      console.log('account has been created.')
+      let sec = 3;
+      (function countdown () {
+        setModalTitle("Your account is ready!");
+        setModalBody(`Will redirect in ${sec--} seconds.`);
+        setTimeout(countdown, 1000);
+      })()
+      setTimeout(() => {
+        console.log('Redirecting to /test')
+        window.location = '/test';
+      }, sec * 1000);
+    });
 
+  }
+  }, [socket, isConnected]);
 
-  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>;
-    //}
+  return (
+    <>
+      <Navbar className="mb-4" bg="dark" variant="dark">
+        <Container fluid>
+          <Navbar.Brand href="#home">Self Registration</Navbar.Brand>
+          <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          <Navbar.Collapse id="basic-navbar-nav">
+            <Nav className="ml-auto">
+              <Nav.Link href="#docs">
+                <FontAwesomeIcon icon={faInfoCircle} /> Online Documentation
+              </Nav.Link>
+            </Nav>
+          </Navbar.Collapse>
+        </Container>
+      </Navbar>
 
-    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>
-      
-    );
-  }
+      <Container className="col-4">
+        <Form noValidate validated={validated} onSubmit={handleSubmit}>
+          <Form.Group controlId="formFirstName">
+            <Form.Label>First Name</Form.Label>
+            <Form.Control required ref={firstName} type="text" placeholder="First Name" />
+            <Form.Control.Feedback type="invalid">
+              Required
+            </Form.Control.Feedback>
+          </Form.Group>
+          <Form.Group controlId="formLastName">
+            <Form.Label>Last Name</Form.Label>
+            <Form.Control required ref={lastName} type="text" placeholder="Last Name" />
+            <Form.Control.Feedback type="invalid">
+              Required
+            </Form.Control.Feedback>
+          </Form.Group>
+          <Form.Group controlId="formReason">
+            <Form.Label>Reason</Form.Label>
+            <Form.Control ref={reason} type="text" placeholder="Reason" />
+          </Form.Group>
+          <Form.Group controlId="formReason">
+            <Button variant="success" type="submit">
+              Submit
+            </Button>
+          </Form.Group>
+        </Form>
+      </Container>
+      <Modal
+        show={isLoading}
+        onHide={hideModal}
+        backdrop="static"
+        animation={false}
+        keyboard={false}
+        centered
+      >
+        <Modal.Header>
+          <Modal.Title>{modalTitle}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body className="mx-auto">
+          {modalBody}
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={hideModal}>
+            Close
+          </Button>
+          <Button variant="success">Understood</Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  )
 }
 
 export default Main;