@elice/material-quiz 1.220803.0

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd } from '@elice/api-client';
+import { checkUserLectureTestEnded, getOptionStatus, getQuizResult } from '../../helpers/index.js';
+import '../shared/QuizDraggbleOption.js';
+import '../shared/QuizDraggbleDummyOption.js';
+import QuestionRadio from '../shared/question-radio/QuestionRadio.js';
+import QuestionRadioOption from '../shared/question-radio/QuestionRadioOption.js';
+import '../shared/question-checkbox/QuestionCheckbox.js';
+import '../shared/question-checkbox/QuestionCheckboxOption.js';
+import QuestionBox from '../shared/QuestionBox.js';
+import StyledMarkdown from '../shared/StyledMarkdown.js';
+import { useMaterialQuizState, useMaterialQuizDispatch } from './context/MaterialQuizContext.js';
+import QuizResultBadge from './QuizResultBadge.js';
+import QuizSubmitStatusText from './QuizSubmitStatusText.js';
+
+const MaterialQuizSelectOne = () => {
+  // context
+  const {
+    course,
+    lecture,
+    materialQuiz,
+    userId
+  } = useMaterialQuizState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialQuiz
+  } = useMaterialQuizDispatch(); // state
+
+  const intl = useIntl();
+  const [selectedAnswer, setSelectedAnswer] = React.useState();
+  const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
+  const [submitStatus, setSubmitStatus] = React.useState('idle'); // Whether user has clicked any options
+
+  const [isActive, setIsActive] = React.useState(false);
+  const [hasSubmitted, setHasSubmitted] = React.useState(false); // quiz response fetcher
+
+  React.useEffect(() => {
+    if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      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.useEffect(() => {
+    if (userId && materialQuiz) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      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 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);
+    } catch (error) {
+      console.error(error);
+      onSubmit(false);
+      setSubmitStatus('rejected');
+    }
+  };
+
+  return React.createElement(QuestionBox, {
+    title: intl.formatMessage({
+      id: 'materialQuiz.myAnswer'
+    }),
+    onNext: onNext,
+    isNextActive: hasSubmitted && typeof onNext === 'function',
+    submitStatus: React.createElement(QuizSubmitStatusText, {
+      status: submitStatus
+    }),
+    submitResult: React.createElement(QuizResultBadge, {
+      materialQuizResponse: materialQuizResponse
+    }),
+    footerActions: [{
+      border: true,
+      disabled: selectedAnswer === undefined || checkUserLectureTestEnded(lecture) || !!userId,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      role: 'primary',
+      onClick: handleSubmit,
+      children: intl.formatMessage({
+        id: 'materialQuiz.submit'
+      })
+    }]
+  }, materialQuiz ? React.createElement(QuestionRadio, {
+    selectedValue: selectedAnswer,
+    onSelect: index => {
+      if (checkUserLectureTestEnded(lecture) || !!userId) {
+        return;
+      }
+
+      setHasSubmitted(false);
+      setIsActive(true);
+      setSelectedAnswer(index);
+    },
+    disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId
+  }, materialQuiz.optionInfo ? materialQuiz.optionInfo.map((option, index) => {
+    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 = getOptionStatus({
+      materialQuizResponse,
+      isSelected: getIsSelected(index, materialQuizResponse),
+      isActive
+    });
+    return React.createElement(QuestionRadioOption, {
+      key: index,
+      value: index,
+      status: status,
+      isAnswer: (_a = !!userId && Array.isArray(materialQuiz.answerInfo) && materialQuiz.answerInfo.includes(index)) !== null && _a !== void 0 ? _a : false
+    }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React.createElement(StyledMarkdown, {
+      children: option,
+      paddingx: 0,
+      paddingy: 0,
+      dark: false
+    }) : option);
+  }) : null) : null);
+};
+
+export { MaterialQuizSelectOne as default };

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

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

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

