catchup-library-web 2.0.7 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/ActivityPreviewByAnswerData.tsx

@@ -20,192 +20,193 @@ import {
 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,
-  lockedType = null,
-  typeOptionList = [],
+  lockedTypeList = [],
   showSolution = false,
   showEvaluationRubric = false,
   showDifficulty = true,
   isFullScreen = false,
   showCorrectAnswer = false,
 }: IActivityPreviewByAnswerDataProps) => {
-  const [key, setKey] = useState(new Date().getTime());
   const [selectedType, setSelectedType] = useState<string | null>(null);
   const [optionList, setOptionList] = useState<any[]>([]);
-  interface AnswerItem {
-    type: string;
-    isEmpty?: boolean;
-    answerMap?: any;
-    [key: string]: any;
-  }
-
-  interface Answer {
-    data: AnswerItem[];
-  }
-
-  const [answer, setAnswer] = useState<Answer>({ data: [] });
+  const [answerMapMap, setAnswerMapMap] = useState<any>({});
+  const [activityTemplateTypeList, setActivityTemplateTypeList] = useState<
+    any[]
+  >([]);
 
   useEffect(() => {
     if (!data) return;
-    setKey(new Date().getTime());
-  }, [data]);
-
-  const checkAnswerMapExists = (type: string): AnswerItem | null => {
-    if (data && data.answerMap && Array.isArray(data.answerMap)) {
-      const foundAnswer = data.answerMap.find(
-        (answer: any) => answer.type === type
+    let currentActivityTemplateMapList: any[] = JSON.parse(
+      JSON.stringify(ACTIVITY_TEMPLATE_LIST)
+    );
+    if (lockedTypeList.length > 0) {
+      currentActivityTemplateMapList = currentActivityTemplateMapList.filter(
+        (activityTemplateMap) =>
+          lockedTypeList.includes(activityTemplateMap.type)
       );
-      return foundAnswer || null;
     }
-    return null;
-  };
+    const currentActivityTemplateTypeList = [];
+    for (const activityTemplateMap of currentActivityTemplateMapList) {
+      if (data[activityTemplateMap.materialMap]) {
+        currentActivityTemplateTypeList.push(activityTemplateMap);
+      }
+    }
+    setActivityTemplateTypeList(currentActivityTemplateMapList);
+  }, [data, answerType, lockedTypeList]);
 
   useEffect(() => {
-    if (!data) return;
-
-    const constructAnswerBasedOnData = () => {
-      const newAnswer: Answer = { data: [] };
-
-      const activityTypes = [
-        { 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" },
-      ];
-
-      activityTypes.forEach(({ type, materialMap }) => {
-        if (data[materialMap]) {
-          const foundAnswer = checkAnswerMapExists(type);
-          const answerItem: AnswerItem =
-            foundAnswer ||
-            constructActivityAnswerMap(
-              { type },
-              JSON.parse(JSON.stringify(data))
-            );
-          newAnswer.data.push(answerItem);
-        }
-      });
-
-      setAnswer(newAnswer);
-
-      // Set initial selected type
-      if (newAnswer.data.length > 0) {
-        if (
-          lockedType &&
-          newAnswer.data.find((item: AnswerItem) => item.type === lockedType)
-        ) {
-          setSelectedType(lockedType);
-        } else {
-          setSelectedType(newAnswer.data[0].type);
-        }
+    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
+          )
+        );
       }
-    };
-
-    constructAnswerBasedOnData();
-  }, [data, lockedType]);
+      currentOptionList.push(currentTypeOption);
+    }
+    setOptionList(currentOptionList);
+  }, [activityTemplateTypeList, showDifficulty]);
 
   useEffect(() => {
-    if (!data || !answer.data.length) return;
+    if (optionList.length === 0) return;
+    setSelectedType(optionList[0].id);
+  }, [optionList]);
 
