synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
311 lines (310 loc) • 11.8 kB
JavaScript
import { jsx as t, jsxs as r, Fragment as d } from "react/jsx-runtime";
import * as D from "../../synapse-client/SynapseClient.js";
import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
import "@sage-bionetworks/synapse-client/util/SynapseClientError";
import { MULTICHOICE_RESPONSE_CONCRETE_TYPE_VALUE as M } from "@sage-bionetworks/synapse-types";
import "../../utils/functions/EntityTypeUtils.js";
import { USER_BUNDLE_MASK_IS_CERTIFIED as G } from "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "@tanstack/react-query";
import "../../utils/PermissionLevelToAccessType.js";
import { useState as f, useRef as $, useEffect as j } from "react";
import { useSynapseContext as F } from "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import { Alert as g, AlertTitle as x, Typography as o, Link as y, Button as R, Box as b, Skeleton as Y } from "@mui/material";
import "../../utils/hooks/useCookiePreferences.js";
import "../../utils/hooks/useSourceAppConfigs.js";
import "universal-cookie";
import "../../utils/AppUtils/session/ApplicationSessionContext.js";
import "../../utils/context/FullContextProvider.js";
import "../../utils/context/DocumentMetadataContext.js";
import '../../style/components/_spinner.css';/* empty css */
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import "react-router";
import "@sage-bionetworks/synapse-client";
import "../../utils/types/IsType.js";
import { useGetCurrentUserBundle as K } from "../../synapse-queries/user/useUserBundle.js";
import { useGetPassingRecord as V, usePostCertifiedUserTestResponse as J } from "../../synapse-queries/user/useCertificationQuiz.js";
import { formatDate as W } from "../../utils/functions/DateFormatter.js";
import { HelpOutlineTwoTone as z } from "@mui/icons-material";
import X from "dayjs";
import { useErrorHandler as Z } from "react-error-boundary";
import { MarkdownPopover as ee } from "../Markdown/MarkdownPopover.js";
import "@mui/material/Skeleton";
import { SkeletonTable as te } from "../Skeleton/SkeletonTable.js";
import { SkeletonParagraph as re } from "../Skeleton/SkeletonParagraph.js";
import { displayToast as _ } from "../ToastMessage/ToastMessage.js";
import E from "./CertificationAnswer.js";
function je() {
const { accessToken: p, isAuthenticated: a } = F(), Q = Z(), [l, B] = f(), [P, w] = f(!1), [u, v] = f(
[]
), { data: T } = K(
G
), m = T?.isCertified, C = T?.userId, { data: i, isLoading: N } = V(C, {
enabled: C !== void 0
}), k = $(null), q = "https://help.synapse.org/docs/Getting-Started.2055471150.html", S = async () => {
try {
B(await D.getCertifyQuiz(p));
} catch (e) {
Q(e);
}
}, { mutate: L, isPending: U } = J({
onSuccess: () => {
w(!1), window.scrollTo(0, 0);
},
throwOnError: !0
}), h = !m && (i == null || P);
if (j(() => {
a && S();
}, [a]), N || l == null)
return /* @__PURE__ */ t(ie, {});
const A = (e, n) => {
const c = [
...u.filter((s) => s.questionIndex !== e),
{
questionIndex: e,
answerIndex: [n],
concreteType: M
}
];
v(c);
}, I = () => {
k.current?.reset(), w(!0), v([]), S();
}, H = () => {
try {
if (l && l.questions.length === u.length) {
const e = {
quizId: l.id,
questionResponses: u
};
L(e);
} else
_(
"Please answer all of the questions and try again.",
"warning"
);
} catch (e) {
_(e.reason, "danger");
}
}, O = (e) => e ? {
content: /* @__PURE__ */ t(d, { children: "More info" }),
closePopoverOnClick: !0,
onClick: () => window.open(e, "_blank"),
color: "primary"
} : void 0;
return /* @__PURE__ */ r("div", { children: [
i && !h && /* @__PURE__ */ r(d, { children: [
(i.revokedOn || i.passed) && !m && /* @__PURE__ */ r(g, { severity: "error", children: [
!i.passed && /* @__PURE__ */ t(x, { children: "Certification Revoked" }),
/* @__PURE__ */ r(o, { variant: "body1", sx: { marginTop: "5px" }, children: [
"Your certification was revoked. To become certified, you must",
" ",
/* @__PURE__ */ t(
y,
{
href: "#",
onClick: (e) => {
e.preventDefault(), I();
},
children: "retake the quiz"
}
),
"."
] })
] }),
!i.passed && !m && /* @__PURE__ */ r(g, { severity: "error", children: [
!i.passed && /* @__PURE__ */ t(x, { children: "Quiz Failed" }),
/* @__PURE__ */ r(o, { variant: "body1", sx: { marginTop: "5px" }, children: [
"Please review the results from the previous attempt, and",
" ",
/* @__PURE__ */ t(
y,
{
href: "#",
onClick: (e) => {
e.preventDefault(), I();
},
children: "retake the quiz"
}
),
"."
] })
] }),
i.passed && m && /* @__PURE__ */ r(g, { severity: "success", children: [
/* @__PURE__ */ t(x, { children: "Quiz Passed" }),
/* @__PURE__ */ t(o, { variant: "body1", sx: { marginTop: "5px" }, children: `You passed the Synapse Certification Quiz on ${W(
X(i.passedOn)
)}` })
] }),
/* @__PURE__ */ r(
o,
{
variant: "sectionTitle",
sx: { marginTop: "20px", marginBottom: "20px" },
children: [
"Score: ",
i.score,
" / ",
i.corrections?.length
]
}
)
] }),
/* @__PURE__ */ r("div", { className: "CertificationQuiz__container", children: [
l && h && /* @__PURE__ */ r(d, { children: [
/* @__PURE__ */ t(
R,
{
onClick: () => window.open(q, "_blank"),
className: "help-button",
color: "primary",
variant: "contained",
children: /* @__PURE__ */ r(b, { sx: { display: "flex", alignItems: "center" }, children: [
/* @__PURE__ */ t(
z,
{
className: "HelpButton",
style: { marginRight: "4px", color: "white" }
}
),
/* @__PURE__ */ t(d, { children: "Help" })
] })
}
),
/* @__PURE__ */ t(o, { variant: "headline1", sx: { marginBottom: "25px" }, children: "Certified User Quiz" }),
/* @__PURE__ */ t(o, { variant: "body1", sx: { marginBottom: "15px" }, children: "Certified users are authorized to use the full Synapse functionality. In order to ensure that users who create content in the system and/or wish to interact more freely within Synapse are familiar with the governance process and Synapse operating procedures when dealing with possibly sensitive data, users must pass a short quiz (approximately 15 minutes) to become Synapse certified." }),
/* @__PURE__ */ t(o, { variant: "body1", sx: { marginBottom: "15px" }, children: "Please answer the following questions to become certified." }),
/* @__PURE__ */ t("form", { ref: k, onSubmit: (e) => e.preventDefault(), children: /* @__PURE__ */ t("ol", { children: l?.questions.map((e) => {
const n = e.helpText || e.docLink;
return /* @__PURE__ */ r(
"li",
{
role: e.exclusive ? "radiogroup" : void 0,
children: [
/* @__PURE__ */ t(
o,
{
variant: "headline3",
dangerouslySetInnerHTML: { __html: e.prompt },
sx: { marginTop: "40px", marginBottom: "10px" }
}
),
e.answers.map((c) => /* @__PURE__ */ t(
E,
{
question: e,
answer: c,
onClick: (s) => A(
e.questionIndex,
Number(s.currentTarget.value)
)
},
`${e.questionIndex}-${c.answerIndex}`
)),
n && /* @__PURE__ */ t(
ee,
{
contentProps: { markdown: e.helpText },
placement: "right",
sx: {
table: {
textAlign: "center",
th: {
padding: "5px"
}
}
},
actionButton: O(e.docLink),
showCloseButton: !0,
children: /* @__PURE__ */ r(
b,
{
sx: {
display: "flex",
alignItems: "center",
marginTop: "10px"
},
children: [
/* @__PURE__ */ t(
z,
{
className: "HelpButton",
style: { marginRight: "4px" }
}
),
/* @__PURE__ */ t(y, { children: "Need help answering this question?" })
]
}
)
}
)
]
},
e.questionIndex
);
}) }) }),
/* @__PURE__ */ t(
R,
{
className: "help-button",
color: "primary",
variant: "contained",
size: "large",
disabled: U,
onClick: () => {
H();
},
children: "Submit"
}
)
] }),
!h && i?.corrections && /* @__PURE__ */ t("ol", { children: i.corrections.map((e) => {
const n = e.question, c = e.response;
return /* @__PURE__ */ r("li", { children: [
/* @__PURE__ */ t(
o,
{
variant: "headline3",
dangerouslySetInnerHTML: { __html: n.prompt },
className: e.isCorrect ? "" : "incorrectQuestion",
sx: { marginTop: "40px", marginBottom: "10px" }
}
),
n.answers.map((s) => /* @__PURE__ */ t(
E,
{
question: n,
answer: s,
disabled: !0,
checked: c.answerIndex.includes(
s.answerIndex
)
},
`${n.questionIndex}-${s.answerIndex}`
))
] }, n.questionIndex);
}) })
] })
] });
}
function ie() {
const p = [];
for (let a = 0; a < 20; a++)
p.push(
/* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(te, { numCols: 1, numRows: 5 }) }, a)
);
return /* @__PURE__ */ r(d, { children: [
/* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(Y, { height: "80px", width: "460px" }) }),
/* @__PURE__ */ t(re, { numRows: 5 }),
/* @__PURE__ */ t("div", { className: "CertificationQuiz__container", children: /* @__PURE__ */ t("ol", { style: { marginTop: "20px" }, children: p }) })
] });
}
export {
je as default
};
//# sourceMappingURL=CertificationQuiz.js.map