@kiwicom/smart-faq/src/SmartFAQ/AllBookings/BookingCardsList.js

Smart FAQ

// @flow

import idx from 'idx';
import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import { Heading, Button } from '@kiwicom/orbit-components';
import Translate from '@kiwicom/nitro/lib/components/Translate';

import OneWayBooking from './BookingTypes/OneWayBooking';
import ReturnBooking from './BookingTypes/ReturnBooking';
import MulticityBooking from './BookingTypes/MulticityBooking';
import type { BookingCardsList_bookings } from './__generated__/BookingCardsList_bookings.graphql';
import { SelectedBooking } from '../context/SelectedBooking';
import type { State } from '../context/SelectedBooking';

type Props = {|
  loadMore: () => void,
  hasMore: boolean,
  isLoading: boolean,
  bookings: BookingCardsList_bookings,
  title: string,
|};

type BookingVariants = {
  BookingOneWay: React.Node,
  BookingReturn: React.Node,
  BookingMulticity: React.Node,
};

class BookingCardsList extends React.Component<Props, State> {
  endOfAllBookings: ?HTMLDivElement;

  componentDidUpdate() {
    this.scrollToBottom();
  }

  scrollToBottom = () => {
    if (this.endOfAllBookings) {
      this.endOfAllBookings.scrollIntoView({ behavior: 'smooth' });
    }
  };

  render() {
    const { title, bookings, hasMore, isLoading, loadMore } = this.props;
    return (
      <React.Fragment>
        {bookings.length > 0 && (
          <div className="subtitle">
            <Heading type="title3">{title}</Heading>
          </div>
        )}
        {bookings.map(booking => {
          const id = parseInt(idx(booking, _ => _.databaseId), 10);
          const type = idx(booking, _ => _.type);
          const variants: BookingVariants = {
            BookingOneWay: <OneWayBooking booking={booking} />,
            BookingReturn: <ReturnBooking booking={booking} />,
            BookingMulticity: <MulticityBooking booking={booking} />,
          };

          let bookingComponent = null;
          if (type && variants[type]) {
            bookingComponent = variants[type];
          }

          if (bookingComponent) {
            if (!id) {
              return bookingComponent;
            }

            return (
              <SelectedBooking.Consumer key={id}>
                {({ onSelectBooking }: State) => (
                  <div
                    onClick={() => onSelectBooking(id)}
                    className="bookingCard"
                    data-cy="booking-card"
                    role="button"
                    onKeyUp={() => onSelectBooking(id)}
                    tabIndex={0}
                  >
                    {bookingComponent}
                  </div>
                )}
              </SelectedBooking.Consumer>
            );
          }

          return null;
        })}
        {hasMore &&
          !isLoading && (
            <div className="loadMoreButton" data-cy="loadMoreButton">
              <Button
                onClick={loadMore}
                block={false}
                type="secondary"
                size="small"
              >
                <Translate t={__('smartfaq.all_bookings.load_more_button')} />
              </Button>
            </div>
          )}
        <div
          style={{ float: 'left', clear: 'both' }}
          ref={el => {
            this.endOfAllBookings = el;
          }}
        />
        <style jsx>
          {`
            .bookingCard {
              cursor: pointer;
              outline: none;
            }
            div.subtitle {
              margin-top: 14px;
              margin-bottom: 12px;
            }
            @media only screen and (max-width: 901px) {
              div.loadMoreButton {
                margin-bottom: 30px;
              }
            }
          `}
        </style>
      </React.Fragment>
    );
  }
}

export const RawBookingCardsList = BookingCardsList;

export default createFragmentContainer(
  BookingCardsList,
  graphql`
    fragment BookingCardsList_bookings on BookingInterface
      @relay(plural: true) {
      databaseId: id(opaque: false)
      type: __typename
      ... on BookingOneWay {
        ...OneWayBooking_booking
      }
      ... on BookingReturn {
        ...ReturnBooking_booking
      }
      ... on BookingMulticity {
        ...MulticityBooking_booking
      }
    }
  `,
);