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

// @flow

import * as React from 'react';
import { withRouter } from 'react-router-dom';
import type { ContextRouter } from 'react-router-dom';
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 = {|
  ...ContextRouter,
  type: 'back' | 'search',
|};

class BackButton extends React.Component<Props> {
  static defaultProps = {
    type: 'back',
  };

  goBack = e => {
    e.preventDefault();
    const { type, history, match } = this.props;
    const pathname = history.location.pathname;

    if (type === 'search') {
      return history.push('/faq');
    }

    if (pathname.includes('article')) {
      const categoryId = match.params?.categoryId;

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

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

    throw new Error('Cannot go back. This should be impossible.');
  };

  render() {
    const { type } = this.props;
    const buttonText =
      type === 'back' ? (
        <Translate t="smartfaq.back_button.back" />
      ) : (
        <Translate t="smartfaq.back_button.search" />
      );

    return (
      <div
        data-test="back-button"
        className="back"
        onClick={this.goBack}
        onKeyUp={this.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>
    );
  }
}

export default withRouter(BackButton);