@elice/material-quiz 1.240718.0-trasncript.0 → 1.240718.0-trasncript.2

package/es/components/material-quiz/MaterialQuizSelectMultiple.js

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd } from '@elice/api-client';
 import { base } from '@elice/design-tokens';
@@ -20,62 +22,73 @@ import MaterialQuizInfo from './MaterialQuizInfo.js';
 import QuizResultBadge from './QuizResultBadge.js';
 import QuizSubmitStatusText from './QuizSubmitStatusText.js';
 
-const MaterialQuizSelectMultiple = ({
-  hasInlinePassage
-}) => {
+var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple(_ref) {
+  var hasInlinePassage = _ref.hasInlinePassage;
   // context
-  const {
-    course,
-    lecture,
-    materialQuiz,
-    userId
-  } = useMaterialQuizState();
-  const {
-    onSubmit,
-    onNext,
-    refreshOrgMaterialQuiz,
-    onDirty
-  } = useMaterialQuizDispatch();
-  const theme = useTheme();
+  var _useMaterialQuizState = useMaterialQuizState(),
+    course = _useMaterialQuizState.course,
+    lecture = _useMaterialQuizState.lecture,
+    materialQuiz = _useMaterialQuizState.materialQuiz,
+    userId = _useMaterialQuizState.userId;
+  var _useMaterialQuizDispa = useMaterialQuizDispatch(),
+    onSubmit = _useMaterialQuizDispa.onSubmit,
+    onNext = _useMaterialQuizDispa.onNext,
+    refreshOrgMaterialQuiz = _useMaterialQuizDispa.refreshOrgMaterialQuiz,
+    onDirty = _useMaterialQuizDispa.onDirty;
+  var theme = useTheme();
   // state
-  const intl = useRawEliceIntl();
-  const [selectedAnswer, setSelectedAnswer] = React.useState([]);
-  const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
-  const [submitStatus, setSubmitStatus] = React.useState('idle');
-  const {
-    containerRef,
-    questionRef
-  } = useCaculatePassage();
+  var intl = useRawEliceIntl();
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedAnswer = _React$useState2[0],
+    setSelectedAnswer = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    materialQuizResponse = _React$useState4[0],
+    setMaterialQuizResponse = _React$useState4[1];
+  var _React$useState5 = React.useState('idle'),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    submitStatus = _React$useState6[0],
+    setSubmitStatus = _React$useState6[1];
+  var _useCaculatePassage = useCaculatePassage(),
+    containerRef = _useCaculatePassage.containerRef,
+    questionRef = _useCaculatePassage.questionRef;
   // Whether user has clicked any options
-  const [isActive, setIsActive] = React.useState(false);
-  const [hasSubmitted, setHasSubmitted] = React.useState(false);
-  const isNextActive = hasSubmitted && typeof onNext === 'function';
-  const isDisabled = selectedAnswer.length === 0 || checkUserLectureTestEnded(lecture) || !!userId;
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isActive = _React$useState8[0],
+    setIsActive = _React$useState8[1];
+  var _React$useState9 = React.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    hasSubmitted = _React$useState10[0],
+    setHasSubmitted = _React$useState10[1];
+  var isNextActive = hasSubmitted && typeof onNext === 'function';
+  var isDisabled = selectedAnswer.length === 0 || checkUserLectureTestEnded(lecture) || !!userId;
   // answer select handler
-  const handleAnswerSelect = index => {
+  var handleAnswerSelect = function handleAnswerSelect(index) {
     if (checkUserLectureTestEnded(lecture) || !!userId) {
       return;
     }
     onDirty(true);
     setHasSubmitted(false);
     setIsActive(true);
-    setSelectedAnswer(prevState => {
-      const newState = prevState.includes(index) ? prevState.filter(ident => ident !== index) : [...prevState, index];
+    setSelectedAnswer(function (prevState) {
+      var newState = prevState.includes(index) ? prevState.filter(function (ident) {
+        return ident !== index;
+      }) : [].concat(_toConsumableArray(prevState), [index]);
       return newState;
     });
   };
   // quiz response fetcher
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
-      const controller = new AbortController();
-      const {
-        signal
-      } = controller;
+      var controller = new AbortController();
+      var signal = controller.signal;
       getOrgMaterialQuizResponseGet({
         quizResponseId: materialQuiz.lastQuizResponseId
       }, {
-        signal
-      }).then(response => {
+        signal: signal
+      }).then(function (response) {
         setMaterialQuizResponse(response.quizResponse);
         // when user submitted answers and not get the result yet, update selected options (for example, test quiz)
         // when is is a survey type quiz
@@ -85,19 +98,19 @@ const MaterialQuizSelectMultiple = ({
           setSelectedAnswer(response.quizResponse.answer);
         }
         setSelectedAnswer(response.quizResponse.answer);
-      }).catch(error => {
+      }).catch(function (error) {
         console.error(error);
       });
-      return () => controller.abort();
+      return function () {
+        return controller.abort();
+      };
     }
   }, [materialQuiz, userId]);
   // quiz response fetcher
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (userId && materialQuiz) {
-      const controller = new AbortController();
-      const {
-        signal
-      } = controller;
+      var controller = new AbortController();
+      var signal = controller.signal;
       getOrgMaterialQuizResponseList({
         materialQuizId: materialQuiz.id,
         filterUserIds: [userId],
@@ -106,58 +119,84 @@ const MaterialQuizSelectMultiple = ({
         offset: 0,
         count: 1
       }, {
-        signal
-      }).then(response => {
-        const quizResponse = response.quizResponses[0];
-        const quizResponseAnswer = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer;
+        signal: signal
+      }).then(function (response) {
+        var quizResponse = response.quizResponses[0];
+        var quizResponseAnswer = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer;
         setMaterialQuizResponse(quizResponse);
         setSelectedAnswer(Array.isArray(quizResponseAnswer) ? quizResponseAnswer : []);
-      }).catch(error => {
+      }).catch(function (error) {
         console.error(error);
       });
-      return () => controller.abort();
+      return function () {
+        return controller.abort();
+      };
     }
   }, [materialQuiz, userId]);
   // submit handler
-  const handleSubmit = async () => {
-    if (!materialQuiz) {
-      return;
-    }
-    setSubmitStatus('pending');
-    try {
-      const {
-        quizResponseId
-      } = await postOrgMaterialQuizResponseAdd({
-        materialQuizId: materialQuiz.id,
-        answer: selectedAnswer
-      });
-      const {
-        quizResponse
-      } = await getOrgMaterialQuizResponseGet({
-        quizResponseId
-      });
-      setIsActive(false);
-      setMaterialQuizResponse(quizResponse);
-      void refreshOrgMaterialQuiz();
-      onSubmit(true, getQuizResult(quizResponse));
-      setSubmitStatus('resolved');
-      setHasSubmitted(true);
-      onDirty(false);
-    } catch (error) {
-      console.error(error);
-      onSubmit(false);
-      setSubmitStatus('rejected');
-    }
-  };
-  return React.createElement(QuestionBox, {
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _yield$postOrgMateria, quizResponseId, _yield$getOrgMaterial, quizResponse;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (materialQuiz) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            setSubmitStatus('pending');
+            _context.prev = 3;
+            _context.next = 6;
+            return postOrgMaterialQuizResponseAdd({
+              materialQuizId: materialQuiz.id,
+              answer: selectedAnswer
+            });
+          case 6:
+            _yield$postOrgMateria = _context.sent;
+            quizResponseId = _yield$postOrgMateria.quizResponseId;
+            _context.next = 10;
+            return getOrgMaterialQuizResponseGet({
+              quizResponseId: quizResponseId
+            });
+          case 10:
+            _yield$getOrgMaterial = _context.sent;
+            quizResponse = _yield$getOrgMaterial.quizResponse;
+            setIsActive(false);
+            setMaterialQuizResponse(quizResponse);
+            void refreshOrgMaterialQuiz();
+            onSubmit(true, getQuizResult(quizResponse));
+            setSubmitStatus('resolved');
+            setHasSubmitted(true);
+            onDirty(false);
+            _context.next = 26;
+            break;
+          case 21:
+            _context.prev = 21;
+            _context.t0 = _context["catch"](3);
+            console.error(_context.t0);
+            onSubmit(false);
+            setSubmitStatus('rejected');
+          case 26:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[3, 21]]);
+    }));
+    return function handleSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return jsx(QuestionBox, {
     title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
     titlePrefix: "Q.",
     onNext: onNext,
     isNextActive: isNextActive,
-    submitResult: React.createElement(QuizResultBadge, {
+    submitResult: jsx(QuizResultBadge, {
       materialQuizResponse: materialQuizResponse
     }),
-    submitStatus: React.createElement(QuizSubmitStatusText, {
+    submitStatus: jsx(QuizSubmitStatusText, {
       status: submitStatus
     }),
     bodyContainerRef: containerRef,
@@ -175,49 +214,54 @@ const MaterialQuizSelectMultiple = ({
         backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? base.color.gray6 : theme.palette.primary.main,
         color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? base.color.gray3 : theme.palette.primary.contrastText
       }
-    }]
-  }, React.createElement(Stack, {
-    height: "100%",
-    gap: "1rem"
-  }, hasInlinePassage && React.createElement("div", {
-    id: MATERIAL_QUIZ_PASSIVE_ID,
-    ref: questionRef
-  }, React.createElement(MaterialQuizInfo, {
-    renderWithBox: false
-  })), React.createElement("div", {
-    id: MATERIAL_QUIZ_ANSWER_ID
-  }, React.createElement(QuestionCheckbox, {
-    onSelect: handleAnswerSelect,
-    selectedOptions: selectedAnswer,
-    disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId
-  }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) && course ? materialQuiz.options.map((option, index) => {
-    var _a;
-    const getIsSelected = (index, materialQuizResponse) => {
-      var _a;
-      if (!materialQuizResponse) {
-        return false;
-      }
-      const materialQuizResponseAnswer = materialQuizResponse.answer;
-      return (_a = materialQuizResponseAnswer.includes(index)) !== null && _a !== void 0 ? _a : false;
-    };
-    const status = getOptionStatus({
-      materialQuizResponse,
-      isSelected: getIsSelected(index, materialQuizResponse),
-      isActive
-    });
-    const materialQuizAnswerInfo = materialQuiz.answerInfo;
-    return React.createElement(QuestionCheckboxOption, {
-      key: index,
-      value: index,
-      status: status,
-      isAnswer: !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index)
-    }, course.preference.renderMarkdownInQuizOptions ? React.createElement(StyledMarkdown, {
-      children: (_a = option === null || option === void 0 ? void 0 : option.content) !== null && _a !== void 0 ? _a : '',
-      paddingx: 0,
-      paddingy: 0,
-      dark: true
-    }) : option === null || option === void 0 ? void 0 : option.content);
-  }) : null), React.createElement(MaterialQuizAnswerExplanation, null))));
+    }],
+    children: jsxs(Stack, {
+      height: "100%",
+      gap: "1rem",
+      children: [hasInlinePassage && jsx("div", {
+        id: MATERIAL_QUIZ_PASSIVE_ID,
+        ref: questionRef,
+        children: jsx(MaterialQuizInfo, {
+          renderWithBox: false
+        })
+      }), jsxs("div", {
+        id: MATERIAL_QUIZ_ANSWER_ID,
+        children: [jsx(QuestionCheckbox, {
+          onSelect: handleAnswerSelect,
+          selectedOptions: selectedAnswer,
+          disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId,
+          children: (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) && course ? materialQuiz.options.map(function (option, index) {
+            var _a;
+            var getIsSelected = function getIsSelected(index, materialQuizResponse) {
+              var _a;
+              if (!materialQuizResponse) {
+                return false;
+              }
+              var materialQuizResponseAnswer = materialQuizResponse.answer;
+              return (_a = materialQuizResponseAnswer.includes(index)) !== null && _a !== void 0 ? _a : false;
+            };
+            var status = getOptionStatus({
+              materialQuizResponse: materialQuizResponse,
+              isSelected: getIsSelected(index, materialQuizResponse),
+              isActive: isActive
+            });
+            var materialQuizAnswerInfo = materialQuiz.answerInfo;
+            return jsx(QuestionCheckboxOption, {
+              value: index,
+              status: status,
+              isAnswer: !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index),
+              children: course.preference.renderMarkdownInQuizOptions ? jsx(StyledMarkdown, {
+                children: (_a = option === null || option === void 0 ? void 0 : option.content) !== null && _a !== void 0 ? _a : '',
+                paddingx: 0,
+                paddingy: 0,
+                dark: true
+              }) : option === null || option === void 0 ? void 0 : option.content
+            }, index);
+          }) : null
+        }), jsx(MaterialQuizAnswerExplanation, {})]
+      })]
+    })
+  });
 };
 
 export { MaterialQuizSelectMultiple as default };