Refactored the QuestionBox Component in Worksheet

packages/worksheet/src/components/HTMLPrint.tsx

@@ -0,0 +1,18 @@
+// Lib
+import * as React from "react";
+
+// Interface
+export interface IHtmlPrint {
+  html: string;
+}
+
+// Utility Component that returns a div using a markup
+// TODO: find an alternate way to avoid using innerHTML
+const HtmlPrint: React.FC<IHtmlPrint> = ({ html }) => {
+  const createMarkup = (markup) => {
+    return { __html: markup };
+  };
+  return <div dangerouslySetInnerHTML={createMarkup(html)} />;
+};
+
+export default HtmlPrint;

packages/worksheet/src/components/QuestionBox/QuestionOption.tsx

@@ -0,0 +1,44 @@
+// Lib
+import * as React from "react";
+import { HStack } from "native-base";
+import { BodyMedium, overrideColorTheme } from "@shiksha/common-lib";
+
+// Components
+import HtmlPrint from "components/HTMLPrint";
+
+// Constants
+import colorTheme from "../../colorTheme";
+const alphabet = ["a", "b", "c", "d", "e", "f"];
+const colors = overrideColorTheme(colorTheme);
+
+// Interface
+export interface IQuestionOption {
+  item: any;
+  isAnswerHide: boolean;
+  index: number;
+}
+
+// Returns a single option for a Question
+const QuestionOption: React.FC<IQuestionOption> = ({
+  item,
+  isAnswerHide,
+  index,
+}) => {
+  return (
+    <HStack space="1" alignItems="baseline">
+      <BodyMedium
+        textTransform="inherit"
+        color={item.answer && !isAnswerHide ? "worksheet.success" : ""}
+      >
+        {alphabet[index] + ". "}
+      </BodyMedium>
+      <BodyMedium
+        color={item.answer && !isAnswerHide ? "worksheet.success" : ""}
+      >
+        <HtmlPrint html={item?.value?.body} />
+      </BodyMedium>
+    </HStack>
+  );
+};
+
+export default QuestionOption;

packages/worksheet/src/components/QuestionBox/index.js → packages/worksheet/src/components/QuestionBox/index.tsx

@@ -1,23 +1,35 @@
+// Lib
 import React from "react";
 import { Box, HStack, VStack } from "native-base";
+
+// Styles
 import "../../App.css";
-import { BodyMedium } from "@shiksha/common-lib";
-import { useTranslation } from "react-i18next";
 
-const styles = { questionDiv: { display: "flex" } };
+// Constants
+import { colourPalette } from "constants/colours";
+import colorTheme from "colorTheme";
 
-const HtmlPrint = ({ html }) => {
-  const createMarkup = (markup) => {
-    return { __html: markup };
-  };
-  return <div dangerouslySetInnerHTML={createMarkup(html)} />;
-};
+// Components
+import HtmlPrint from "components/HTMLPrint";
+import QuestionOption from "./QuestionOption";
 
-const QuestionBox = ({ questionObject, isAnswerHide, infoIcon, _box }) => {
-  const { t } = useTranslation();
+const styles = { questionDiv: { display: "flex" } };
 
-  const alphabet = ["a", "b", "c", "d", "e", "f"];
+// Interface
+export interface IQuestionBox {
+  questionObject: any;
+  isAnswerHide: boolean;
+  infoIcon: Object;
+  _box: Object;
+}
 
+// Renders a box for a question using an object
+const QuestionBox: React.FC<IQuestionBox> = ({
+  questionObject,
+  isAnswerHide,
+  infoIcon,
+  _box,
+}) => {
   return (
     <Box shadow={2} rounded="xl">
       <Box
@@ -47,27 +59,14 @@ const QuestionBox = ({ questionObject, isAnswerHide, infoIcon, _box }) => {
       ) : questionObject?.options ? (
         <Box bg={"worksheet.primaryLight"} p="4" roundedBottom={"xl"}>
           <VStack space="2">
-            {questionObject.options?.map((item, index) => {
-              return (
-                <HStack key={index} space="1" alignItems="baseline">
-                  <BodyMedium
-                    textTransform="inherit"
-                    color={
-                      item.answer && !isAnswerHide ? "worksheet.success" : ""
-                    }
-                  >
-                    {alphabet[index] + ". "}
-                  </BodyMedium>
-                  <BodyMedium
-                    color={
-                      item.answer && !isAnswerHide ? "worksheet.success" : ""
-                    }
-                  >
-                    <HtmlPrint html={item?.value?.body} />
-                  </BodyMedium>
-                </HStack>
-              );
-            })}
+            {questionObject.options?.map((item, index) => (
+              <QuestionOption
+                item={item}
+                isAnswerHide={isAnswerHide}
+                index={index}
+                key={`qo${index}`}
+              />
+            ))}
           </VStack>
         </Box>
       ) : (