@@ -0,0 +1,54 @@
+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';
+
+const StyledShimmer = styled.div.withConfig({
+  componentId: "sc-10uz5tw-0"
+})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;"], ({
+  vertical
+}) => vertical ? '0' : '8px');
+const StyledShimmerHeader = styled.div.withConfig({
+  componentId: "sc-10uz5tw-1"
+})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;height:3.5rem;"], base.color.navy6);
+const StyledShimmerBody = styled.div.withConfig({
+  componentId: "sc-10uz5tw-2"
+})(["padding:1.5rem;background-color:", ";overflow-y:auto;height:100%;"], base.color.navy7);
+
+const MaterialQuizShimmer = () => {
+  const {
+    vertical
+  } = useMaterialQuizState();
+  return React.createElement(StyledShimmer, {
+    vertical: vertical
+  }, React.createElement(StyledShimmerHeader, null), 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 };

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

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

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

@@ -0,0 +1,174 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { getOrgMaterialQuizResponseGet, getOrgMaterialQuizResponseList, postOrgMaterialQuizResponseAdd } from '@elice/api-client';
+import { Flex } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import { checkUserLectureTestEnded, getQuizResult } from '../../helpers/index.js';
+import QuestionBox from '../shared/QuestionBox.js';
+import { useMaterialQuizState, useMaterialQuizDispatch } from './context/MaterialQuizContext.js';
+import QuizResultBadge from './QuizResultBadge.js';
+import QuizSubmitStatusText from './QuizSubmitStatusText.js';
+
+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;background-color:", ";&::placeholder{color:", ";}&:hover{cursor:", ";}"], base.color.navy2, base.color.navy5, 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);
+
+const MaterialQuizText = () => {
+  // context
+  const {
+    lecture,
+    materialQuiz,
+    userId
+  } = useMaterialQuizState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialQuiz
+  } = useMaterialQuizDispatch(); // state
+
+  const intl = useIntl();
+  const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
+  const [submitStatus, setSubmitStatus] = React.useState('idle');
+  const [answer, setAnswer] = React.useState('');
+  const [hasSubmitted, setHasSubmitted] = React.useState(false); // quiz response fetcher
+
+  React.useEffect(() => {
+    if (!userId && (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.lastQuizResponseId)) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      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.useEffect(() => {
+    if (userId && materialQuiz) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      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 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');
+    } catch (error) {
+      console.error(error);
+      onSubmit(false);
+      setSubmitStatus('rejected');
+    }
+  };
+
+  const commonProps = {
+    type: 'text',
+    autoFocus: answer.length === 0,
+    disabled: submitStatus === 'pending' || 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.createElement(QuestionBox, {
+    onNext: onNext,
+    submitResult: React.createElement(QuizResultBadge, {
+      materialQuizResponse: materialQuizResponse
+    }),
+    submitStatus: React.createElement(QuizSubmitStatusText, {
+      status: submitStatus
+    }),
+    isNextActive: hasSubmitted && typeof onNext === 'function',
+    footerActions: [{
+      border: true,
+      children: intl.formatMessage({
+        id: 'materialQuiz.submit'
+      }),
+      disabled: answer.length === 0 || checkUserLectureTestEnded(lecture) || !!userId,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      role: 'primary',
+      onClick: handleSubmit
+    }]
+  }, 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);
+};
+
+export { MaterialQuizText as default };

package/es/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/es/components/material-quiz/QuizResultBadge.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { BadgeNext } from '@elice/blocks';
+import { getQuizResultStatus, QuizResultStatus } from '../../helpers/index.js';
+
+const QuizResultBadge = ({
+  materialQuizResponse
+}) => {
+  const intl = useIntl();
+  const status = React.useMemo(() => getQuizResultStatus(materialQuizResponse), [materialQuizResponse]);
+
+  switch (status) {
+    case QuizResultStatus.Correct:
+      return React.createElement(BadgeNext, {
+        type: "quiet",
+        role: "green"
+      }, intl.formatMessage({
+        id: 'materialQuiz.resultStatus.correct'
+      }));
+
+    case QuizResultStatus.Wrong:
+      return React.createElement(BadgeNext, {
+        type: "quiet",
+        role: "red"
+      }, intl.formatMessage({
+        id: 'materialQuiz.resultStatus.wrong'
+      }));
+
+    case QuizResultStatus.Submitted:
+      return React.createElement(BadgeNext, {
+        type: "quiet",
+        role: "primary"
+      }, intl.formatMessage({
+        id: 'materialQuiz.resultStatus.submitted'
+      }));
+
+    default:
+      return null;
+  }
+};
+
+export { QuizResultBadge as default };

package/es/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/es/components/material-quiz/QuizSubmitStatusText.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { StatusText } from '@elice/blocks';
+
+const QuizSubmitStatusText = ({
+  status
+}) => {
+  const intl = useIntl();
+
+  switch (status) {
+    case 'resolved':
+      return React.createElement(StatusText, {
+        role: "success",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialQuiz.submitStatus.success'
+      }));
+
+    case 'rejected':
+      return React.createElement(StatusText, {
+        role: "danger",
+        size: "small"
+      }, intl.formatMessage({
+        id: 'materialQuiz.submitStatus.failure'
+      }));
+
+    default:
+      return null;
+  }
+};
+
+export { QuizSubmitStatusText as default };

package/es/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 };

package/es/components/material-quiz/context/MaterialQuizContext.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { config, getOrgMaterialQuizGet, getOrgCourseGet, getOrgLectureGet } from '@elice/api-client';
+import { useMaterialConfigApiClientUpdate } from '@elice/material-shared-utils';
+
+const StateContext = React.createContext(undefined);
+const DispatchContext = React.createContext(undefined);
+StateContext.displayName = 'MaterialQuizStateContext';
+DispatchContext.displayName = 'MaterialQuizDispatchContext';
+
+function MaterialQuizProvider({
+  materialQuizId,
+  userId,
+  onSubmit = () => void 0,
+  onNext,
+  children
+}) {
+  const [course, setCourse] = React.useState();
+  const [lecture, setLecture] = React.useState();
+  const [materialQuiz, setMaterialQuiz] = React.useState();
+  const [initStatus, setInitStatus] = React.useState('idle');
+  const [vertical, setVertical] = React.useState(false);
+  const canInit = useMaterialConfigApiClientUpdate(config.init);
+  const init = React.useCallback(async () => {
+    const controller = new AbortController();
+    const {
+      signal
+    } = controller;
+
+    try {
+      setInitStatus('pending'); // fetch materialQuiz
+
+      const {
+        materialQuiz
+      } = await getOrgMaterialQuizGet({
+        materialQuizId
+      }, {
+        signal
+      }); // fetch course
+
+      const {
+        course
+      } = await getOrgCourseGet({
+        courseId: materialQuiz.courseId
+      }, {
+        signal
+      }); // fetch lecture
+
+      const {
+        lecture
+      } = await getOrgLectureGet({
+        lectureId: materialQuiz.lectureId
+      }, {
+        signal
+      });
+      setMaterialQuiz(materialQuiz);
+      setCourse(course);
+      setLecture(lecture);
+      setInitStatus('resolved');
+    } catch (error) {
+      console.error(error);
+      setInitStatus('rejected');
+    }
+
+    return () => controller.abort();
+  }, [materialQuizId]);
+  React.useEffect(() => {
+    if (canInit) {
+      void init();
+    }
+  }, [canInit, init]); //
+  //
+  // materialQuiz refresher
+
+  const refreshOrgMaterialQuiz = React.useCallback(signal => {
+    return getOrgMaterialQuizGet({
+      materialQuizId
+    }, {
+      signal
+    }).then(response => {
+      setMaterialQuiz(response.materialQuiz);
+    }).catch(error => {
+      console.error(error);
+    });
+  }, [materialQuizId]);
+  return React.createElement(StateContext.Provider, {
+    value: {
+      course,
+      lecture,
+      materialQuiz,
+      userId,
+      vertical,
+      initStatus
+    }
+  }, React.createElement(DispatchContext.Provider, {
+    value: {
+      onSubmit,
+      onNext,
+      refreshOrgMaterialQuiz,
+      setVertical
+    }
+  }, children));
+}
+
+function useMaterialQuizState() {
+  const context = React.useContext(StateContext);
+
+  if (context === undefined) {
+    throw new Error('useMaterialQuizState must be used within a MaterialQuizProvider');
+  }
+
+  return context;
+}
+
+function useMaterialQuizDispatch() {
+  const context = React.useContext(DispatchContext);
+
+  if (context === undefined) {
+    throw new Error('useMaterialQuizDispatch must be used within a MaterialQuizProvider');
+  }
+
+  return context;
+}
+
+export { MaterialQuizProvider, useMaterialQuizDispatch, useMaterialQuizState };

package/es/components/material-quiz/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MaterialQuiz } from './MaterialQuiz';
+export { default as MaterialQuizInfo } from './MaterialQuizInfo';
+export type { MaterialQuizProps } from './context/MaterialQuizContext';