pslockout/webclient/src/App.js

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

// Move to env var
const SERVER_URL = "http://tools.protospace.ca:8080";

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

		this.socket = io(SERVER_URL);

		this.state = {
			user: null,
			toolData: null,
			toolStatus: null,
			connected: false,
		};
	}

	componentDidMount() {
		fetch(SERVER_URL + '/api/tooldata')
			.then(response => response.json())
			.then(data => this.setState({ toolData: data }));
		fetch(SERVER_URL + '/api/user')
			.then(response => response.json())
			.then(data => this.setState({ user: data }));

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

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

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

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

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

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

		return (
			<div>
				<Menu fixed='top' borderless inverted>
					<Menu.Item>
						<Icon name='bars' size='big' />
					</Menu.Item>
					<Menu.Item as={Link} to='/'>
						<Icon name='home' size='big' />
					</Menu.Item>
					<Menu.Item>
						<Icon name='circle' color={connected ? 'green' : 'red'} />
					</Menu.Item>
					<Menu.Menu position='right'>
						<Menu.Item position='right'>
							<Input transparent inverted placeholder='Search...' icon='search' />
						</Menu.Item>
					</Menu.Menu>
				</Menu>
				<div style={{height: '70px', display: 'inline-block'}} />


				{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/:id' render={props =>
							<Tool {...props}
								data={toolData}
								user={user}
								toolStatus={toolStatus}
								requestInterlock={this.requestInterlock}
							/>
						} />
					</div>
				:
					<Dimmer active>
						<Loader>Loading</Loader>
					</Dimmer>
				}

			</div>
		);
	}
}

export default App;