@elice/material-quiz 1.220803.0

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

@@ -0,0 +1,191 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var apiClient = require('@elice/api-client');
+var index = require('../../helpers/index.js');
+require('../shared/QuizDraggbleOption.js');
+require('../shared/QuizDraggbleDummyOption.js');
+var QuestionRadio = require('../shared/question-radio/QuestionRadio.js');
+var QuestionRadioOption = require('../shared/question-radio/QuestionRadioOption.js');
+require('../shared/question-checkbox/QuestionCheckbox.js');
+require('../shared/question-checkbox/QuestionCheckboxOption.js');
+var QuestionBox = require('../shared/QuestionBox.js');
+var StyledMarkdown = require('../shared/StyledMarkdown.js');
+var MaterialQuizContext = require('./context/MaterialQuizContext.js');
+var QuizResultBadge = require('./QuizResultBadge.js');
+var QuizSubmitStatusText = require('./QuizSubmitStatusText.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const MaterialQuizSelectOne = () => {
+  // context
+  const {
+    course,
+    lecture,
+    materialQuiz,
+    userId
+  } = MaterialQuizContext.useMaterialQuizState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialQuiz
+  } = MaterialQuizContext.useMaterialQuizDispatch(); // state
+
+  const intl = reactIntl.useIntl();
+  const [selectedAnswer, setSelectedAnswer] = React__default["default"].useState();
+  const [materialQuizResponse, setMaterialQuizResponse] = React__default["default"].useState();
+  const [submitStatus, setSubmitStatus] = React__default["default"].useState('idle'); // Whether user has clicked any options
+
+  const [isActive, setIsActive] = React__default["default"].useState(false);
+  const [hasSubmitted, setHasSubmitted] = React__default["default"].useState(false); // quiz response fetcher
+
+  React__default["default"].useEffect(() => {
+    if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      apiClient.getOrgMaterialQuizResponseGet({
+        quizResponseId: materialQuiz.lastQuizResponseId
+      }, {
+        signal
+      }).then(response => {
+        setMaterialQuizResponse(response.quizResponse);
+        setSelectedAnswer(typeof response.quizResponse.answer === 'string' ? undefined : response.quizResponse.answer[0]);
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialQuiz, userId]); // quiz response fetcher
+
+  React__default["default"].useEffect(() => {
+    if (userId && materialQuiz) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      apiClient.getOrgMaterialQuizResponseList({
+        materialQuizId: materialQuiz.id,
+        filterUserIds: [userId],
+        isContainOnlyLast: true,
+        isIncludeAnswer: true,
+        offset: 0,
+        count: 1
+      }, {
+        signal
+      }).then(response => {
+        const quizResponse = response.quizResponses[0];
+        setMaterialQuizResponse(quizResponse);
+        setSelectedAnswer(typeof quizResponse.answer === 'string' ? undefined : quizResponse.answer[0]);
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialQuiz, userId]); // submit handler
+
+  const handleSubmit = async () => {
+    if (!materialQuiz) {
+      return;
+    }
+
+    setSubmitStatus('pending');
+
+    try {
+      const {
+        quizResponseId
+      } = await apiClient.postOrgMaterialQuizResponseAdd({
+        materialQuizId: materialQuiz.id,
+        answer: [selectedAnswer]
+      });
+      const {
+        quizResponse
+      } = await apiClient.getOrgMaterialQuizResponseGet({
+        quizResponseId
+      });
+      setIsActive(false);
+      setMaterialQuizResponse(quizResponse);
+      void refreshOrgMaterialQuiz();
+      onSubmit(true, index.getQuizResult(quizResponse));
+      setSubmitStatus('resolved');
+      setHasSubmitted(true);
+    } catch (error) {
+      console.error(error);
+      onSubmit(false);
+      setSubmitStatus('rejected');
+    }
+  };
+
+  return React__default["default"].createElement(QuestionBox["default"], {
+    title: intl.formatMessage({
+      id: 'materialQuiz.myAnswer'
+    }),
+    onNext: onNext,
+    isNextActive: hasSubmitted && typeof onNext === 'function',
+    submitStatus: React__default["default"].createElement(QuizSubmitStatusText, {
+      status: submitStatus
+    }),
+    submitResult: React__default["default"].createElement(QuizResultBadge, {
+      materialQuizResponse: materialQuizResponse
+    }),
+    footerActions: [{
+      border: true,
+      disabled: selectedAnswer === undefined || index.checkUserLectureTestEnded(lecture) || !!userId,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      role: 'primary',
+      onClick: handleSubmit,
+      children: intl.formatMessage({
+        id: 'materialQuiz.submit'
+      })
+    }]
+  }, materialQuiz ? React__default["default"].createElement(QuestionRadio, {
+    selectedValue: selectedAnswer,
+    onSelect: index$1 => {
+      if (index.checkUserLectureTestEnded(lecture) || !!userId) {
+        return;
+      }
+
+      setHasSubmitted(false);
+      setIsActive(true);
+      setSelectedAnswer(index$1);
+    },
+    disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId
+  }, materialQuiz.optionInfo ? materialQuiz.optionInfo.map((option, index$1) => {
+    var _a;
+
+    const getIsSelected = (index, materialQuizResponse) => {
+      var _a;
+
+      if (!materialQuizResponse || typeof materialQuizResponse.answer === 'string') {
+        return false;
+      }
+
+      return (_a = materialQuizResponse.answer.includes(index)) !== null && _a !== void 0 ? _a : false;
+    };
+
+    const status = index.getOptionStatus({
+      materialQuizResponse,
+      isSelected: getIsSelected(index$1, materialQuizResponse),
+      isActive
+    });
+    return React__default["default"].createElement(QuestionRadioOption, {
+      key: index$1,
+      value: index$1,
+      status: status,
+      isAnswer: (_a = !!userId && Array.isArray(materialQuiz.answerInfo) && materialQuiz.answerInfo.includes(index$1)) !== null && _a !== void 0 ? _a : false
+    }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React__default["default"].createElement(StyledMarkdown, {
+      children: option,
+      paddingx: 0,
+      paddingy: 0,
+      dark: false
+    }) : option);
+  }) : null) : null);
+};
+
+module.exports = MaterialQuizSelectOne;

package/cjs/components/material-quiz/MaterialQuizShimmer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MaterialQuizShimmer: React.FC;
+export default MaterialQuizShimmer;

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

@@ -0,0 +1,61 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var MaterialQuizContext = require('./context/MaterialQuizContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledShimmer = styled__default["default"].div.withConfig({
+  componentId: "sc-10uz5tw-0"
+})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;"], ({
+  vertical
+}) => vertical ? '0' : '8px');
+const StyledShimmerHeader = styled__default["default"].div.withConfig({
+  componentId: "sc-10uz5tw-1"
+})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;height:3.5rem;"], designTokens.base.color.navy6);
+const StyledShimmerBody = styled__default["default"].div.withConfig({
+  componentId: "sc-10uz5tw-2"
+})(["padding:1.5rem;background-color:", ";overflow-y:auto;height:100%;"], designTokens.base.color.navy7);
+
+const MaterialQuizShimmer = () => {
+  const {
+    vertical
+  } = MaterialQuizContext.useMaterialQuizState();
+  return React__default["default"].createElement(StyledShimmer, {
+    vertical: vertical
+  }, React__default["default"].createElement(StyledShimmerHeader, null), React__default["default"].createElement(StyledShimmerBody, null, React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "80%",
+    height: '40px'
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1
+  }), React__default["default"].createElement(blocks.Shimmer, {
+    dark: true,
+    borderRadius: '4px',
+    width: "100%",
+    height: '40px'
+  })));
+};
+
+module.exports = MaterialQuizShimmer;

