Updated auth library and added cart

src/components/pages/Contacts.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import {Link, withRouter} from 'react-router-dom';
+import ContactService from '../../services/ContactService';
 
 class Contacts extends React.Component {
 	constructor() {
@@ -16,6 +17,7 @@ class Contacts extends React.Component {
 
 	componentDidMount() {
 		document.title = "Sandbox | Contacts";
+		ContactService.getAll();
 	}
 
 	render() {

src/interceptors.js

@@ -46,7 +46,8 @@ const initInterceptors = (history, baseUrl = 'http://localhost:8000/api/', timeo
 	  return response;
 	}, (error) => {
 		if (error.response) {
-			if (error.response.status == 401 || error.response.data.statusCode == 401) {
+			if (error.response.status == 401 || error.response.data.statusCode === 401) {
+				store.dispatch(UserActions.setRedirect(window.location.pathname));
 				store.dispatch(UserActions.logout());
 				store.dispatch(AlertActions.addAlert({
 					title: 'Not Authorized',

src/library/authentication/components/configureAuthRoute.jsx

@@ -21,7 +21,8 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({
-		'addAlert': AlertActions.addAlert
+		'addAlert': AlertActions.addAlert,
+		'setRedirect': UserActions.setRedirect
     }, dispatch);
 };
 
@@ -42,14 +43,16 @@ function configureAuthRoute(roleConfig) {
 				setTimeout(() => {
 					this.showAlert('notAuthenticated');
 				});
+				this.props.setRedirect(this.props.path);
 				_redirectPath = '/login';
 				return false;
 			} else {
 				let accessGranted = checkAuthorization(accessLevels, this.props.user, roleConfig);
 				if (accessGranted) {
 					return true;
 				} else {
-					_redirectPath = '/login';
+					this.props.setRedirect(this.props.path);
+					_redirectPath = this.props.customRedirect || '/login';
 					setTimeout(() => {
 						this.showAlert('notAuthorized');
 					});
@@ -87,6 +90,7 @@ function configureAuthRoute(roleConfig) {
 			const routeProps = Object.assign({}, this.props);
 			delete routeProps.access;
 			delete routeProps.component;
+			delete routeProps.customRedirect;
 
 			let isAuthorized = this.checkAccess(accessLevels);
 

src/library/cart/actions/CartActions.js

@@ -0,0 +1,54 @@
+'use strict';
+
+import CartItemConstants from '../constants/CartItemConstants';
+
+export default {
+	add: (product, qty) => {
+		let data = {
+			'product': product,
+			'cartQty': parseInt(qty, 10)
+		};
+		return (dispatch) => {
+			dispatch({
+				'type': CartItemConstants.ADD_CART_ITEM,
+				'data': data
+			});
+		};
+	},
+	clearCart: () => {
+		return (dispatch) => {
+			dispatch({
+				'type': CartItemConstants.CLEAR_CART,
+				'data': true
+			});
+		};
+	},
+	toggle: (showHide) => {
+		return (dispatch) => {
+			dispatch({
+				'type': CartItemConstants.TOGGLE,
+				'data': showHide
+			});
+		};
+	},
+	update: (product, newCartQty) => {
+		let data = {
+			'product': product,
+			'cartQty': parseInt(newCartQty, 10)
+		};
+		return (dispatch) => {
+			dispatch({
+				'type': CartItemConstants.UPDATE_CART_ITEM,
+				'data': data
+			});
+		};
+	},
+	remove: (itemId) => {
+		return (dispatch) => {
+			dispatch({
+				'type': CartItemConstants.REMOVE_CART_ITEM,
+				'id': itemId
+			});
+		};
+	}
+};

src/library/cart/constants/CartItemConstants.js

@@ -0,0 +1,12 @@
+'use strict';
+
+import keyMirror from 'keymirror';
+
+export default keyMirror({
+	ADD_CART_ITEM: null,
+	CLEAR_CART: null,
+	TOGGLE: null,
+	UPDATE_CART_ITEM: null,
+	REMOVE_CART_ITEM: null,
+	UPDATE_CART_TOTAL: null
+});

src/library/cart/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+import CartActions from './actions/CartActions';
+import {cartIsActive, cartItems, cartQtyPlaceholders} from './reducers/cartItems';
+
+export {
+	CartActions,
+	cartIsActive,
+	cartItems,
+	cartQtyPlaceholders
+};

src/library/cart/reducers/cartItems.js

@@ -0,0 +1,99 @@
+'use strict';
+
+import CartItemConstants from '../constants/CartItemConstants';
+
+const updateSessionCart = (newCartItems) => {
+	sessionStorage.setItem('cartItems', JSON.stringify(newCartItems));
+};
+
+const updateSessionPlaceholders = (placeholders) => {
+	sessionStorage.setItem('cartQuantities', JSON.stringify(placeholders));
+};
+
+const cartIsActive = (state = 'hide', action) => {
+	switch (action.type) {
+		case CartItemConstants.TOGGLE:
+			return action.data;
+		default:
+			return state;
+	}
+};
+
+const cartItems = (state = [], action) => {
+	let cartItems, newItem, index;
+	switch (action.type) {
+		case CartItemConstants.ADD_CART_ITEM:
+			cartItems = [...state];
+			newItem = action.data;
+			index = state.findIndex((item) => item.product.id === action.data.product.id);
+			if (index < 0) {
+				cartItems.push(newItem);
+			} else {
+				cartItems[index].product = action.data.product;
+				cartItems[index].cartQty += action.data.cartQty;
+			}
+			updateSessionCart(cartItems);
+			return cartItems;
+		case CartItemConstants.CLEAR_CART:
+			return [];
+		case CartItemConstants.UPDATE_CART_ITEM:
+			cartItems = [...state];
+			newItem = action.data;
+			index = cartItems.findIndex((item) => item.product.id === action.data.product.id);
+			if (index < 0) {
+				cartItems.push(newItem);
+			} else {
+				cartItems[index].product = action.data.product;
+				cartItems[index].cartQty = action.data.cartQty;
+			}
+			if (cartItems[index].cartQty < 1) {
+				cartItems.splice(index, 1);
+			}
+			updateSessionCart(cartItems);
+			return cartItems;
+		case CartItemConstants.REMOVE_CART_ITEM:
+			cartItems = [...state];
+			index = state.findIndex((cartItem) => cartItem.product.id === action.id);
+			if (index !== -1) {
+				cartItems.splice(index, 1);
+			}
+			updateSessionCart(cartItems);
+			return cartItems;
+		default:
+			return state;
+	}
+};
+
+const cartQtyPlaceholders = (state = {}, action) => {
+	let placeholders, productId;
+	switch (action.type) {
+		case CartItemConstants.ADD_CART_ITEM:
+			placeholders = Object.assign({}, state);
+			productId = action.data.product.id;
+			placeholders[productId] = placeholders[productId] ? placeholders[productId] + action.data.cartQty: action.data.cartQty;
+			updateSessionPlaceholders(placeholders);
+			return placeholders;
+		case CartItemConstants.CLEAR_CART:
+			return {};
+		case CartItemConstants.UPDATE_CART_ITEM:
+			placeholders = Object.assign({}, state);
+			productId = action.data.product.id;
+			placeholders[productId] = action.data.cartQty;
+			updateSessionPlaceholders(placeholders);
+			return placeholders;
+		case CartItemConstants.REMOVE_CART_ITEM:
+			placeholders = Object.assign({}, state);
+			productId = action.id;
+			placeholders[productId] = 0;
+			updateSessionPlaceholders(placeholders);
+			return placeholders;
+		default:
+			return state;
+	}
+};
+
+export {
+	cartItems,
+	cartQtyPlaceholders,
+	cartIsActive
+};

src/library/validations/components/Input.jsx

@@ -210,7 +210,7 @@ class Input extends React.Component {
 
 		return (
 			<div className="validate-error-element">
-				<input className={validationClasses} type={this.props.type} name={this.props.name} value={this.props.value} placeholder={this.props.placeholder} min={this.props.min} max={this.props.max} minLength={this.props.minlength} maxLength={this.props.maxlength} onChange={this.validateInput} onMouseDown={this.handleMouseDown} onFocus={this.handleFocus} onBlur={this.handleBlur} autoComplete={this.props.autoComplete} disabled={this.props.disabled}/>
+				<input className={validationClasses} type={this.props.type} name={this.props.name} value={this.props.value} placeholder={this.props.placeholder} step={this.props.step} min={this.props.min} max={this.props.max} minLength={this.props.minlength} maxLength={this.props.maxlength} onChange={this.validateInput} onMouseDown={this.handleMouseDown} onFocus={this.handleFocus} onBlur={this.handleBlur} autoComplete={this.props.autoComplete} disabled={this.props.disabled}/>
 				<div className="validate-errors">
 					{
 						this.state.errors.map((error, i) =>
@@ -232,6 +232,7 @@ Input.propTypes = {
 	'minlength': PropTypes.number,
 	'maxlength': PropTypes.number,
 	'max': PropTypes.number,
+	'step': PropTypes.string,
 	'validate': PropTypes.string,
 	'handleInputChange': PropTypes.func.isRequired,
 	'preserveState': PropTypes.bool,
@@ -242,7 +243,8 @@ Input.propTypes = {
 
 Input.defaultProps = {
 	'autoComplete': 'on',
-	'preserveState': false
+	'preserveState': false,
+	'step': '1'
 };
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Input));