Feat update ui

Re-write UI with React Hooks.

Added socket.io test server.

Server usage:

1. Install socket.io

npm install socket.io

2. Run it

node test-server.js

react/src/components/Main.jsx

@@ -16,14 +16,13 @@ const username = 'louistw';
 
 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" />);
 
   // Setup refs for easy access
-  const {current: socket} = useRef(io());
+  const socketRef = useRef(null);
   const firstName = useRef(null);
   const lastName = useRef(null);
   const reason = useRef(null);
@@ -41,7 +40,7 @@ function Main(props) {
     } else {
       showModal();
       if (DEBUG) console.log('Modal showed')
-      socket.emit('request', {
+      socketRef.current.emit('request', {
         'username': username,
         'firstName': firstName.current.value,
         'lastName': lastName.current.value,
@@ -51,16 +50,17 @@ function Main(props) {
   }
 
   useEffect(() => {
+    const socket = socketRef.current = socketRef.current || io();
+
     if (DEBUG) console.log(socket)
 
     // Define socketio events
-  if (!isConnected) {
-    socket.emit('join_room', {username}, () => setIsConnected(true));
     socket.on('message', data => {
       if (DEBUG) console.log(data + ' ' + socket.id);
     });
     socket.on('connect', data => {
       if (DEBUG) console.log('on connect: ' + socket.id);
+      socket.emit('join_room', {username});
     });
     socket.on('requested', data => {
       if (DEBUG) console.log('Account requested');
@@ -80,8 +80,8 @@ function Main(props) {
       }, sec * 1000);
     });
 
-  }
-  }, [socket, isConnected]);
+    return () => socket.disconnect();
+  }, []);
 
   return (
     <>