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

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

@@ -1,5 +1,3 @@
-import { slicedToArray as _slicedToArray, 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';
@@ -22,50 +20,39 @@ import MaterialQuizInfo from './MaterialQuizInfo.js';
 import QuizResultBadge from './QuizResultBadge.js';
 import QuizSubmitStatusText from './QuizSubmitStatusText.js';
 
-var MaterialQuizSelectOne = function MaterialQuizSelectOne(_ref) {
-  var hasInlinePassage = _ref.hasInlinePassage;
+const MaterialQuizSelectOne = ({
+  hasInlinePassage
+}) => {
   // context
-  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();
+  const {
+    course,
+    lecture,
+    materialQuiz,
+    userId
+  } = useMaterialQuizState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialQuiz,
+    onDirty
+  } = useMaterialQuizDispatch();
+  const theme = useTheme();
   // state
-  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;
+  const intl = useRawEliceIntl();
+  const [selectedAnswer, setSelectedAnswer] = React.useState();
+  const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
+  const [submitStatus, setSubmitStatus] = React.useState('idle');
+  const {
+    containerRef,
+    questionRef
+  } = useCaculatePassage();
   // Whether user has clicked any options
-  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 === undefined || checkUserLectureTestEnded(lecture) || !!userId;
+  const [isActive, setIsActive] = React.useState(false);
+  const [hasSubmitted, setHasSubmitted] = React.useState(false);
+  const isNextActive = hasSubmitted && typeof onNext === 'function';
+  const isDisabled = selectedAnswer === undefined || checkUserLectureTestEnded(lecture) || !!userId;
   // answer select handler
-  var handleAnswerSelect = function handleAnswerSelect(index) {
+  const handleAnswerSelect = index => {
     if (checkUserLectureTestEnded(lecture) || !!userId) {
       return;
     }
@@ -75,31 +62,33 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne(_ref) {
     onDirty(true);
   };
   // quiz response fetcher
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
-      var controller = new AbortController();
-      var signal = controller.signal;
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
       getOrgMaterialQuizResponseGet({
         quizResponseId: materialQuiz.lastQuizResponseId
       }, {
-        signal: signal
-      }).then(function (response) {
-        var quizResponseAnswer = response.quizResponse.answer;
+        signal
+      }).then(response => {
+        const quizResponseAnswer = response.quizResponse.answer;
         setMaterialQuizResponse(response.quizResponse);
         setSelectedAnswer(typeof response.quizResponse.answer === 'string' ? undefined : quizResponseAnswer[0]);
-      }).catch(function (error) {
+      }).catch(error => {
         console.error(error);
       });
-      return function () {
-        return controller.abort();
-      };
+      return () => controller.abort();
     }
   }, [materialQuiz, userId]);
   // quiz response fetcher
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (userId && materialQuiz) {
-      var controller = new AbortController();
-      var signal = controller.signal;
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
       getOrgMaterialQuizResponseList({
         materialQuizId: materialQuiz.id,
         filterUserIds: [userId],
@@ -108,84 +97,58 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne(_ref) {
         offset: 0,
         count: 1
       }, {
-        signal: signal
-      }).then(function (response) {
-        var quizResponse = response.quizResponses[0];
-        var quizResponseAnswer = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer;
+        signal
+      }).then(response => {
+        const quizResponse = response.quizResponses[0];
+        const quizResponseAnswer = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer;
         setMaterialQuizResponse(quizResponse);
         setSelectedAnswer(quizResponseAnswer === null || quizResponseAnswer === void 0 ? void 0 : quizResponseAnswer[0]);
-      }).catch(function (error) {
+      }).catch(error => {
         console.error(error);
       });
-      return function () {
-        return controller.abort();
-      };
+      return () => controller.abort();
     }
   }, [materialQuiz, userId]);
   // submit handler
