synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
242 lines • 16.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SynapseNavDrawer = exports.NavItem = void 0;
var tslib_1 = require("tslib");
var core_1 = require("@material-ui/core");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var IconSvg_1 = (0, tslib_1.__importDefault)(require("./IconSvg"));
var SynapseLogoName_1 = (0, tslib_1.__importDefault)(require("../assets/icons/SynapseLogoName"));
var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var utils_1 = require("../utils");
var SynapseContext_1 = require("../utils/SynapseContext");
var Avatar_1 = require("./Avatar");
var react_bootstrap_1 = require("react-bootstrap");
var SynapseIconWhite_1 = (0, tslib_1.__importDefault)(require("../assets/icons/SynapseIconWhite"));
var SynapseClient_1 = require("../utils/SynapseClient");
var CreateProjectModal_1 = require("./CreateProjectModal");
var NavItem;
(function (NavItem) {
NavItem[NavItem["PROJECTS"] = 0] = "PROJECTS";
NavItem[NavItem["FAVORITES"] = 1] = "FAVORITES";
NavItem[NavItem["TEAMS"] = 2] = "TEAMS";
NavItem[NavItem["CHALLENGES"] = 3] = "CHALLENGES";
NavItem[NavItem["DOWNLOADS"] = 4] = "DOWNLOADS";
NavItem[NavItem["SEARCH"] = 5] = "SEARCH";
NavItem[NavItem["PROFILE"] = 6] = "PROFILE";
NavItem[NavItem["HELP"] = 7] = "HELP";
})(NavItem = exports.NavItem || (exports.NavItem = {}));
// To support project search, we send this json object in the url.
// We update the queryTerm array based on user input.
var projectSearchJson = {
"queryTerm": [],
"booleanQuery": [
{
"key": "node_type",
"value": "project"
}
],
"facetOptions": [
{
"name": "EntityType",
"maxResultCount": 300,
"sortType": "COUNT"
},
{
"name": "Consortium",
"maxResultCount": 300,
"sortType": "COUNT"
},
{
"name": "ModifiedOn",
"maxResultCount": 300,
"sortType": "COUNT"
},
{
"name": "ModifiedBy",
"maxResultCount": 300,
"sortType": "COUNT"
},
{
"name": "CreatedOn",
"maxResultCount": 300,
"sortType": "COUNT"
},
{
"name": "Tissue",
"maxResultCount": 300,
"sortType": "COUNT"
},
{
"name": "CreatedBy",
"maxResultCount": 300,
"sortType": "COUNT"
}
],
"start": 0,
"size": 30
};
/**
* Displays the Synapse navigational drawer on the left side of the page. Has links to various areas if logged in.
*/
var SynapseNavDrawer = function (_a) {
var _b = _a.initIsOpen, initIsOpen = _b === void 0 ? false : _b, signoutCallback = _a.signoutCallback;
var accessToken = (0, SynapseContext_1.useSynapseContext)().accessToken;
var _c = (0, react_1.useState)(initIsOpen), isOpen = _c[0], setOpen = _c[1];
var _d = (0, react_1.useState)(), selectedItem = _d[0], setSelectedItem = _d[1];
var _e = (0, react_1.useState)(), currentUserProfile = _e[0], setUserProfile = _e[1];
var _f = (0, react_1.useState)(''), projectSearchText = _f[0], setProjectSearchText = _f[1];
var _g = (0, react_1.useState)(''), docSiteSearchText = _g[0], setDocSiteSearchText = _g[1];
var _h = (0, react_1.useState)(false), isShowingCreateProjectModal = _h[0], setIsShowingCreateProjectModal = _h[1];
(0, react_1.useEffect)(function () {
function getUserProfile() {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var userProfile;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, utils_1.SynapseClient.getUserProfile(accessToken)];
case 1:
userProfile = _a.sent();
setUserProfile(userProfile);
return [2 /*return*/];
}
});
});
}
if (accessToken) {
getUserProfile();
}
else {
setUserProfile(undefined);
}
}, [
accessToken
]);
var signOut = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
if (!signoutCallback) return [3 /*break*/, 1];
signoutCallback();
return [3 /*break*/, 3];
case 1: return [4 /*yield*/, utils_1.SynapseClient.signOut(function () { console.log('Signed out'); })];
case 2:
_a.sent();
window.location.reload();
_a.label = 3;
case 3: return [2 /*return*/];
}
});
}); };
var handleDrawerOpen = function (navItem) {
setOpen(true);
setSelectedItem(navItem);
};
var handleDrawerClose = function () {
setOpen(false);
setSelectedItem(undefined);
};
var getListItem = function (params) {
var tooltip = params.tooltip, iconName = params.iconName, onClickOpenNavMenu = params.onClickOpenNavMenu, onClickGoToUrl = params.onClickGoToUrl, additionalChildren = params.additionalChildren;
var isCurrentlySelectedItem = (typeof selectedItem === 'undefined') ? false : selectedItem == onClickOpenNavMenu;
var handler = isCurrentlySelectedItem || onClickGoToUrl ? handleDrawerClose : function () { handleDrawerOpen(onClickOpenNavMenu); };
var item = iconName ? react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(IconSvg_1.default, { options: { icon: iconName } }),
" ",
additionalChildren,
" ") : additionalChildren;
var listItem = react_1.default.createElement(core_1.ListItem, { button: true, key: iconName, "data-tip": tooltip, "data-for": tooltip + "Link", "data-testid": "" + tooltip, onClick: handler, className: "SRC-whiteText", selected: isCurrentlySelectedItem },
react_1.default.createElement(react_tooltip_1.default, { delayShow: 300, place: "right", type: "dark", effect: "solid", id: tooltip + "Link" }),
item);
return onClickGoToUrl ?
react_1.default.createElement("a", { href: onClickGoToUrl, rel: "noopener noreferrer", className: "SRC-whiteText" }, listItem) : listItem;
};
var onProjectSearch = function (searchTerm) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
projectSearchJson.queryTerm = searchTerm.split(/[ ,]+/);
window.location.href = "/#!Search:" + encodeURI(JSON.stringify(projectSearchJson));
};
var downloadListItem = getListItem({ tooltip: 'Download Cart', iconName: 'download', onClickGoToUrl: '/#!DownloadCart:0' });
return (react_1.default.createElement("div", { className: "SynapseNavDrawer" },
react_1.default.createElement(core_1.Drawer, { variant: "permanent", className: "SynapseNavDrawerMenu " + (isOpen ? 'tempDrawerOpen' : '') },
react_1.default.createElement("div", { onClick: handleDrawerClose },
react_1.default.createElement("a", { className: 'synapseIcon', rel: "noopener noreferrer", href: '/#!Home:0' },
react_1.default.createElement(SynapseIconWhite_1.default, null))),
react_1.default.createElement(core_1.List, null,
currentUserProfile && react_1.default.createElement(react_1.default.Fragment, null,
getListItem({ tooltip: 'Projects', iconName: 'dashboard', onClickOpenNavMenu: NavItem.PROJECTS }),
getListItem({ tooltip: 'Favorites', iconName: 'favTwoTone', onClickGoToUrl: "/#!Profile:" + currentUserProfile.ownerId + "/favorites" }),
getListItem({ tooltip: 'Teams', iconName: 'peopleTwoTone', onClickGoToUrl: "/#!Profile:" + currentUserProfile.ownerId + "/teams" }),
getListItem({ tooltip: 'Challenges', iconName: 'challengesTwoTone', onClickGoToUrl: "/#!Profile:" + currentUserProfile.ownerId + "/challenges" }),
downloadListItem,
(0, SynapseClient_1.isInSynapseExperimentalMode)() && getListItem({ tooltip: 'Trash Can', iconName: 'delete', onClickGoToUrl: '/#!Trash:0' })),
getListItem({ tooltip: 'Search', iconName: 'searchTwoTone', onClickGoToUrl: '/#!Search:' })),
react_1.default.createElement("div", { className: "filler" }),
react_1.default.createElement(core_1.List, null,
currentUserProfile && getListItem({ tooltip: 'Your Account', onClickOpenNavMenu: NavItem.PROFILE, additionalChildren: react_1.default.createElement(Avatar_1.Avatar, { userProfile: currentUserProfile, avatarSize: 'SMALL' }) }),
!currentUserProfile && getListItem({ tooltip: 'Sign in', iconName: 'login', onClickGoToUrl: '/#!LoginPlace:0' }),
getListItem({ tooltip: 'Help', iconName: 'helpOutlined', onClickOpenNavMenu: NavItem.HELP }))),
react_1.default.createElement(core_1.Drawer, { variant: "temporary", open: isOpen, className: "SynapseNavContentDrawer", onClose: handleDrawerClose },
react_1.default.createElement("div", { className: "synapseLogoNameContainer" },
react_1.default.createElement(SynapseLogoName_1.default, null)),
react_1.default.createElement("div", { className: "navContentContainer" },
selectedItem == NavItem.PROJECTS && react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "header projectHeader" }, "Projects"),
react_1.default.createElement("a", { className: "createProjectLink", "data-for": "createProjectTooltipId", "data-tip": "Create a New Project", onClick: function () {
setIsShowingCreateProjectModal(true);
handleDrawerClose();
} },
react_1.default.createElement(react_tooltip_1.default, { delayShow: 300, place: "right", type: "dark", effect: "solid", id: "createProjectTooltipId" }),
react_1.default.createElement(IconSvg_1.default, { options: { icon: 'addCircleOutline' } })),
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: "Search All Projects", value: projectSearchText, onChange: function (event) {
setProjectSearchText(event.target.value);
}, onKeyDown: function (event) {
if (event.key === 'Enter') {
if (event.target.value !== '') {
setProjectSearchText('');
handleDrawerClose();
onProjectSearch(event.target.value);
}
}
} })),
react_1.default.createElement("div", { className: "linkList", onClick: handleDrawerClose },
react_1.default.createElement("a", { className: "SRC-whiteText", href: "/#!Profile:" + (currentUserProfile === null || currentUserProfile === void 0 ? void 0 : currentUserProfile.ownerId) + "/projects/all", rel: "noopener noreferrer" }, "All"),
react_1.default.createElement("a", { className: "SRC-whiteText", href: "/#!Profile:" + (currentUserProfile === null || currentUserProfile === void 0 ? void 0 : currentUserProfile.ownerId) + "/projects/created_by_me", rel: "noopener noreferrer" }, "Created By Me"),
react_1.default.createElement("a", { className: "SRC-whiteText", href: "/#!Profile:" + (currentUserProfile === null || currentUserProfile === void 0 ? void 0 : currentUserProfile.ownerId) + "/projects/favorites", rel: "noopener noreferrer" }, "Favorite Projects"),
react_1.default.createElement("a", { className: "SRC-whiteText", href: "/#!Profile:" + (currentUserProfile === null || currentUserProfile === void 0 ? void 0 : currentUserProfile.ownerId) + "/projects/shared_directly_with_me", rel: "noopener noreferrer" }, "Shared With Me"),
react_1.default.createElement("a", { className: "SRC-whiteText", href: "/#!Profile:" + (currentUserProfile === null || currentUserProfile === void 0 ? void 0 : currentUserProfile.ownerId) + "/projects/all_my_team_projects", rel: "noopener noreferrer" }, "Team Projects"))),
selectedItem == NavItem.PROFILE && react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "header" },
"Welcome Back,",
react_1.default.createElement("br", null), currentUserProfile === null || currentUserProfile === void 0 ? void 0 :
currentUserProfile.userName,
"!"),
react_1.default.createElement("div", { className: "linkList", onClick: handleDrawerClose },
react_1.default.createElement("a", { className: "SRC-whiteText", href: "/#!Profile:" + (currentUserProfile === null || currentUserProfile === void 0 ? void 0 : currentUserProfile.ownerId) + "/profile", rel: "noopener noreferrer" }, "View Profile"),
react_1.default.createElement("a", { className: "SRC-whiteText", href: "/#!Profile:" + (currentUserProfile === null || currentUserProfile === void 0 ? void 0 : currentUserProfile.ownerId) + "/settings", rel: "noopener noreferrer" }, "Account Settings"),
react_1.default.createElement("a", { className: "SRC-whiteText", onClick: signOut, rel: "noopener noreferrer" }, "Sign Out"))),
selectedItem == NavItem.HELP && react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "header" }, "Help"),
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: "Search Synapse Documentation", value: docSiteSearchText, onChange: function (event) {
setDocSiteSearchText(event.target.value);
}, onKeyDown: function (event) {
if (event.key === 'Enter') {
if (event.target.value !== '') {
window.open("https://help.synapse.org/search.html?max=10&s=docs&q=" + encodeURI(event.target.value));
setDocSiteSearchText('');
handleDrawerClose();
}
}
} })),
react_1.default.createElement("div", { className: "linkList", onClick: handleDrawerClose },
react_1.default.createElement("a", { className: "SRC-whiteText", href: 'https://help.synapse.org/docs/Getting-Started.2055471150.html', rel: "noopener noreferrer", target: '_blank' }, "Getting Started"),
react_1.default.createElement("a", { className: "SRC-whiteText", href: 'https://help.synapse.org/docs/', rel: "noopener noreferrer", target: '_blank' }, "Synapse Documentation"),
react_1.default.createElement("a", { className: "SRC-whiteText", href: '#!SynapseForum:default', rel: "noopener noreferrer" }, "Help Forum"),
react_1.default.createElement("a", { className: "SRC-whiteText", href: 'mailto:synapseinfo@sagebionetworks.org', rel: "noopener noreferrer" }, "Contact Us"))))),
react_1.default.createElement(CreateProjectModal_1.CreateProjectModal, { onClose: function () { return setIsShowingCreateProjectModal(false); }, isShowingModal: isShowingCreateProjectModal })));
};
exports.SynapseNavDrawer = SynapseNavDrawer;
//# sourceMappingURL=SynapseNavDrawer.js.map