pslockout/webclient/src/Tool.js

import React, { Component } from 'react';
import { Breadcrumb, Button, Container, Dropdown, Header, Icon, Image, Item, Label, Menu, Segment, Table, Input } from 'semantic-ui-react'
import { Link } from 'react-router-dom';

class Tool extends Component {
	render() {
		const data = this.props.data;
		const user = data.user;
		const match = this.props.match;

		const category = data.categories.find((x) => 
			x.slug == match.params.category
		);

		const tool = category.tools.find((x) => 
			x.id == match.params.id
		);

		const approved = user.authorizedTools.includes(tool.id);

		return (
			<div>
				<Container>
					<Breadcrumb size='large'>
						<Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
						<Breadcrumb.Divider icon='right angle' />
						<Breadcrumb.Section link as={Link} to={'/' + category.slug}>{category.name}</Breadcrumb.Section>
						<Breadcrumb.Divider icon='right angle' />
						<Breadcrumb.Section active>{tool.name}</Breadcrumb.Section>
					</Breadcrumb>

					<Segment>
						<Image src={tool.photo} size='medium' centered rounded />
						<Segment textAlign='center' basic>
							<p>Status: Off</p>
							<div>
							<Button color='green' disabled={!approved}>
								<Icon name='lightning' /> Arm
							</Button>
							<Button color='red' disabled={!approved}>
								<Icon name='stop' /> Disarm
							</Button>
							</div>
							{approved || <Label basic color='red' pointing>
								Not authorized! Please take the xyz course.
							</Label>}
						</Segment>

						<Table basic='very' unstackable>
							<Table.Body>
								<Table.Row>
									<Table.Cell>Cat</Table.Cell>
									<Table.Cell>Meow</Table.Cell>
								</Table.Row>
								<Table.Row>
									<Table.Cell>Dog</Table.Cell>
									<Table.Cell warning>
										<Icon name='attention' />
										Bark
									</Table.Cell>
								</Table.Row>
								<Table.Row>
									<Table.Cell>Bird</Table.Cell>
									<Table.Cell>Chrip</Table.Cell>
								</Table.Row>
							</Table.Body>
						</Table>

						<Header as='h4'>Notes</Header>
						<p>{tool.notes}</p>
					</Segment>
				</Container>
			</div>
		);
	}
}

export default Tool;