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

package/es/components/material-quiz/MaterialQuizText.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 { Flex } from '@elice/blocks';
@@ -17,76 +15,69 @@ import MaterialQuizInfo from './MaterialQuizInfo.js';
 import QuizResultBadge from './QuizResultBadge.js';
 import QuizSubmitStatusText from './QuizSubmitStatusText.js';
 
-var StyledTextarea = styled.textarea.withConfig({
+const StyledTextarea = styled.textarea.withConfig({
   componentId: "sc-186cnpj-0"
-})(["min-height:12rem;width:100%;padding:1rem 1.375rem;font-size:1rem;color:", ";border-radius:4px;resize:vertical;line-height:1.5rem;outline:none;border:1px solid ", ";background-color:", ";&::placeholder{color:", ";}&:hover{cursor:", ";}"], base.color.navy2, base.color.navy6, base.color.navy7, base.color.navy2, function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled ? 'not-allowed' : 'text';
-});
-var StyledLabel = styled.label.withConfig({
+})(["min-height:12rem;width:100%;padding:1rem 1.375rem;font-size:1rem;color:", ";border-radius:4px;resize:vertical;line-height:1.5rem;outline:none;border:1px solid ", ";background-color:", ";&::placeholder{color:", ";}&:hover{cursor:", ";}"], base.color.navy2, base.color.navy6, base.color.navy7, base.color.navy2, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'text');
+const StyledLabel = styled.label.withConfig({
   componentId: "sc-186cnpj-1"
 })(["font-size:0.875rem;margin-bottom:0.5rem;color:", ";"], base.color.navy1);
-var MaterialQuizText = function MaterialQuizText(_ref2) {
-  var hasInlinePassage = _ref2.hasInlinePassage;
+const MaterialQuizText = ({
+  hasInlinePassage
+}) => {
   // context
-  var _useMaterialQuizState = useMaterialQuizState(),
-    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 {
+    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),
-    materialQuizResponse = _React$useState2[0],
-    setMaterialQuizResponse = _React$useState2[1];
-  var _React$useState3 = React.useState('idle'),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    submitStatus = _React$useState4[0],
-    setSubmitStatus = _React$useState4[1];
-  var _useCaculatePassage = useCaculatePassage(),
-    containerRef = _useCaculatePassage.containerRef,
-    questionRef = _useCaculatePassage.questionRef;
-  var _React$useState5 = React.useState(''),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    answer = _React$useState6[0],
-    setAnswer = _React$useState6[1];
-  var _React$useState7 = React.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    hasSubmitted = _React$useState8[0],
-    setHasSubmitted = _React$useState8[1];
-  var isNextActive = hasSubmitted && typeof onNext === 'function';
-  var isDisabled = answer.length === 0 || checkUserLectureTestEnded(lecture) || !!userId;
+  const intl = useRawEliceIntl();
+  const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
+  const [submitStatus, setSubmitStatus] = React.useState('idle');
+  const {
+    containerRef,
+    questionRef
+  } = useCaculatePassage();
+  const [answer, setAnswer] = React.useState('');
+  const [hasSubmitted, setHasSubmitted] = React.useState(false);
+  const isNextActive = hasSubmitted && typeof onNext === 'function';
+  const isDisabled = answer.length === 0 || checkUserLectureTestEnded(lecture) || !!userId;
   // 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) {
+        signal
+      }).then(response => {
         setMaterialQuizResponse(response.quizResponse);
         setAnswer(response.quizResponse.answer);
-      }).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],
@@ -95,74 +86,48 @@ var MaterialQuizText = function MaterialQuizText(_ref2) {
         offset: 0,
         count: 1
       }, {
-        signal: signal
-      }).then(function (response) {
-        var quizResponse = response.quizResponses[0];
+        signal
+      }).then(response => {
+        const quizResponse = response.quizResponses[0];
         setMaterialQuizResponse(quizResponse);
         setAnswer(typeof (quizResponse === null || quizResponse === void 0 ? void 0 : quizResponse.answer) === 'string' ? quizResponse.answer : '');
-      }).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 _ref3 = _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: JSON.stringify(answer)
-            });
-          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;
-            setHasSubmitted(true);
-            setMaterialQuizResponse(quizResponse);
-            void refreshOrgMaterialQuiz();
-            onSubmit(true, 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 _ref3.apply(this, arguments);
-    };
-  }();
-  var commonProps = {
+  const handleSubmit = async () => {
+    if (!materialQuiz) {
+      return;
+    }
+    setSubmitStatus('pending');
+    try {
+      const {
+        quizResponseId
+      } = await postOrgMaterialQuizResponseAdd({
+        materialQuizId: materialQuiz.id,
+        answer: JSON.stringify(answer)
+      });
+      const {
+        quizResponse
+      } = await getOrgMaterialQuizResponseGet({
+        quizResponseId
+      });
+      setHasSubmitted(true);
+      setMaterialQuizResponse(quizResponse);
+      void refreshOrgMaterialQuiz();
+      onSubmit(true, getQuizResult(quizResponse));
+      setSubmitStatus('resolved');
+      onDirty(false);
+    } catch (error) {
+      console.error(error);
+      onSubmit(false);
+      setSubmitStatus('rejected');
+    }
+  };
+  const commonProps = {
     type: 'text',
     autoFocus: answer.length === 0,
     disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId,
@@ -170,20 +135,20 @@ var MaterialQuizText = function MaterialQuizText(_ref2) {
       id: 'materialQuiz.text.placeholder'
     }),
     value: answer,
-    onChange: function onChange(e) {
+    onChange: e => {
       setHasSubmitted(false);
       setAnswer(e.target.value);
       onDirty(true);
     }
   };
-  return jsx(QuestionBox, {
+  return React.createElement(QuestionBox, {
     title: materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.questionTitle,
     titlePrefix: "Q.",
     onNext: onNext,
-    submitResult: jsx(QuizResultBadge, {
+    submitResult: React.createElement(QuizResultBadge, {
       materialQuizResponse: materialQuizResponse
     }),
-    submitStatus: jsx(QuizSubmitStatusText, {
+    submitStatus: React.createElement(QuizSubmitStatusText, {
       status: submitStatus
     }),
     isNextActive: isNextActive,
@@ -202,45 +167,37 @@ var MaterialQuizText = function MaterialQuizText(_ref2) {
         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
-        })
-      }), jsxs("div", {
-        id: MATERIAL_QUIZ_ANSWER_ID,
-        children: [jsxs(Flex, {
-          column: true,
-          children: [userId ? jsx(StyledLabel, {
-            htmlFor: "quiz-text-answer",
-            children: intl.formatMessage({
-              id: 'materialQuiz.submittedAnswer'
-            })
-          }) : null, jsx(StyledTextarea, Object.assign({
-            id: "quiz-text-answer"
-          }, commonProps))]
-        }), userId ? jsxs(Flex, {
-          column: true,
-          margintop: "1rem",
-          children: [jsx(StyledLabel, {
-            htmlFor: "quiz-text-submitted-answer",
-            children: intl.formatMessage({
-              id: 'materialQuiz.answer'
-            })
-          }), jsx(StyledTextarea, {
-            id: "quiz-text-submitted-answer",
-            disabled: true,
-            value: typeof (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo) === 'string' ? materialQuiz.answerInfo : ''
-          })]
-        }) : null]
-      }), jsx(MaterialQuizAnswerExplanation, {})]
-    })
-  });
+    }]
+  }, 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(Flex, {
+    column: true
+  }, userId ? React.createElement(StyledLabel, {
+    htmlFor: "quiz-text-answer"
+  }, intl.formatMessage({
+    id: 'materialQuiz.submittedAnswer'
+  })) : null, React.createElement(StyledTextarea, Object.assign({
+    id: "quiz-text-answer"
+  }, commonProps))), userId ? React.createElement(Flex, {
+    column: true,
+    margintop: "1rem"
+  }, React.createElement(StyledLabel, {
+    htmlFor: "quiz-text-submitted-answer"
+  }, intl.formatMessage({
+    id: 'materialQuiz.answer'
+  })), React.createElement(StyledTextarea, {
+    id: "quiz-text-submitted-answer",
+    disabled: true,
+    value: typeof (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo) === 'string' ? materialQuiz.answerInfo : ''
+  })) : null), React.createElement(MaterialQuizAnswerExplanation, null)));
 };
 
 export { MaterialQuizText as default };

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

