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

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

@@ -2,8 +2,6 @@
 
 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');
@@ -25,79 +23,51 @@ 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);
-
 //
 //
 //
-var MaterialQuizGroup = function MaterialQuizGroup() {
-  var intl$1 = intl.useRawEliceIntl();
+const MaterialQuizGroup = () => {
+  const intl$1 = intl.useRawEliceIntl();
   // context
-  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 {
+    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 getCurrentAnswer = function getCurrentAnswer(answerInfo, materialOptionList, materialGroupList) {
+  const getCurrentAnswer = (answerInfo, materialOptionList, materialGroupList) => {
     if (answerInfo.length) {
-      var userAnswerList = answerInfo.map(function (answers) {
-        return answers.map(function (answer) {
-          return {
-            order: answer,
-            options: materialOptionList[answer]
-          };
-        });
-      });
+      const userAnswerList = answerInfo.map(answers => answers.map(answer => ({
+        order: answer,
+        options: materialOptionList[answer]
+      })));
       if (answerInfo.length !== materialGroupList.length) {
-        var deficientAnswerList = new Array(materialGroupList.length - answerInfo.length).fill([]);
-        return [].concat(_rollupPluginBabelHelpers.toConsumableArray(userAnswerList), _rollupPluginBabelHelpers.toConsumableArray(deficientAnswerList));
+        const deficientAnswerList = new Array(materialGroupList.length - answerInfo.length).fill([]);
+        return [...userAnswerList, ...deficientAnswerList];
       }
       return userAnswerList;
     } else {
@@ -107,34 +77,26 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
   /**
    *
    */
-  var initQuizGroupInfo = React__default.default.useCallback(function (answerInfo) {
+  const initQuizGroupInfo = React.useCallback(answerInfo => {
     var _a, _b;
     if (!materialQuiz) {
       return;
     }
-    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;
-      });
+    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);
       return {
-        order: order,
+        order,
         options: materialOptionList[order]
       };
     });
-    var optionList = materialOptionList.map(function (option, index) {
-      return {
-        order: materialOptionList.findIndex(function (optionInfo) {
-          return optionInfo === option;
-        }),
-        options: materialOptionList[index]
-      };
-    });
+    const optionList = materialOptionList.map((option, index) => ({
+      order: materialOptionList.findIndex(optionInfo => optionInfo === option),
+      options: materialOptionList[index]
+    }));
     setGroupList(materialGroupList);
     setOptionList(optionList);
     setCurrentAnswerList(userAnswerList);
@@ -143,102 +105,60 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
   /**
    * submit handler
    */
-  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 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 handleAnswerReset = function handleAnswerReset() {
-    var cloneAnswerList = cloneDeep__default.default(currentAnswerList);
-    var emptyAnswerList = cloneAnswerList.map(function () {
-      return [];
-    });
+  const handleAnswerReset = () => {
+    const cloneAnswerList = cloneDeep(currentAnswerList);
+    const emptyAnswerList = cloneAnswerList.map(() => []);
     setCurrentAnswerList(emptyAnswerList);
     setCurrentOptionList(optionList);
   };
   /**
    *
    */
-  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;
-    });
+  const updateCurrentAnswer = (targetId, dropzoneIndex) => {
+    const selectedUserOption = currentOptionList.find(option => option.order === targetId);
+    const selectedAnswerOption = optionList.find(option => option.order === targetId);
     if (selectedUserOption) {
-      setCurrentOptionList(function (prevOptionList) {
-        return prevOptionList.filter(function (option) {
-          return option.order !== selectedUserOption.order;
-        });
-      });
+      setCurrentOptionList(prevOptionList => prevOptionList.filter(option => option.order !== selectedUserOption.order));
     }
     if (!selectedAnswerOption) {
       return;
     }
-    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]);
+    setCurrentAnswerList(prevAnswerList => {
+      const cloneAnswerList = cloneDeep(prevAnswerList);
+      const answerList = cloneAnswerList.map(answers => answers.filter(answer => answer.order !== targetId));
+      answerList[dropzoneIndex] = [...answerList[dropzoneIndex], selectedAnswerOption];
       return answerList;
     });
     onDirty(true);
@@ -247,62 +167,54 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
   /**
    *
    */
-  var updateCurrentOption = function updateCurrentOption(targetId) {
+  const updateCurrentOption = targetId => {
     var _a;
-    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;
-    });
+    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);
     if (!selectedOption) {
       return;
     }
-    setCurrentAnswerList(function (prevAnswerList) {
-      var filteredAnswerList = prevAnswerList[pastTargetZoneIndex].filter(function (answer) {
-        return answer.order !== selectedOption.order;
-      });
+    setCurrentAnswerList(prevAnswerList => {
+      const filteredAnswerList = prevAnswerList[pastTargetZoneIndex].filter(answer => answer.order !== selectedOption.order);
       prevAnswerList[pastTargetZoneIndex] = filteredAnswerList;
-      return _rollupPluginBabelHelpers.toConsumableArray(prevAnswerList);
-    });
-    setCurrentOptionList(function (prevOptionList) {
-      return [].concat(_rollupPluginBabelHelpers.toConsumableArray(prevOptionList), [selectedOption]);
+      return [...prevAnswerList];
     });
+    setCurrentOptionList(prevOptionList => [...prevOptionList, ...[selectedOption]]);
     onDirty(true);
   };
   //
   //
   // quiz response fetcher
-  React__default.default.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;
       apiClient.getOrgMaterialQuizResponseGet({
         quizResponseId: materialQuiz.lastQuizResponseId
       }, {
-        signal: signal
-      }).then(function (response) {
-        var answerInfo = response.quizResponse.answer;
+        signal
+      }).then(response => {
+        const answerInfo = response.quizResponse.answer;
         initQuizGroupInfo(answerInfo);
         setMaterialQuizResponse(response.quizResponse);
-      }).catch(function (error) {
+      }).catch(error => {
         console.error(error);
       });
-      return function () {
-        return controller.abort();
-      };
+      return () => controller.abort();
     } else {
-      var answerInfo = [];
+      const answerInfo = [];
       initQuizGroupInfo(answerInfo);
     }
   }, [initQuizGroupInfo, materialQuiz, userId]);
   // Tutoring
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     if (userId && materialQuiz) {
-      var controller = new AbortController();
-      var signal = controller.signal;
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
       apiClient.getOrgMaterialQuizResponseList({
         materialQuizId: materialQuiz.id,
         filterUserIds: [userId],
@@ -311,88 +223,78 @@ var MaterialQuizGroup = function MaterialQuizGroup() {
         offset: 0,
         count: 1
       }, {
-        signal: signal
-      }).then(function (response) {
-        var quizResponse = response.quizResponses[0];
-        var answerInfo = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer;
+        signal
+      }).then(response => {
+        const quizResponse = response.quizResponses[0];
+        const answerInfo = quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer;
         initQuizGroupInfo(answerInfo !== null && answerInfo !== void 0 ? answerInfo : []);
         setMaterialQuizResponse(quizResponse);
-      }).catch(function (error) {
-        return console.error(error);
-      });
-      return function () {
-        return controller.abort();
-      };
+      }).catch(error => console.error(error));
+      return () => controller.abort();
     }
   }, [initQuizGroupInfo, materialQuiz, userId]);
   /**
    *
    */
