synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
117 lines • 7.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProjectViewCarousel = void 0;
var tslib_1 = require("tslib");
var utils_1 = require("../../../utils");
var queryUtils_1 = require("../../../utils/functions/queryUtils");
var useGetQueryResultBundle_1 = (0, tslib_1.__importDefault)(require("../../../utils/hooks/SynapseAPI/useGetQueryResultBundle"));
var react_1 = (0, tslib_1.__importStar)(require("react"));
var Carousel_1 = (0, tslib_1.__importDefault)(require("../../Carousel"));
var ProjectViewCard_1 = require("./ProjectViewCard");
var ErrorBanner_1 = require("../../ErrorBanner");
var SynapseContext_1 = require("../../../utils/SynapseContext");
var ExpectedColumns;
(function (ExpectedColumns) {
ExpectedColumns["ID"] = "id";
ExpectedColumns["PROJECT_DISPLAY_NAME"] = "projectDisplayName";
ExpectedColumns["NAME"] = "name";
ExpectedColumns["PROJECT_DESCRIPTION"] = "projectDescription";
ExpectedColumns["PROJECT_IMAGE"] = "projectImageFileName";
})(ExpectedColumns || (ExpectedColumns = {}));
/**
* Display a carousel of projects using a Project View. Driven by the following annotations/column names:
* projectDisplayName, projectDescription, projectImageFileName. The projectImageFileName must
* be an attachment on the project's root wiki page.
*/
var ProjectViewCarousel = function (_a) {
var entityId = _a.entityId;
var queryBundleRequest = {
concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',
entityId: entityId,
partMask: utils_1.SynapseConstants.BUNDLE_MASK_QUERY_SELECT_COLUMNS |
utils_1.SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,
query: {
sql: "select * from " + entityId,
},
};
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _b = (0, react_1.useState)([]), projects = _b[0], setProjects = _b[1];
var _c = (0, react_1.useState)(), error = _c[0], setError = _c[1];
var _d = (0, useGetQueryResultBundle_1.default)(queryBundleRequest), queryResultBundle = _d.data, queryError = _d.error, isLoading = _d.isLoading;
(0, react_1.useEffect)(function () {
var getData = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var entityIdIndex_1, displayNameColumnIndex_1, descriptionColumnIndex_1, nameColumnIndex_1, imageColumnIndex_1, projects_2, _i, projects_1, project, wikiPageKey, _a, err_1, error_1;
var _b;
return (0, tslib_1.__generator)(this, function (_c) {
switch (_c.label) {
case 0:
_c.trys.push([0, 9, , 10]);
entityIdIndex_1 = (0, queryUtils_1.getFieldIndex)(ExpectedColumns.ID, queryResultBundle);
displayNameColumnIndex_1 = (0, queryUtils_1.getFieldIndex)(ExpectedColumns.PROJECT_DISPLAY_NAME, queryResultBundle);
descriptionColumnIndex_1 = (0, queryUtils_1.getFieldIndex)(ExpectedColumns.PROJECT_DESCRIPTION, queryResultBundle);
nameColumnIndex_1 = (0, queryUtils_1.getFieldIndex)(ExpectedColumns.NAME, queryResultBundle);
imageColumnIndex_1 = (0, queryUtils_1.getFieldIndex)(ExpectedColumns.PROJECT_IMAGE, queryResultBundle);
projects_2 = (_b = queryResultBundle === null || queryResultBundle === void 0 ? void 0 : queryResultBundle.queryResult.queryResults.rows.map(function (row) {
var _a;
return {
projectName: (_a = row.values[displayNameColumnIndex_1]) !== null && _a !== void 0 ? _a : row.values[nameColumnIndex_1],
projectDescription: row.values[descriptionColumnIndex_1],
imageFileName: row.values[imageColumnIndex_1],
entityId: row.values[entityIdIndex_1],
};
})) !== null && _b !== void 0 ? _b : [];
if (queryError) {
throw queryError;
}
if (projects_2.length === 0) {
// wait for data to load
return [2 /*return*/];
}
_i = 0, projects_1 = projects_2;
_c.label = 1;
case 1:
if (!(_i < projects_1.length)) return [3 /*break*/, 8];
project = projects_1[_i];
_c.label = 2;
case 2:
_c.trys.push([2, 6, , 7]);
if (!project.imageFileName) return [3 /*break*/, 5];
return [4 /*yield*/, utils_1.SynapseClient.getWikiPageKeyForEntity(accessToken, project.entityId)];
case 3:
wikiPageKey = _c.sent();
_a = project;
return [4 /*yield*/, utils_1.SynapseClient.getPresignedUrlForWikiAttachment(accessToken, project.entityId, wikiPageKey.wikiPageId, project.imageFileName)];
case 4:
_a.imageUrl = _c.sent();
_c.label = 5;
case 5: return [3 /*break*/, 7];
case 6:
err_1 = _c.sent();
// Don't break the whole component just because we can't find an image.
// The user will just see the placeholder.
console.error(err_1);
return [3 /*break*/, 7];
case 7:
_i++;
return [3 /*break*/, 1];
case 8:
setProjects(projects_2);
return [3 /*break*/, 10];
case 9:
error_1 = _c.sent();
console.error(error_1);
setError(error_1);
return [3 /*break*/, 10];
case 10: return [2 /*return*/];
}
});
}); };
getData();
}, [entityId, accessToken, queryResultBundle, queryError]);
return error ? (react_1.default.createElement(ErrorBanner_1.ErrorBanner, { error: error })) : (react_1.default.createElement(Carousel_1.default, { isLoading: isLoading }, projects.map(function (project) {
return (react_1.default.createElement(ProjectViewCard_1.ProjectViewCard, { key: project.entityId, projectName: project.projectName, projectDescription: project.projectDescription, synId: project.entityId, image: project.imageUrl ? (react_1.default.createElement("img", { src: project.imageUrl, alt: "Logo for " + project.projectName })) : undefined }));
})));
};
exports.ProjectViewCarousel = ProjectViewCarousel;
exports.default = exports.ProjectViewCarousel;
//# sourceMappingURL=ProjectViewCarousel.js.map