@ -2,63 +2,27 @@ import React, { Component } from 'react';
import Categories from './Categories' ;
import Category from './Category' ;
import Tool from './Tool' ;
import { Container , Dropdown , Header , Icon , Item , Menu , Segment , Input } from 'semantic-ui-react' ;
import { Container , Dimmer , D ropdown , Header , Icon , Item , Loader , Menu , Segment , Input } from 'semantic-ui-react' ;
import { Link , Route } from 'react-router-dom' ;
const fakeData = {
categories : [
{
name : "Woodshop" ,
slug : "woodshop" ,
info : "Some info about the woodshop." ,
photo : "https://i.imgur.com/RIm8aoG.jpg" ,
tools : [
{
id : 0 ,
name : "White Bandsaw" ,
photo : "http://wiki.protospace.ca/images/thumb/f/f8/105.jpg/146px-105.jpg" ,
notes : "Requires training. Tighten tension lever prior to use / Loosen tension lever after use. Tension lever is on rear." ,
wikiId : 105 ,
} ,
{
id : 1 ,
name : "Jointer" ,
photo : "http://wiki.protospace.ca/images/thumb/6/6f/73.jpg/302px-73.jpg" ,
notes : "Boards must be ABSOLUTELY FREE of nails, staples, screws, or other metal. Check boards thoroughly each and every time, make no presumptions. One mistake will chip the blade and render it useless (drum blades are very expensive)." ,
wikiId : 73 ,
} ,
] ,
} ,
{
name : "Metalshop" ,
slug : "metalshop" ,
info : "Some info about the metalshop." ,
photo : "https://i.imgur.com/A2L2ACY.jpg" ,
tools : [
{
id : 2 ,
name : "Tormach CNC" ,
photo : "http://wiki.protospace.ca/images/thumb/c/cf/49.jpg/320px-49.jpg" ,
notes : "Must complete Shop Safety, Lathe Training, 3D CAD Training, CAM Training, 1 on 1 Project." ,
wikiId : 49 ,
} ,
{
id : 3 ,
name : "Powerfist Bench Grinder" ,
photo : "http://wiki.protospace.ca/images/thumb/c/cd/39.jpg/298px-39.jpg" ,
notes : "A bench grinder is for grinding steels or deburring steel or aluminum (if fitted with a wire wheel)." ,
wikiId : 39 ,
} ,
] ,
} ,
] ,
user : {
authorizedTools : [ 1 , 2 ] ,
} ,
} ;
class App extends Component {
constructor ( ) {
super ( ) ;
this . state = {
toolData : null ,
} ;
}
componentDidMount ( ) {
fetch ( 'http://localhost:8080/api/client' )
. then ( response => response . json ( ) )
. then ( data => this . setState ( { toolData : data } ) ) ;
}
render ( ) {
const toolData = this . state . toolData ;
return (
< div >
< Menu fixed = 'top' borderless inverted >
@ -76,17 +40,26 @@ class App extends Component {
< / M e n u >
< div style = { { height : '70px' , display : 'inline-block' } } / >
< Route exact path = '/' render = { props =>
< Categories { ... props } data = { fakeData } / >
} / >
< Route exact path = '/:category' render = { props =>
< Category { ... props } data = { fakeData } / >
} / >
{ toolData ?
< div >
< Route exact path = '/' render = { props =>
< Categories { ... props } data = { toolData } / >
} / >
< Route exact path = '/:category' render = { props =>
< Category { ... props } data = { toolData } / >
} / >
< Route exact path = '/:category/:id' render = { props =>
< Tool { ... props } data = { fakeData } / >
} / >
< Route exact path = '/:category/:id' render = { props =>
< Tool { ... props } data = { toolData } / >
} / >
< / d i v >
:
< Dimmer active >
< Loader > Loading < / L o a d e r >
< / D i m m e r >
}
< / d i v >
) ;