synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
138 lines • 8.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var ReactBootstrap = (0, tslib_1.__importStar)(require("react-bootstrap"));
var utils_1 = require("../utils");
var Sort_1 = (0, tslib_1.__importDefault)(require("../assets/icons/Sort"));
var synapseTypes_1 = require("../utils/synapseTypes");
var SynapseContext_1 = require("../utils/SynapseContext");
var ErrorUtils_1 = require("../utils/ErrorUtils");
var LoadingScreen_1 = require("./LoadingScreen");
var useFavorites_1 = require("../utils/hooks/SynapseAPI/useFavorites");
var IconSvg_1 = (0, tslib_1.__importDefault)(require("./IconSvg"));
var EntityTypeUtils_1 = require("../utils/functions/EntityTypeUtils");
var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var getEndpoint_1 = require("../utils/functions/getEndpoint");
var EntityIcon_1 = require("./EntityIcon");
var react_bootstrap_1 = require("react-bootstrap");
var ErrorBanner_1 = require("./ErrorBanner");
function FavoritesPage() {
var _this = this;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _a = (0, react_1.useState)(undefined), sort = _a[0], setSort = _a[1];
var _b = (0, react_1.useState)(''), searchText = _b[0], setSearchText = _b[1];
var _c = (0, react_1.useState)(undefined), sortedData = _c[0], setSortedData = _c[1];
var _d = (0, react_1.useState)(), error = _d[0], setError = _d[1];
var _e = (0, useFavorites_1.useGetFavorites)(), data = _e.data, isFetching = _e.isFetching, isError = _e.isError, newError = _e.error, refetch = _e.refetch;
(0, react_1.useEffect)(function () {
if (isError && newError) {
setError((0, ErrorUtils_1.toError)(newError));
}
}, [isError, newError]);
(0, react_1.useEffect)(function () {
if (!accessToken) {
setError(new Error('Please sign in to access your favorites.'));
}
}, [accessToken]);
var filterEntityHeaders = function (searchTerm, array) {
var searchTermLowercase = searchTerm.toLowerCase();
return array.filter(function (item) { return item.name.toLowerCase().indexOf(searchTermLowercase) >= 0; });
};
(0, react_1.useEffect)(function () {
if (data) {
var newData = (0, tslib_1.__spreadArray)([], data.results, true);
if (sort) {
newData.sort(function (a, b) {
if (sort.direction == 'DESC') {
return (a[sort.field].toLowerCase() > b[sort.field].toLowerCase()) ? 1 : -1;
}
else {
return (a[sort.field].toLowerCase() < b[sort.field].toLowerCase()) ? 1 : -1;
}
});
}
if (searchText) {
newData = filterEntityHeaders(searchText, newData);
}
setSortedData(newData);
}
}, [data, searchText, sort]);
var removeFavorite = function (item) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var err_1;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
return [4 /*yield*/, utils_1.SynapseClient.removeUserFavorite(item.id, accessToken)];
case 1:
_a.sent();
refetch();
return [3 /*break*/, 3];
case 2:
err_1 = _a.sent();
console.error(err_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); };
var showInteractiveSortIcon = function (columnSortBy) {
return (setSort && (react_1.default.createElement(Sort_1.default, { role: "button", style: { height: '20px' }, active: (sort === null || sort === void 0 ? void 0 : sort.field) === columnSortBy, direction: (sort === null || sort === void 0 ? void 0 : sort.field) === columnSortBy
? sort.direction === 'DESC'
? synapseTypes_1.Direction.DESC
: synapseTypes_1.Direction.ASC
: synapseTypes_1.Direction.DESC, onClick: function () {
var direction = columnSortBy === (sort === null || sort === void 0 ? void 0 : sort.field)
? sort.direction === 'ASC'
? 'DESC'
: 'ASC'
: 'DESC';
setSort({
field: columnSortBy,
direction: direction,
});
} })));
};
if (error) {
return react_1.default.createElement(ErrorBanner_1.ErrorBanner, { error: error });
}
return (react_1.default.createElement("div", { className: "FavoritesPage" },
react_1.default.createElement("div", { className: "searchInputWithIcon" },
react_1.default.createElement(IconSvg_1.default, { options: { icon: 'searchOutlined' } }),
react_1.default.createElement(react_bootstrap_1.Form.Control, { type: "search", placeholder: "Favorite Name", value: searchText, onChange: function (event) {
setSearchText(event.target.value);
} })),
sortedData && sortedData.length > 0 && (react_1.default.createElement("div", { className: "bootstrap-4-backport" },
react_1.default.createElement(ReactBootstrap.Table, { striped: true, responsive: true, className: "FavoritesTable" },
react_1.default.createElement("thead", null,
react_1.default.createElement("tr", null,
react_1.default.createElement("th", null),
react_1.default.createElement("th", null,
"Name",
react_1.default.createElement("span", null, showInteractiveSortIcon('name'))),
react_1.default.createElement("th", null,
"Type",
react_1.default.createElement("span", null, showInteractiveSortIcon('type'))))),
react_1.default.createElement("tbody", null, sortedData.map(function (item) {
if (item) {
var entityType = (0, EntityTypeUtils_1.convertToEntityType)(item.type);
return (react_1.default.createElement("tr", { key: item.id },
react_1.default.createElement("td", null,
react_1.default.createElement("a", { "data-tip": "Click the star to remove this item from your favorites", "data-for": item.id + "-Tooltip", onClick: function () { removeFavorite(item); }, className: "ignoreLink" },
react_1.default.createElement(react_tooltip_1.default, { delayShow: 300, place: "right", type: "dark", effect: "solid", id: item.id + "-Tooltip" }),
react_1.default.createElement(IconSvg_1.default, { options: { icon: 'fav', color: '#EDC766' } }))),
react_1.default.createElement("td", null,
react_1.default.createElement("a", { rel: "noopener noreferrer", href: getEndpoint_1.PRODUCTION_ENDPOINT_CONFIG.PORTAL + "#!Synapse:" + item.id }, item.name)),
react_1.default.createElement("td", null,
react_1.default.createElement(EntityIcon_1.EntityTypeIcon, { type: entityType, style: { marginRight: '5px' } }),
(0, EntityTypeUtils_1.entityTypeToFriendlyName)(entityType))));
}
else
return false;
}))))),
isFetching && (react_1.default.createElement("div", { className: "placeholder" },
react_1.default.createElement(LoadingScreen_1.SynapseSpinner, { size: 30 })))));
}
exports.default = FavoritesPage;
//# sourceMappingURL=FavoritesPage.js.map