Grab user data from web server

webclient/src/App.js

@@ -10,18 +10,23 @@ class App extends Component {
 		super();
 
 		this.state = {
+			user: null,
 			toolData: null,
 		};
 	}
 
 	componentDidMount() {
-		fetch('http://localhost:8080/api/client')
+		fetch('http://localhost:8080/api/tooldata')
 			.then(response => response.json())
 			.then(data => this.setState({ toolData: data }));
+		fetch('http://localhost:8080/api/user')
+			.then(response => response.json())
+			.then(data => this.setState({ user: data }));
 	}
 
 	render() {
 		const toolData = this.state.toolData;
+		const user = this.state.user;
 
 		return (
 			<div>
@@ -41,18 +46,18 @@ class App extends Component {
 				<div style={{height: '70px', display: 'inline-block'}} />
 
 
-				{toolData ?
+				{toolData && user ?
 					<div>
 						<Route exact path='/' render={props =>
-							<Categories {...props} data={toolData} />
+							<Categories {...props} data={toolData} user={user} />
 						} />
 
 						<Route exact path='/:category' render={props =>
-							<Category {...props} data={toolData} />
+							<Category {...props} data={toolData} user={user} />
 						} />
 
 						<Route exact path='/:category/:id' render={props =>
-							<Tool {...props} data={toolData} />
+							<Tool {...props} data={toolData} user={user} />
 						} />
 					</div>
 				:

webclient/src/Category.js

@@ -5,11 +5,11 @@ import { Link } from 'react-router-dom';
 class Category extends Component {
 	render() {
 		const data = this.props.data;
-		const user = data.user;
+		const user = this.props.user;
 		const match = this.props.match;
 
 		const category = data.categories.find((x) => 
-			x.slug == match.params.category
+			x.slug === match.params.category
 		);
 
 		return (

webclient/src/Tool.js

@@ -5,15 +5,15 @@ import { Link } from 'react-router-dom';
 class Tool extends Component {
 	render() {
 		const data = this.props.data;
-		const user = data.user;
+		const user = this.props.user;
 		const match = this.props.match;
 
 		const category = data.categories.find((x) => 
-			x.slug == match.params.category
+			x.slug === match.params.category
 		);
 
 		const tool = category.tools.find((x) => 
-			x.id == match.params.id
+			x.id.toString() === match.params.id
 		);
 
 		const approved = user.authorizedTools.includes(tool.id);

webserver/server.js

@@ -1,7 +1,7 @@
 const express = require('express');
 const app = express();
 
-const fakeData = {
+const toolData = {
 	categories: [
 		{
 			name: 'Woodshop',
@@ -48,17 +48,23 @@ const fakeData = {
 			],
 		},
 	],
-	user: {
-		authorizedTools: [1, 2],
-	},
 };
 
-const tools = {
-	'2C3AE843A15F': {
-		relayOn: false,
-		ledOn: true,
-		date: '2018-02-01',
-	},
+const user = {
+	username: "protospace",
+	name: "Protospace User",
+	authorizedTools: [1, 2],
+}
+
+const lockoutData = {
+	lockouts: [
+		{
+			mac: '2C3AE843A15F',
+			relayOn: false,
+			ledOn: true,
+			date: '2018-02-01',
+		},
+	],
 };
 
 const server = app.listen(8080, function () {
@@ -73,17 +79,24 @@ app.use(function(req, res, next) {
 
 app.use('/', express.static('dist'));
 
-app.get('/api/client', function (req, res) {
-	console.log('Request for client data');
+app.get('/api/tooldata', function (req, res) {
+	console.log('Request for tool data');
 
 	res.setHeader('Content-Type', 'application/json');
-	res.send(fakeData);
+	res.send(toolData);
 });
 
-app.get('/api/tool/:mac', function (req, res) {
+app.get('/api/user', function (req, res) {
+	console.log('Request for user data');
+
+	res.setHeader('Content-Type', 'application/json');
+	res.send(user);
+});
+
+app.get('/api/lockout/:mac', function (req, res) {
 	const mac = req.params.mac;
 
-	const data = tools[mac];
+	const data = lockoutData.lockouts.find(x => x.mac === mac);
 	if (!data) {
 		res.send(404);
 	}