ViewShops.js

import React from 'react';
import PropTypes from 'prop-types';
import Immutable from 'immutable';
import styled from 'styled-components';
import { Link } from 'react-router';
import ViewBranchListPanel from '../../components/ViewBranchListPanel';
import './styles.scss';

const TableList = styled.ul`
  padding-left: 0;
  margin: 0;
  list-style: none;
`;

const ShopAvatar = styled.img`
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px 10px 10px 0;
  float: left;
`;

const TableHeader = styled.div`
  .p40 {
    width: 40%;
  }
  .p30 {
    width: 30%;
  }
  .p20 {
    width: 20%;
  }
  .p10 {
    width: 10%;
  }
`;

const ShopActions = styled.li`
  line-height: 19px;
  
  a {
    margin-right: 8px;
    color: #666;
    &:hover {
      color: #111;
    }
  }
`;

class ViewShops extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedShop: -1,
    };
  }

  render() {
    const { shops } = this.props;
    return (
      <div className="ms-Grid view-shops">
        <div className="ms-Grid-row">
          <div className="ms-Grid-col ms-u-lg12">
            <div className="ms-font-su">Danh sách cửa hàng</div>
            <div className="ms-Table">
              <TableHeader className="ms-Table-row table-header">
                <span className="ms-Table-cell p40">Cửa hàng</span>
                <span className="ms-Table-cell p30">Chủ cửa hàng</span>
                <span className="ms-Table-cell p10">Hot line</span>
                <span className="ms-Table-cell p20">Chi nhánh</span>
              </TableHeader>
              {shops.map((shop) => (
                <div className="ms-Table-row" key={shop.get('id')}>
                  <span className="ms-Table-cell">
                    <ShopAvatar src={shop.get('avatar')} />
                    <TableList>
                      <li>{shop.get('name')}</li>
                      <ShopActions>
                        <Link to="/shops"><i className="ms-Icon ms-Icon--Settings" /></Link>
                        <Link to="/shops"><i className="ms-Icon ms-Icon--Pinned" /></Link>
                        <Link to={`shops/${shop.get('id')}/vouchers`}>
                          <i className="ms-Icon ms-Icon--GiftCard" />
                        </Link>
                      </ShopActions>
                    </TableList>
                  </span>
                  <span className="ms-Table-cell">
                    <TableList>
                      <li>Tài khoản: {shop.getIn(['User', 'username'])}</li>
                      <li>Email: {shop.getIn(['User', 'email'])}</li>
                    </TableList>
                  </span>
                  <span className="ms-Table-cell">{shop.get('hotline')}</span>
                  <span className="ms-Table-cell">
                    {shop.get('branches').size} chi nhánh
                    {shop.get('branches').size > 0 &&
                    <button onClick={() => this.setState({ selectedShop: shop.get('id') })}>(danh sách)</button>}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <ViewBranchListPanel
          isOpen={this.state.selectedShop > 0}
          onPanelDismissed={() => this.setState({ selectedShop: -1 })}
          branches={this.state.selectedShop > 0 ?
            (shops
              .find((shop) => (
                shop.get('id') === this.state.selectedShop)
              ) || Immutable.Map())
              .get('branches', Immutable.List()) :
            Immutable.List()}
        />
      </div>
    );
  }
}

ViewShops.propTypes = {
  shops: PropTypes.instanceOf(Immutable.List),
};

export default ViewShops;