@kiwicom/smart-faq/src/shared/StaticFAQ/ArticleFeedback/ScreenVoting.js

// @flow

import * as React from 'react';
import Text from '@kiwicom/nitro/lib/components/Text';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import ButtonLink from '@kiwicom/orbit-components/lib/ButtonLink';
import { ThumbUp, ThumbDown } from '@kiwicom/orbit-components/lib/icons';
import LogContext from '@kiwicom/nitro/lib/services/log/context';
import type { Context as LogContextType } from '@kiwicom/nitro/lib/services/log/context';

import screenList from './screenList';
import voteArticle from '../../../SmartFAQ/mutations/VoteArticleMutation';
import { events } from '../../../const/events';

type Props = {|
  articleId: string,
  changeScreen: (nextScreen: $Values<typeof screenList>) => void,
|};

const voteType = {
  UP: 'up',
  DOWN: 'down',
};

class ScreenVoting extends React.Component<Props> {
  context: LogContextType;

  static contextType = LogContext;

  handleVoteUp = () => {
    this.handleVote(voteType.UP);
  };

  handleVoteDown = () => {
    this.handleVote(voteType.DOWN);
  };

  handleVote = (vote: string) => {
    const { articleId, changeScreen } = this.props;
    const { log } = this.context;
    const screen =
      vote === voteType.UP ? screenList.THANK_YOU : screenList.FEEDBACK;

    voteArticle(
      articleId,
      vote,
      () => changeScreen(screen),
      () => changeScreen(screen),
    );

    if (vote === voteType.UP) {
      log(events.FAQ_VOTE_UP, {});
    } else {
      log(events.FAQ_VOTE_DOWN, {});
    }
  };

  render() {
    return (
      <Stack flex align="center">
        <Text t="smartfaq.article_feedback.voting.title" />
        <ButtonLink
          onClick={this.handleVoteUp}
          iconLeft={<ThumbUp size="medium" />}
          dataTest="thumbUp"
        >
          <Translate t="smartfaq.article_feedback.voting.yes" />
        </ButtonLink>
        <ButtonLink
          onClick={this.handleVoteDown}
          iconLeft={<ThumbDown size="medium" />}
          dataTest="thumbDown"
        >
          <Translate t="smartfaq.article_feedback.voting.no" />
        </ButtonLink>
      </Stack>
    );
  }
}

export default ScreenVoting;