@kiwicom/smart-faq/src/SmartFAQ/common/buttons/BackButton.js

Smart FAQ

// @flow

import * as React from 'react';
import { withRouter } from 'react-router-dom';
import idx from 'idx';
import { TextLink } from '@kiwicom/orbit-components';
import { ChevronLeft } from '@kiwicom/orbit-components/lib/icons';
import Translate from '@kiwicom/nitro/lib/components/Translate';

import sectionFAQCategories from '../../../shared/StaticFAQ/sectionFAQCategories';

type Props = {|
  type: 'back' | 'search',
  history: {
    push: string => void,
    location: { pathname: string },
  },
  match: {
    params: {
      articleId?: string,
      categoryId?: string,
    },
  },
|};

const BackButton = (props: Props) => {
  const { type, history, match } = props;
  const pathname = history.location.pathname;
  const buttonText =
    type === 'back' ? (
      <Translate t={__('smartfaq.back_button.back')} />
    ) : (
      <Translate t={__('smartfaq.back_button.search')} />
    );

  const goBack = e => {
    e.preventDefault();
    if (type === 'search') {
      return history.push('/faq');
    }

    if (pathname.includes('article')) {
      const categoryId = idx(match, _ => _.params.categoryId);

      if (categoryId && sectionFAQCategories.includes(categoryId)) {
        return history.push('/faq');
      }

      const url = idx(pathname.match(/(.*)(?=article)/), _ => _[0]) || '';
      return history.push(url);
    } else if (pathname.includes('faq')) {
      return history.push('/faq');
    }
  };

  return (
    <div
      data-cy="back-button"
      className="back"
      onClick={goBack}
      onKeyUp={goBack}
      role="button"
      tabIndex="-1"
    >
      <div className="chevron">
        <ChevronLeft size="small" customColor="#171b1e" />
      </div>
      <TextLink href="" type="secondary">
        {buttonText}
      </TextLink>
      <style jsx>
        {`
          div.back {
            position: absolute;
            top: 18px;
            left: 27px;
            cursor: pointer;
            outline: none;
          }
          div.chevron {
            display: inline-block;
            margin-right: 4px;
            position: relative;
            top: -1px;
          }
          @media only screen and (max-width: 901px) {
            div.back {
              top: 22px;
              left: 21px;
            }
          }
        `}
      </style>
    </div>
  );
};

BackButton.defaultProps = {
  type: 'back',
};

export default withRouter(BackButton);