@kiwicom/smart-faq/src/shared/StaticFAQ/breadcrumbs/Breadcrumbs.js

// @flow

import * as React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import { Consumer as IntlConsumer } from '@kiwicom/nitro/lib/services/intl/context';

import CustomBreadcrumbs from './CustomBreadcrumbs';
import type { Breadcrumbs as BreadcrumbsType } from './__generated__/Breadcrumbs_breadcrumbs.graphql';

type Props = {|
  breadcrumbs: BreadcrumbsType,
  currentCategory: string,
|};

const Breadcrumbs = ({ breadcrumbs, currentCategory }: Props) => {
  return (
    <IntlConsumer>
      {intl => (
        <CustomBreadcrumbs
          breadcrumbs={[
            { title: intl.translate(__('smartfaq.breadcrumb.home')) },
          ]
            .concat(
              breadcrumbs.map(el => ({ title: el.title, id: el.originalId })),
            )
            .concat([{ title: currentCategory }])}
        />
      )}
    </IntlConsumer>
  );
};

export default createFragmentContainer(
  Breadcrumbs,
  graphql`
    fragment Breadcrumbs_breadcrumbs on FAQCategory @relay(plural: true) {
      originalId: id(opaque: false)
      title
    }
  `,
);