synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
211 lines • 12.1 kB
JavaScript
;
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DownloadConfirmation = void 0;
var tslib_1 = require("tslib");
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var react_1 = (0, tslib_1.__importStar)(require("react"));
var utils_1 = require("../../utils");
var testDownloadSpeed_1 = require("../../utils/functions/testDownloadSpeed");
var synapseTypes_1 = require("../../utils/synapseTypes/");
var DownloadDetails_1 = (0, tslib_1.__importDefault)(require("./DownloadDetails"));
var use_deep_compare_effect_1 = (0, tslib_1.__importDefault)(require("use-deep-compare-effect"));
var QueryWrapper_1 = require("../QueryWrapper");
var SignInButton_1 = (0, tslib_1.__importDefault)(require("../SignInButton"));
var react_bootstrap_1 = require("react-bootstrap");
var SynapseContext_1 = require("../../utils/SynapseContext");
var useGetEntityChildren_1 = require("../../utils/hooks/SynapseAPI/useGetEntityChildren");
var useGetQueryResultBundle_1 = (0, tslib_1.__importDefault)(require("../../utils/hooks/SynapseAPI/useGetQueryResultBundle"));
var useGetDownloadListStatistics_1 = require("../../utils/hooks/SynapseAPI/useGetDownloadListStatistics");
var ToastMessage_1 = require("../ToastMessage");
var StatusEnum;
(function (StatusEnum) {
StatusEnum[StatusEnum["LOADING_INFO"] = 0] = "LOADING_INFO";
StatusEnum[StatusEnum["PROCESSING"] = 1] = "PROCESSING";
StatusEnum[StatusEnum["INFO"] = 2] = "INFO";
StatusEnum[StatusEnum["SIGNED_OUT"] = 3] = "SIGNED_OUT";
})(StatusEnum || (StatusEnum = {}));
// add files to download list
function addToDownload(token, closeConfirmationFn, queryBundleRequest, folderId, goToDownloadListFn) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var req, error_1;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
req = {
query: queryBundleRequest === null || queryBundleRequest === void 0 ? void 0 : queryBundleRequest.query,
concreteType: 'org.sagebionetworks.repo.model.download.AddToDownloadListRequest',
parentId: folderId,
};
return [4 /*yield*/, utils_1.SynapseClient.addFilesToDownloadListV2(req, token)];
case 1:
_a.sent();
(0, ToastMessage_1.displayToast)('File(s) were successfully added to your Download List.', 'success', {
primaryButtonText: 'View Download List',
onPrimaryButtonClick: goToDownloadListFn,
});
closeConfirmationFn();
return [2 /*return*/, [StatusEnum.LOADING_INFO, '']];
case 2:
error_1 = _a.sent();
(0, ToastMessage_1.displayToast)('danger', undefined, error_1.reason);
closeConfirmationFn();
return [2 /*return*/, [StatusEnum.LOADING_INFO, '']];
case 3: return [2 /*return*/];
}
});
});
}
// css classes, text, and close button text associated with different stages
var StatusConstruct = (_a = {},
_a[StatusEnum.INFO] = {
className: 'alert-info',
infoText: 'Would you like to add all files to the download list?',
closeText: 'Cancel',
},
_a[StatusEnum.PROCESSING] = {
className: 'alert-info',
infoText: 'Adding Files To List',
closeText: 'Cancel',
},
_a[StatusEnum.LOADING_INFO] = {
className: 'alert-info',
infoText: 'Calculating File Size',
closeText: 'Cancel',
},
_a[StatusEnum.SIGNED_OUT] = {
className: 'alert-danger',
closeText: 'Close',
infoText: (react_1.default.createElement(react_1.default.Fragment, null,
"Please ",
react_1.default.createElement(SignInButton_1.default, { style: { color: '#337ab7' } }),
" to add files to your download list.")),
},
_a);
//============= DownloadConfirmation component =============
var DownloadConfirmation = function (_a) {
var getLastQueryRequest = _a.getLastQueryRequest, folderId = _a.folderId, fnClose = _a.fnClose, updateParentState = _a.updateParentState, topLevelControlsState = _a.topLevelControlsState, _b = _a.downloadCartPageUrl, downloadCartPageUrl = _b === void 0 ? '/DownloadCart' : _b;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _c = (topLevelControlsState !== null && topLevelControlsState !== void 0 ? topLevelControlsState : {}).showDownloadConfirmation, showDownloadConfirmation = _c === void 0 ? true : _c;
var _d = (0, react_1.useState)(accessToken ? StatusEnum.LOADING_INFO : StatusEnum.SIGNED_OUT), status = _d[0], setStatus = _d[1];
var _e = (0, react_1.useState)({
fileCount: 0,
fileSize: 0
}), state = _e[0], setState = _e[1];
var refetch = (0, useGetDownloadListStatistics_1.useGetDownloadListStatistics)().refetch;
var lastQueryRequest = getLastQueryRequest();
// is not defined (configured for a container)
var _f = (0, react_1.useState)(false), showDownloadList = _f[0], setShowDownloadList = _f[1];
var updateStats = (0, react_1.useCallback)(function (count, bytes) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var estimatedDownloadBytesPerSecond, size, fileCount, durationSeconds, duration;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
if (!accessToken) return [3 /*break*/, 2];
return [4 /*yield*/, (0, testDownloadSpeed_1.testDownloadSpeed)(accessToken)];
case 1:
estimatedDownloadBytesPerSecond = _a.sent();
size = bytes !== null && bytes !== void 0 ? bytes : 0;
fileCount = count !== null && count !== void 0 ? count : 0;
durationSeconds = size / estimatedDownloadBytesPerSecond;
duration = moment_1.default.duration(durationSeconds, 'seconds').humanize();
setStatus(StatusEnum.INFO);
setState({
fileCount: fileCount,
fileSize: size,
downloadEstimate: duration,
});
_a.label = 2;
case 2: return [2 /*return*/];
}
});
}); }, [accessToken]);
var _g = (0, useGetEntityChildren_1.useGetEntityChildren)({
parentId: folderId,
includeSumFileSizes: true,
includeTotalChildCount: true,
includeTypes: [synapseTypes_1.EntityType.FILE]
}), entityChildrenData = _g.data, isSuccess = _g.isSuccess;
(0, use_deep_compare_effect_1.default)(function () {
if (isSuccess && entityChildrenData) {
updateStats(entityChildrenData.totalChildCount, entityChildrenData.sumFileSizesBytes);
}
}, [updateStats, folderId, isSuccess, entityChildrenData]);
var partMask = utils_1.SynapseConstants.BUNDLE_MASK_QUERY_COUNT |
utils_1.SynapseConstants.BUNDLE_MASK_SUM_FILES_SIZE_BYTES;
var queryBundleRequestSizeInformation = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, lastQueryRequest), { partMask: partMask });
var queryResultBundle = (0, useGetQueryResultBundle_1.default)(queryBundleRequestSizeInformation).data;
(0, use_deep_compare_effect_1.default)(function () {
var _a;
if (queryResultBundle) {
updateStats(queryResultBundle.queryCount, (_a = queryResultBundle.sumFileSizes) === null || _a === void 0 ? void 0 : _a.sumFileSizesBytes);
}
}, [updateStats, lastQueryRequest, queryResultBundle]);
var onCancel = fnClose
? function () { return fnClose(); }
: function () {
updateParentState({
topLevelControlsState: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, topLevelControlsState), { showDownloadConfirmation: false }),
});
};
var triggerAddToDownload = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var goToDownloadListFn, result, newStatus;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
if (!!accessToken) return [3 /*break*/, 1];
setStatus(StatusEnum.SIGNED_OUT);
return [3 /*break*/, 3];
case 1:
setStatus(StatusEnum.PROCESSING);
goToDownloadListFn = function () { return setShowDownloadList(true); };
return [4 /*yield*/, addToDownload(accessToken, onCancel, lastQueryRequest, folderId, goToDownloadListFn)];
case 2:
result = _a.sent();
newStatus = result[0];
setStatus(newStatus);
refetch();
setState((0, tslib_1.__assign)((0, tslib_1.__assign)({}, state), { errorMessage: result[1] }));
_a.label = 3;
case 3: return [2 /*return*/];
}
});
}); };
var getContent = function (_a) {
var fileCount = _a.fileCount, fileSize = _a.fileSize, errorMessage = _a.errorMessage;
switch (status) {
case StatusEnum.LOADING_INFO:
case StatusEnum.PROCESSING:
return (react_1.default.createElement("div", null,
react_1.default.createElement("span", { className: 'spinner white' }),
react_1.default.createElement("span", { className: 'spinner__text' }, StatusConstruct[status].infoText)));
case StatusEnum.SIGNED_OUT:
return react_1.default.createElement(react_1.default.Fragment, null, StatusConstruct[status].infoText);
case StatusEnum.INFO:
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(DownloadDetails_1.default, { numFiles: fileCount, numBytes: fileSize }),
react_1.default.createElement("span", null, StatusConstruct[status].infoText)));
default:
return react_1.default.createElement(react_1.default.Fragment, null);
}
};
if (showDownloadList) {
// go to the Download Cart Page
if (downloadCartPageUrl)
window.location.href = downloadCartPageUrl;
else
console.error('Missing the Download Cart Page URL in the component configuration.');
}
var showFacetFilter = topLevelControlsState === null || topLevelControlsState === void 0 ? void 0 : topLevelControlsState.showFacetFilter;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_bootstrap_1.Alert, { dismissible: false, show: true, variant: 'info', transition: false, className: "download-confirmation " + StatusConstruct[status].className + " " + (showDownloadConfirmation ? '' : 'hidden') + "\n " + (showFacetFilter
? QueryWrapper_1.QUERY_FILTERS_EXPANDED_CSS
: QueryWrapper_1.QUERY_FILTERS_COLLAPSED_CSS) + "\n " },
react_1.default.createElement("div", null, getContent(state)),
react_1.default.createElement("div", { className: "download-confirmation-action" },
status !== StatusEnum.PROCESSING && (react_1.default.createElement("button", { className: "btn btn-link", onClick: onCancel }, StatusConstruct[status].closeText)),
status === StatusEnum.INFO && (react_1.default.createElement("button", { type: "button", className: "btn btn-primary", onClick: triggerAddToDownload }, "Add"))))));
};
exports.DownloadConfirmation = DownloadConfirmation;
//# sourceMappingURL=DownloadConfirmation.js.map