@appearhere/bloom/components/BookingRequestPreview/BookingRequestPreview.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React from 'react';

import FittedImage from '../FittedImage/FittedImage';
import moment from '../../utils/moment/moment';
import LeftRight from '../LeftRight/LeftRight';
import css from './BookingRequestPreview.css';
import Icon from '../Icon/Icon';

const BookingRequestPreview = ({ bookingRequests, className, ...rest }) => {
  const keyedBookingRequests = bookingRequests.reduce((obj, next) => {
    const state = next.tooltip;
    const currentRequests = obj[state] || [];
    return Object.assign(obj, {
      [state]: [...currentRequests, next],
    });
  }, {});

  return (
    <div { ...rest } className={ className }>
      { Object.keys(keyedBookingRequests).map((state) => {
        const requests = keyedBookingRequests[state];

        return (
          <div className={ css.requestList } key={ state }>
            <div className={ css.state }>{ state }</div>
            { requests.map((request) => (
              <LeftRight
                className={ css.request }
                key={ request.id }
                primarySide="right"
                leftChildren={
                  <FittedImage
                    className={ css.image }
                    src={ request.primary_photo_thumbnail_url }
                    alt={ request.idea_name }
                  />
                }
                rightChildren={
                  <div className={ css.requestDetail }>
                    <div className={ css.ideaName }>
                      { request.idea_name }
                    </div>
                    <div className={ css.dates }>
                      { moment(request.start_on).format('L') }
                      <Icon
                        className={ css.untilIcon }
                        name="arrow"
                      />
                      { moment(request.end_on).format('L') }
                    </div>
                  </div>
                }
              />
            )) }
          </div>
        );
      }) }
    </div>
  );
};

BookingRequestPreview.propTypes = {
  bookingRequests: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number,
      idea_name: PropTypes.string,
      idea_category: PropTypes.string,
      start_on: PropTypes.string,
      end_on: PropTypes.string,
      primary_photo_thumbnail_url: PropTypes.string,
      tooltip: PropTypes.string,
      complete: PropTypes.bool,
    })
  ),
  className: PropTypes.string,
};

export default BookingRequestPreview;