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

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroup.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
@@ -23,51 +25,79 @@ var context = require('./context/context.js');
 var MaterialQuizGroupDesktop = require('./MaterialQuizGroupDesktop.js');
 var MaterialQuizGroupMobile = require('./MaterialQuizGroupMobile.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cloneDeep__default = /*#__PURE__*/_interopDefaultCompat(cloneDeep);
+var flattenDeep__default = /*#__PURE__*/_interopDefaultCompat(flattenDeep);
+
 //
 //
 //
-const MaterialQuizGroup = () => {
-  const intl$1 = intl.useRawEliceIntl();
+var MaterialQuizGroup = function MaterialQuizGroup() {
+  var intl$1 = intl.useRawEliceIntl();
   // context
-  const {
-    materialQuiz,
-    userId,
-    vertical,
-    isLongPassage
-  } = MaterialQuizContext.useMaterialQuizState();
-  const {
-    onSubmit,
-    onNext,
-    refreshOrgMaterialQuiz,
-    onDirty
-  } = MaterialQuizContext.useMaterialQuizDispatch();
-  const theme = material.useTheme();
-  const [groupList, setGroupList] = React.useState([]);
-  const [optionList, setOptionList] = React.useState([]);
-  const [currentAnswerList, setCurrentAnswerList] = React.useState([]);
-  const [currentOptionList, setCurrentOptionList] = React.useState([]);
-  const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
-  const [submitStatus, setSubmitStatus] = React.useState('idle');
-  const [hasSubmitted, setHasSubmitted] = React.useState(false);
-  const isNextActive = hasSubmitted && typeof onNext === 'function';
-  const isDisabled = !flattenDeep(currentAnswerList).length || !!userId;
-  const {
-    questionRef,
-    containerRef
-  } = useCaculatePassage.useCaculatePassage();
-  const isVisibleSideBySide = !vertical && isLongPassage;
+  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
+    materialQuiz = _useMaterialQuizState.materialQuiz,
+    userId = _useMaterialQuizState.userId,
+    vertical = _useMaterialQuizState.vertical,
+    isLongPassage = _useMaterialQuizState.isLongPassage;
+  var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
+    onSubmit = _useMaterialQuizDispa.onSubmit,
+    onNext = _useMaterialQuizDispa.onNext,
+    refreshOrgMaterialQuiz = _useMaterialQuizDispa.refreshOrgMaterialQuiz,
+    onDirty = _useMaterialQuizDispa.onDirty;
+  var theme = material.useTheme();
+  var _React$useState = React__default.default.useState([]),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    groupList = _React$useState2[0],
+    setGroupList = _React$useState2[1];
+  var _React$useState3 = React__default.default.useState([]),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    optionList = _React$useState4[0],
+    setOptionList = _React$useState4[1];
+  var _React$useState5 = React__default.default.useState([]),
+    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
+    currentAnswerList = _React$useState6[0],
+    setCurrentAnswerList = _React$useState6[1];
+  var _React$useState7 = React__default.default.useState([]),
+    _React$useState8 = _rollupPluginBabelHelpers.slicedToArray(_React$useState7, 2),
+    currentOptionList = _React$useState8[0],
+    setCurrentOptionList = _React$useState8[1];
+  var _React$useState9 = React__default.default.useState(),
+    _React$useState10 = _rollupPluginBabelHelpers.slicedToArray(_React$useState9, 2),
+    materialQuizResponse = _React$useState10[0],
+    setMaterialQuizResponse = _React$useState10[1];
+  var _React$useState11 = React__default.default.useState('idle'),
+    _React$useState12 = _rollupPluginBabelHelpers.slicedToArray(_React$useState11, 2),
+    submitStatus = _React$useState12[0],
+    setSubmitStatus = _React$useState12[1];
+  var _React$useState13 = React__default.default.useState(false),
+    _React$useState14 = _rollupPluginBabelHelpers.slicedToArray(_React$useState13, 2),
+    hasSubmitted = _React$useState14[0],
+    setHasSubmitted = _React$useState14[1];
+  var isNextActive = hasSubmitted && typeof onNext === 'function';
+  var isDisabled = !flattenDeep__default.default(currentAnswerList).length || !!userId;
+  var _useCaculatePassage = useCaculatePassage.useCaculatePassage(),
+    questionRef = _useCaculatePassage.questionRef,
+    containerRef = _useCaculatePassage.containerRef;
+  var isVisibleSideBySide = !vertical && isLongPassage;
   /**
    *
    */
-  const getCurrentAnswer = (answerInfo, materialOptionList, materialGroupList) => {
+  var getCurrentAnswer = function getCurrentAnswer(answerInfo, materialOptionList, materialGroupList) {
     if (answerInfo.length) {
-      const userAnswerList = answerInfo.map(answers => answers.map(answer => ({
-        order: answer,
-        options: materialOptionList[answer]
-      })));
+      var userAnswerList = answerInfo.map(function (answers) {
+        return answers.map(function (answer) {
+          return {
+            order: answer,
+            options: materialOptionList[answer]
+          };
+        });
+      });
       if (answerInfo.length !== materialGroupList.length) {
-        const deficientAnswerList = new Array(materialGroupList.length - answerInfo.length).fill([]);
-        return [...userAnswerList, ...deficientAnswerList];
+        var deficientAnswerList = new Array(materialGroupList.length - answerInfo.length).fill([]);
+        return [].concat(_rollupPluginBabelHelpers.toConsumableArray(userAnswerList), _rollupPluginBabelHelpers.toConsumableArray(deficientAnswerList));
       }
       return userAnswerList;
     } else {
@@ -77,26 +107,34 @@ const MaterialQuizGroup = () => {
   /**
    *
    */
-  const initQuizGroupInfo = React.useCallback(answerInfo => {
+  var initQuizGroupInfo = React__default.default.useCallback(function (answerInfo) {
     var _a, _b;
     if (!materialQuiz) {
       return;
     }
-    const materialOptionList = (_a = materialQuiz.options) !== null && _a !== void 0 ? _a : []; // options
-    const materialGroupList = (_b = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.groups) !== null && _b !== void 0 ? _b : []; // groups
-    const flattenAnswerList = flattenDeep(answerInfo);
-    const userAnswerList = getCurrentAnswer(answerInfo, materialOptionList, materialGroupList);
-    const userOptionList = materialOptionList.filter((_, index) => !flattenAnswerList.includes(index)).map(option => {
-      const order = materialOptionList.findIndex(optionInfo => optionInfo === option);
+    var materialOptionList = (_a = materialQuiz.options) !== null && _a !== void 0 ? _a : []; // options
+    var materialGroupList = (_b = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.groups) !== null && _b !== void 0 ? _b : []; // groups
+    var flattenAnswerList = flattenDeep__default.default(answerInfo);
+    var userAnswerList = getCurrentAnswer(answerInfo, materialOptionList, materialGroupList);
+    var userOptionList = materialOptionList.filter(function (_, index) {
+      return !flattenAnswerList.includes(index);
+    }).map(function (option) {
+      var order = materialOptionList.findIndex(function (optionInfo) {
+        return optionInfo === option;
+      });
       return {
-        order,
+        order: order,
         options: materialOptionList[order]
       };
     });
-    const optionList = materialOptionList.map((option, index) => ({
-      order: materialOptionList.findIndex(optionInfo => optionInfo === option),
-      options: materialOptionList[index]
-    }));
+    var optionList = materialOptionList.map(function (option, index) {
+      return {
+        order: materialOptionList.findIndex(function (optionInfo) {
+          return optionInfo === option;
+        }),
+        options: materialOptionList[index]
+      };
+    });
     setGroupList(materialGroupList);
     setOptionList(optionList);
     setCurrentAnswerList(userAnswerList);
@@ -105,60 +143,102 @@ const MaterialQuizGroup = () => {
   /**
    * submit handler
    */
-  const handleSubmit = async () => {
-    if (!materialQuiz) {
-      return;
-    }
-    setSubmitStatus('pending');
-    try {
-      const {
-        quizResponseId
-      } = await apiClient.postOrgMaterialQuizResponseAdd({
-        materialQuizId: materialQuiz.id,
-        answer: currentAnswerList.map(answers => answers.map(answer => answer.order))
-      });
-      const {
-        quizResponse
-      } = await apiClient.getOrgMaterialQuizResponseGet({
-        quizResponseId
-      });
-      setMaterialQuizResponse(quizResponse);
-      void refreshOrgMaterialQuiz();
-      setHasSubmitted(true);
-      onSubmit(true, index.getQuizResult(quizResponse));
-      setSubmitStatus('resolved');
-      onDirty(false);
-    } catch (error) {
-      console.error(error);
-      onSubmit(false);
-      setSubmitStatus('rejected');
-    }
-  };
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
+      var _yield$postOrgMateria, quizResponseId, _yield$getOrgMaterial, quizResponse;
+      return _rollupPluginBabelHelpers.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 apiClient.postOrgMaterialQuizResponseAdd({
+              materialQuizId: materialQuiz.id,
+              answer: currentAnswerList.map(function (answers) {
+                return answers.map(function (answer) {
+                  return answer.order;
+                });
+              })
+            });
+          case 6:
+            _yield$postOrgMateria = _context.sent;
+            quizResponseId = _yield$postOrgMateria.quizResponseId;
+            _context.next = 10;
+            return apiClient.getOrgMaterialQuizResponseGet({
+              quizResponseId: quizResponseId
+            });
+          case 10:
+            _yield$getOrgMaterial = _context.sent;
+            quizResponse = _yield$getOrgMaterial.quizResponse;
+            setMaterialQuizResponse(quizResponse);
+            void refreshOrgMaterialQuiz();
+            setHasSubmitted(true);
+            onSubmit(true, index.getQuizResult(quizResponse));
+            setSubmitStatus('resolved');
+            onDirty(false);
+            _context.next = 25;
+            break;
+          case 20:
+            _context.prev = 20;
+            _context.t0 = _context["catch"](3);
+            console.error(_context.t0);
+            onSubmit(false);
+            setSubmitStatus('rejected');
+          case 25:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[3, 20]]);
+    }));
+    return function handleSubmit() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   /**
    *
    */
-  const handleAnswerReset = () => {
-    const cloneAnswerList = cloneDeep(currentAnswerList);
-    const emptyAnswerList = cloneAnswerList.map(() => []);
+  var handleAnswerReset = function handleAnswerReset() {
+    var cloneAnswerList = cloneDeep__default.default(currentAnswerList);
+    var emptyAnswerList = cloneAnswerList.map(function () {
+      return [];
+    });
     setCurrentAnswerList(emptyAnswerList);
     setCurrentOptionList(optionList);
   };
   /**
    *
    */
-  const updateCurrentAnswer = (targetId, dropzoneIndex) => {
-    const selectedUserOption = currentOptionList.find(option => option.order === targetId);
-    const selectedAnswerOption = optionList.find(option => option.order === targetId);
+  var updateCurrentAnswer = function updateCurrentAnswer(targetId, dropzoneIndex) {
+    var selectedUserOption = currentOptionList.find(function (option) {
+      return option.order === targetId;
+    });
+    var selectedAnswerOption = optionList.find(function (option) {
+      return option.order === targetId;
+    });
     if (selectedUserOption) {
-      setCurrentOptionList(prevOptionList => prevOptionList.filter(option => option.order !== selectedUserOption.order));
+      setCurrentOptionList(function (prevOptionList) {
+        return prevOptionList.filter(function (option) {
+          return option.order !== selectedUserOption.order;
+        });
+      });
     }
     if (!selectedAnswerOption) {
       return;
     }
-    setCurrentAnswerList(prevAnswerList => {
-      const cloneAnswerList = cloneDeep(prevAnswerList);
-      const answerList = cloneAnswerList.map(answers => answers.filter(answer => answer.order !== targetId));
-      answerList[dropzoneIndex] = [...answerList[dropzoneIndex], selectedAnswerOption];
+    setCurrentAnswerList(function (prevAnswerList) {
+      var cloneAnswerList = cloneDeep__default.default(prevAnswerList);
+      var answerList = cloneAnswerList.map(function (answers) {
+        return answers.filter(function (answer) {
+          return answer.order !== targetId;
+        });
+      });
+      answerList[dropzoneIndex] = [].concat(_rollupPluginBabelHelpers.toConsumableArray(answerList[dropzoneIndex]), [selectedAnswerOption]);
       return answerList;
     });
     onDirty(true);
@@ -167,54 +247,62 @@ const MaterialQuizGroup = () => {
   /**
    *
    */
-  const updateCurrentOption = targetId => {
+  var updateCurrentOption = function updateCurrentOption(targetId) {
     var _a;
-    const pastTargetZoneIndex = currentAnswerList.findIndex(answer => answer === null || answer === void 0 ? void 0 : answer.find(item => item.order === targetId));
-    const selectedOption = (_a = currentAnswerList[pastTargetZoneIndex]) === null || _a === void 0 ? void 0 : _a.find(answer => answer.order === targetId);
+    var pastTargetZoneIndex = currentAnswerList.findIndex(function (answer) {
+      return answer === null || answer === void 0 ? void 0 : answer.find(function (item) {
+        return item.order === targetId;
+      });
+    });
+    var selectedOption = (_a = currentAnswerList[pastTargetZoneIndex]) === null || _a === void 0 ? void 0 : _a.find(function (answer) {
+      return answer.order === targetId;
+    });
     if (!selectedOption) {
       return;
     }
-    setCurrentAnswerList(prevAnswerList => {
-      const filteredAnswerList = prevAnswerList[pastTargetZoneIndex].filter(answer => answer.order !== selectedOption.order);
+    setCurrentAnswerList(function (prevAnswerList) {
+      var filteredAnswerList = prevAnswerList[pastTargetZoneIndex].filter(function (answer) {
+        return answer.order !== selectedOption.order;
+      });
       prevAnswerList[pastTargetZoneIndex] = filteredAnswerList;
-      return [...prevAnswerList];
+      return _rollupPluginBabelHelpers.toConsumableArray(prevAnswerList);
+    });
+    setCurrentOptionList(function (prevOptionList) {
+      return [].concat(_rollupPluginBabelHelpers.toConsumableArray(prevOptionList), [selectedOption]);
     });
-    setCurrentOptionList(prevOptionList => [...prevOptionList, ...[selectedOption]]);
     onDirty(true);
   };
   //
   //
   // quiz response fetcher
-  React.useEffect(() => {
+  React__default.default.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;
       apiClient.getOrgMaterialQuizResponseGet({
         quizResponseId: materialQuiz.lastQuizResponseId
       }, {
-        signal
-      }).then(response => {
-        const answerInfo = response.quizResponse.answer;
+        signal: signal
+      }).then(function (response) {
+        var answerInfo = response.quizResponse.answer;
         initQuizGroupInfo(answerInfo);
         setMaterialQuizResponse(response.quizResponse);
-      }).catch(error => {
+      }).catch(function (error) {
         console.error(error);
       });
-      return () => controller.abort();
+      return function () {
+        return controller.abort();
+      };
     } else {
-      const answerInfo = [];
+      var answerInfo = [];
       initQuizGroupInfo(answerInfo);
     }
   }, [initQuizGroupInfo, materialQuiz, userId]);
   // Tutoring
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (userId && materialQuiz) {
-      const controller = new AbortController();
-      const {
-        signal
-      } = controller;
+      var controller = new AbortController();
+      var signal = controller.signal;
       apiClient.getOrgMaterialQuizResponseList({
         materialQuizId: materialQuiz.id,
         filterUserIds: [userId],
@@ -223,78 +311,88 @@ const MaterialQuizGroup = () => {
         offset: 0,
         count: 1
       }, {
-        signal
-      }).then(response => {
-        const quizResponse = response.quizResponses[0];
-        const answerInfo = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer;
+        signal: signal
+      }).then(function (response) {
+        var quizResponse = response.quizResponses[0];
+        var answerInfo = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer;
         initQuizGroupInfo(answerInfo !== null && answerInfo !== void 0 ? answerInfo : []);
         setMaterialQuizResponse(quizResponse);
-      }).catch(error => console.error(error));
-      return () => controller.abort();
+      }).catch(function (error) {
+        return console.error(error);
+      });
+      return function () {
+        return controller.abort();
+      };
     }
   }, [initQuizGroupInfo, materialQuiz, userId]);
   /**
    *
    */
-  const renderQuizInfo = () => {
+  var renderQuizInfo = function renderQuizInfo() {
     if (!materialQuiz || isVisibleSideBySide) {
       return null;
     }
-    return React.createElement(blocks.Flex, {
+    return jsxRuntime.jsx(blocks.Flex, {
       marginbottom: "1.5rem",
       id: element.MATERIAL_QUIZ_PASSIVE_ID,
       column: true,
-      ref: questionRef
-    }, React.createElement(MaterialQuizInfo.default, {
-      renderWithBox: false
-    }));
+      ref: questionRef,
+      children: jsxRuntime.jsx(MaterialQuizInfo.default, {
+        renderWithBox: false
+      })
+    });
   };
   //
   //
   //
-  return React.createElement(context.default.Provider, {
+  return jsxRuntime.jsx(context.default.Provider, {
     value: {
-      groupList,
-      optionList,
-      currentOptionList,
-      currentAnswerList,
+      groupList: groupList,
+      optionList: optionList,
+      currentOptionList: currentOptionList,
+      currentAnswerList: currentAnswerList,
       onUpdateAnswer: setCurrentAnswerList,
       onUpdateOption: setCurrentOptionList,
       onUpdateHasSubmitted: setHasSubmitted,
-      onDirty,
-      updateCurrentAnswer,
-      updateCurrentOption,
-      handleAnswerReset
-    }
-  }, React.createElement(QuestionBox.default, {
-    title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
-    onNext: onNext,
-    isNextActive: isNextActive,
-    submitStatus: React.createElement(QuizSubmitStatusText.default, {
-      status: submitStatus
-    }),
-    submitResult: React.createElement(QuizResultBadge.default, {
-      materialQuizResponse: materialQuizResponse
-    }),
-    bodyContainerRef: containerRef,
-    footerActions: [{
-      border: false,
-      disabled: isDisabled,
-      loading: submitStatus === 'pending',
-      tabIndex: 0,
-      transparent: false,
-      onClick: handleSubmit,
-      children: intl$1.formatMessage({
-        id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
+      onDirty: onDirty,
+      updateCurrentAnswer: updateCurrentAnswer,
+      updateCurrentOption: updateCurrentOption,
+      handleAnswerReset: handleAnswerReset
+    },
+    children: jsxRuntime.jsxs(QuestionBox.default, {
+      title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
+      onNext: onNext,
+      isNextActive: isNextActive,
+      submitStatus: jsxRuntime.jsx(QuizSubmitStatusText.default, {
+        status: submitStatus
       }),
-      customStyles: {
-        backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? designTokens.base.color.gray6 : theme.palette.primary.main,
-        color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
-      }
-    }]
-  }, renderQuizInfo(), vertical || isVisibleSideBySide ? React.createElement("div", {
-    id: element.MATERIAL_QUIZ_ANSWER_ID
-  }, React.createElement(MaterialQuizGroupMobile.default, null)) : React.createElement(React.Fragment, null, React.createElement(MaterialQuizGroupDesktop.default, null)), React.createElement(MaterialQuizAnswerExplanation.default, null)));
+      submitResult: jsxRuntime.jsx(QuizResultBadge.default, {
+        materialQuizResponse: materialQuizResponse
+      }),
+      bodyContainerRef: containerRef,
+      footerActions: [{
+        border: false,
+        disabled: isDisabled,
+        loading: submitStatus === 'pending',
+        tabIndex: 0,
+        transparent: false,
+        onClick: handleSubmit,
+        children: intl$1.formatMessage({
+          id: isNextActive ? 'materialQuiz.resubmit' : 'materialQuiz.submit'
+        }),
+        customStyles: {
+          backgroundColor: isNextActive ? theme.palette.secondary.main : isDisabled ? designTokens.base.color.gray6 : theme.palette.primary.main,
+          color: isNextActive ? theme.palette.secondary.contrastText : isDisabled ? designTokens.base.color.gray3 : theme.palette.primary.contrastText
+        }
+      }],
+      children: [renderQuizInfo(), vertical || isVisibleSideBySide ? jsxRuntime.jsx("div", {
+        id: element.MATERIAL_QUIZ_ANSWER_ID,
+        children: jsxRuntime.jsx(MaterialQuizGroupMobile.default, {})
+      }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: jsxRuntime.jsx(MaterialQuizGroupDesktop.default, {})
+      }), jsxRuntime.jsx(MaterialQuizAnswerExplanation.default, {})]
+    })
+  });
 };
 var MaterialQuizGroup$1 = MaterialQuizGroup;