Skip to content

Commit

Permalink
Merge pull request #311 from Rushikesh-Sonawane99/shiksha-2.0
Browse files Browse the repository at this point in the history
Issue #PS-793 chore: Added dynamic reason for dropout, callback functions, loaders and toast messages
  • Loading branch information
itsvick authored Jun 20, 2024
2 parents 58a8437 + 00cf1d5 commit 100250d
Show file tree
Hide file tree
Showing 9 changed files with 158 additions and 73 deletions.
5 changes: 4 additions & 1 deletion public/locales/en/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,10 @@
"SEARCH_FACILITATORS": "Search Facilitators..",
"ADD_LEARNER":"Add Learners",
"DESELECT_ALL":"Deselect All",
"SELECT_ALL":"Select All"
"SELECT_ALL":"Select All",
"LEARNER_MARKED_DROPOUT": "Learner marked as dropout",
"LEARNER_UNMARKED_DROPOUT": "Learner un-marked as dropout",
"LEARNER_REMOVED": "Learner has been removed"
},
"LOGIN_PAGE": {
"USERNAME": "Username",
Expand Down
5 changes: 4 additions & 1 deletion public/locales/hi/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,10 @@
"SEARCH_FACILITATORS": "खोज सुविधा प्रदाता..",
"ADD_LEARNER": "शिक्षार्थियों को जोड़ें",
"DESELECT_ALL": "सभी को अचयनित करें",
"SELECT_ALL": "सभी को चुनें"
"SELECT_ALL": "सभी को चुनें",
"LEARNER_MARKED_DROPOUT": "शिक्षार्थी को ड्रॉप आउट के रूप में चिह्नित किया गया",
"LEARNER_UNMARKED_DROPOUT": "शिक्षार्थी को ड्रॉपआउट के रूप में अनचिह्नित किया गया",
"LEARNER_REMOVED": "शिक्षार्थी को हटा दिया गया है"
},
"LOGIN_PAGE": {
"USERNAME": "उपयोगकर्ता नाम",
Expand Down
5 changes: 4 additions & 1 deletion public/locales/mr/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,10 @@
"SEARCH_FACILITATORS": "शोध सुविधा..",
"ADD_LEARNER": "शिक्षार्थी जोडा",
"DESELECT_ALL": "सर्व निवड रद्द करा",
"SELECT_ALL": "सर्व निवडा"
"SELECT_ALL": "सर्व निवडा",
"LEARNER_MARKED_DROPOUT": "शिकणाऱ्याला ड्रॉप आऊट म्हणून चिन्हांकित केले",
"LEARNER_UNMARKED_DROPOUT": "शिकणाऱ्याला ड्रॉपआउट म्हणून अनचिन्हांकित केले",
"LEARNER_REMOVED": "शिकणाऱ्याचे हटवले गेले आहे"
},
"LOGIN_PAGE": {
"USERNAME": "वापरकर्तानाव",
Expand Down
5 changes: 4 additions & 1 deletion public/locales/or/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,10 @@
"MARK_DROP_OUT": "ଡ୍ରପ୍ ଆଉଟ୍ ରୁପରେ ଚିହ୍ନିତ କରନ୍ତୁ",
"UNMARK_DROP_OUT": " ଡ୍ରପ୍ ଆଉଟ୍ ଭାବରେ ଅପସାରଣ କରନ୍ତୁ",
"SOMETHING_WENT_WRONG": "କିଛି ଭୁଲ ହେଇଗଲା।",
"SURE_REMOVE": "ଆପଣ ନିଶ୍ଚିତ ଏହି ଶିକ୍ଷାର୍ଥୀକୁ ହଟାଇବାକୁ ଚାହୁଁଛନ୍ତି କି?"
"SURE_REMOVE": "ଆପଣ ନିଶ୍ଚିତ ଏହି ଶିକ୍ଷାର୍ଥୀକୁ ହଟାଇବାକୁ ଚାହୁଁଛନ୍ତି କି?",
"LEARNER_MARKED_DROPOUT": "ଶିକ୍ଷାର୍ଥୀକୁ ଡ୍ରପ୍ ଆଉଟ୍ ଭାବେ ଚିହ୍ନିତ କରାଯାଇଛି",
"LEARNER_UNMARKED_DROPOUT": "ଶିକ୍ଷାର୍ଥୀକୁ ଡ୍ରପ୍ ଆଉଟ୍ ଭାବେ ଅଚିହ୍ନିତ କରାଯାଇଛି",
"LEARNER_REMOVED": "ଶିକ୍ଷାର୍ଥୀ କୁ ହଟାଇ ଦିଆଯାଇଛି"
},
"LOGIN_PAGE": {
"USERNAME": "ଉପଯୋଗକର୍ତା ନାମ",
Expand Down
11 changes: 10 additions & 1 deletion src/components/CohortLearnerList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,13 @@ interface UserDataProps {
cohortMembershipId: string;
enrollmentNumber: string;
}
interface CohortLearnerListProp{
cohortId: any,
reloadState: boolean;
setReloadState: React.Dispatch<React.SetStateAction<boolean>>;
}

const CohortLearnerList = (cohortId: any) => {
const CohortLearnerList : React.FC<CohortLearnerListProp> = ({cohortId, reloadState, setReloadState}) => {
const [loading, setLoading] = React.useState<boolean>(false);
const [userData, setUserData] = React.useState<UserDataProps[]>();

Expand All @@ -45,6 +50,7 @@ const CohortLearnerList = (cohortId: any) => {
name: toPascalCase(user.name),
userId: user.userId,
memberStatus: user.memberStatus,
statusReason: user.statusReason,
cohortMembershipId: user.cohortMembershipId,
enrollmentNumber: capitalizeEachWord(
getFieldValue(user.customField, 'Enrollment Number')
Expand Down Expand Up @@ -79,6 +85,9 @@ const CohortLearnerList = (cohortId: any) => {
enrollmentId={data.enrollmentNumber}
cohortMembershipId={data.cohortMembershipId}
isDropout={data.memberStatus === 'dropout'}
statusReason = {data.statusReason}
reloadState={reloadState}
setReloadState={setReloadState}
/>
);
})}
Expand Down
70 changes: 47 additions & 23 deletions src/components/DropOutModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,37 @@ import { useTranslation } from 'next-i18next';
import { dropoutReasons } from '../../app.config';
import { updateCohortMemberStatus } from '@/services/MyClassDetailsService';
import ReactGA from 'react-ga4';
import { showToastMessage } from './Toastify';

interface DropOutModalProps {
open: boolean;
onClose: (confirmed: boolean, reason?: string) => void;
cohortMembershipId: string | number;
reloadState: boolean;
setReloadState: React.Dispatch<React.SetStateAction<boolean>>;
}

function DropOutModal({
open,
onClose,
cohortMembershipId,
reloadState,
setReloadState
}: DropOutModalProps) {
const [selectedReason, setSelectedReason] = React.useState<string>('');
const [isButtonDisabled, setIsButtonDisabled] = React.useState<boolean>(true);
const [loading, setLoading] = React.useState<boolean>(false);

const { t } = useTranslation();
const theme = useTheme<any>();

React.useEffect(() => {
if (reloadState) {
setReloadState(false);
window.location.reload();
}
}, [reloadState, setReloadState]);

const style = {
position: 'absolute',
top: '50%',
Expand All @@ -57,30 +70,41 @@ function DropOutModal({
setIsButtonDisabled(false);
};

const handleMarkDropout = () => {
onClose(true, selectedReason);
console.log('Dropout api called');
if (selectedReason && cohortMembershipId) {
const memberStatus = 'dropout';
const statusReason = selectedReason;
const membershipId = cohortMembershipId;
const response = updateCohortMemberStatus({
memberStatus,
statusReason,
membershipId,
});
// console.log('!!!!!!!!!!!!!!!!!!!!!', response);
ReactGA.event('dropout-student-successful', {
cohortMembershipId: membershipId,
});
// if (response.responseCode !== 201 || response.params.err) {
// ReactGA.event('dropout-student-error', { cohortMembershipId: membershipId });
throw new Error();
// // response.params.errmsg ||
// // 'An error occurred while updating the user.'
const handleMarkDropout = async () => {
try {
onClose(true, selectedReason);
setLoading(true);

if (selectedReason && cohortMembershipId) {
const memberStatus = 'dropout';
const statusReason = selectedReason;
const membershipId = cohortMembershipId;

const response = await updateCohortMemberStatus({
memberStatus,
statusReason,
membershipId,
});

if (response?.responseCode !== 200 || response?.params?.err) {
ReactGA.event('dropout-student-error', { cohortMembershipId: membershipId });
// throw new Error(response.params?.errmsg || 'An error occurred while updating the user.');
}else{
ReactGA.event('dropout-student-successful', {
cohortMembershipId: membershipId,
});
showToastMessage(t('COMMON.LEARNER_UNMARKED_DROPOUT'),'success');
setReloadState(true)
}
setIsButtonDisabled(true);
}
} catch (error) {
console.log(error);
showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
} finally {
setLoading(false);
}
setIsButtonDisabled(true);
};
};

return (
<React.Fragment>
Expand Down
124 changes: 80 additions & 44 deletions src/components/LearnersList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { LearnerListProps } from '@/utils/Interfaces';
import ConfirmationModal from './ConfirmationModal';
import { updateCohortMemberStatus } from '@/services/MyClassDetailsService';
import ReactGA from 'react-ga4';
import { showToastMessage } from './Toastify';

type Anchor = 'bottom';

Expand All @@ -22,14 +23,27 @@ const LearnersList: React.FC<LearnerListProps> = ({
isDropout,
enrollmentId,
cohortMembershipId,
statusReason,
reloadState,
setReloadState
}) => {
const [state, setState] = React.useState({
bottom: false,
});
const [showModal, setShowModal] = React.useState<boolean>(false);
const [confirmationModalOpen, setConfirmationModalOpen] =
React.useState<boolean>(false);
const [loading, setLoading] = React.useState<boolean>(false);

// useEffect(()=>{
const theme = useTheme<any>();
const { t } = useTranslation();

// },[handleRemoveLearnerFromCohort, ]) //TODO: refresh page on mark/unmark dropout and remove learner
useEffect(()=>{
if (reloadState) {
setReloadState(false);
window.location.reload();
}
},[reloadState, setReloadState])

const toggleDrawer =
(anchor: Anchor, open: boolean) =>
Expand All @@ -44,57 +58,78 @@ const LearnersList: React.FC<LearnerListProps> = ({

setState({ ...state, bottom: open });
};
const theme = useTheme<any>();
const { t } = useTranslation();
const [showModal, setShowModal] = React.useState<boolean>(false);
const [confirmationModalOpen, setConfirmationModalOpen] =
React.useState<boolean>(false);


const handleUnmarkDropout = async () => {
try {
setLoading(true);

if (cohortMembershipId) {
const memberStatus = 'active';
const membershipId = cohortMembershipId;

const response = await updateCohortMemberStatus({
memberStatus,
membershipId,
});

if (response?.responseCode !== 200 || response?.params?.err) {
ReactGA.event('unmark-dropout-student-error', { cohortMembershipId: membershipId });
throw new Error(response.params?.errmsg || 'An error occurred while updating the user.');
} else {
ReactGA.event('unmark-dropout-student-successful', {
cohortMembershipId: membershipId,
});
showToastMessage(t('COMMON.LEARNER_UNMARKED_DROPOUT'), 'success');
setReloadState(true);
}
}
} catch (error) {
console.log(error);
showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
} finally {
setLoading(false);
}
};

const listItemClick = (event: React.MouseEvent, name: string) => {
if (name === 'mark-drop-out') {
setShowModal(true);
} else if (name === 'unmark-drop-out') {
handleUnmarkDropout()
} else {
setConfirmationModalOpen(true);
}
};

const handleAction = async () => {
try {
setLoading(true);
if (cohortMembershipId) {
const memberStatus = 'active';
const memberStatus = 'archived';
const membershipId = cohortMembershipId;
const response = updateCohortMemberStatus({

const response = await updateCohortMemberStatus({
memberStatus,
membershipId,
});
// console.log('!!!!!!!!!!!!!!!!!!!!!', response);
ReactGA.event('unmark-dropout-student-successful', {
cohortMembershipId: membershipId,
});
// if (response.responseCode !== 201 || response.params.err) {
// ReactGA.event('unmark-dropout-student-error', { cohortMembershipId: membershipId });
throw new Error();
// // response.params.errmsg ||
// // 'An error occurred while updating the user.'

if (response?.responseCode !== 200 || response?.params?.err) {
ReactGA.event('remove-student-error', { cohortMembershipId: membershipId });
throw new Error(response.params?.errmsg || 'An error occurred while updating the user.');
} else {
ReactGA.event('remove-student-successful', {
cohortMembershipId: membershipId,
});
showToastMessage(t('COMMON.LEARNER_REMOVED'), 'success');
setReloadState(true)
}
}
} else {
setConfirmationModalOpen(true);
}
};

const handleAction = () => {
//Close all modals
//add toast messages on success and failure
if (cohortMembershipId) {
const memberStatus = 'archived';
const membershipId = cohortMembershipId;
const response = updateCohortMemberStatus({
memberStatus,
membershipId,
});
// console.log('!!!!!!!!!!!!!!!!!!!!!', response);
ReactGA.event('remove-student-successful', {
cohortMembershipId: membershipId,
});
// if (response.responseCode !== 201 || response.params.err) {
// ReactGA.event('remove-student-error', { cohortMembershipId: membershipId });
throw new Error();
// // response.params.errmsg ||
// // 'An error occurred while updating the user.'
} catch (error) {
console.log(error);
showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
} finally {
setLoading(false);
}
setConfirmationModalOpen(false);
handleCloseBottomDrawer();
Expand Down Expand Up @@ -135,9 +170,8 @@ const LearnersList: React.FC<LearnerListProps> = ({
color={theme.palette.warning[300]}
fontWeight="500"
>
{t('COMMON.REASON_FOR_DROPOUT')}
{statusReason}
</Typography>
{/* TODO: Add reason dynamically from api */}
</Box>
);
}
Expand Down Expand Up @@ -266,6 +300,8 @@ const LearnersList: React.FC<LearnerListProps> = ({
open={showModal}
onClose={() => setShowModal(false)}
cohortMembershipId={cohortMembershipId}
reloadState={reloadState}
setReloadState={setReloadState}
/>
<ConfirmationModal
message={t('COMMON.SURE_REMOVE')}
Expand Down
3 changes: 2 additions & 1 deletion src/pages/centers/[cohortId].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const TeachingCenterDetails = () => {
const theme = useTheme<any>();

const [cohortDetails, setCohortDetails] = React.useState<any>({});
const [reloadState, setReloadState] = React.useState<boolean>(false);

useEffect(() => {
const getCohortData = async () => {
Expand Down Expand Up @@ -149,7 +150,7 @@ const TeachingCenterDetails = () => {
/>
</Box>
<Box>
<CohortLearnerList cohortId={cohortId} />
<CohortLearnerList cohortId={cohortId} reloadState={reloadState} setReloadState={setReloadState}/>
</Box>
</>
)}
Expand Down
3 changes: 3 additions & 0 deletions src/utils/Interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,9 @@ export interface LearnerListProps {
enrollmentId?: string | number;
cohortMembershipId: string | number;
learnerName: string;
statusReason: string;
reloadState: boolean;
setReloadState: React.Dispatch<React.SetStateAction<boolean>>;
}
export interface FacilitatorListParam {
limit: number;
Expand Down

0 comments on commit 100250d

Please sign in to comment.