pslockout/webclient/src/App.js

import React, { Component } from 'react';
import Categories from './Categories';
import Category from './Category';
import Tool from './Tool';
import { Button, Confirm, Container, Dimmer, Form, Header, Icon, Item, Label, Loader, Menu, Message, Segment, Input } from 'semantic-ui-react';
import { Link, Route } from 'react-router-dom';
import io from 'socket.io-client';

// Move to env var
const SOCKET_SERVER_URL = 'https://tools-socket.protospace.ca';
const AUTH_SERVER_URL = 'https://tools-auth.protospace.ca';

class App extends Component {
	constructor() {
		super();

		this.socket = io(SOCKET_SERVER_URL);

		try {
			localStorage.setItem('test', 'test');
			this.storage = true;
		} catch (e) {
			this.storage = false;
		}

		let token = this.storage ? localStorage.getItem('token') : null;

		this.state = {
			login: {token: token, error: null, username: '', password: '', confirmLogout: false},
			user: null,
			toolData: null,
			toolStatus: null,
			connected: false,
			network: true,
		};
	}

	noNetwork = () => {
		this.setState({ network: false });
		this.socket.disconnect();
	}

	getUser = () => {
		fetch(AUTH_SERVER_URL + '/user/', {
			headers: {'Authorization': 'Token ' + this.state.login.token},
		})
			.then(response => {
				if (response.ok) {
					response.json().then(data => this.setState({ user: data[0] }));
				} else {
					this.handleLogout();
				}
			})
			.catch(error => {
				console.log(error)
			});
	}

	componentDidMount() {
		fetch(AUTH_SERVER_URL + '/tooldata/')
			.then(response => {
				if (response.ok) {
					response.json().then(data => this.setState({ toolData: data }));
				} else {
					this.noNetwork();
				}
			})
			.catch(error => {
				console.log(error)
				this.noNetwork();
			});

		if (this.state.login.token) this.getUser();

		this.socket.on('toolStatus', toolStatus =>
			this.setState({ toolStatus: toolStatus })
		);

		this.socket.on('connect', () =>
			this.setState({ connected: true })
		);

		this.socket.on('disconnect', () => {
			this.setState({ toolStatus: null, connected: false });
		});
	}

	componentWillUnmount() {
		this.socket.removeAllListeners();
	}

	requestInterlock = change => {
		this.socket.emit('requestInterlock', {
			token: this.state.login.token,
			change: change,
		});
	}

	handleChange = event => {
		const name = event.target.name;
		const value = event.target.value;

		this.setState({
			login: {...this.state.login, [name]: value, error: false}
		});
	}

	handleSubmit = () => {
		const login = this.state.login;
		fetch(AUTH_SERVER_URL + '/login/', {
			method: 'POST',
			headers: {'Content-Type': 'application/json; charset=utf-8'},
			body: JSON.stringify({'username': login.username, 'password': login.password})
		})
			.then(response => {
				if (response.ok) {
					response.json().then(data => {
						this.setState({ login: {...login, ...data, error: false} });
						if (this.storage) localStorage.setItem('token', data.token);
						this.getUser();
					});
				} else {
					this.setState({ login: {...login, error: true} });
				}
			})
			.catch(error => {
				console.log(error)
				this.setState({ network: false });
			});
	}

	confirmLogout = () => {
		if (this.state.login.token) {
			this.setState({
				login: {...this.state.login, confirmLogout: true}
			});
		}
	}

	cancelLogout = () => {
		this.setState({
			login: {...this.state.login, confirmLogout: false}
		});
	}

	handleLogout = () => {
		this.setState({
			login: {...this.state.login, token: null, confirmLogout: false}
		});
		localStorage.removeItem('token');
	}

	handleRefresh = () => {
		window.location.reload();
	}

	render() {
		const login = this.state.login;
		const user = this.state.user;
		const toolData = this.state.toolData;
		const toolStatus = this.state.toolStatus;
		const connected = this.state.connected;
		const network = this.state.network;

		return (
			network ?
				<div>
					<Menu fixed='top' borderless inverted>
						<Menu.Item onClick={this.confirmLogout}>
							<Icon name='user close' size='big' />
						</Menu.Item>
						<Menu.Item as={Link} to='/'>
							<Icon name='home' size='big' />
						</Menu.Item>
						<Menu.Item>
							<Icon name='circle' color={connected && toolStatus ? 'green' : 'red'} />
							{connected && toolStatus ? 'Connected' : 'Disconnected'}
						</Menu.Item>
					</Menu>
					<div style={{height: '70px', display: 'inline-block'}} />

					<Confirm
						open={login.confirmLogout}
						header='Logout'
						onCancel={this.cancelLogout}
						onConfirm={this.handleLogout}
					/>

					{login.token ?
						<div>
							{toolData && user ?
								<div>
									<Route exact path='/' render={props =>
										<Categories {...props} data={toolData} />
									} />

									<Route exact path='/:category' render={props =>
										<Category {...props} data={toolData} user={user} />
									} />

									<Route exact path='/:category/:slug' render={props =>
										<Tool {...props}
											data={toolData}
											user={user}
											toolStatus={toolStatus}
											requestInterlock={this.requestInterlock}
										/>
									} />
								</div>
							:
								<Dimmer active>
									<Loader>Loading</Loader>
								</Dimmer>
							}
						</div>
					:
						<Container text>
							<Form size='large' onSubmit={this.handleSubmit}>
								<Message visible warning header='Please log in to access the tools!' />
								<Form.Field>
									<label>Protospace Username</label>
									<input name='username' placeholder='Username' value={login.username} onChange={this.handleChange} />
								</Form.Field>
								<Form.Field>
									<label>Password</label>
									<input name='password' type='password' value={login.password} onChange={this.handleChange} />
								</Form.Field>
								<Button type='submit'>Submit</Button>
								{login.error && <Label basic color='red' pointing='left'>
									Invalid username / password!
								</Label>}
							</Form>
						</Container>
					}
				</div>
			:
				<Dimmer active>
					<Header inverted icon>
						<Icon color='red' name='wifi' />
						Please connect to the "Protospace" wifi
					</Header>
					<br />
					<Button size='big' inverted icon labelPosition='left' onClick={this.handleRefresh}>
						<Icon name='refresh' />
						Refresh
					</Button>
				</Dimmer>
		);
	}
}

export default App;