Skip to content

Commit

Permalink
refactor(worksheet): refactored the actionsheet component:
Browse files Browse the repository at this point in the history 
* added a new directory in constants for storing data
* adding utility functions folder to the worksheet module
* added a new component AvatarGroup, that renders a list of avatars as part of the refactoring progress
  • Loading branch information
@sidtohan
sidtohan committed Aug 4, 2022
1 parent 011337e commit 3d7c995
Show file tree
Hide file tree
Showing 11 changed files with 153 additions and 77 deletions.
7 changes: 4 additions & 3 deletions packages/worksheet/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand Down Expand Up @@ -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"
}
}
}
30 changes: 17 additions & 13 deletions ...ponents/Actionsheet/CommentActionsheet.js → ...onents/Actionsheet/CommentActionsheet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// Lib
import React from "react";
import {
IconByName,
commentRegistryService,
Expand All @@ -7,7 +9,6 @@ import {
Subtitle,
H2,
} from "@shiksha/common-lib";
import colorTheme from "../../colorTheme";
import {
Actionsheet,
HStack,
Expand All @@ -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 () => {
Expand All @@ -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"));
}
Expand All @@ -77,14 +80,15 @@ export default function Comment({
isOpen={showModuleComments}
onClose={() => setShowModuleComments(false)}
>
<Actionsheet.Content alignItems={"left"} bg={colors.worksheetCardBg}>
<Actionsheet.Content alignItems={"left"} bg={colorTheme.worksheetCardBg}>
<HStack justifyContent={"space-between"}>
<Stack p={5} pt={1} pb="15px">
<H2>{t("Comments")}</H2>
</Stack>
<IconByName
_icon={{}}
name="CloseCircleLineIcon"
color={colors.worksheetCardIcon}
color={colorTheme.worksheetCardIcon}
onPress={(e) => setShowModuleComments(false)}
/>
</HStack>
Expand All @@ -109,7 +113,7 @@ export default function Comment({
<VStack>
{console.log(item?.userData)}
<BodyLarge>{`${item?.userData?.firstName} ${item?.userData?.lastName}`}</BodyLarge>
<Subtitle color={colors.lightGray2}>
<Subtitle color={colorTheme.lightGray2}>
{moment(item?.createdAt).format("DD MMMM, hh:mma")}
</Subtitle>
</VStack>
Expand All @@ -127,7 +131,7 @@ export default function Comment({
<InputGroup>
<Input
h="48px"
bg={colors.lightGray4}
bg={colorTheme.lightGray4}
size={"full"}
placeholder={t("WRITE_COMMENT")}
value={comment}
Expand Down
2 changes: 1 addition & 1 deletion ...t/CreateWorksheet/InputFormActionsheet.js → .../CreateWorksheet/InputFormActionsheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function InputForm({

return (
<Actionsheet isOpen={showModule} onClose={() => setShowModule(false)}>
<Actionsheet.Content alignItems={"left"} bg={colors.worksheetCardBg}>
<Actionsheet.Content alignItems={"left"} bg={colorTheme.worksheetCardBg}>
<Stack p={5} pt={1} pb="15px">
<H1>{t("Enter Worksheet Details")}</H1>
</Stack>
Expand Down
7 changes: 4 additions & 3 deletions ...onents/Actionsheet/QuestionActionsheet.js → ...nents/Actionsheet/QuestionActionsheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,11 @@ export default function Question({
>
<Actionsheet.Content bg={colors.white} alignItems={"left"}>
<Stack p={5} pt={2} pb="15px" textAlign="center">
<H2 color={colors.gray}>{t("Question")}</H2>
<H2 color={colorTheme.gray}>{t("Question")}</H2>
</Stack>
<IconByName
color={colors.lightGray2}
_icon={{}}
color={colorTheme.lightGray2}
position="absolute"
top="10px"
right="10px"
Expand All @@ -51,7 +52,7 @@ export default function Question({
{console.log(questionObject)}
<Box bg={colors.white} width={"100%"} p="5">
<VStack space="5">
<BodyMedium color={colors.messageInfo} textTransform="inherit">
<BodyMedium color={colorTheme.messageInfo} textTransform="inherit">
<div
dangerouslySetInnerHTML={{ __html: questionObject?.question }}
/>
Expand Down
38 changes: 18 additions & 20 deletions ...components/Actionsheet/SortActionsheet.js → ...omponents/Actionsheet/SortActionsheet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// Lib
import React from "react";
import {
Actionsheet,
Expand All @@ -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);

Expand All @@ -27,32 +29,25 @@ 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
rounded="full"
colorScheme="button"
variant="outline"
bg={colors.primaryLight}
bg={colorTheme.primaryLight}
px={5}
py={1}
rightIcon={<IconByName name="ArrowDownSLineIcon" isDisabled />}
rightIcon={
<IconByName _icon={{}} name="ArrowDownSLineIcon" isDisabled />
}
onPress={(e) => setShowModal(true)}
>
<BodyLarge textTransform="capitalize">{t("SORT")}</BodyLarge>
Expand All @@ -64,8 +59,9 @@ export default function SortActionsheet({ appName, sortArray, setSortData }) {
<H2>{t("SORT")}</H2>
</Stack>
<IconByName
_icon={{}}
name="CloseCircleLineIcon"
color={colors.primaryDark}
color={colorTheme.primaryDark}
onPress={(e) => setShowModal(false)}
/>
</HStack>
Expand All @@ -78,11 +74,13 @@ export default function SortActionsheet({ appName, sortArray, setSortData }) {
<Pressable
key={index}
p="5"
bg={isSelected ? colors.grayLight : ""}
bg={isSelected ? colorTheme.grayLight : ""}
onPress={(e) => handleSort(item)}
>
{/*@ts-ignore */}
<HStack space="2" colorScheme="button" alignItems="center">
<IconByName
_icon={{}}
isDisabled
color={isSelected ? colors.primary : ""}
name={
Expand All @@ -100,7 +98,7 @@ export default function SortActionsheet({ appName, sortArray, setSortData }) {
<Button
colorScheme="button"
_text={{ color: "white" }}
onPress={handalClose}
onPress={handleClose}
>
{t("CONTINUE")}
</Button>
Expand Down
51 changes: 14 additions & 37 deletions ...nents/Actionsheet/WorksheetActionsheet.js → ...ents/Actionsheet/WorksheetActionsheet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// Lib
import {
BodyMedium,
Caption,
Expand All @@ -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,
Expand All @@ -50,7 +49,8 @@ export default function Worksheet({
<H2>{worksheet?.name ? worksheet?.name : ""}</H2>
</Stack>
<IconByName
color={colors.lightGray2}
_icon={{}}
color={colorTheme.lightGray2}
position="absolute"
top="10px"
right="10px"
Expand All @@ -61,7 +61,7 @@ export default function Worksheet({
<Box bg={colors.white} width={"100%"} p="5">
<VStack space="4">
<BodyMedium
color={colors.messageInfo}
color={colorTheme.messageInfo}
textTransform="inherit"
textAlign="center"
>
Expand Down Expand Up @@ -95,30 +95,7 @@ export default function Worksheet({
}
>
<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>
<AvatarGroup avatarList={avatarObjProps} />
<Subtitle color={colors.primary}>
{commentCount} {t("COMMENTS")}
</Subtitle>
Expand Down Expand Up @@ -161,10 +138,10 @@ const AttributeComponent = ({ data, object }) => {
isDisabled
name={item.icon}
_icon={{ size: 14 }}
color={colors.worksheetBoxText}
color={colorTheme.worksheetBoxText}
p="0"
/>
<BodyMedium color={colors.worksheetBoxText}>
<BodyMedium color={colorTheme.worksheetBoxText}>
{t(item?.label) +
" : " +
(object?.[item.attribute]
Expand Down
Loading

0 comments on commit 3d7c995

Please sign in to comment.