catchup-library-web 1.15.3 → 1.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.15.3",
+  "version": "1.15.4",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -22,6 +22,7 @@
     "react-katex": "^3.0.1",
     "react-loader-spinner": "^6.1.6",
     "react-modal": "^3.16.3",
+    "react-pdf": "^10.0.1",
     "react-select": "^5.10.0"
   },
   "devDependencies": {

package/src/components/activities/ActivityPreviewByData.tsx

@@ -206,6 +206,7 @@ const ActivityPreviewByData = ({
             data["openEndedBodyMap"] != null ? (
             <OpenEndedActivityContent
               answer={answer}
+              canAnswerQuestion={() => false}
               changeAnswer={() => {}}
               showMaterialContent={true}
               data={data}

package/src/components/activities/OpenEndedActivityContent.tsx

@@ -12,27 +12,12 @@ const OpenEndedActivityContent = ({
   answer,
   data,
   changeAnswer,
+  canAnswerQuestion,
   showMaterialContent,
   isFullScreen,
 }: IOpenEndedActivityProps) => {
-  // const {
-  //   answer,
-  //   data,
-  //   canAnswerQuestion,
-  //   changeAnswer,
-  //   userId,
-  //   userProfileId,
-  //   catchtivityApplicationId,
-  //   catchxamApplicationId,
-  //   etudeId,
-  //   activityId,
-  //   activityTemplateId,
-  //   showMaterialContent,
-  //   storageStompClient,
-  // } = props;
   const contentMap = parseContentMapFromData(data);
   const openEndedBodyMap = parseBodyMapFromData(data, "OPEN_ENDED");
-  // const openEndedMaterialMap = JSON.parse(data.openEndedMaterialMap);
 
   const handleOpenEndedAnswerOnChange = (answer: any, value: string) => {
     let foundIndex = answer.data.findIndex(
@@ -74,23 +59,9 @@ const OpenEndedActivityContent = ({
             <OpenEndedActivityMaterialContent
               answer={answer}
               contentMap={contentMap}
-              onChange={handleOpenEndedAnswerOnChange}
-            />
-            {/* <OpenEndedActivityMaterialContent
-              answer={answer}
-              bodyMap={openEndedBodyMap}
-              contentMap={contentMap}
               checkCanAnswerQuestion={canAnswerQuestion}
               onChange={handleOpenEndedAnswerOnChange}
-              userId={userId}
-              userProfileId={userProfileId}
-              catchtivityApplicationId={catchtivityApplicationId}
-              catchxamApplicationId={catchxamApplicationId}
-              etudeId={etudeId}
-              activityId={activityId}
-              activityTemplateId={activityTemplateId}
-              storageStompClient={storageStompClient}
-            /> */}
+            />
           </div>
         </>
       ) : null}

package/src/components/activities/body-content/ShowBodyMediaByContentType.tsx

@@ -109,7 +109,6 @@ const ShowBodyMediaByContentType = ({
         const firstIndex = copyValue.indexOf(checkText);
         const textBeforeTag = copyValue.substring(0, firstIndex);
 
-        // Handle text before the tag if it's not empty
         if (textBeforeTag.trim() !== "") {
           const balancedText = balanceSpecialChars(textBeforeTag);
           currentIndex++;
@@ -117,10 +116,9 @@ const ShowBodyMediaByContentType = ({
           valuePartList.push(renderTextContent(balancedText, itemKey));
         }
 
-        // Process the text inside the tags
         const subValue = copyValue.substring(firstIndex + checkText.length);
         const secondIndex = subValue.indexOf(checkText);
-        if (secondIndex === -1) break; // Safety check for malformed tags
+        if (secondIndex === -1) break;
 
         const textInsideTag = copyValue.substring(
           firstIndex + checkText.length,
@@ -138,26 +136,22 @@ const ShowBodyMediaByContentType = ({
           </span>
         );
 
-        // Update copyValue to process the next occurrence
         copyValue = copyValue.substring(
           firstIndex + checkText.length + secondIndex + checkText.length
         );
 
-        // Balance backticks in remaining text if needed
         if ((copyValue.split("`").length - 1) % 2 === 1) {
           copyValue = "`" + copyValue;
         }
       }
     };
 
-    // Process IMAGE tags
     const processImageTags = () => {
       const checkText = "--IMAGE--";
       while (copyValue.includes(checkText)) {
         const firstIndex = copyValue.indexOf(checkText);
         const textBeforeTag = copyValue.substring(0, firstIndex);
 
-        // Handle text before the tag if it's not empty
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
@@ -170,10 +164,9 @@ const ShowBodyMediaByContentType = ({
           );
         }
 
-        // Process the image source inside the tags
         const subValue = copyValue.substring(firstIndex + checkText.length);
         const secondIndex = subValue.indexOf(checkText);
-        if (secondIndex === -1) break; // Safety check for malformed tags
+        if (secondIndex === -1) break;
 
         const imageSource = copyValue.substring(
           firstIndex + checkText.length,
@@ -206,21 +199,18 @@ const ShowBodyMediaByContentType = ({
           </div>
         );
 
-        // Update copyValue to process the next occurrence
         copyValue = copyValue.substring(
           firstIndex + checkText.length + secondIndex + checkText.length
         );
       }
     };
 
-    // Process VIDEO tags
     const processVideoTags = () => {
       const checkText = "--VIDEO--";
       while (copyValue.includes(checkText)) {
         const firstIndex = copyValue.indexOf(checkText);
         const textBeforeTag = copyValue.substring(0, firstIndex);
 
-        // Handle text before the tag if it's not empty
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
@@ -233,10 +223,9 @@ const ShowBodyMediaByContentType = ({
           );
         }
 
-        // Process the video source inside the tags
         const subValue = copyValue.substring(firstIndex + checkText.length);
         const secondIndex = subValue.indexOf(checkText);
-        if (secondIndex === -1) break; // Safety check for malformed tags
+        if (secondIndex === -1) break;
 
         const videoSource = copyValue.substring(
           firstIndex + checkText.length,
@@ -253,21 +242,18 @@ const ShowBodyMediaByContentType = ({
           />
         );
 
-        // Update copyValue to process the next occurrence
         copyValue = copyValue.substring(
           firstIndex + checkText.length + secondIndex + checkText.length
         );
       }
     };
 
-    // Process AUDIO tags
     const processAudioTags = () => {
       const checkText = "--AUDIO--";
       while (copyValue.includes(checkText)) {
         const firstIndex = copyValue.indexOf(checkText);
         const textBeforeTag = copyValue.substring(0, firstIndex);
 
-        // Handle text before the tag if it's not empty
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
@@ -280,10 +266,9 @@ const ShowBodyMediaByContentType = ({
           );
         }
 
-        // Process the audio source inside the tags
         const subValue = copyValue.substring(firstIndex + checkText.length);
         const secondIndex = subValue.indexOf(checkText);
-        if (secondIndex === -1) break; // Safety check for malformed tags
+        if (secondIndex === -1) break;
 
         const audioSource = copyValue.substring(
           firstIndex + checkText.length,
@@ -300,25 +285,21 @@ const ShowBodyMediaByContentType = ({
           />
         );
 
-        // Update copyValue to process the next occurrence
         copyValue = copyValue.substring(
           firstIndex + checkText.length + secondIndex + checkText.length
         );
       }
     };
 
-    // Process all types of tags
     processTextTags();
     processImageTags();
     processVideoTags();
     processAudioTags();
 
-    // Handle any remaining text
     if (copyValue.trim() !== "") {
       currentIndex++;
       copyValue = balanceSpecialChars(copyValue);
 
-      // Check for image description markup
       const regexMatchImageText = copyValue.match(/<image>([\s\S]*?)<\/image>/);
       if (regexMatchImageText) {
         const imageText = regexMatchImageText[1];
@@ -334,7 +315,6 @@ const ShowBodyMediaByContentType = ({
           </div>
         );
       } else {
-        // Handle normal remaining text
         const itemKey = `remaining-${index}-${currentIndex}`;
         valuePartList.push(renderTextContent(copyValue, itemKey));
       }

package/src/components/activities/material-content/OpenEndedActivityMaterialContent.tsx

@@ -2,10 +2,14 @@ import InputGroup from "../../groups/InputGroup";
 import i18n from "../../../language/i18n";
 import DividerLine from "../../dividers/DividerLine";
 import { IOpenEndedActivityMaterialProps } from "../../../properties/ActivityProperties";
+import { retrieveDocumentTypeFromExtension } from "../../../utilization/StorageUtilization";
+import BaseImage from "../../images/BaseImage";
+import BasePDF from "../../pdfs/BasePDF";
 
 const OpenEndedActivityMaterialContent = ({
   answer,
   contentMap,
+  checkCanAnswerQuestion,
   onChange,
 }: IOpenEndedActivityMaterialProps) => {
   const retrieveAnswer = () => {
@@ -33,12 +37,52 @@ const OpenEndedActivityMaterialContent = ({
         value={answerMapAnswer}
         useMinHeight={true}
         onChange={(e) => {
-          onChange(answer, e.target.value);
+          if (checkCanAnswerQuestion()) {
+            onChange(answer, e.target.value);
+          }
         }}
       />
     );
   };
 
+  const RenderImageContent = (answerMap: any) => {
+    const answerMapAnswer = answerMap["ANSWER"];
+    const extension = answerMapAnswer.split(".").pop();
+    const documentType = retrieveDocumentTypeFromExtension(extension);
+    return (
+      <>
+        {documentType === "IMAGE" ? (
+          <div className="flex flex-col justify-center items-center my-5">
+            <BaseImage
+              src={answerMapAnswer}
+              alt="document"
+              size="custom"
+              className="w-[80%] rounded-catchup-xlarge"
+            />
+          </div>
+        ) : documentType === "PDF" ? (
+          <div className="flex flex-col justify-center items-center my-5">
+            <BasePDF file={answerMapAnswer} />
+          </div>
+        ) : null}
+      </>
+    );
+  };
+
+  const RenderAudioContent = (answerMap: any) => {
+    const answerMapAnswer = answerMap["ANSWER"];
+    return (
+      <div className="h-[56px]">
+        <audio
+          className="h-full w-full rounded-catchup-xlarge"
+          src={answerMapAnswer}
+          controls
+          onClick={() => {}}
+        />
+      </div>
+    );
+  };
+
   const answerMap = retrieveAnswerMap();
 
   return (
@@ -52,7 +96,13 @@ const OpenEndedActivityMaterialContent = ({
         <div className="hidden md:contents">
           <DividerLine />
         </div>
-        {contentMap.type === "TEXT" ? RenderTextContent(answerMap) : null}
+        {contentMap.type === "TEXT"
+          ? RenderTextContent(answerMap)
+          : contentMap.type === "IMAGE"
+          ? RenderImageContent(answerMap)
+          : contentMap.type === "AUDIO"
+          ? RenderAudioContent(answerMap)
+          : null}
       </div>
     </>
   );

package/src/components/pdfs/BasePDF.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { Document, Page } from "react-pdf";
+import BaseImage from "../images/BaseImage";
+import { IBasePDFProps } from "../../properties/PDFProperties";
+
+const BasePDF = ({ file }: IBasePDFProps) => {
+  const [pageNumber, setPageNumber] = useState(1);
+  const [numberOfPages, setNumberOfPages] = useState(0);
+
+  const handleOnDocumentLoadSuccess = ({ numPages }: any) => {
+    setPageNumber(1);
+    setNumberOfPages(numPages);
+  };
+
+  return (
+    <Document file={file} onLoadSuccess={handleOnDocumentLoadSuccess}>
+      <Page pageNumber={pageNumber} />
+      <div className="flex flex-row items-center justify-center">
+        {pageNumber === 1 ? null : (
+          <div className="px-2">
+            <div className="cursor-pointer">
+              <BaseImage
+                alt="arrow-left"
+                src="/icons/arrow-left.webp"
+                size="small"
+                onClick={() => {
+                  setPageNumber(pageNumber - 1);
+                }}
+              />
+            </div>
+          </div>
+        )}
+        {Array.from(Array(numberOfPages).keys())
+          .filter((index) => index < pageNumber + 5)
+          .filter((index) => index > pageNumber - 5)
+          .map((index) => (
+            <div key={index} className="px-2">
+              <p
+                className={`${
+                  pageNumber === index + 1 ? "text-2xl" : "text-md"
+                } cursor-pointer`}
+                onClick={() => {
+                  setPageNumber(index + 1);
+                }}
+              >
+                {index + 1}
+              </p>
+            </div>
+          ))}
+        {numberOfPages === 0 || pageNumber === numberOfPages ? null : (
+          <div className="px-2">
+            <div className="cursor-pointer">
+              <BaseImage
+                src="/icons/arrow-right.webp"
+                alt="arrow-right"
+                size="small"
+                onClick={() => {
+                  setPageNumber(pageNumber + 1);
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    </Document>
+  );
+};
+
+export default BasePDF;

package/src/index.ts

@@ -18,6 +18,8 @@ export { default as BaseLoadingWithText } from "./components/loading/BaseLoading
 
 export { default as BaseModal } from "./components/modals/BaseModal";
 
+export { default as BasePDF } from "./components/pdfs/BasePDF";
+
 export { default as ActivityEmptyContent } from "./components/activities/empty-content/ActivityEmptyContent";
 export { default as ActivityBodyContent } from "./components/activities/body-content/ActivityBodyContent";
 export { default as DropdownActivityContent } from "./components/activities/DropdownActivityContent";

package/src/properties/ActivityProperties.ts

@@ -169,6 +169,7 @@ export interface IOpenEndedActivityProps {
   answer: any;
   data: any;
   changeAnswer: (e: any) => void;
+  canAnswerQuestion: () => boolean;
   showMaterialContent: boolean;
   isFullScreen: boolean;
 }
@@ -176,6 +177,7 @@ export interface IOpenEndedActivityProps {
 export interface IOpenEndedActivityMaterialProps {
   answer: any;
   contentMap: any;
+  checkCanAnswerQuestion: () => boolean;
   onChange: (e1: any, e2: any) => void;
 }
 

package/src/properties/PDFProperties.ts

@@ -0,0 +1,3 @@
+export interface IBasePDFProps {
+  file: string;
+}