synapse-react-client/dist/components/RssFeedCards/RssFeedCards.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsxs as s, jsx as e, Fragment as c } from "react/jsx-runtime";
import m from "../../assets/icons/NoData.js";
import { ReactComponent as h } from "../../assets/icons/subscribe_plus.svg.js";
import { LargeButton as p } from "../styled/LargeButton.js";
import u from "dayjs";
import { Component as b } from "react";
import f from "react-mailchimp-subscribe";
import g from "rss-parser";
const w = new g();
class U extends b {
  // only update the state if this component is mounted
  _isMounted = !1;
  constructor(o) {
    super(o), this.state = {
      rssFeed: {},
      isLoadingError: !1,
      isShowingSubscribeUI: !1
    };
  }
  componentDidMount() {
    this._isMounted = !0;
    const { url: o, filter: t } = this.props, a = t?.value, r = t?.type, n = a ? `/${r ?? "tag"}/${a.replace(" ", "-")}` : "", l = `${o}${n}`, d = `${l}/?feed=rss2`;
    fetch(d).then((i) => i.text()).then((i) => w.parseString(i)).then((i) => {
      this._isMounted && this.setState({ rssFeed: i, allItemsUrl: l });
    }).catch((i) => {
      this._isMounted && this.setState({ isLoadingError: !0 });
    });
  }
  componentWillUnmount() {
    this._isMounted = !1;
  }
  onClickSubscribe = () => {
    this.setState({ isShowingSubscribeUI: !0 });
  };
  render() {
    const { viewAllNewsButtonText: o } = this.props;
    return this.state.rssFeed.items?.length === 0 ? /* @__PURE__ */ s("div", { className: "text-center SRCBorderedPanel SRCBorderedPanel--padded2x", children: [
      m,
      /* @__PURE__ */ e("div", { style: { marginTop: "20px", fontStyle: "italic" }, children: "There are no items currently available" })
    ] }) : /* @__PURE__ */ s(c, { children: [
      this.props.mailChimpUrl && /* @__PURE__ */ s("div", { className: "FeedSubscribe", children: [
        !this.state.isShowingSubscribeUI && /* @__PURE__ */ s(
          "a",
          {
            className: "FeedSubscribeToNewsLink SRC-no-border-bottom-imp",
            onClick: this.onClickSubscribe,
            children: [
              /* @__PURE__ */ e(h, { title: "Subscribe to News" }),
              "Subscribe to News"
            ]
          }
        ),
        this.state.isShowingSubscribeUI && /* @__PURE__ */ s("div", { className: "MailchimpSubscribeContainer", children: [
          /* @__PURE__ */ e(h, { title: "Subscribe to News" }),
          /* @__PURE__ */ s("p", { children: [
            "Subscribe to receive the ",
            this.props.mailChimpListName,
            " by e-mail, which provides information and updates related to the Portal. You can opt out at any time by using the unsubscribe link within the e-mail. We will not share your information with any third parties or use it for any other purposes."
          ] }),
          /* @__PURE__ */ e("div", { className: "SRC-marginBottomTop", children: /* @__PURE__ */ e(f, { url: this.props.mailChimpUrl }) })
        ] })
      ] }),
      /* @__PURE__ */ s("div", { className: "Feed", children: [
        /* @__PURE__ */ e("div", { className: "FeedItems", children: this.state.rssFeed.items && this.state.rssFeed.items.map((t, a) => {
          if (!(a >= this.props.itemsToShow))
            return /* @__PURE__ */ e("div", { className: "FeedItem", children: /* @__PURE__ */ s("div", { children: [
              this.props.allowCategories && this.props.allowCategories.length > 0 && /* @__PURE__ */ e("div", { className: "FeedItemCategories", children: t.categories.map((r) => {
                const n = r.toLowerCase();
                return this.props.allowCategories?.findIndex(
                  (d) => n === d.toLowerCase()
                ) === -1 ? /* @__PURE__ */ e(c, {}) : /* @__PURE__ */ e(
                  "a",
                  {
                    href: `${this.state.rssFeed.link}/tag/${r.replace(" ", "-")}`,
                    className: "SRC-no-border-bottom-imp",
                    target: "_blank",
                    rel: "noopener noreferrer",
                    children: /* @__PURE__ */ e("div", { className: "FeedItemCategory", children: r })
                  },
                  `${t.guid}_${r}`
                );
              }) }),
              /* @__PURE__ */ e("p", { className: "FeedItemDate", children: u(t.isoDate).format("MMMM YYYY") }),
              /* @__PURE__ */ e("p", { className: "FeedItemTitle", children: t.title }),
              /* @__PURE__ */ e("div", { className: "FeedItemDescription", children: t.contentSnippet.replace(/\[...\]|\[…\]/gm, "…") }),
              /* @__PURE__ */ e(
                "a",
                {
                  className: "FeedItemLink",
                  href: t.link,
                  target: "_blank",
                  rel: "noopener noreferrer",
                  children: "Continue reading"
                }
              )
            ] }) }, t.guid);
        }) }),
        this.state.rssFeed.items && this.state.rssFeed.items.length > this.props.itemsToShow && this.state.allItemsUrl && /* @__PURE__ */ e("div", { className: "FeedViewAllNewsButtonContainer", children: /* @__PURE__ */ e(
          p,
          {
            color: "secondary",
            variant: "contained",
            onClick: () => window.open(this.state.allItemsUrl, "_blank", "noopener"),
            target: "_blank",
            children: o ?? "View All News"
          }
        ) }),
        this.state.isLoadingError && /* @__PURE__ */ s("div", { children: [
          "Unable to load feed: ",
          this.props.url
        ] })
      ] })
    ] });
  }
}
export {
  U as RssFeedCards,
  U as default
};
//# sourceMappingURL=RssFeedCards.js.map