synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
73 lines • 4.93 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessTokenPage = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var utils_1 = require("../../utils");
var useListState_1 = require("../../utils/hooks/useListState");
var SynapseContext_1 = require("../../utils/SynapseContext");
var ErrorBanner_1 = require("../ErrorBanner");
var LoadingScreen_1 = (0, tslib_1.__importDefault)(require("../LoadingScreen"));
var AccessTokenCard_1 = require("./AccessTokenCard");
var CreateAccessTokenModal_1 = require("./CreateAccessTokenModal");
var AccessTokenPage = function (_a) {
var title = _a.title, body = _a.body;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
var _c = (0, react_1.useState)(false), showCreateTokenModal = _c[0], setShowCreateTokenModal = _c[1];
var _d = (0, useListState_1.useListState)([]), tokenRecords = _d.list, appendTokenRecords = _d.appendToList, setTokenRecords = _d.setList;
var _e = (0, react_1.useState)(true), loadNextPage = _e[0], setLoadNextPage = _e[1];
var _f = (0, react_1.useState)(undefined), nextPageToken = _f[0], setNextPageToken = _f[1];
var _g = (0, react_1.useState)(false), showErrorMessage = _g[0], setShowErrorMessage = _g[1];
var _h = (0, react_1.useState)(''), errorMessage = _h[0], setErrorMessage = _h[1];
// We rerender the list whenever a token is created or deleted to ensure we are up-to-date
var rerenderList = function () {
setTokenRecords([]);
setNextPageToken(undefined);
setLoadNextPage(true);
};
(0, react_1.useEffect)(function () {
if (loadNextPage) {
setLoadNextPage(false);
setIsLoading(true);
utils_1.SynapseClient.getPersonalAccessTokenRecords(accessToken, nextPageToken)
.then(function (response) {
setIsLoading(false);
appendTokenRecords.apply(void 0, response.results);
if (response.nextPageToken) {
setNextPageToken(response.nextPageToken);
}
else {
setNextPageToken(undefined);
}
})
.catch(function (err) {
setIsLoading(false);
setErrorMessage(err);
setShowErrorMessage(true);
});
}
}, [loadNextPage, accessToken, nextPageToken]);
return (react_1.default.createElement("div", { className: "PersonalAccessTokenPage bootstrap-4-backport" },
react_1.default.createElement("div", { className: "PersonalAccessTokenPage__Header" },
react_1.default.createElement("div", { className: "PersonalAccessTokenPage__Header__CopyText" },
react_1.default.createElement("h1", null, title),
body),
react_1.default.createElement("div", { className: "PersonalAccessTokenPage__Header__CreateButton" },
react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary", onClick: function () { return setShowCreateTokenModal(true); } }, "Create New Token"))),
react_1.default.createElement(ErrorBanner_1.SynapseErrorBoundary, null,
showCreateTokenModal && (react_1.default.createElement(CreateAccessTokenModal_1.CreateAccessTokenModal, { onClose: function () { return setShowCreateTokenModal(false); }, onCreate: rerenderList })),
react_1.default.createElement("div", null,
!isLoading && tokenRecords.length === 0 && (react_1.default.createElement("div", { className: "PersonalAccessTokenPage__NoTokensMessage SRC-text-title" }, "You currently have no personal access tokens.")),
react_1.default.createElement("div", { className: "PersonalAccessTokenPage__CardList" },
tokenRecords.map(function (accessToken) {
return (react_1.default.createElement(AccessTokenCard_1.AccessTokenCard, { key: accessToken.id, accessToken: accessToken, onDelete: rerenderList }));
}),
isLoading && LoadingScreen_1.default,
!isLoading && nextPageToken && !showErrorMessage && (react_1.default.createElement("div", { className: "PersonalAccessTokenPage__CardList__LoadMore" },
react_1.default.createElement(react_bootstrap_1.Button, { className: "PersonalAccessTokenPage__CardList__LoadMore__Button", variant: "primary", onClick: function () { return setLoadNextPage(true); } }, "Load More")))),
showErrorMessage && react_1.default.createElement(ErrorBanner_1.ErrorBanner, { error: errorMessage })))));
};
exports.AccessTokenPage = AccessTokenPage;
//# sourceMappingURL=AccessTokenPage.js.map