@elice/material-survey 1.220803.0

package/es/components/material-survey/MaterialSurveySelectOne.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { getOrgMaterialSurveyResponseGet, getOrgMaterialSurveyResponseList, postOrgMaterialSurveyResponseAdd } from '@elice/api-client';
+import { checkUserLectureTestEnded } from '../../helpers/index.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 StyledMarkdown from '../shared/StyledMarkdown.js';
+import SurveyContentBox from '../shared/SurveyContentBox.js';
+import { useMaterialSurveyState, useMaterialSurveyDispatch } from './context/MaterialSurveyContext.js';
+import SurveyResultBadge from './SurveyResultBadge.js';
+import SurveySubmitStatusText from './SurveySubmitStatusText.js';
+
+const MaterialSurveySelectOne = () => {
+  // context
+  const {
+    course,
+    lecture,
+    materialSurvey,
+    userId
+  } = useMaterialSurveyState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialSurvey
+  } = useMaterialSurveyDispatch(); // state
+
+  const intl = useIntl();
+  const [selectedAnswer, setSelectedAnswer] = React.useState();
+  const [materialSurveyResponse, setMaterialSurveyResponse] = React.useState();
+  const [submitStatus, setSubmitStatus] = React.useState('idle'); // survey response fetcher
+
+  React.useEffect(() => {
+    if (!userId && (materialSurvey === null || materialSurvey === void 0 ? void 0 : materialSurvey.lastSurveyResponseId)) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      getOrgMaterialSurveyResponseGet({
+        surveyResponseId: materialSurvey.lastSurveyResponseId
+      }, {
+        signal
+      }).then(response => {
+        setMaterialSurveyResponse(response.surveyResponse);
+        setSelectedAnswer(typeof response.surveyResponse.answers[0] === 'string' ? undefined : response.surveyResponse.answers[0][0]);
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialSurvey, userId]); // survey response fetcher
+
+  React.useEffect(() => {
+    if (userId && materialSurvey) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      getOrgMaterialSurveyResponseList({
+        materialSurveyId: materialSurvey.id,
+        filterUserIds: [userId],
+        isContainOnlyLast: true,
+        isIncludeAnswer: true,
+        offset: 0,
+        count: 1
+      }, {
+        signal
+      }).then(response => {
+        var _a;
+
+        const surveyResponse = response.surveyResponses[0];
+        setMaterialSurveyResponse(surveyResponse);
+        setSelectedAnswer(typeof (surveyResponse === null || surveyResponse === void 0 ? void 0 : surveyResponse.answers[0]) === 'string' ? undefined : (_a = surveyResponse === null || surveyResponse === void 0 ? void 0 : surveyResponse.answers[0][0]) !== null && _a !== void 0 ? _a : undefined);
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialSurvey, userId]); // submit handler
+
+  const handleSubmit = async () => {
+    if (!materialSurvey) {
+      return;
+    }
+
+    setSubmitStatus('pending');
+
+    try {
+      const {
+        surveyResponseId
+      } = await postOrgMaterialSurveyResponseAdd({
+        materialSurveyId: materialSurvey.id,
+        answers: [[selectedAnswer]]
+      });
+      const {
+        surveyResponse
+      } = await getOrgMaterialSurveyResponseGet({
+        surveyResponseId
+      });
+      setMaterialSurveyResponse(surveyResponse);
+      void refreshOrgMaterialSurvey();
+      onSubmit(true);
+      setSubmitStatus('resolved');
+    } catch (error) {
+      console.error(error);
+      onSubmit(false);
+      setSubmitStatus('rejected');
+    }
+  };
+
+  return React.createElement(SurveyContentBox, {
+    title: intl.formatMessage({
+      id: 'materialSurvey.myAnswer'
+    }),
+    onNext: onNext,
+    submitStatus: React.createElement(SurveySubmitStatusText, {
+      status: submitStatus
+    }),
+    submitResult: React.createElement(SurveyResultBadge, {
+      materialSurveyResponse: materialSurveyResponse
+    }),
+    footerActions: [{
+      border: true,
+      disabled: selectedAnswer === undefined || checkUserLectureTestEnded(lecture) || !!userId,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      role: 'primary',
+      onClick: handleSubmit,
+      children: intl.formatMessage({
+        id: 'materialSurvey.submit'
+      })
+    }]
+  }, React.createElement(QuestionRadio, {
+    selectedValue: selectedAnswer,
+    onSelect: index => {
+      if (checkUserLectureTestEnded(lecture) || !!userId) {
+        return;
+      }
+
+      setSelectedAnswer(index);
+    },
+    disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId
+  }, (materialSurvey === null || materialSurvey === void 0 ? void 0 : materialSurvey.questionInfoList[0].optionInfo) ? materialSurvey.questionInfoList[0].optionInfo.map((option, index) => {
+    return React.createElement(QuestionRadioOption, {
+      key: index,
+      value: index
+    }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInSurveyOptions) ? React.createElement(StyledMarkdown, {
+      dark: false,
+      children: option,
+      paddingx: 0,
+      paddingy: 0
+    }) : option);
+  }) : null));
+};
+
+export { MaterialSurveySelectOne as default };

package/es/components/material-survey/MaterialSurveyShimmer.d.ts

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

package/es/components/material-survey/MaterialSurveyShimmer.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 { useMaterialSurveyState } from './context/MaterialSurveyContext.js';
+
+const StyledShimmer = styled.div.withConfig({
+  componentId: "sc-1gtcofd-0"
+})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;"], ({
+  vertical
+}) => vertical ? '0' : '8px');
+const StyledShimmerHeader = styled.div.withConfig({
+  componentId: "sc-1gtcofd-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-1gtcofd-2"
+})(["padding:1.5rem;background-color:", ";overflow-y:auto;height:100%;"], base.color.navy7);
+
+const MaterialSurveyShimmer = () => {
+  const {
+    vertical
+  } = useMaterialSurveyState();
+  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 { MaterialSurveyShimmer as default };

package/es/components/material-survey/MaterialSurveyText.d.ts

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

package/es/components/material-survey/MaterialSurveyText.js

@@ -0,0 +1,152 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { getOrgMaterialSurveyResponseGet, getOrgMaterialSurveyResponseList, postOrgMaterialSurveyResponseAdd } from '@elice/api-client';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import { checkUserLectureTestEnded } from '../../helpers/index.js';
+import SurveyContentBox from '../shared/SurveyContentBox.js';
+import { useMaterialSurveyState, useMaterialSurveyDispatch } from './context/MaterialSurveyContext.js';
+import SurveyResultBadge from './SurveyResultBadge.js';
+import SurveySubmitStatusText from './SurveySubmitStatusText.js';
+
+const StyledTextarea = styled.textarea.withConfig({
+  componentId: "sc-16tkulg-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 MaterialSurveyText = () => {
+  // context
+  const {
+    lecture,
+    materialSurvey,
+    userId
+  } = useMaterialSurveyState();
+  const {
+    onSubmit,
+    onNext,
+    refreshOrgMaterialSurvey
+  } = useMaterialSurveyDispatch(); // state
+
+  const intl = useIntl();
+  const [materialSurveyResponse, setMaterialSurveyResponse] = React.useState();
+  const [submitStatus, setSubmitStatus] = React.useState('idle');
+  const [answer, setAnswer] = React.useState(''); // survey response fetcher
+
+  React.useEffect(() => {
+    if (!userId && (materialSurvey === null || materialSurvey === void 0 ? void 0 : materialSurvey.lastSurveyResponseId)) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      getOrgMaterialSurveyResponseGet({
+        surveyResponseId: materialSurvey.lastSurveyResponseId
+      }, {
+        signal
+      }).then(response => {
+        setMaterialSurveyResponse(response.surveyResponse);
+        setAnswer(response.surveyResponse.answers[0]);
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialSurvey, userId]); // survey response fetcher
+
+  React.useEffect(() => {
+    if (userId && materialSurvey) {
+      const controller = new AbortController();
+      const {
+        signal
+      } = controller;
+      getOrgMaterialSurveyResponseList({
+        materialSurveyId: materialSurvey.id,
+        filterUserIds: [userId],
+        isContainOnlyLast: true,
+        isIncludeAnswer: true,
+        offset: 0,
+        count: 1
+      }, {
+        signal
+      }).then(response => {
+        const surveyResponse = response.surveyResponses[0];
+        setMaterialSurveyResponse(surveyResponse);
+        setAnswer(typeof (surveyResponse === null || surveyResponse === void 0 ? void 0 : surveyResponse.answers[0]) === 'string' ? surveyResponse.answers[0] : '');
+      }).catch(error => {
+        console.error(error);
+      });
+      return () => controller.abort();
+    }
+  }, [materialSurvey, userId]); // submit handler
+
+  const handleSubmit = async () => {
+    if (!materialSurvey) {
+      return;
+    }
+
+    setSubmitStatus('pending');
+
+    try {
+      const {
+        surveyResponseId
+      } = await postOrgMaterialSurveyResponseAdd({
+        materialSurveyId: materialSurvey.id,
+        answers: [answer]
+      });
+      const {
+        surveyResponse
+      } = await getOrgMaterialSurveyResponseGet({
+        surveyResponseId
+      });
+      setMaterialSurveyResponse(surveyResponse);
+      void refreshOrgMaterialSurvey();
+      onSubmit(true);
+      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: intl.formatMessage({
+      id: 'materialSurvey.text.placeholder'
+    }),
+    value: answer,
+    onChange: e => {
+      setAnswer(e.target.value);
+    }
+  };
+  return React.createElement(SurveyContentBox, {
+    title: intl.formatMessage({
+      id: 'materialSurvey.myAnswer'
+    }),
+    onNext: onNext,
+    submitResult: React.createElement(SurveyResultBadge, {
+      materialSurveyResponse: materialSurveyResponse
+    }),
+    submitStatus: React.createElement(SurveySubmitStatusText, {
+      status: submitStatus
+    }),
+    footerActions: [{
+      border: true,
+      children: intl.formatMessage({
+        id: 'materialSurvey.submit'
+      }),
+      disabled: answer.length === 0 || checkUserLectureTestEnded(lecture) || !!userId,
+      loading: submitStatus === 'pending',
+      tabIndex: 0,
+      transparent: false,
+      role: 'primary',
+      onClick: handleSubmit
+    }]
+  }, React.createElement(StyledTextarea, Object.assign({
+    id: "survey-text-answer"
+  }, commonProps)));
+};
+
+export { MaterialSurveyText as default };

package/es/components/material-survey/SurveyResultBadge.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { GetOrgMaterialSurveyResponseGetResponses } from '@elice/types';
+interface SurveyResultStatusProps {
+    materialSurveyResponse?: GetOrgMaterialSurveyResponseGetResponses['surveyResponse'];
+}
+declare const SurveyResultBadge: React.FC<SurveyResultStatusProps>;
+export default SurveyResultBadge;

package/es/components/material-survey/SurveyResultBadge.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { BadgeNext } from '@elice/blocks';
+import { getSurveyResultStatus, SurveyResultStatus } from '../../helpers/index.js';
+
+const SurveyResultBadge = ({
+  materialSurveyResponse
+}) => {
+  const intl = useIntl();
+  const status = React.useMemo(() => getSurveyResultStatus(materialSurveyResponse), [materialSurveyResponse]);
+
+  switch (status) {
+    case SurveyResultStatus.Submitted:
+      return React.createElement(BadgeNext, {
+        type: "quiet",
+        role: "primary"
+      }, intl.formatMessage({
+        id: 'materialSurvey.resultStatus.submitted'
+      }));
+
+    default:
+      return null;
+  }
+};
+
+export { SurveyResultBadge as default };

package/es/components/material-survey/SurveySubmitStatusText.d.ts

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

package/es/components/material-survey/SurveySubmitStatusText.js

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

package/es/components/material-survey/context/MaterialSurveyContext.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { APIStatus } from '@elice/material-shared-types';
+import type { GetOrgCourseGetResponses, GetOrgLectureGetResponses, GetOrgMaterialSurveyGetResponses } from '@elice/types';
+export interface State {
+    vertical: boolean;
+    initStatus: APIStatus;
+    course?: GetOrgCourseGetResponses['course'];
+    lecture?: GetOrgLectureGetResponses['lecture'];
+    materialSurvey?: GetOrgMaterialSurveyGetResponses['materialSurvey'];
+    userId?: number;
+}
+export declare type MaterialSurveyProps = {
+    materialSurveyId: number;
+    userId?: number;
+    locale?: string;
+    onSubmit?: (isSucceeded: boolean, isCorrect?: boolean) => void;
+    onNext?: () => void;
+};
+interface MaterialSurveyProviderProps extends Omit<MaterialSurveyProps, 'locale'> {
+    children: React.ReactNode;
+}
+interface DispatchContextType {
+    onSubmit: (isSucceeded: boolean, isCorrect?: boolean) => void;
+    refreshOrgMaterialSurvey: (signal?: AbortSignal | undefined) => Promise<void>;
+    setVertical: React.Dispatch<React.SetStateAction<boolean>>;
+    onNext?: () => void;
+}
+declare function MaterialSurveyProvider({ materialSurveyId, userId, onSubmit, onNext, children, }: MaterialSurveyProviderProps): JSX.Element;
+declare function useMaterialSurveyState(): State;
+declare function useMaterialSurveyDispatch(): DispatchContextType;
+export { MaterialSurveyProvider, useMaterialSurveyState, useMaterialSurveyDispatch, };

package/es/components/material-survey/context/MaterialSurveyContext.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { config, getOrgMaterialSurveyGet, 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 = 'MaterialSurveyStateContext';
+DispatchContext.displayName = 'MaterialSurveyDispatchContext';
+
+function MaterialSurveyProvider({
+  materialSurveyId,
+  userId,
+  onSubmit = () => void 0,
+  onNext,
+  children
+}) {
+  const [course, setCourse] = React.useState();
+  const [lecture, setLecture] = React.useState();
+  const [materialSurvey, setMaterialSurvey] = React.useState();
+  const [initStatus, setInitStatus] = React.useState('idle');
+  const [vertical, setVertical] = React.useState(false);
+  const canInit = useMaterialConfigApiClientUpdate(config.init);
+  const doInitilize = React.useCallback(async () => {
+    const controller = new AbortController();
+    const {
+      signal
+    } = controller;
+
+    try {
+      setInitStatus('pending'); // fetch materialSurvey
+
+      const {
+        materialSurvey
+      } = await getOrgMaterialSurveyGet({
+        materialSurveyId
+      }, {
+        signal
+      }); // fetch course
+
+      const {
+        course
+      } = await getOrgCourseGet({
+        courseId: materialSurvey.courseId
+      }, {
+        signal
+      }); // fetch lecture
+
+      const {
+        lecture
+      } = await getOrgLectureGet({
+        lectureId: materialSurvey.lectureId
+      }, {
+        signal
+      });
+      setMaterialSurvey(materialSurvey);
+      setCourse(course);
+      setLecture(lecture);
+      setInitStatus('resolved');
+    } catch (error) {
+      console.error(error);
+      setInitStatus('rejected');
+    }
+
+    return () => controller.abort();
+  }, [materialSurveyId]);
+  React.useEffect(() => {
+    if (canInit) {
+      void doInitilize();
+    }
+  }, [canInit, doInitilize]); //
+  //
+  // materialSurvey refresher
+
+  const refreshOrgMaterialSurvey = React.useCallback(signal => {
+    return getOrgMaterialSurveyGet({
+      materialSurveyId
+    }, {
+      signal
+    }).then(response => {
+      setMaterialSurvey(response.materialSurvey);
+    }).catch(error => {
+      console.error(error);
+    });
+  }, [materialSurveyId]);
+  return React.createElement(StateContext.Provider, {
+    value: {
+      course,
+      lecture,
+      materialSurvey,
+      userId,
+      vertical,
+      initStatus
+    }
+  }, React.createElement(DispatchContext.Provider, {
+    value: {
+      onSubmit,
+      onNext,
+      refreshOrgMaterialSurvey,
+      setVertical
+    }
+  }, children));
+}
+
+function useMaterialSurveyState() {
+  const context = React.useContext(StateContext);
+
+  if (context === undefined) {
+    throw new Error('useMaterialSurveyState must be used within a MaterialSurveyProvider');
+  }
+
+  return context;
+}
+
+function useMaterialSurveyDispatch() {
+  const context = React.useContext(DispatchContext);
+
+  if (context === undefined) {
+    throw new Error('useMaterialSurveyDispatch must be used within a MaterialSurveyProvider');
+  }
+
+  return context;
+}
+
+export { MaterialSurveyProvider, useMaterialSurveyDispatch, useMaterialSurveyState };

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

@@ -0,0 +1,3 @@
+export { default as MaterialSurvey } from './MaterialSurvey';
+export { default as MaterialSurveyInfo } from './MaterialSurveyInfo';
+export type { MaterialSurveyProps } from './context/MaterialSurveyContext';

package/es/components/material-survey-edit/MaterialSurveyEdit.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { MarkdownEditorFileUploadReqFn } from '@elice/markdown';
+import type { GetOrgMaterialSurveyGetResponses } from '@elice/types';
+import type { FormState } from 'react-hook-form';
+export declare type MaterialSurveyEditValue = Pick<GetOrgMaterialSurveyGetResponses['materialSurvey'], 'id' | 'questionInfoList'>;
+export declare type MaterialSurveyEditFormState = Pick<FormState<Record<string, any>>, 'isDirty' | 'isValid'>;
+export interface MaterialSurveyEditProps {
+    /** Value of material survey edit form. */
+    value: MaterialSurveyEditValue;
+    /**
+     * Is editing disabled?
+     * When true, cannot change `optionType`, `optionInfo` and `answerInfo`.
+     */
+    disabled?: boolean;
+    /** Locale of edit form. */
+    locale: string;
+    /** Handle form change event. */
+    onChange: (value: MaterialSurveyEditValue) => void;
+    /** Handle form state changes. (`FormState` from react-hook-form) */
+    onFormStateChange?: (state: MaterialSurveyEditFormState) => void;
+    /** Handle file upload. */
+    onFileUploadRequest: MarkdownEditorFileUploadReqFn;
+}
+declare const MaterialSurveyEdit: React.ForwardRefExoticComponent<MaterialSurveyEditProps & React.RefAttributes<HTMLFormElement>>;
+export default MaterialSurveyEdit;