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

// @flow

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

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

type Props = {|
  boardingPassesInfo: BoardingPassesSummaryProps,
|};

const sortByASCDepartureTime = (a, b) =>
  new Date(a?.leg?.departure?.time ?? '') -
  new Date(b?.leg?.departure?.time ?? ''); // TODO sort boarding passes on GraphQL

const BoardingPassesList = ({ boardingPassesInfo }: Props) => {
  const { assets, directAccessURL } = boardingPassesInfo;
  const boardingPasses = assets?.boardingPasses;
  return (
    boardingPasses &&
    boardingPasses
      .slice()
      .sort(sortByASCDepartureTime)
      .map(
        boardingPass =>
          boardingPass && (
            <BoardingPassesItem
              key={boardingPass.flightNumber}
              data={boardingPass}
              mmbUrl={directAccessURL}
            />
          ),
      )
  );
};

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