@@ -1,4 +1,3 @@
-import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { BadgeNext } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
@@ -6,43 +5,39 @@ import styled from 'styled-components';
 import { getQuizResultStatus, QuizResultStatus } from '../../helpers/index.js';
 import { CORRECT_BACKGROUND_COLOR, CORRECT_TEXT_COLOR, WRONG_BACKGROUND_COLOR, WRONG_TEXT_COLOR } from './constants/color.js';
 
-var StyledGreenBadgeNext = styled(BadgeNext).withConfig({
+const StyledGreenBadgeNext = styled(BadgeNext).withConfig({
   componentId: "sc-1iksspv-0"
 })(["background-color:", ";color:", ";"], CORRECT_BACKGROUND_COLOR, CORRECT_TEXT_COLOR);
-var StyledRedBadgeNext = styled(BadgeNext).withConfig({
+const StyledRedBadgeNext = styled(BadgeNext).withConfig({
   componentId: "sc-1iksspv-1"
 })(["background-color:", ";color:", ";"], WRONG_BACKGROUND_COLOR, WRONG_TEXT_COLOR);
-var QuizResultBadge = function QuizResultBadge(_ref) {
-  var materialQuizResponse = _ref.materialQuizResponse;
-  var intl = useRawEliceIntl();
-  var status = React.useMemo(function () {
-    return getQuizResultStatus(materialQuizResponse);
-  }, [materialQuizResponse]);
+const QuizResultBadge = ({
+  materialQuizResponse
+}) => {
+  const intl = useRawEliceIntl();
+  const status = React.useMemo(() => getQuizResultStatus(materialQuizResponse), [materialQuizResponse]);
   switch (status) {
     case QuizResultStatus.Correct:
-      return jsx(StyledGreenBadgeNext, {
+      return React.createElement(StyledGreenBadgeNext, {
         type: "quiet",
-        role: "green",
-        children: intl.formatMessage({
-          id: 'materialQuiz.resultStatus.correct'
-        })
-      });
+        role: "green"
+      }, intl.formatMessage({
+        id: 'materialQuiz.resultStatus.correct'
+      }));
     case QuizResultStatus.Wrong:
-      return jsx(StyledRedBadgeNext, {
+      return React.createElement(StyledRedBadgeNext, {
         type: "quiet",
-        role: "red",
-        children: intl.formatMessage({
-          id: 'materialQuiz.resultStatus.wrong'
-        })
-      });
+        role: "red"
+      }, intl.formatMessage({
+        id: 'materialQuiz.resultStatus.wrong'
+      }));
     case QuizResultStatus.Submitted:
-      return jsx(BadgeNext, {
+      return React.createElement(BadgeNext, {
         type: "quiet",
-        role: "primary",
-        children: intl.formatMessage({
-          id: 'materialQuiz.resultStatus.submitted'
-        })
-      });
+        role: "primary"
+      }, intl.formatMessage({
+        id: 'materialQuiz.resultStatus.submitted'
+      }));
     default:
       return null;
   }

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

@@ -1,32 +1,31 @@
-import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { StatusText } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import styled from 'styled-components';
 import { SUCCESS_TEXT_COLOR } from './constants/color.js';
 
-var StyledSuccessStatusText = styled(StatusText).withConfig({
+const StyledSuccessStatusText = styled(StatusText).withConfig({
   componentId: "sc-1obyi4p-0"
 })(["color:", ";"], SUCCESS_TEXT_COLOR);
-var QuizSubmitStatusText = function QuizSubmitStatusText(_ref) {
-  var status = _ref.status;
-  var intl = useRawEliceIntl();
+const QuizSubmitStatusText = ({
+  status
+}) => {
+  const intl = useRawEliceIntl();
   switch (status) {
     case 'resolved':
-      return jsx(StyledSuccessStatusText, {
+      return React.createElement(StyledSuccessStatusText, {
         role: "success",
-        size: "small",
-        children: intl.formatMessage({
-          id: 'materialQuiz.submitStatus.success'
-        })
-      });
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialQuiz.submitStatus.success'
+      }));
     case 'rejected':
-      return jsx(StatusText, {
+      return React.createElement(StatusText, {
         role: "danger",
-        size: "small",
-        children: intl.formatMessage({
-          id: 'materialQuiz.submitStatus.failure'
-        })
-      });
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialQuiz.submitStatus.failure'
+      }));
     default:
       return null;
   }

package/es/components/material-quiz/constants/color.js

@@ -1,9 +1,9 @@
 import { colors } from '@elice/mui-system';
 
-var CORRECT_TEXT_COLOR = colors.green[800];
-var CORRECT_BACKGROUND_COLOR = colors.green[50];
-var WRONG_TEXT_COLOR = colors.red[800];
-var WRONG_BACKGROUND_COLOR = colors.red[50];
-var SUCCESS_TEXT_COLOR = colors.green[400];
+const CORRECT_TEXT_COLOR = colors.green[800];
+const CORRECT_BACKGROUND_COLOR = colors.green[50];
+const WRONG_TEXT_COLOR = colors.red[800];
+const WRONG_BACKGROUND_COLOR = colors.red[50];
+const SUCCESS_TEXT_COLOR = colors.green[400];
 
 export { CORRECT_BACKGROUND_COLOR, CORRECT_TEXT_COLOR, SUCCESS_TEXT_COLOR, WRONG_BACKGROUND_COLOR, WRONG_TEXT_COLOR };

package/es/components/material-quiz/context/MaterialQuizContext.d.ts

@@ -31,7 +31,7 @@ interface DispatchContextType {
     setIsLongPassage: React.Dispatch<React.SetStateAction<boolean>>;
     setIsInitialLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
-declare function MaterialQuizProvider({ materialQuizId, userId, onSubmit, onDirty, onNext, children, }: MaterialQuizProviderProps): JSX.Element;
+declare function MaterialQuizProvider({ materialQuizId, userId, onSubmit, onDirty, onNext, children, }: MaterialQuizProviderProps): React.JSX.Element;
 declare function useMaterialQuizState(): State;
 declare function useMaterialQuizDispatch(): DispatchContextType;
 export { MaterialQuizProvider, useMaterialQuizState, useMaterialQuizDispatch };