exampleOfBloatedRelayFragment.js

// @flow

import * as React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import { ThemeContext } from 'styled-components';
import { withRouter } from 'react-router-dom';
import {
  Ticket,
  Airplane,
  InformationCircle,
  City,
} from '@kiwicom/orbit-components/lib/icons';
import CarrierLogo from '@kiwicom/orbit-components/lib/CarrierLogo';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import TextLink from '@kiwicom/orbit-components/lib/TextLink';
import List from '@kiwicom/orbit-components/lib/List';
import ListItem from '@kiwicom/orbit-components/lib/List/ListItem';
import type { RouterHistory } from 'react-router-dom';

import PageVariantContext from '../../../services/contexts/PageVariant';
import type { AccordionLegCitiesInfo_leg as AccordionLegCitiesInfoType } from './__generated__/AccordionLegCitiesInfo_leg.graphql';
import bookingLegTypes from '../../../utils/enums/BookingLegTypes';

type Props = {|
  leg: AccordionLegCitiesInfoType,
  history: RouterHistory,
|};

// FIXME: split this bloated component into smaller components
const LegCitiesInfo = (props: Props) => {
  const { urlPrefix } = React.useContext(PageVariantContext);
  const theme = React.useContext(ThemeContext);
  const onClickShowMore = e => {
    e.preventDefault();
    props.history.push(`${urlPrefix}/search/article/127`);
  };

  const { leg } = props;
  const flightNumber = leg.flightNumber ?? '';
  const transportationMode = leg.type;
  const reservationNumber = leg.pnr ?? '';

  const carrier = {
    code: leg?.airline?.code ?? '',
    name: leg?.airline?.name ?? '',
  };

  const carrierName =
    transportationMode === bookingLegTypes.AIRCRAFT ? (
      <Translate
        t="smartfaq.single_booking_page.accordion_cities_info.airline_title_name"
        values={{ carrierName: carrier.name }}
      />
    ) : (
      <Translate
        t="smartfaq.single_booking_page.accordion_cities_info.carrier_title_name"
        values={{ carrierName: carrier.name }}
      />
    );

  const operatingAirline = {
    code: leg?.operatingAirline?.iata ?? '',
    name: leg?.operatingAirline?.name ?? '',
  };

  const vehicle = {
    manufacturer: leg.vehicle?.manufacturer ?? '',
    model: leg.vehicle?.model ?? '',
  };

  const departureStationName = leg?.departure?.airport?.name ?? '';
  const arrivalStationName = leg?.arrival?.airport?.name ?? '';

  const isOperatingAirlineDisplayed =
    transportationMode === bookingLegTypes.AIRCRAFT &&
    operatingAirline.code &&
    operatingAirline.code !== carrier.code;

  const isReservationNumberDisplayed =
    transportationMode === bookingLegTypes.AIRCRAFT && reservationNumber;

  const isAircraftTypeDisplayed =
    transportationMode === bookingLegTypes.AIRCRAFT && vehicle.manufacturer;

  const isGroundTransportation =
    transportationMode !== bookingLegTypes.AIRCRAFT;

  const renderFlightNumber = () => {
    if (transportationMode === bookingLegTypes.BUS) return null;

    let titleNumber = null;

    if (transportationMode === bookingLegTypes.AIRCRAFT) {
      titleNumber = (
        <Translate
          t="smartfaq.single_booking_page.accordion_cities_info.flight_no"
          values={{
            flight_number: flightNumber,
            carrier_code: carrier.code,
          }}
        />
      );
    } else if (transportationMode === bookingLegTypes.TRAIN) {
      titleNumber = (
        <Translate
          t="smartfaq.single_booking_page.accordion_cities_info.train_no"
          values={{
            flight_number: flightNumber,
            carrier_code: carrier.code,
          }}
        />
      );
    }

    return <ListItem icon={<InformationCircle />}>{titleNumber}</ListItem>;
  };

  return (
    <List size="small" type="secondary" dataTest="legCities">
      <>
        <ListItem icon={<CarrierLogo carriers={[carrier]} />}>
          {carrierName}
        </ListItem>
        {isOperatingAirlineDisplayed && (
          <ListItem icon={<CarrierLogo carriers={[operatingAirline]} />}>
            <Translate
              t="smartfaq.single_booking_page.accordion_cities_info.operating_airline"
              values={{
                'operatingAirline.name': operatingAirline.name,
              }}
            />
          </ListItem>
        )}
        {renderFlightNumber()}
        {isReservationNumberDisplayed && (
          <ListItem icon={<Ticket size="small" color="secondary" />}>
            <Translate
              t="smartfaq.single_booking_page.accordion_cities_info.reservation_number"
              values={{ reservationNumber }}
            />
          </ListItem>
        )}
        {isAircraftTypeDisplayed && (
          <ListItem icon={<Airplane size="small" color="secondary" />}>
            <Translate
              t="smartfaq.single_booking_page.accordion_cities_info.vehicle_type"
              values={{
                vehicle_manufacturer: vehicle.manufacturer,
                vehicle_model: vehicle.model,
              }}
            />
          </ListItem>
        )}
        {isGroundTransportation && (
          <>
            <ListItem icon={<City size="small" color="secondary" />}>
              {departureStationName}
            </ListItem>
            <ListItem icon={<City size="small" color="secondary" />}>
              {arrivalStationName}
            </ListItem>
            <ListItem
              icon={
                <InformationCircle
                  size="small"
                  customColor={theme.orbit.paletteProductNormal}
                />
              }
              dataTest="moreInfoLink"
            >
              <TextLink
                href=""
                dataTest="moreInfoLink"
                onClick={onClickShowMore}
              >
                <Translate t="smartfaq.single_booking_page.accordion_cities_info.trains_buses_info" />
              </TextLink>
            </ListItem>
          </>
        )}
      </>
    </List>
  );
};

export default createFragmentContainer(
  withRouter(LegCitiesInfo),
  graphql`
    fragment AccordionLegCitiesInfo_leg on Leg {
      type
      airline {
        code
        name
      }
      operatingAirline {
        iata
        name
      }
      flightNumber
      vehicle {
        manufacturer
        model
      }
      pnr
      departure {
        airport {
          name
        }
      }
      arrival {
        airport {
          name
        }
      }
    }
  `,
);