ProductItem.js

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//  Copyright (C) 2008-2016 Quantron Systems LLC.
//  All Rights Reserved.
//
//  This file is part of the Pakmil project.
//  For conditions of distribution and use,
//  please contact sales@quantron-systems.com
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

import _ from 'lodash';
import React, {PropTypes} from 'react';
import styles from './styles.css';
import {Link, withRouter} from 'react-router';
import ProductGridMode from './ProductGridMode/ProductGridMode';
import ProductListMode from './ProductListMode/ProductListMode';
import SetProductLogic from 'components/common/SetProductLogic';

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const VIEW_MODES = ['list', 'grid'];

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const ProductItem = React.createClass({
    propTypes: {
        product: PropTypes.object.isRequired,
        className: PropTypes.string,
        viewMode: PropTypes.oneOf(VIEW_MODES),
        stiffness: PropTypes.number,
        damping: PropTypes.number,
        location: PropTypes.object.isRequired
    },
    getDefaultProps() {
        return {
            product: {},
            className: '',
            viewMode: 'grid',
            stiffness: 110,
            damping: 14
        };
    },
    render() {
        const {
            parentCategoryId, categoryId, product, viewMode,
            className, stiffness, damping, location, productLogic, router
        } = this.props;

        let to = '/category/';
        if(parentCategoryId) {
            to += parentCategoryId + '/';
        }
        const catId = categoryId || _.get(product, 'categories.0');
        if(catId) {
            to += `${catId}/product/${product._id}`;
        } else {
            to = '';
        }

        const productLinkProps = {
            className: `${styles.productItem} ${styles[viewMode]} ${className}`,
            to,
            query: location.query
        };
        const productProps = {
            product,
            stiffness,
            damping,
            router,
            ...productLogic
        };
        switch(viewMode) {
            case 'grid': {
                return (
                    <Link {...productLinkProps}>
                        <ProductGridMode {...productProps}/>
                    </Link>
                );
            }
            case 'list': {
                return (
                    <Link {...productLinkProps}>
                        <ProductListMode {...productProps}/>
                    </Link>
                );
            }
            default: {
                return null;
            }
        }
    }
});

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
export default withRouter(SetProductLogic(ProductItem));