package/cjs/components/material-quiz/MaterialQuizText.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MaterialQuizText: React.FC;
+export default MaterialQuizText;

package/cjs/components/material-quiz/MaterialQuizText.js

@@ -0,0 +1,181 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var index = require('../../helpers/index.js');
+var QuestionBox = require('../shared/QuestionBox.js');
+var MaterialQuizContext = require('./context/MaterialQuizContext.js');
+var QuizResultBadge = require('./QuizResultBadge.js');
+var QuizSubmitStatusText = require('./QuizSubmitStatusText.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledTextarea = styled__default["default"].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;background-color:", ";&::placeholder{color:", ";}&:hover{cursor:", ";}"], designTokens.base.color.navy2, designTokens.base.color.navy5, designTokens.base.color.navy2, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'text');
+const StyledLabel = styled__default["default"].label.withConfig({
+  componentId: "sc-186cnpj-1"
+})(["font-size:0.875rem;margin-bottom:0.5rem;color:", ";"], designTokens.base.color.navy1);
+
+const MaterialQuizText = () => {
+  // context
+  const {
+    lecture,
+    materialQuiz,
+    userId
+  } = MaterialQuizContext.useMaterialQuizState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialQuiz
+  } = MaterialQuizContext.useMaterialQuizDispatch(); // state
+
+  const intl = reactIntl.useIntl();
+  const [materialQuizResponse, setMaterialQuizResponse] = React__default["default"].useState();
+  const [submitStatus, setSubmitStatus] = React__default["default"].useState('idle');
+  const [answer, setAnswer] = React__default["default"].useState('');
+  const [hasSubmitted, setHasSubmitted] = React__default["default"].useState(false); // quiz response fetcher
+
+  React__default["default"].useEffect(() => {
+    if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      apiClient.getOrgMaterialQuizResponseGet({
+        quizResponseId: materialQuiz.lastQuizResponseId
+      }, {
+        signal
+      }).then(response => {
+        setMaterialQuizResponse(response.quizResponse);
+        setAnswer(response.quizResponse.answer);
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialQuiz, userId]); // quiz response fetcher
+
+  React__default["default"].useEffect(() => {
+    if (userId && materialQuiz) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      apiClient.getOrgMaterialQuizResponseList({
+        materialQuizId: materialQuiz.id,
+        filterUserIds: [userId],
+        isContainOnlyLast: true,
+        isIncludeAnswer: true,
+        offset: 0,
+        count: 1
+      }, {
+        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(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialQuiz, userId]); // submit handler
+
+  const handleSubmit = async () => {
+    if (!materialQuiz) {
+      return;
+    }
+
+    setSubmitStatus('pending');
+
+    try {
+      const {
+        quizResponseId
+      } = await apiClient.postOrgMaterialQuizResponseAdd({
+        materialQuizId: materialQuiz.id,
+        answer: JSON.stringify(answer)
+      });
+      const {
+        quizResponse
+      } = await apiClient.getOrgMaterialQuizResponseGet({
+        quizResponseId
+      });
+      setHasSubmitted(true);
+      setMaterialQuizResponse(quizResponse);
+      void refreshOrgMaterialQuiz();
+      onSubmit(true, index.getQuizResult(quizResponse));
+      setSubmitStatus('resolved');
+    } catch (error) {
+      console.error(error);
+      onSubmit(false);
+      setSubmitStatus('rejected');
+    }
+  };
+
+  const commonProps = {
+    type: 'text',
+    autoFocus: answer.length === 0,
+    disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId,
+    placeholder: (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerHint) || intl.formatMessage({
+      id: 'materialQuiz.text.placeholder'
+    }),
+    value: answer,
+    onChange: e => {
+      setHasSubmitted(false);
+      setAnswer(e.target.value);
+    }
+  };
+  return React__default["default"].createElement(QuestionBox["default"], {
+    onNext: onNext,
+    submitResult: React__default["default"].createElement(QuizResultBadge, {
+      materialQuizResponse: materialQuizResponse
+    }),
+    submitStatus: React__default["default"].createElement(QuizSubmitStatusText, {
+      status: submitStatus
+    }),
+    isNextActive: hasSubmitted && typeof onNext === 'function',
+    footerActions: [{
+      border: true,
+      children: intl.formatMessage({
+        id: 'materialQuiz.submit'
+      }),
+      disabled: answer.length === 0 || index.checkUserLectureTestEnded(lecture) || !!userId,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      role: 'primary',
+      onClick: handleSubmit
+    }]
+  }, React__default["default"].createElement(blocks.Flex, {
+    column: true
+  }, userId ? React__default["default"].createElement(StyledLabel, {
+    htmlFor: "quiz-text-answer"
+  }, intl.formatMessage({
+    id: 'materialQuiz.submittedAnswer'
+  })) : null, React__default["default"].createElement(StyledTextarea, Object.assign({
+    id: "quiz-text-answer"
+  }, commonProps))), userId ? React__default["default"].createElement(blocks.Flex, {
+    column: true,
+    margintop: "1rem"
+  }, React__default["default"].createElement(StyledLabel, {
+    htmlFor: "quiz-text-submitted-answer"
+  }, intl.formatMessage({
+    id: 'materialQuiz.answer'
+  })), React__default["default"].createElement(StyledTextarea, {
+    id: "quiz-text-submitted-answer",
+    disabled: true,
+    value: typeof (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerInfo) === 'string' ? materialQuiz.answerInfo : ''
+  })) : null);
+};
+
+module.exports = MaterialQuizText;

package/cjs/components/material-quiz/QuizResultBadge.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { GetOrgMaterialQuizResponseGetResponses } from '@elice/types';
+interface QuizResultStatusProps {
+    materialQuizResponse?: GetOrgMaterialQuizResponseGetResponses['quizResponse'];
+}
+declare const QuizResultBadge: React.FC<QuizResultStatusProps>;
+export default QuizResultBadge;

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var index = require('../../helpers/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const QuizResultBadge = ({
+  materialQuizResponse
+}) => {
+  const intl = reactIntl.useIntl();
+  const status = React__default["default"].useMemo(() => index.getQuizResultStatus(materialQuizResponse), [materialQuizResponse]);
+
+  switch (status) {
+    case index.QuizResultStatus.Correct:
+      return React__default["default"].createElement(blocks.BadgeNext, {
+        type: "quiet",
+        role: "green"
+      }, intl.formatMessage({
+        id: 'materialQuiz.resultStatus.correct'
+      }));
+
+    case index.QuizResultStatus.Wrong:
+      return React__default["default"].createElement(blocks.BadgeNext, {
+        type: "quiet",
+        role: "red"
+      }, intl.formatMessage({
+        id: 'materialQuiz.resultStatus.wrong'
+      }));
+
+    case index.QuizResultStatus.Submitted:
+      return React__default["default"].createElement(blocks.BadgeNext, {
+        type: "quiet",
+        role: "primary"
+      }, intl.formatMessage({
+        id: 'materialQuiz.resultStatus.submitted'
+      }));
+
+    default:
+      return null;
+  }
+};
+
+module.exports = QuizResultBadge;

package/cjs/components/material-quiz/QuizSubmitStatusText.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { APIStatus } from '@elice/material-shared-types';
+interface QuizSubmitStatusTextProps {
+    status: APIStatus;
+}
+declare const QuizSubmitStatusText: React.FC<QuizSubmitStatusTextProps>;
+export default QuizSubmitStatusText;

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

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const QuizSubmitStatusText = ({
+  status
+}) => {
+  const intl = reactIntl.useIntl();
+
+  switch (status) {
+    case 'resolved':
+      return React__default["default"].createElement(blocks.StatusText, {
+        role: "success",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialQuiz.submitStatus.success'
+      }));
+
+    case 'rejected':
+      return React__default["default"].createElement(blocks.StatusText, {
+        role: "danger",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialQuiz.submitStatus.failure'
+      }));
+
+    default:
+      return null;
+  }
+};
+
+module.exports = QuizSubmitStatusText;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { APIStatus } from '@elice/material-shared-types';
+import type { GetOrgCourseGetResponses, GetOrgLectureGetResponses, GetOrgMaterialQuizGetResponses } from '@elice/types';
+export interface State {
+    course?: GetOrgCourseGetResponses['course'];
+    lecture?: GetOrgLectureGetResponses['lecture'];
+    materialQuiz?: GetOrgMaterialQuizGetResponses['materialQuiz'];
+    vertical: boolean;
+    userId?: number;
+    initStatus: APIStatus;
+}
+export declare type MaterialQuizProps = {
+    materialQuizId: number;
+    userId?: number;
+    locale?: string;
+    onSubmit?: (isSucceeded: boolean, isCorrect?: boolean) => void;
+    onNext?: () => void;
+};
+interface MaterialQuizProviderProps extends Omit<MaterialQuizProps, 'locale'> {
+    children: React.ReactNode;
+}
+interface DispatchContextType {
+    onSubmit: (isSucceeded: boolean, isCorrect?: boolean) => void;
+    refreshOrgMaterialQuiz: (signal?: AbortSignal | undefined) => Promise<void>;
+    setVertical: React.Dispatch<React.SetStateAction<boolean>>;
+    onNext?: () => void;
+}
+declare function MaterialQuizProvider({ materialQuizId, userId, onSubmit, onNext, children, }: MaterialQuizProviderProps): JSX.Element;
+declare function useMaterialQuizState(): State;
+declare function useMaterialQuizDispatch(): DispatchContextType;
+export { MaterialQuizProvider, useMaterialQuizState, useMaterialQuizDispatch };