-    let currentTypeOptionList =
-      typeOptionList ||
-      answer.data.map((item) => ({
-        id: item.type,
-        text: i18n.t(item.type),
-      }));
-
-    if (lockedType) {
-      currentTypeOptionList = currentTypeOptionList.filter(
-        (typeOption: any) => typeOption.id === lockedType
-      );
-    }
-
-    if (showDifficulty) {
-      setOptionList(
-        currentTypeOptionList.map((typeOption: any) => ({
-          ...typeOption,
-          subText: i18n.t(
-            retrieveDifficultyByActivityTypeFromData(typeOption.id, data)
-          ),
-        }))
-      );
-    } else {
-      setOptionList(currentTypeOptionList);
+  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(
+            { type: activityTemplateMap.type },
+            JSON.parse(JSON.stringify(data))
+          );
+      }
     }
-  }, [data, answer.data, lockedType, typeOptionList, showDifficulty]);
+    setAnswerMapMap(currentAnswerMapMap);
+  }, [activityTemplateTypeList]);
 
   const RenderSelectedActivityContent = () => {
+    if (!selectedType) return null;
+
     const commonProps = {
-      answer,
+      answerMap: answerMapMap[selectedType],
       data,
       canAnswerQuestion: () => true,
-      // changeAnswer: (newAnswer: Answer) =>
-      //   setAnswer(JSON.parse(JSON.stringify(newAnswer))),
       changeAnswer: () => {},
       isPreview: true,
       showCorrectAnswer,
       isFullScreen,
     };
 
+    const isEmpty = answerMapMap[selectedType].isEmpty;
+
     switch (selectedType) {
       case "ORDERING":
         return data.orderingBodyMap && data.orderingMaterialMap ? (
-          <OrderingActivityContent {...commonProps} />
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <OrderingActivityContent {...commonProps} />
+          </>
         ) : null;
 
       case "DROPDOWN":
         return data.dropdownBodyMap && data.dropdownMaterialMap ? (
-          <DropdownActivityContent {...commonProps} />
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <DropdownActivityContent {...commonProps} />
+          </>
         ) : null;
 
       case "MCSA":
         return data.MCSABodyMap && data.MCSAMaterialMap ? (
-          <MCSAActivityContent {...commonProps} />
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <MCSAActivityContent {...commonProps} />
+          </>
         ) : null;
 
       case "MCMA":
         return data.MCMABodyMap && data.MCMAMaterialMap ? (
-          <MCMAActivityContent {...commonProps} />
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <MCMAActivityContent {...commonProps} />
+          </>
         ) : null;
 
       case "MATCHING":
         return data.matchingBodyMap && data.matchingMaterialMap ? (
-          <MatchingActivityContent {...commonProps} />
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <MatchingActivityContent {...commonProps} />
+          </>
         ) : null;
 
       case "GROUPING":
         return data.groupingBodyMap && data.groupingMaterialMap ? (
-          <GroupingActivityContent {...commonProps} />
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <GroupingActivityContent {...commonProps} />
+          </>
         ) : null;
 
       case "FILL_IN_THE_BLANKS":
         return data.fillInTheBlanksBodyMap &&
           data.fillInTheBlanksMaterialMap ? (
-          <FillInTheBlanksActivityContent {...commonProps} />
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <FillInTheBlanksActivityContent {...commonProps} />
+          </>
         ) : null;
 
       case "OPEN_ENDED":
         return data.openEndedBodyMap ? (
-          <OpenEndedActivityContent
-            {...commonProps}
-            showMaterialContent={true}
-          />
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <OpenEndedActivityContent
+              {...commonProps}
+              showMaterialContent={true}
+            />
+          </>
         ) : null;
 
       case "TRUE_FALSE":
         return data.trueFalseBodyMap && data.trueFalseMaterialMap ? (
-          <TrueFalseActivityContent {...commonProps} />
+          <>
+            {isEmpty && <ActivityEmptyContent />}
+            <TrueFalseActivityContent {...commonProps} />
+          </>
         ) : null;
 
       default:
@@ -216,7 +217,7 @@ const ActivityPreviewByAnswerData = ({
   if (!data) return null;
 
   return (
-    <div key={key}>
+    <div>
       {showType && optionList.length > 0 ? (
         <>
           <div className="mb-4">
@@ -241,11 +242,7 @@ const ActivityPreviewByAnswerData = ({
       ) : null}
 
       <div className="flex flex-col my-2 w-full p-5">
-        {answer?.data[0]?.isEmpty ? <ActivityEmptyContent /> : null}
-
-        {selectedType ? (
-          <div key={selectedType}>{RenderSelectedActivityContent()}</div>
-        ) : null}
+        {RenderSelectedActivityContent()}
       </div>
 
       {selectedType && showSolution ? (

package/src/components/activities/ActivityPreviewByData.tsx

@@ -80,7 +80,7 @@ const ActivityPreviewByData = ({
   }, [data, lockedType, typeOptionList, showDifficulty]);
 
   if (!data) return;
-  const answer = constructAnswerBasedOnData(data);
+  const answerMap = constructAnswerBasedOnData(data);
 
   return (
     <div key={key}>
@@ -112,7 +112,7 @@ const ActivityPreviewByData = ({
           data["orderingBodyMap"] != null &&
           data["orderingMaterialMap"] != null ? (
             <OrderingActivityContent
-              answer={answer}
+              answerMap={answerMap}
               changeAnswer={() => {}}
               canAnswerQuestion={() => {
                 return true;
@@ -126,7 +126,7 @@ const ActivityPreviewByData = ({
             data["dropdownBodyMap"] != null &&
             data["dropdownMaterialMap"] != null ? (
             <DropdownActivityContent
-              answer={answer}
+              answerMap={answerMap}
               changeAnswer={() => {}}
               canAnswerQuestion={() => {
                 return true;
@@ -140,7 +140,7 @@ const ActivityPreviewByData = ({
             data["MCSABodyMap"] != null &&
             data["MCSAMaterialMap"] != null ? (
             <MCSAActivityContent
-              answer={answer}
+              answerMap={answerMap}
               changeAnswer={() => {}}
               canAnswerQuestion={() => {
                 return true;
@@ -154,7 +154,7 @@ const ActivityPreviewByData = ({
             data["MCMABodyMap"] != null &&
             data["MCMAMaterialMap"] != null ? (
             <MCMAActivityContent
-              answer={answer}
+              answerMap={answerMap}
               changeAnswer={() => {}}
               canAnswerQuestion={() => {
                 return true;
@@ -168,7 +168,7 @@ const ActivityPreviewByData = ({
             data["matchingBodyMap"] != null &&
             data["matchingMaterialMap"] != null ? (
             <MatchingActivityContent
-              answer={answer}
+              answerMap={answerMap}
               changeAnswer={() => {}}
               canAnswerQuestion={() => {
                 return true;
@@ -181,7 +181,7 @@ const ActivityPreviewByData = ({
             data["groupingBodyMap"] != null &&
             data["groupingMaterialMap"] != null ? (
             <GroupingActivityContent
-              answer={answer}
+              answerMap={answerMap}
               changeAnswer={() => {}}
               canAnswerQuestion={() => {
                 return true;
@@ -194,7 +194,7 @@ const ActivityPreviewByData = ({
             data["fillInTheBlanksBodyMap"] != null &&
             data["fillInTheBlanksMaterialMap"] != null ? (
             <FillInTheBlanksActivityContent
-              answer={answer}
+              answerMap={answerMap}
               changeAnswer={() => {}}
               canAnswerQuestion={() => {
                 return true;
@@ -207,7 +207,7 @@ const ActivityPreviewByData = ({
           ) : selectedType === "OPEN_ENDED" &&
             data["openEndedBodyMap"] != null ? (
             <OpenEndedActivityContent
-              answer={answer}
+              answerMap={answerMap}
               canAnswerQuestion={() => false}
               changeAnswer={() => {}}
               showMaterialContent={true}
@@ -219,7 +219,7 @@ const ActivityPreviewByData = ({
             data["trueFalseBodyMap"] != null &&
             data["trueFalseMaterialMap"] != null ? (
             <TrueFalseActivityContent
-              answer={answer}
+              answerMap={answerMap}
               changeAnswer={() => {}}
               canAnswerQuestion={() => {
                 return true;

package/src/components/activities/DropdownActivityContent.tsx

@@ -11,7 +11,7 @@ import DropdownActivityMaterialContent from "./material-contents/DropdownActivit
 import { useState, useEffect } from "react";
 
 const DropdownActivityContent = ({
-  answer,
+  answerMap,
   data,
   canAnswerQuestion,
   changeAnswer,
@@ -22,47 +22,21 @@ const DropdownActivityContent = ({
   const contentMap = parseContentMapFromData(data);
   const dropdownBodyMap = parseBodyMapFromData(data, "DROPDOWN");
   const dropdownMaterialMap = parseMaterialMapFromData(data, "DROPDOWN");
-
-  const [currentAnswerMap, setCurrentAnswerMap] = useState(() => {
-    return retrieveCurrentAnswerMap();
-  });
-
-  function retrieveCurrentAnswerMap() {
-    let foundIndex = answer.data.findIndex(
-      (answerData: any) => answerData.type === "DROPDOWN"
-    );
-    return answer.data[foundIndex].answerMap;
-  }
+  const [currentAnswerMap, setCurrentAnswerMap] = useState(answerMap);
 
   useEffect(() => {
-    setCurrentAnswerMap(retrieveCurrentAnswerMap());
-  }, [answer]);
+    setCurrentAnswerMap(answerMap);
+  }, [answerMap]);
 
   const handleDropdownAnswerOnChange = (
-    answerObj: any,
+    answerMap: any,
     key: any,
     value: string
   ) => {
     if (isPreview) return;
-    const newAnswer = {
-      ...answerObj,
-      data: answerObj.data.map((item: any) => {
-        if (item.type === "DROPDOWN") {
-          return {
-            ...item,
-            answerMap: {
-              ...item.answerMap,
-              [key]: value,
-            },
-          };
-        }
-        return item;
-      }),
-    };
-
-    const newAnswerMap = { ...currentAnswerMap, [key]: value };
-    setCurrentAnswerMap(newAnswerMap);
-    changeAnswer(newAnswer);
+    answerMap = { ...currentAnswerMap, [key]: value };
+    setCurrentAnswerMap(answerMap);
+    changeAnswer(answerMap);
   };
 
   return (
@@ -84,7 +58,7 @@ const DropdownActivityContent = ({
       <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1"}`}>
         <DropdownActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
-          answer={answer}
+          answerMap={answerMap}
           materialMap={dropdownMaterialMap}
           contentMap={contentMap}
           checkCanAnswerQuestion={canAnswerQuestion}

package/src/components/activities/FillInTheBlanksActivityContent.tsx

@@ -11,7 +11,7 @@ import VerticalDividerLine from "../dividers/VerticalDividerLine";
 import { useState, useEffect } from "react";
 
 const FillInTheBlanksActivityContent = ({
-  answer,
+  answerMap,
   data,
   canAnswerQuestion,
   changeAnswer,
@@ -32,20 +32,11 @@ const FillInTheBlanksActivityContent = ({
     ? JSON.parse(data.fillInTheBlanksIncorrectList)
     : [];
 
-  const [currentAnswerMap, setCurrentAnswerMap] = useState(() => {
-    return retrieveCurrentAnswerMap();
-  });
-
-  function retrieveCurrentAnswerMap() {
-    let foundIndex = answer.data.findIndex(
-      (answerData: any) => answerData.type === "FILL_IN_THE_BLANKS"
-    );
-    return answer.data[foundIndex].answerMap;
-  }
+  const [currentAnswerMap, setCurrentAnswerMap] = useState(answerMap);
 
   useEffect(() => {
-    setCurrentAnswerMap(retrieveCurrentAnswerMap());
-  }, [answer]);
+    setCurrentAnswerMap(answerMap);
+  }, [answerMap]);
 
   const constructAnswerOptionList = () => {
     const optionList: any = [];
@@ -67,30 +58,14 @@ const FillInTheBlanksActivityContent = ({
   };
 
   const handleFillInTheBlanksAnswerOnChange = (
-    answerObj: any,
+    answerMap: any,
     key: any,
     value: string | null
   ) => {
     if (isPreview) return;
-    const newAnswer = {
-      ...answerObj,
-      data: answerObj.data.map((item: any) => {
-        if (item.type === "FILL_IN_THE_BLANKS") {
-          return {
-            ...item,
-            answerMap: {
-              ...item.answerMap,
-              [key]: value,
-            },
-          };
-        }
-        return item;
-      }),
-    };
-
-    const newAnswerMap = { ...currentAnswerMap, [key]: value };
-    setCurrentAnswerMap(newAnswerMap);
-    changeAnswer(newAnswer);
+    answerMap = { ...currentAnswerMap, [key]: value };
+    setCurrentAnswerMap(answerMap);
+    changeAnswer(answerMap);
   };
 
   return (
@@ -112,7 +87,7 @@ const FillInTheBlanksActivityContent = ({
       <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1"}`}>
         <FillInTheBlanksActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
-          answer={answer}
+          answerMap={answerMap}
           optionList={constructAnswerOptionList()}
           materialMap={fillInTheBlanksMaterialMap}
           contentMap={contentMap}

package/src/components/activities/GroupingActivityContent.tsx

@@ -9,7 +9,7 @@ import ActivityBodyContent from "./body-contents/ActivityBodyContent";
 import GroupingActivityMaterialContent from "./material-contents/GroupingActivityMaterialContent";
 
 const GroupingActivityContent = ({
-  answer,
+  answerMap,
   data,
   canAnswerQuestion,
   changeAnswer,
@@ -21,22 +21,18 @@ const GroupingActivityContent = ({
   const groupingMaterialMap = parseMaterialMapFromData(data, "GROUPING");
 
   const handleGroupingAnswerOnChange = (
-    answer: any,
+    answerMap: any,
     key: any,
     value: string | null,
     index: number | null
   ) => {
     if (isPreview) return;
-    let foundIndex = answer.data.findIndex(
-      (answerData: any) => answerData.type === "GROUPING"
-    );
-    const answerMap = answer.data[foundIndex].answerMap;
     if (value) {
       answerMap[key].push(value);
     } else {
       answerMap[key].splice(index, 1);
     }
-    changeAnswer(answer);
+    changeAnswer(answerMap);
   };
 
   return (
@@ -48,7 +44,7 @@ const GroupingActivityContent = ({
       <DividerLine />
       <GroupingActivityMaterialContent
         uniqueValue={JSON.stringify(data.contentMap)}
-        answer={answer}
+        answerMap={answerMap}
         materialMap={groupingMaterialMap}
         contentMap={contentMap}
         checkCanAnswerQuestion={canAnswerQuestion}

package/src/components/activities/MCMAActivityContent.tsx

@@ -10,7 +10,7 @@ import DividerLine from "../dividers/DividerLine";
 import VerticalDividerLine from "../dividers/VerticalDividerLine";
 
 const MCMAActivityContent = ({
-  answer,
+  answerMap,
   data,
   canAnswerQuestion,
   changeAnswer,
@@ -21,12 +21,12 @@ const MCMAActivityContent = ({
   const MCMABodyMap = parseBodyMapFromData(data, "MCMA");
   const MCMAMaterialMap = parseMaterialMapFromData(data, "MCMA");
 
-  const handleMCMAAnswerOnChange = (answer: any, key: any, value: string) => {
+  const handleMCMAAnswerOnChange = (
+    answerMap: any,
+    key: any,
+    value: string
+  ) => {
     if (isPreview) return;
-    let foundIndex = answer.data.findIndex(
-      (answerData: any) => answerData.type === "MCMA"
-    );
-    const answerMap = answer.data[foundIndex].answerMap;
     const foundSubIndex = answerMap[key].findIndex(
       (answerMaterialKey: string) => answerMaterialKey === value
     );
@@ -35,7 +35,7 @@ const MCMAActivityContent = ({
     } else {
       answerMap[key].splice(foundSubIndex, 1);
     }
-    changeAnswer(answer);
+    changeAnswer(answerMap);
   };
 
   return (
@@ -52,7 +52,7 @@ const MCMAActivityContent = ({
       <div className={`${isFullScreen ? "w-full" : "w-full md:flex-1"}`}>
         <MCMAActivityMaterialContent
           uniqueValue={JSON.stringify(data.contentMap)}
-          answer={answer}
+          answerMap={answerMap}
           materialMap={MCMAMaterialMap}
           contentMap={contentMap}
           checkCanAnswerQuestion={canAnswerQuestion}