@kiwicom/smart-faq/src/shared/StaticFAQ/FAQExtraInfo/BoardingPassesInfo/BoardingPassesList.js

// @flow

import * as React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';

import BoardingPassesLoader from './BoardingPassesLoader';
import BoardingPassesItem from './BoardingPassesItem';
import type { BoardingPassesList as BoardingPassesSummaryProps } from './__generated__/BoardingPassesList.graphql';

type Props = {|
  data: BoardingPassesSummaryProps,
  mmbUrl: string,
|};

const BoardingPassesList = ({ data, mmbUrl }: Props) => {
  if (data === null) {
    return (
      <React.Fragment>
        <hr className="separationLine" />
        <BoardingPassesLoader />
        <style jsx>
          {`
            hr.separationLine {
              height: 1px;
              background-color: #e8edf1;
              border: none;
              margin: 0;
            }
          `}
        </style>
      </React.Fragment>
    );
  }
  const { boardingPasses } = data;
  return (
    boardingPasses &&
    boardingPasses
      .slice()
      .sort(
        (a, b) =>
          new Date(a?.leg?.departure?.time || '') -
          new Date(b?.leg?.departure?.time || ''),
        // TODO sort boarding passes on GraphQL
      )
      .map(
        boardingPass =>
          boardingPass && (
            <BoardingPassesItem
              key={boardingPass.flightNumber}
              data={boardingPass}
              mmbUrl={mmbUrl}
            />
          ),
      )
  );
};

export default createFragmentContainer(
  BoardingPassesList,
  graphql`
    fragment BoardingPassesList on BookingAssets {
      boardingPasses {
        flightNumber
        leg {
          departure {
            time
          }
        }
        ...BoardingPassesItem
      }
    }
  `,
);