Refactored the Actionsheet Component in Worksheet.

packages/worksheet/package.json

@@ -14,6 +14,7 @@
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.24.0",
     "expo-font": "^10.0.3",
+    "firebase": "^9.9.0",
     "i18next": "^21.6.7",
     "jwt-decode": "^3.1.2",
     "moment": "^2.29.1",
@@ -40,8 +41,7 @@
     "workbox-range-requests": "^5.1.4",
     "workbox-routing": "^5.1.4",
     "workbox-strategies": "^5.1.4",
-    "workbox-streams": "^5.1.4",
-    "firebase": "^9.9.0"
+    "workbox-streams": "^5.1.4"
   },
   "homepage": "modules/worksheet",
   "scripts": {
@@ -90,10 +90,11 @@
     "@storybook/preset-create-react-app": "^4.0.1",
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
+    "@types/react-native": "^0.69.5",
     "craco-module-federation": "^1.1.0",
     "external-remotes-plugin": "^1.0.0",
     "prettier": "^2.5.1",
     "typescript": "^4.7.4",
     "webpack": "^5.69.1"
   }
-}
+}

packages/worksheet/src/components/Actionsheet/CommentActionsheet.js → packages/worksheet/src/components/Actionsheet/CommentActionsheet.tsx

@@ -1,3 +1,5 @@
+// Lib
+import React from "react";
 import {
   IconByName,
   commentRegistryService,
@@ -7,7 +9,6 @@ import {
   Subtitle,
   H2,
 } from "@shiksha/common-lib";
-import colorTheme from "../../colorTheme";
 import {
   Actionsheet,
   HStack,
@@ -21,31 +22,33 @@ import {
   InputRightAddon,
   ScrollView,
 } from "native-base";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import moment from "moment";
+
+// Utils
+import colorTheme from "../../colorTheme";
 const colors = overrideColorTheme(colorTheme);
 
 export default function Comment({
   setShowModuleComments,
   showModuleComments,
   worksheet,
   comments,
-  setCommets,
+  setComments,
 }) {
   const { t } = useTranslation();
-  const [comment, setCommet] = React.useState("");
-  const [error, setError] = React.useState();
+  const [comment, setComment] = React.useState("");
+  const [error, setError] = React.useState(null);
   const firstName = localStorage.getItem("firstName");
   const lastName = localStorage.getItem("lastName");
 
   const handleInput = (event) => {
     const value = event.target.value;
-    setCommet(value);
+    setComment(value);
     if (!value) {
       setError(t("ENTER_COMMENT"));
     } else {
-      setError();
+      setError(null);
     }
   };
   const handleSubmit = async () => {
@@ -58,15 +61,15 @@ export default function Comment({
         comment,
       };
       const { osid } = await commentRegistryService.create(newData);
-      setCommets([
+      setComments([
         ...comments,
         {
           ...newData,
           id: osid,
           userData: { firstName, lastName, createdAt: moment() },
         },
       ]);
-      setCommet("");
+      setComment("");
     } else {
       setError(t("ENTER_COMMENT"));
     }
@@ -83,6 +86,7 @@ export default function Comment({
             <H2>{t("Comments")}</H2>
           </Stack>
           <IconByName
+            _icon={{}}
             name="CloseCircleLineIcon"
             color={"worksheet.primaryDark"}
             onPress={(e) => setShowModuleComments(false)}

packages/worksheet/src/components/Actionsheet/CreateWorksheet/InputFormActionsheet.js → packages/worksheet/src/components/Actionsheet/CreateWorksheet/InputFormActionsheet.tsx

@@ -54,6 +54,7 @@ export default function InputForm({
             px="5"
             flex="1"
             variant="outline"
+            // @ts-ignore
             onPress={handleSubmit}
           >
             {t("Skip")}
@@ -63,6 +64,7 @@ export default function InputForm({
             _text={{ color: "worksheet.white" }}
             px="5"
             flex="1"
+            // @ts-ignore
             onPress={handleSubmit}
           >
             {t("Save")}

packages/worksheet/src/components/Actionsheet/QuestionActionsheet.js → packages/worksheet/src/components/Actionsheet/QuestionActionsheet.tsx

@@ -39,6 +39,7 @@ export default function Question({
         <Stack p={5} pt={2} pb="15px" textAlign="center">
           <H2 color={"worksheet.gray"}>{t("Question")}</H2>
         </Stack>
+        {/* @ts-ignore*/}
         <IconByName
           color={"worksheet.lightGray2"}
           position="absolute"

packages/worksheet/src/components/Actionsheet/SortActionsheet.js → packages/worksheet/src/components/Actionsheet/SortActionsheet.tsx

@@ -1,3 +1,4 @@
+// Lib
 import React from "react";
 import {
   Actionsheet,
@@ -14,11 +15,12 @@ import {
   H2,
   IconByName,
   overrideColorTheme,
-  capture,
-  telemetryFactory,
   BodyLarge,
 } from "@shiksha/common-lib";
 import { useTranslation } from "react-i18next";
+
+// Utils
+import sortSheet from "utils/functions/SortSheet";
 import colorTheme from "../../colorTheme";
 const colors = overrideColorTheme(colorTheme);
 
@@ -27,22 +29,13 @@ export default function SortActionsheet({ appName, sortArray, setSortData }) {
   const [showModal, setShowModal] = React.useState(false);
   const [sortObject, setSortObject] = React.useState({});
 
-  const handleSort = (obejct) => {
-    const newSort = { ["name"]: obejct };
-    const telemetryData = telemetryFactory.interact({
-      appName,
-      type: "Worksheet-Sort",
-      sortType: newSort,
-    });
-    capture("INTERACT", telemetryData);
-    setSortObject(newSort);
-  };
-
-  const handalClose = () => {
+  const handleClose = () => {
     setSortData(sortObject);
     setShowModal(false);
   };
-
+  const handleSort = (object) => {
+    setSortObject(sortSheet(object, appName));
+  };
   return (
     <Box>
       <Button
@@ -52,7 +45,10 @@ export default function SortActionsheet({ appName, sortArray, setSortData }) {
         bg={"worksheet.primaryLight"}
         px={5}
         py={1}
-        rightIcon={<IconByName name="ArrowDownSLineIcon" isDisabled />}
+        rightIcon={
+          <IconByName _icon={{}} name="ArrowDownSLineIcon" isDisabled />
+        }
+        // @ts-ignore
         onPress={(e) => setShowModal(true)}
       >
         <BodyLarge textTransform="capitalize">{t("SORT")}</BodyLarge>
@@ -64,6 +60,7 @@ export default function SortActionsheet({ appName, sortArray, setSortData }) {
               <H2>{t("SORT")}</H2>
             </Stack>
             <IconByName
+              _icon={{}}
               name="CloseCircleLineIcon"
               color={"worksheet.primaryDark"}
               onPress={(e) => setShowModal(false)}
@@ -79,10 +76,13 @@ export default function SortActionsheet({ appName, sortArray, setSortData }) {
                   key={index}
                   p="5"
                   bg={isSelected ? "worksheet.lightGray2" : ""}
+                  // @ts-ignore
                   onPress={(e) => handleSort(item)}
                 >
+                  {/*@ts-ignore */}
                   <HStack space="2" colorScheme="button" alignItems="center">
                     <IconByName
+                      _icon={{}}
                       isDisabled
                       color={isSelected ? "worksheet.primary" : ""}
                       name={
@@ -100,7 +100,8 @@ export default function SortActionsheet({ appName, sortArray, setSortData }) {
             <Button
               colorScheme="button"
               _text={{ color: "white" }}
-              onPress={handalClose}
+              // @ts-ignore
+              onPress={handleClose}
             >
               {t("CONTINUE")}
             </Button>

packages/worksheet/src/components/Actionsheet/WorksheetActionsheet.js → packages/worksheet/src/components/Actionsheet/WorksheetActionsheet.tsx

@@ -1,3 +1,4 @@
+// Lib
 import {
   BodyMedium,
   Caption,
@@ -17,17 +18,15 @@ import {
 } from "native-base";
 import React from "react";
 import { useTranslation } from "react-i18next";
+
+// Components
+import AvatarGroup from "components/AvatarGroup";
+
+// Utils
 import colorTheme from "../../colorTheme";
 const colors = overrideColorTheme(colorTheme);
-
-const AttributeData = [
-  { icon: "SurveyLineIcon", label: "SUBJECT", attribute: "subject" },
-  { icon: "BarChart2LineIcon", label: "LEVEL", attribute: "level" },
-  { icon: "QuestionLineIcon", label: "QUESTIONS", attribute: "questions" },
-  { icon: "AccountBoxFillIcon", label: "GRADE", attribute: "grade" },
-  { icon: "ArticleLineIcon", label: "TOPIC", attribute: "topic" },
-  { icon: "Download2LineIcon", label: "DOWNLOADS", attribute: "downloads" },
-];
+import { avatarObjProps } from "constants/avatarsData/avatarsData";
+import { AttributeData } from "constants/attributeData/attributeData";
 
 export default function Worksheet({
   worksheetConfig,
@@ -49,6 +48,7 @@ export default function Worksheet({
         <Stack p={5} pt={2} pb="15px" textAlign="center">
           <H2>{worksheet?.name ? worksheet?.name : ""}</H2>
         </Stack>
+        {/* @ts-ignore */}
         <IconByName
           color={"worksheet.lightGray2"}
           position="absolute"
@@ -88,38 +88,16 @@ export default function Worksheet({
                 </Subtitle>
               </HStack>
               <Pressable
+                // @ts-ignore
                 onPress={(e) =>
                   handleCommentModuleOpen
                     ? handleCommentModuleOpen()
                     : console.log("not found handleCommentModuleOpen")
                 }
               >
                 <HStack alignItems="center">
-                  <Avatar.Group
-                    _avatar={{
-                      size: "md",
-                    }}
-                  >
-                    <Avatar
-                      size="xs"
-                      bg="green.500"
-                      source={{
-                        uri: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
-                      }}
-                    >
-                      AJ
-                    </Avatar>
-                    <Avatar
-                      size="xs"
-                      bg="cyan.500"
-                      source={{
-                        uri: "https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
-                      }}
-                    >
-                      TE
-                    </Avatar>
-                  </Avatar.Group>
-                  <Subtitle color={"worksheet.primary"}>
+                  <AvatarGroup avatarList={avatarObjProps} />
+                  <Subtitle color={colors.primary}>
                     {commentCount} {t("COMMENTS")}
                   </Subtitle>
                 </HStack>

packages/worksheet/src/components/AvatarGroup.tsx

@@ -0,0 +1,39 @@
+// Lib
+import * as React from "react";
+import { Avatar } from "native-base";
+
+// Interface
+export interface IAvatarGroup {
+  avatarList: Array<{
+    size: string;
+    bg: string;
+    source: {
+      uri: string;
+    };
+    text: string;
+  }>;
+}
+
+// Generates a list of avatars on the basis of passed props
+const AvatarGroup: React.FC<IAvatarGroup> = ({ avatarList }) => {
+  return (
+    <Avatar.Group
+      // @ts-ignore
+      _avatar={{
+        size: "md",
+      }}
+    >
+      {avatarList.map((avt, idx) => (
+        <Avatar
+          key={`${idx} avt`}
+          size={avt.size}
+          bg={avt.bg}
+          source={avt.source}
+        >
+          {avt.text}
+        </Avatar>
+      ))}
+    </Avatar.Group>
+  );
+};
+export default AvatarGroup;

packages/worksheet/src/constants/attributeData/attributeData.ts

@@ -0,0 +1,9 @@
+// Contains information about various types of attributes
+export const AttributeData = [
+  { icon: "SurveyLineIcon", label: "SUBJECT", attribute: "subject" },
+  { icon: "BarChart2LineIcon", label: "LEVEL", attribute: "level" },
+  { icon: "QuestionLineIcon", label: "QUESTIONS", attribute: "questions" },
+  { icon: "AccountBoxFillIcon", label: "GRADE", attribute: "grade" },
+  { icon: "ArticleLineIcon", label: "TOPIC", attribute: "topic" },
+  { icon: "Download2LineIcon", label: "DOWNLOADS", attribute: "downloads" },
+];

packages/worksheet/src/constants/avatarsData/avatarsData.ts

@@ -0,0 +1,19 @@
+// Contains a list of very commonly used list of avatar objects
+export const avatarObjProps = [
+  {
+    size: "xs",
+    bg: "green.500",
+    source: {
+      uri: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
+    },
+    text: "AJ",
+  },
+  {
+    size: "xs",
+    bg: "cyan.500",
+    source: {
+      uri: "https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
+    },
+    text: "TE",
+  },
+];

packages/worksheet/src/utils/functions/SortSheet.ts

@@ -0,0 +1,21 @@
+// Lib
+import { capture, telemetryFactory } from "@shiksha/common-lib";
+
+// Interface
+export interface ISortSheet {
+  (object: any, appName: string): Object;
+}
+
+// Sorts the given sheet
+const sortSheet: ISortSheet = (object, appName) => {
+  const newSort = { ["name"]: object };
+  const telemetryData = telemetryFactory.interact({
+    appName,
+    type: "Worksheet-Sort",
+    sortType: newSort,
+  });
+  capture("INTERACT", telemetryData);
+  return newSort;
+};
+
+export default sortSheet;