synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
116 lines • 8.09 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var rss_parser_1 = (0, tslib_1.__importDefault)(require("rss-parser"));
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var subscribe_plus_svg_1 = (0, tslib_1.__importDefault)(require("../assets/icons/subscribe_plus.svg"));
var react_mailchimp_subscribe_1 = (0, tslib_1.__importDefault)(require("react-mailchimp-subscribe"));
var file_dotted_svg_1 = (0, tslib_1.__importDefault)(require("../assets/icons/file-dotted.svg"));
var react_bootstrap_1 = require("react-bootstrap");
var rssParser = new rss_parser_1.default();
var RssFeedCards = /** @class */ (function (_super) {
(0, tslib_1.__extends)(RssFeedCards, _super);
function RssFeedCards(props) {
var _this = _super.call(this, props) || this;
// only update the state if this component is mounted
_this._isMounted = false;
_this.onClickSubscribe = function () {
_this.setState({ isShowingSubscribeUI: true });
};
_this.state = {
rssFeed: {},
isLoadingError: false,
itemId2MoreItem: {},
isShowingSubscribeUI: false,
};
return _this;
}
RssFeedCards.prototype.componentDidMount = function () {
var _this = this;
this._isMounted = true;
var _a = this.props, url = _a.url, lockedFacet = _a.lockedFacet;
var lockedFacetValue = lockedFacet === null || lockedFacet === void 0 ? void 0 : lockedFacet.value;
var tagPath = lockedFacetValue
? "/tag/" + lockedFacetValue.replace(' ', '-')
: '';
var allItems = "" + url + tagPath;
var feedUrl = allItems + "/feed/";
fetch(feedUrl)
.then(function (response) { return response.text(); })
.then(function (responseData) { return rssParser.parseString(responseData); })
.then(function (rss) {
if (_this._isMounted) {
_this.setState({ rssFeed: rss, allItemsUrl: allItems });
}
})
.catch(function (err) {
if (_this._isMounted) {
_this.setState({ isLoadingError: true });
}
});
};
RssFeedCards.prototype.componentWillUnmount = function () {
this._isMounted = false;
};
RssFeedCards.prototype.render = function () {
var _this = this;
var _a;
var viewAllNewsButtonText = this.props.viewAllNewsButtonText;
if (((_a = this.state.rssFeed.items) === null || _a === void 0 ? void 0 : _a.length) === 0) {
return (React.createElement("div", { className: "text-center SRCBorderedPanel SRCBorderedPanel--padded2x" },
React.createElement("img", { src: file_dotted_svg_1.default, alt: "no data" }),
React.createElement("div", { style: { marginTop: '20px', fontStyle: 'italic' } }, "There are no items currently available")));
}
return (React.createElement(React.Fragment, null,
this.props.mailChimpUrl && (React.createElement("div", { className: "FeedSubscribe text-center" },
!this.state.isShowingSubscribeUI && (React.createElement("a", { className: "FeedSubscribeToNewsLink SRC-no-border-bottom-imp", onClick: this.onClickSubscribe },
React.createElement("img", { src: subscribe_plus_svg_1.default, alt: "Subscribe to News" }),
"Subscribe to News")),
this.state.isShowingSubscribeUI && (React.createElement("div", { className: "MailchimpSubscribeContainer" },
React.createElement("img", { src: subscribe_plus_svg_1.default, alt: "Subscribe to News" }),
React.createElement("p", null,
"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."),
React.createElement("div", { className: "SRC-marginBottomTop" },
React.createElement(react_mailchimp_subscribe_1.default, { url: this.props.mailChimpUrl })))))),
React.createElement("div", { className: "Feed bootstrap-4-backport" },
React.createElement("div", { className: "FeedItems" }, this.state.rssFeed.items &&
this.state.rssFeed.items.map(function (item, index) {
// The other is to hide the large number of items in a particular feed (usually a max of 10 are returned). See state.isShowingMoreItems
var isItemVisible = index < _this.props.itemsToShow;
return (React.createElement("div", { key: item.guid, className: "FeedItem " + (isItemVisible ? '' : 'hidden') },
React.createElement("div", null,
_this.props.allowCategories && _this.props.allowCategories.length > 0 &&
React.createElement("div", { className: "FeedItemCategories" }, item['categories'].map(function (categoryName) {
// are we allowed to show this category/tag?
var categoryNameLowerCase = categoryName.toLowerCase();
var allowCategories = _this.props.allowCategories;
if ((allowCategories === null || allowCategories === void 0 ? void 0 : allowCategories.findIndex(function (item) {
return categoryNameLowerCase === item.toLowerCase();
})) === -1)
return React.createElement(React.Fragment, null);
// else
return (React.createElement("a", { href: _this.state.rssFeed.link + "/tag/" + categoryName.replace(' ', '-'), className: "SRC-no-border-bottom-imp", key: item.guid + "_" + categoryName, target: "_blank", rel: "noopener noreferrer" },
React.createElement("div", { className: "FeedItemCategory" }, categoryName)));
})),
React.createElement("p", { className: "FeedItemDate" }, (0, moment_1.default)(item['isoDate']).format('MMMM YYYY')),
React.createElement("p", { className: "FeedItemTitle" }, item['title']),
React.createElement("div", { className: "FeedItemDescription" }, item['contentSnippet'].replace(/\[...\]|\[…\]/gm, '…')),
React.createElement("a", { className: "FeedItemLink", href: item['link'], target: "_blank", rel: "noopener noreferrer" }, "Continue reading"))));
})),
this.state.rssFeed.items &&
this.state.rssFeed.items.length > this.props.itemsToShow &&
this.state.allItemsUrl && (React.createElement("div", { className: "FeedViewAllNewsButtonContainer" },
React.createElement(react_bootstrap_1.Button, { variant: "secondary", size: "lg", className: "pill", onClick: function () {
return window.open(_this.state.allItemsUrl, '_blank', 'noopener');
}, target: "_blank" }, viewAllNewsButtonText !== null && viewAllNewsButtonText !== void 0 ? viewAllNewsButtonText : 'VIEW ALL NEWS'))),
this.state.isLoadingError && (React.createElement("div", null,
"Unable to load feed: ",
this.props.url)))));
};
return RssFeedCards;
}(React.Component));
exports.default = RssFeedCards;
//# sourceMappingURL=RssFeedCards.js.map