sidebarlayout.jsx

import React from 'react';
import { Image, Menu, Sidebar, Grid } from 'semantic-ui-react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { compose } from 'redux';
import _ from 'lodash';

import LogoIcon from 'images/newlogo.jpg';

import {
	logout
} from 'containers/App/actions';

import ProtectedMenu from 'components/ProtectedMenu';
import MenuItem from 'components/MenuItem';
import MenuIcon from 'components/MenuIcon';

const Logo = styled( Image )`
	margin-right : 1.5em;
	width        : 68px !important;
	height       : 68px !important;
`;

const paddingTop35 = {
	paddingTop    : '18px',
	paddingBottom : '18px',
	color         : '#585859'
};

const paddingZero = {
	padding    : 0,
	background : '#084768'
};

const renderLogo = ( <Logo size="medium" src={LogoIcon} centered /> );

export class SidebarLayout extends React.Component { // eslint-disable-line react/prefer-stateless-function
	constructor ( props ) {
		super( props );

		this.handleLogout = this.handleLogout.bind( this );
	}

	handleLogout () {
		this.props.logout();
	}

	render () {
		const { visible, Type, activeName } = this.props;

		const superAdmin = [ {
			title     : 'SALES',
			to        : '/sales',
			authorize : [ 2, 3 ],
			icon      : 'line chart'
		}, {
			title     : 'JOBS',
			to        : '/jobs',
			authorize : [ 2 ,3 ],
			icon      : 'wrench'
		} ];

		const company = [ {
			title     : 'SEARCH',
			to        : '/search',
			authorize : [ 1, 2 ],
			icon      : 'home'
		}, {
			title     : 'SALES',
			to        : '/sales',
			authorize : [ 2, 3 ],
			icon      : 'line chart'
		}, {
			title     : 'REQUEST',
			to        : '/request-ongoing',
			authorize : [ 1, 2 ],
			icon      : 'settings'
		}, {
			title     : 'LIKES',
			to        : '/likes',
			authorize : [ 1, 2 ],
			icon      : 'heart'
		}, {
			title     : 'JOBS',
			to        : '/jobs',
			authorize : [ 1, 2 ],
			icon      : 'wrench'
		}, {
			title     : 'CALENDAR',
			to        : '/calendar',
			authorize : [ 1, 2 ],
			icon      : 'calendar'
		} ];

		const user = [ {
			title     : 'FEEDS',
			to        : '/',
			authorize : [ 1, 2 ],
			icon      : 'home'
		}, {
			title     : 'REQUEST',
			to        : '/request-ongoing',
			authorize : [ 1, 2 ],
			icon      : 'settings'
		}, {
			title     : 'LIKES',
			to        : '/likes',
			authorize : [ 1, 2 ],
			icon      : 'heart'
		}, {
			title     : 'CALENDAR',
			to        : '/calendar',
			authorize : [ 1, 2 ],
			icon      : 'calendar'
		} ];

		const sideBar = [ user, company, superAdmin ];

		return (
			<Sidebar as={Menu} animation="push" width="thin" visible={visible} icon="labeled" vertical>
				<MenuItem header style={paddingZero}>
					{renderLogo}
				</MenuItem>
				{_.map( sideBar[ Type - 1 ], ( item, key ) => (
					<ProtectedMenu type={Type} authorize={item.authorize} key={key}>
						<MenuItem name={item.title} as={Link} to={item.to} style={paddingTop35} active={activeName === item.to}>
							<Grid>
								<Grid.Column width={4}>
									<MenuIcon name={item.icon} size="large" />
								</Grid.Column>
								<Grid.Column width={12} textAlign="left" verticalAlign="middle">
									<span>{item.title}</span>
								</Grid.Column>
							</Grid>
						</MenuItem>
					</ProtectedMenu>
				) )}
				<ProtectedMenu type={Type} authorize={[ 1, 2, 3 ]}>
					<MenuItem name="logout" style={paddingTop35} onClick={this.handleLogout}>
						<Grid>
							<Grid.Column width={4}>
								<MenuIcon name="log out" size="large" />
							</Grid.Column>
							<Grid.Column width={12} textAlign="left" verticalAlign="middle">
								<span>LOG OUT</span>
							</Grid.Column>
						</Grid>
					</MenuItem>
				</ProtectedMenu>
			</Sidebar>
		);
	}
}

SidebarLayout.propTypes = {
	visible    : PropTypes.bool.isRequired,
	logout     : PropTypes.func.isRequired,
	Type       : PropTypes.number,
	activeName : PropTypes.oneOfType( [
		PropTypes.bool,
		PropTypes.string
	] )
};

SidebarLayout.defaultProps = {
	Type       : 0,
	activeName : false
};

export function mapDispatchToProps ( dispatch ) {
	return {
		logout : () => dispatch( logout() )
	}
}

const withConnect = connect( null, mapDispatchToProps );


export default compose(
	withConnect
)( SidebarLayout );