breadcrumbs.jsx

import React from 'react'
import { compose, branch, renderComponent } from 'recompose'
import {
  Breadcrumbs,
  BreadcrumbsItemLink,
  BreadcrumbsItem,
} from 'components/common/Breadcrumbs'
import { connect } from 'react-redux'
import createRouteUrl from 'utils/createRouteUrl'
import { userRoleSelector, isLoggedInSelector } from 'flux/selectors/auth'
import {
  organizationIdSelector,
  organizationNameSelector,
  applicationIdSelector,
  applicationStatusSelector,
} from './selectors'
import {
  ROUTES,
  APPLICATION_STATUS_TO_NAVIGATION_TITLE,
  APPLICATION_ROLE,
} from '../../../constants'

const AnonymousBreadcrumbs = props =>
  <Breadcrumbs {...props}>
    <BreadcrumbsItem>Grant application</BreadcrumbsItem>
  </Breadcrumbs>

const FoundationBreadcrumbs = ({
  applicationStatus,
  organizationName,
  organizationId,
  ...props
}) =>
  <Breadcrumbs {...props}>
    <BreadcrumbsItemLink
      to={createRouteUrl(ROUTES.inbox.root, {}, { status: applicationStatus })}
    >
      {APPLICATION_STATUS_TO_NAVIGATION_TITLE[applicationStatus]}
    </BreadcrumbsItemLink>
    {organizationName &&
      <BreadcrumbsItemLink
        to={createRouteUrl(ROUTES.organization.idRoot, {
          id: organizationId,
        })}
      >
        {organizationName}
      </BreadcrumbsItemLink>}
  </Breadcrumbs>

const mapPropsToFoundation = state => ({
  applicationStatus: applicationStatusSelector(state),
  organizationId: organizationIdSelector(state),
  organizationName: organizationNameSelector(state),
})

const mapPropsToApplicant = state => ({
  applicationId: applicationIdSelector(state),
})

const ApplicantBreadcrumbs = ({ applicationId, ...props }) =>
  <Breadcrumbs {...props}>
    <BreadcrumbsItemLink
      to={createRouteUrl(ROUTES.application.idRoot, {
        id: applicationId,
      })}
    >
      Grant application
    </BreadcrumbsItemLink>
  </Breadcrumbs>

export default compose(
  connect(state => ({
    isLoggedIn: isLoggedInSelector(state),
    userRole: userRoleSelector(state),
  })),
  branch(
    props => props.isLoggedIn && props.userRole === APPLICATION_ROLE.foundation,
    renderComponent(connect(mapPropsToFoundation)(FoundationBreadcrumbs))
  ),
  branch(
    props => props.isLoggedIn && props.userRole === APPLICATION_ROLE.applicant,
    renderComponent(connect(mapPropsToApplicant)(ApplicantBreadcrumbs))
  )
)(AnonymousBreadcrumbs)