Add tool page

webclient/src/Category.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
-import { Container, Dropdown, Header, Icon, Item, Menu, Segment, Input } from 'semantic-ui-react'
+import { Breadcrumb, Container, Dropdown, Header, Icon, Item, Label, Menu, Segment, Input } from 'semantic-ui-react'
 import { Link } from 'react-router-dom';
 
 class Category extends Component {
 	render() {
 		const data = this.props.data;
+		const user = data.user;
 		const match = this.props.match;
 
 		const category = data.categories.find((x) => 
@@ -12,25 +13,36 @@ class Category extends Component {
 		);
 
 		return (
-<div>
-	<Segment basic>
-		<Header size='large'>{category.name} Tools</Header>
-	</Segment>
+			<div>
+				<Container>
+					<Breadcrumb size='large'>
+						<Breadcrumb.Section link as={Link} to='/'>Categories</Breadcrumb.Section>
+						<Breadcrumb.Divider icon='right angle' />
+						<Breadcrumb.Section active>{category.name}</Breadcrumb.Section>
+					</Breadcrumb>
 
-	<Container>
-		<Item.Group link unstackable divided>
-			{category.tools.map((x, n) =>
-				<Item key={n}>
-					<Item.Image size='tiny' src={x.photo} />
-					<Item.Content>
-						<Item.Header>{x.name}</Item.Header>
-						<Item.Extra>Wiki ID: {x.wikiId}</Item.Extra>
-					</Item.Content>
-				</Item>
-			)}
-		</Item.Group>
-	</Container>
-</div>
+					<Item.Group link unstackable divided>
+						{category.tools.map((x, n) =>
+							<Item as={Link} to={'/' + category.slug + '/' + x.id} key={n}>
+								<Item.Image size='tiny' src={x.photo} />
+								<Item.Content>
+									<Item.Header>{x.name}</Item.Header>
+									<Item.Description>
+										{user.authorizedTools.includes(x.id) ?
+											<Label color='green'>
+												<Icon name='check' /> Authorized
+											</Label> : <Label color='red'>
+												<Icon name='x' /> Unauthorized
+											</Label>
+										}
+									</Item.Description>
+									<Item.Extra>Wiki ID: {x.wikiId}</Item.Extra>
+								</Item.Content>
+							</Item>
+						)}
+					</Item.Group>
+				</Container>
+			</div>
 		);
 	}
 }