Skip to content
Snippets Groups Projects
Commit d3ac1be9 authored by Bo-Chun Chen's avatar Bo-Chun Chen
Browse files

Rewrite with React Hooks

parent 5ea1a3bf
No related branches found
No related tags found
No related merge requests found
import React from 'react'; import Button from 'react-bootstrap/Button';
import { trackPromise } from 'react-promise-tracker'; import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import io from 'socket.io-client' import io from 'socket.io-client'
const socket = io('http://localhost:5000') import Modal from 'react-bootstrap/Modal';
let file_name = null; import Nav from 'react-bootstrap/Nav';
let room=null; 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 { // use REMOTE_USER for production
constructor(props) { const username = 'louistw';
super(props);
this.state = { function Main(props) {
imageURL: '', // Setup states
isLoading: false, const [isConnected, setIsConnected] = useState(false);
isDownloadValid: false, const [isLoading, setIsLoading] = useState(false);
}; const [validated, setValidated] = useState(false);
this.handleUpload = this.handleUpload.bind(this); const [modalTitle, setModalTitle] = useState("Your account request has been submitted.");
} const [modalBody, setModalBody] = useState(<Spinner animation="border" variant="success" />);
request_account(ev) { // Setup refs for easy access
ev.preventDefault(); const {current: socket} = useRef(io("ws://localhost:5000"));
this.setState({ isLoading: true }); const firstName = useRef(null);
const data = new FormData(); const lastName = useRef(null);
console.log(this.first_name.value) const reason = useRef(null);
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',{})
} // Define functions
const hideModal = () => setIsLoading(false);
const showModal = () => setIsLoading(true);
const handleSubmit = (e) => {
e.preventDefault();
joinRoom (username) { const form = e.currentTarget;
room = username setValidated(true);
socket.emit('join_room', { username }) 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) { // Define socketio events
ev.preventDefault(); if (!isConnected) {
this.setState({ isLoading: true }); socket.emit('join_room', {username}, () => setIsConnected(true));
const data = new FormData(); socket.on('message', data => {
console.log(this.first_name.value) console.log(data + ' ' + socket.id);
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);
}
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() { return (
const { isLoading, isDownloadValid } = this.state; <>
let download_link = null; <Navbar className="mb-4" bg="dark" variant="dark">
let file_path = '/return-files/' + file_name; <Container fluid>
//let file_path = '../downloads' + this.uploadInput.files[0] ; <Navbar.Brand href="#home">Self Registration</Navbar.Brand>
//if (isLoading) { <Navbar.Toggle aria-controls="basic-navbar-nav" />
// return <p>Loading ...</p>; <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) { <Container className="col-4">
download_link = <a href={file_path} download>Download File</a>; <Form noValidate validated={validated} onSubmit={handleSubmit}>
} else { <Form.Group controlId="formFirstName">
download_link = null; <Form.Label>First Name</Form.Label>
} <Form.Control required ref={firstName} type="text" placeholder="First Name" />
<Form.Control.Feedback type="invalid">
return ( Required
<form onSubmit={this.request_account}> </Form.Control.Feedback>
<div> </Form.Group>
<input ref={(ref) => { this.first_name = ref; }} type="text" placeholder="First Name" /> <Form.Group controlId="formLastName">
</div> <Form.Label>Last Name</Form.Label>
<div> <Form.Control required ref={lastName} type="text" placeholder="Last Name" />
<input ref={(ref) => { this.last_name = ref; }} type="text" placeholder="Last Name" /> <Form.Control.Feedback type="invalid">
</div> Required
<div> </Form.Control.Feedback>
<textarea ref={(ref) => { this.message = ref; }} placeholder="Reason" /> </Form.Group>
</div> <Form.Group controlId="formReason">
<div> <Form.Label>Reason</Form.Label>
<button>Submit</button> <Form.Control ref={reason} type="text" placeholder="Reason" />
</div> </Form.Group>
</form> <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; export default Main;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment