@kiwicom/smart-faq/src/SmartFAQ/common/FAQContentRender.js

// @flow

import * as React from 'react';
import { ThemeConsumer } from 'styled-components';
import { createFragmentContainer, graphql } from 'react-relay';
import LogContext from '@kiwicom/nitro/lib/services/log/context';
import type { Context as LogContextType } from '@kiwicom/nitro/lib/services/log/context';

import { events } from '../../const/events';
import type { FAQContentRender_article as FAQArticle } from './__generated__/FAQContentRender_article.graphql';

type Props = {|
  children: string,
  article: ?FAQArticle,
|};

const ArticleContentStyles = ({ theme }) => (
  <style
    dangerouslySetInnerHTML={{
      __html: `
        .FAQContentRender {
          font-family: ${theme.orbit.fontFamily};
          font-size: ${theme.orbit.fontSizeTextNormal};
          font-weight: ${theme.orbit.fontWeightNormal};
          color: ${theme.orbit.colorTextPrimary};
          line-height: ${theme.orbit.lineHeightText};
          text-align: left;
          margin: 0;
        }`,
    }}
  />
);

const renderArticleContent = rawContent => {
  return rawContent.replace(/<a href=/g, '<a target="_blank" href=');
};

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

  static contextType = LogContext;

  handleClick = (e: SyntheticMouseEvent<HTMLElement>) => {
    // $FlowExpectedError: HTMLElement has tagName!
    if (e.target.tagName !== 'A') {
      return;
    }

    const { article } = this.props;
    const props = {
      // $FlowExpectedError: HTMLElement has textContent!
      linkedText: (e.target.textContent ?? '').trim(),
      // $FlowExpectedError: HTMLElement has getAttribute!
      target: e.target.getAttribute('href'),
      articleId: article?.articleId ?? '',
    };

    this.context.log(events.FAQ_CONTENT_LINK_CLICKED, props);
  };

  render() {
    const { children } = this.props;

    return (
      <>
        <div
          className="FAQContentRender"
          onClick={this.handleClick}
          dangerouslySetInnerHTML={{ __html: renderArticleContent(children) }}
        />
        <ThemeConsumer>
          {theme => <ArticleContentStyles theme={theme} />}
        </ThemeConsumer>
      </>
    );
  }
}

export default createFragmentContainer(
  UnWrappedFAQContentRender,
  graphql`
    fragment FAQContentRender_article on FAQArticle {
      articleId: id(opaque: false)
    }
  `,
);