-  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 || selectedAnswer === undefined)) {
-              _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, {
+  const handleSubmit = async () => {
+    if (!materialQuiz || selectedAnswer === undefined) {
+      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, {
     title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
     titlePrefix: "Q.",
     onNext: onNext,
     isNextActive: isNextActive,
-    submitStatus: jsx(QuizSubmitStatusText, {
+    submitStatus: React.createElement(QuizSubmitStatusText, {
       status: submitStatus
     }),
-    submitResult: jsx(QuizResultBadge, {
+    submitResult: React.createElement(QuizResultBadge, {
       materialQuizResponse: materialQuizResponse
     }),
     bodyContainerRef: containerRef,
@@ -203,54 +166,49 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne(_ref) {
         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
       }
-    }],
-    children: jsxs(Stack, {
-      height: "100%",
-      gap: "1rem",
-      children: [hasInlinePassage && jsx("div", {
-        id: MATERIAL_QUIZ_PASSIVE_ID,
-        ref: questionRef,
-        children: jsx(MaterialQuizInfo, {
-          renderWithBox: false
-        })
-      }), materialQuiz ? jsxs("div", {
-        id: MATERIAL_QUIZ_ANSWER_ID,
-        children: [jsx(QuestionRadio, {
-          selectedValue: selectedAnswer,
-          onSelect: handleAnswerSelect,
-          disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId,
-          children: materialQuiz.options && course ? materialQuiz.options.map(function (option, index) {
-            var _a, _b;
-            var getIsSelected = function getIsSelected(index, materialQuizResponse) {
-              var _a;
-              if (!materialQuizResponse) {
-                return false;
-              }
-              var materialQuizResponseAnswer = materialQuizResponse.answer;
-              return (_a = materialQuizResponseAnswer === null || materialQuizResponseAnswer === void 0 ? void 0 : 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(QuestionRadioOption, {
-              value: index,
-              status: status,
-              isAnswer: (_a = !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index)) !== null && _a !== void 0 ? _a : false,
-              children: course.preference.renderMarkdownInQuizOptions ? jsx(StyledMarkdown, {
-                children: (_b = option === null || option === void 0 ? void 0 : option.content) !== null && _b !== void 0 ? _b : '',
-                paddingx: 0,
-                paddingy: 0,
-                dark: true
-              }) : option === null || option === void 0 ? void 0 : option.content
-            }, index);
-          }) : null
-        }), jsx(MaterialQuizAnswerExplanation, {})]
-      }) : null]
-    })
-  });
+    }]
+  }, React.createElement(Stack, {
+    height: "100%",
+    gap: "1rem"
+  }, hasInlinePassage && React.createElement("div", {
+    id: MATERIAL_QUIZ_PASSIVE_ID,
+    ref: questionRef
+  }, React.createElement(MaterialQuizInfo, {
+    renderWithBox: false
+  })), materialQuiz ? React.createElement("div", {
+    id: MATERIAL_QUIZ_ANSWER_ID
+  }, React.createElement(QuestionRadio, {
+    selectedValue: selectedAnswer,
+    onSelect: handleAnswerSelect,
+    disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId
+  }, materialQuiz.options && course ? materialQuiz.options.map((option, index) => {
+    var _a, _b;
+    const getIsSelected = (index, materialQuizResponse) => {
+      var _a;
+      if (!materialQuizResponse) {
+        return false;
+      }
+      const materialQuizResponseAnswer = materialQuizResponse.answer;
+      return (_a = materialQuizResponseAnswer === null || materialQuizResponseAnswer === void 0 ? void 0 : 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(QuestionRadioOption, {
+      key: index,
+      value: index,
+      status: status,
+      isAnswer: (_a = !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index)) !== null && _a !== void 0 ? _a : false
+    }, course.preference.renderMarkdownInQuizOptions ? React.createElement(StyledMarkdown, {
+      children: (_b = option === null || option === void 0 ? void 0 : option.content) !== null && _b !== void 0 ? _b : '',
+      paddingx: 0,
+      paddingy: 0,
+      dark: true
+    }) : option === null || option === void 0 ? void 0 : option.content);
+  }) : null), React.createElement(MaterialQuizAnswerExplanation, null)) : null));
 };
 
 export { MaterialQuizSelectOne as default };

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

@@ -1,53 +1,50 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import { Shimmer, Vspace } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import { useMaterialQuizState } from './context/MaterialQuizContext.js';
 
-var StyledShimmer = styled.div.withConfig({
+const StyledShimmer = styled.div.withConfig({
   componentId: "sc-10uz5tw-0"
-})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;"], function (_ref) {
-  var vertical = _ref.vertical;
-  return vertical ? '0' : '8px';
-});
-var StyledShimmerBody = styled.div.withConfig({
+})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;"], ({
+  vertical
+}) => vertical ? '0' : '8px');
+const StyledShimmerBody = styled.div.withConfig({
   componentId: "sc-10uz5tw-1"
 })(["padding:1.5rem;background-color:", ";overflow-y:auto;height:100%;"], base.color.navy8);
-var MaterialQuizShimmer = function MaterialQuizShimmer() {
-  var _useMaterialQuizState = useMaterialQuizState(),
-    vertical = _useMaterialQuizState.vertical;
-  return jsx(StyledShimmer, {
-    vertical: vertical,
-    children: jsxs(StyledShimmerBody, {
-      children: [jsx(Shimmer, {
-        dark: true,
-        borderRadius: '4px',
-        width: "80%",
-        height: '40px'
-      }), jsx(Vspace, {
-        height: 1
-      }), jsx(Shimmer, {
-        dark: true,
-        borderRadius: '4px',
-        width: "100%",
-        height: '40px'
-      }), jsx(Vspace, {
-        height: 1
-      }), jsx(Shimmer, {
-        dark: true,
-        borderRadius: '4px',
-        width: "100%",
-        height: '40px'
-      }), jsx(Vspace, {
-        height: 1
-      }), jsx(Shimmer, {
-        dark: true,
-        borderRadius: '4px',
-        width: "100%",
-        height: '40px'
-      })]
-    })
-  });
+const MaterialQuizShimmer = () => {
+  const {
+    vertical
+  } = useMaterialQuizState();
+  return React.createElement(StyledShimmer, {
+    vertical: vertical
+  }, React.createElement(StyledShimmerBody, null, React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "80%",
+    height: '40px'
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React.createElement(Vspace, {
+    height: 1
+  }), React.createElement(Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  })));
 };
 
 export { MaterialQuizShimmer as default };