@kiwicom/smart-faq/lib/StaticFAQ/ArticleDetail/Article.js

Smart FAQ

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var React = _interopRequireWildcard(require("react"));

var _idx = _interopRequireDefault(require("idx"));

var _reactRelay = require("react-relay");

var _QueryRenderer = _interopRequireDefault(require("../../relay/QueryRenderer"));

var _Loader = _interopRequireDefault(require("../../common/Loader"));

var _ArticleContent = _interopRequireDefault(require("./ArticleContent"));

var _FAQArticleNotFound = _interopRequireDefault(require("./FAQArticleNotFound"));

var _CustomBreadcrumbs = _interopRequireDefault(require("../breadcrumbs/CustomBreadcrumbs"));

var _sectionFAQCategories = _interopRequireDefault(require("../sectionFAQCategories"));

// @flow
var queryFAQArticleDetail = function queryFAQArticleDetail() {
  var node = require("./__generated__/ArticleDetailQuery.graphql");

  if (node.hash && node.hash !== "65b4847f742f5438129863eb7001d18c") {
    console.error("The definition of 'ArticleDetailQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data.");
  }

  return require("./__generated__/ArticleDetailQuery.graphql");
};

var queryFAQArticleDetailSearchResult = function queryFAQArticleDetailSearchResult() {
  var node = require("./__generated__/ArticleDetailSearchResultQuery.graphql");

  if (node.hash && node.hash !== "27fe3526e1f34bbeec766c9c1820093d") {
    console.error("The definition of 'ArticleDetailSearchResultQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data.");
  }

  return require("./__generated__/ArticleDetailSearchResultQuery.graphql");
};
/*:: type FAQArticleDetailParams = {
  props: ?ArticleDetailQuery | ?ArticleDetailSearchResultQuery,
  error: ?Error,
};*/

/*:: type Props = {
  match: {
    params: {
      articleId: string,
      categoryId: string,
      [key: string]: ?string,
    },
    isExact: boolean,
    path: string,
    url: string,
  },
};*/


var style = new String(".breadcrumbs{margin:24px 36px;margin-bottom:-2px;}@media only screen and (max-width:901px){.breadcrumbs{margin:24px 0;}}");
style.__hash = "1055636633";
style.__scoped = ".breadcrumbs.jsx-2443731352{margin:24px 36px;margin-bottom:-2px;}@media only screen and (max-width:901px){.breadcrumbs.jsx-2443731352{margin:24px 0;}}";
style.__scopedHash = "2443731352";

var Article =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Article, _React$Component);

  function Article() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, Article);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Article)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "renderDetailContent", function (params
    /*: FAQArticleDetailParams*/
    ) {
      if (params.error) {
        return React.createElement("div", null, params.error.message);
      }

      if (params.props) {
        var category = params.props.FAQCategory;
        var article = params.props.FAQArticle;

        if (!article) {
          return React.createElement(_FAQArticleNotFound.default, null);
        }

        var breadcrumbs = [{
          title: 'Search'
        }, {
          title: article.title
        }];

        if (_this.isSectionCategory()) {
          breadcrumbs = [{
            title: 'Home'
          }, {
            title: article.title
          }];
        } else if (category) {
          breadcrumbs = [{
            title: 'Home'
          }].concat(category.ancestors ? category.ancestors : []).concat(category).concat([{
            title: 'Article'
          }]);
        }

        return React.createElement(React.Fragment, null, React.createElement("div", {
          className: "jsx-".concat(style.__scopedHash) + " " + "breadcrumbs"
        }, React.createElement(_CustomBreadcrumbs.default, {
          breadcrumbs: breadcrumbs
        })), React.createElement(_ArticleContent.default, {
          article: article
        }), React.createElement(_style.default, {
          styleId: style.__scopedHash,
          css: style.__scoped
        }));
      }

      return React.createElement("div", {
        style: {
          height: '100%'
        }
      }, React.createElement(_Loader.default, null));
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "getCategoryId", function () {
      return (0, _idx.default)(_this.props.match, function (_) {
        return _.params.categoryId;
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "isSectionCategory", function () {
      var categoryId = _this.getCategoryId();

      return categoryId && _sectionFAQCategories.default.includes(categoryId);
    });
    return _this;
  }

  (0, _createClass2.default)(Article, [{
    key: "getQueryRenderer",
    value: function getQueryRenderer() {
      var categoryId = this.getCategoryId();
      var articleId = (0, _idx.default)(this.props.match, function (_) {
        return _.params.articleId;
      });
      var isSearchResult = categoryId === 'search';

      if (isSearchResult) {
        return React.createElement(_QueryRenderer.default, {
          query: queryFAQArticleDetailSearchResult,
          variables: {
            id: articleId
          },
          render: this.renderDetailContent
        });
      }

      return React.createElement(_QueryRenderer.default, {
        query: queryFAQArticleDetail,
        variables: {
          id: articleId,
          categoryId: categoryId,
          isSubcategory: !this.isSectionCategory()
        },
        render: this.renderDetailContent
      });
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement("div", {
        className: "jsx-3675130071" + " " + "faq-article-detail"
      }, this.getQueryRenderer(), React.createElement(_style.default, {
        styleId: "3675130071",
        css: ".faq-article-detail.jsx-3675130071{width:100%;max-width:100vw;height:100%;}"
      }));
    }
  }]);
  return Article;
}(React.Component);

var _default = Article;
exports.default = _default;