-  var renderQuizInfo = function renderQuizInfo() {
+  const renderQuizInfo = () => {
     if (!materialQuiz || isVisibleSideBySide) {
       return null;
     }
-    return jsxRuntime.jsx(blocks.Flex, {
+    return React.createElement(blocks.Flex, {
       marginbottom: "1.5rem",
       id: element.MATERIAL_QUIZ_PASSIVE_ID,
       column: true,
-      ref: questionRef,
-      children: jsxRuntime.jsx(MaterialQuizInfo.default, {
-        renderWithBox: false
-      })
-    });
+      ref: questionRef
+    }, React.createElement(MaterialQuizInfo.default, {
+      renderWithBox: false
+    }));
   };
   //
   //
   //
-  return jsxRuntime.jsx(context.default.Provider, {
+  return React.createElement(context.default.Provider, {
     value: {
-      groupList: groupList,
-      optionList: optionList,
-      currentOptionList: currentOptionList,
-      currentAnswerList: currentAnswerList,
+      groupList,
+      optionList,
+      currentOptionList,
+      currentAnswerList,
       onUpdateAnswer: setCurrentAnswerList,
       onUpdateOption: setCurrentOptionList,
       onUpdateHasSubmitted: setHasSubmitted,
-      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
-      }),
-      submitResult: jsxRuntime.jsx(QuizResultBadge.default, {
-        materialQuizResponse: materialQuizResponse
+      onDirty,
+      updateCurrentAnswer,
+      updateCurrentOption,
+      handleAnswerReset
+    }
+  }, React.createElement(QuestionBox.default, {
+    title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.title,
+    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'
       }),
-      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, {})]
-    })
-  });
+      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)));
 };
 var MaterialQuizGroup$1 = MaterialQuizGroup;