@kiwicom/smart-faq/src/SmartFAQ/SingleBookingPage/bookingTypes/MulticityTrip.js

Smart FAQ

// @flow

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

import AccordionTitle from '../bookingItem/AccordionTitle';
import Accordion from '../bookingItem/Accordion';
import type { MulticityTrip_booking } from './__generated__/MulticityTrip_booking.graphql';

type Props = {|
  booking: MulticityTrip_booking,
  setVisibleTripsHeight?: number => void,
|};

const MulticityTrip = ({ booking, setVisibleTripsHeight }: Props) => {
  const { trips } = booking;
  const visibleTrips = (trips && trips.slice(0, 2)) || [];
  const hiddenTrips = (trips && trips.slice(2)) || [];

  return (
    <div data-cy="multicityTrip">
      <AccordionTitle
        title={__('smartfaq.single_booking_page.return_trip.trips')}
      />
      {
        <div>
          <ContainerDimensions>
            {({ height }) => {
              setVisibleTripsHeight && setVisibleTripsHeight(height + 40);

              return (
                <>
                  {visibleTrips.map((trip, i) => (
                    //eslint-disable-next-line react/no-array-index-key
                    <Accordion key={i} trip={trip} />
                  ))}
                </>
              );
            }}
          </ContainerDimensions>
        </div>
      }
      {//eslint-disable-next-line react/no-array-index-key
      hiddenTrips.map((trip, i) => <Accordion key={i + 2} trip={trip} />)}
    </div>
  );
};

export default createFragmentContainer(
  MulticityTrip,
  graphql`
    fragment MulticityTrip_booking on BookingMulticity {
      trips @relay(plural: true) {
        ...AccordionTripSummary_trip
      }
    }
  `,
);