synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
49 lines • 2.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_error_boundary_1 = require("react-error-boundary");
var ErrorUtils_1 = require("../../utils/ErrorUtils");
var react_intersection_observer_1 = require("react-intersection-observer");
var getEndpoint_1 = require("../../utils/functions/getEndpoint");
var useGetUserChallenges_1 = require("../../utils/hooks/SynapseAPI/useGetUserChallenges");
var SkeletonTable_1 = require("../../assets/skeletons/SkeletonTable");
function UserChallenges(_a) {
var _b;
var userId = _a.userId;
var handleError = (0, react_error_boundary_1.useErrorHandler)();
// Load the next page when this ref comes into view.
var _c = (0, react_intersection_observer_1.useInView)(), ref = _c.ref, inView = _c.inView;
var _d = (0, useGetUserChallenges_1.useGetUserChallengesInfinite)(userId), data = _d.data, status = _d.status, isFetching = _d.isFetching, isLoading = _d.isLoading, hasNextPage = _d.hasNextPage, fetchNextPage = _d.fetchNextPage, isError = _d.isError, newError = _d.error;
(0, react_1.useEffect)(function () {
if (isError && newError) {
handleError((0, ErrorUtils_1.toError)(newError));
}
}, [isError, newError, handleError]);
(0, react_1.useEffect)(function () {
if (status === 'success' &&
!isFetching &&
hasNextPage &&
fetchNextPage &&
inView) {
fetchNextPage();
}
}, [status, isFetching, hasNextPage, fetchNextPage, inView]);
var allRows = (_b = data === null || data === void 0 ? void 0 : data.pages.flatMap(function (page) { return page.results; })) !== null && _b !== void 0 ? _b : [];
return (react_1.default.createElement(react_1.default.Fragment, null,
allRows.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
allRows.map(function (item) {
if (item && item.challenge && item.projectHeader) {
// another option may be to use an EntityLink
return (react_1.default.createElement("p", { key: "user-challenge-list-item-" + item.challenge.projectId },
react_1.default.createElement("a", { target: "_self", rel: "noopener noreferrer", href: getEndpoint_1.PRODUCTION_ENDPOINT_CONFIG.PORTAL + "#!Synapse:" + item.challenge.projectId + "/challenge" }, item.projectHeader.name)));
}
else
return false;
}),
react_1.default.createElement("div", { ref: ref }))),
!isFetching && allRows.length == 0 && react_1.default.createElement("div", null, "Empty"),
isLoading && react_1.default.createElement(SkeletonTable_1.SkeletonTable, { numRows: 5, numCols: 1 })));
}
exports.default = UserChallenges;
//# sourceMappingURL=UserChallenges.js.map