catchup-library-web 2.1.6 → 2.2.1

package/src/components/activities/ActivityPreviewByAnswerData.tsx

@@ -1,268 +0,0 @@
-import { useEffect, useState } from "react";
-import DropdownActivityContent from "./DropdownActivityContent";
-import FillInTheBlanksActivityContent from "./FillInTheBlanksActivityContent";
-import GroupingActivityContent from "./GroupingActivityContent";
-import MatchingActivityContent from "./MatchingActivityContent";
-import MCMAActivityContent from "./MCMAActivityContent";
-import MCSAActivityContent from "./MCSAActivityContent";
-import OpenEndedActivityContent from "./OpenEndedActivityContent";
-import OrderingActivityContent from "./OrderingActivityContent";
-import SelectionBox from "../boxes/SelectionBox";
-import TrueFalseActivityContent from "./TrueFalseActivityContent";
-import ActivitySolutionContent from "./solution-contents/ActivitySolutionContent";
-import ActivityEvaluationRubricContent from "./evaluation-rubric-contents/ActivityEvaluationRubricContent";
-import DividerLine from "../dividers/DividerLine";
-import i18n from "../../language/i18n";
-import {
-  constructActivityAnswerMap,
-  retrieveDifficultyByActivityTypeFromData,
-} from "../../utilization/CatchtivityUtilization";
-import { IActivityPreviewByAnswerDataProps } from "../../properties/ActivityProperties";
-import ActivityEmptyContent from "./empty-contents/ActivityEmptyContent";
-
-const ACTIVITY_TEMPLATE_LIST = [
-  { type: "ORDERING", materialMap: "orderingMaterialMap" },
-  { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
-  { type: "MCSA", materialMap: "MCSAMaterialMap" },
-  { type: "MCMA", materialMap: "MCMAMaterialMap" },
-  { type: "MATCHING", materialMap: "matchingMaterialMap" },
-  { type: "GROUPING", materialMap: "groupingMaterialMap" },
-  {
-    type: "FILL_IN_THE_BLANKS",
-    materialMap: "fillInTheBlanksMaterialMap",
-  },
-  { type: "OPEN_ENDED", materialMap: "openEndedMaterialMap" },
-  { type: "TRUE_FALSE", materialMap: "trueFalseMaterialMap" },
-];
-
-const ActivityPreviewByAnswerData = ({
-  data,
-  answerType = null,
-  showType = true,
-  showDescription = true,
-  typeList = [],
-  showSolution = false,
-  showEvaluationRubric = false,
-  showDifficulty = true,
-  isFullScreen = false,
-  showCorrectAnswer = false,
-}: IActivityPreviewByAnswerDataProps) => {
-  const [selectedType, setSelectedType] = useState<string | null>(null);
-  const [optionList, setOptionList] = useState<any[]>([]);
-  const [answerMapMap, setAnswerMapMap] = useState<any>({});
-  const [activityTemplateTypeList, setActivityTemplateTypeList] = useState<
-    any[]
-  >([]);
-
-  useEffect(() => {
-    if (!data) return;
-    let currentActivityTemplateMapList: any[] = JSON.parse(
-      JSON.stringify(ACTIVITY_TEMPLATE_LIST)
-    );
-    if (typeList.length > 0) {
-      currentActivityTemplateMapList = currentActivityTemplateMapList.filter(
-        (activityTemplateMap) => typeList.includes(activityTemplateMap.type)
-      );
-    }
-    const currentActivityTemplateTypeList = [];
-    for (const activityTemplateMap of currentActivityTemplateMapList) {
-      if (data[activityTemplateMap.materialMap]) {
-        currentActivityTemplateTypeList.push(activityTemplateMap);
-      }
-    }
-    setActivityTemplateTypeList(currentActivityTemplateMapList);
-  }, [data, answerType, typeList]);
-
-  useEffect(() => {
-    if (activityTemplateTypeList.length === 0) return;
-    const currentOptionList = [];
-    for (const activityTemplateType of activityTemplateTypeList) {
-      const currentTypeOption: any = {
-        id: activityTemplateType.type,
-        value: i18n.t(activityTemplateType.type),
-      };
-      if (showDifficulty) {
-        currentTypeOption.subText = i18n.t(
-          retrieveDifficultyByActivityTypeFromData(
-            activityTemplateType.type,
-            data
-          )
-        );
-      }
-      currentOptionList.push(currentTypeOption);
-    }
-    setOptionList(currentOptionList);
-  }, [activityTemplateTypeList, showDifficulty]);
-
-  useEffect(() => {
-    if (optionList.length === 0) return;
-    setSelectedType(optionList[0].id);
-  }, [optionList]);
-
-  useEffect(() => {
-    if (activityTemplateTypeList.length === 0) return;
-    const currentAnswerMapMap: any = {};
-    for (const activityTemplateMap of activityTemplateTypeList) {
-      if (answerType === activityTemplateMap.type) {
-        currentAnswerMapMap[activityTemplateMap.type] = data.answerMap;
-      } else {
-        currentAnswerMapMap[activityTemplateMap.type] =
-          constructActivityAnswerMap(
-            activityTemplateMap.type,
-            JSON.parse(JSON.stringify(data))
-          );
-      }
-    }
-    setAnswerMapMap(currentAnswerMapMap);
-  }, [activityTemplateTypeList]);
-
-  const RenderSelectedActivityContent = () => {
-    if (!selectedType) return null;
-
-    const commonProps = {
-      answerMap: answerMapMap[selectedType],
-      data,
-      canAnswerQuestion: () => true,
-      changeAnswer: () => {},
-      isPreview: true,
-      showCorrectAnswer,
-      isFullScreen,
-    };
-
-    const isEmpty = answerMapMap[selectedType].isEmpty;
-
-    switch (selectedType) {
-      case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? (
-          <>
-            {isEmpty && <ActivityEmptyContent />}
-            <OrderingActivityContent {...commonProps} />
-          </>
-        ) : null;
-
-      case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? (
-          <>
-            {isEmpty && <ActivityEmptyContent />}
-            <DropdownActivityContent {...commonProps} />
-          </>
-        ) : null;
-
-      case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? (
-          <>
-            {isEmpty && <ActivityEmptyContent />}
-            <MCSAActivityContent {...commonProps} />
-          </>
-        ) : null;
-
-      case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? (
-          <>
-            {isEmpty && <ActivityEmptyContent />}
-            <MCMAActivityContent {...commonProps} />
-          </>
-        ) : null;
-
-      case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? (
-          <>
-            {isEmpty && <ActivityEmptyContent />}
-            <MatchingActivityContent {...commonProps} />
-          </>
-        ) : null;
-
-      case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? (
-          <>
-            {isEmpty && <ActivityEmptyContent />}
-            <GroupingActivityContent {...commonProps} />
-          </>
-        ) : null;
-
-      case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap &&
-          data.fillInTheBlanksMaterialMap ? (
-          <>
-            {isEmpty && <ActivityEmptyContent />}
-            <FillInTheBlanksActivityContent {...commonProps} />
-          </>
-        ) : null;
-
-      case "OPEN_ENDED":
-        return data.openEndedBodyMap ? (
-          <>
-            {isEmpty && <ActivityEmptyContent />}
-            <OpenEndedActivityContent
-              {...commonProps}
-              showMaterialContent={true}
-            />
-          </>
-        ) : null;
-
-      case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? (
-          <>
-            {isEmpty && <ActivityEmptyContent />}
-            <TrueFalseActivityContent {...commonProps} />
-          </>
-        ) : null;
-
-      default:
-        return null;
-    }
-  };
-
-  if (!data) return null;
-
-  return (
-    <div>
-      {showType && optionList.length > 0 ? (
-        <>
-          <div className="mb-4">
-            {showDescription ? (
-              <div className="my-2">
-                <p className="font-semibold text-lg">
-                  {i18n.t("activity_template")}
-                </p>
-              </div>
-            ) : null}
-
-            <SelectionBox
-              optionList={optionList}
-              selectedId={selectedType}
-              handleSelectOnClick={(itemId) => {
-                setSelectedType(itemId);
-              }}
-            />
-          </div>
-          <DividerLine />
-        </>
-      ) : null}
-
-      <div className="flex flex-col my-2 w-full p-5">
-        {RenderSelectedActivityContent()}
-      </div>
-
-      {selectedType && showSolution ? (
-        <div className="my-4">
-          <ActivitySolutionContent
-            activityTemplateType={selectedType}
-            data={data}
-          />
-        </div>
-      ) : null}
-
-      {selectedType && showEvaluationRubric ? (
-        <div className="my-4">
-          <ActivityEvaluationRubricContent
-            activityTemplateType={selectedType}
-            data={data}
-          />
-        </div>
-      ) : null}
-    </div>
-  );
-};
-
-export default ActivityPreviewByAnswerData;