content: import React, { Component } from 'react';
  import { NavLink } from 'react-router-dom';
  import { baseUrl } from '../reducer';
  import Logo from '../../assets/images/logo.png';
  
  class Categories extends Component {
  	render() {		
  		return(
  			<section className="category-section">
  				<header className={(this.props.loading.categories == true) ? 'loading' : ''}>
  					<img src={Logo} />
  				</header>
  				<CategoryTable categories={this.props.categories} />
  				<Footer dispatch={this.props.dispatch} />
  			</section>
  		);
  	}
  }
  
  
  
  class CategoryTable extends Component {
  	render() {
  		return(
  			<section>
  				<div className="categories">
  					<ul>
  						{ this.props.categories.map(i => <CategoryRow key={i.category_id} category={i} />) }
  					</ul>
  				</div>
  			</section>
  		);
  	}
  }
  
  
  
  class CategoryRow extends Component {
  	render() {
  		let { category } = this.props;
  		
  		return(
  			<li>
  				<NavLink to={`${baseUrl}/${category.category_id}`}>
  					<i className={"fa "+category.icon}></i>
  					<span>{category.name}</span>
  				</NavLink>
  			</li>
  		);
  	}	
  }
  
  
  
  class Footer extends Component {
  	constructor(props) {
  		super(props);
  		this.addCategoryOverlay = this.addCategoryOverlay.bind(this);
  	}
  	
  	addCategoryOverlay() {
  		this.props.dispatch({
  			type: 'OVERLAY',
  			overlayType: 'addCategory'
  		});
  	}
  	
  	render() {
  		return(
  			<footer>
  				<hr />
  				<div>
  					<i className="fa fa-plus" onClick={this.addCategoryOverlay}></i>
  					<span onClick={this.addCategoryOverlay}>New Category</span>
  				</div>
  				<div>
  					<a href="logout">
  						<div className="button">Logout</div>
  					</a>
  				</div>
  			</footer>
  		);
  	}	
  }
  
  
  
  export default Categories;