Merge pull request #556 from AkshataKatwal16/reassign-cohorts

Issue feat: add facilitator and learner counts over a tabs
tekdi · Dec 31, 2024 · af205e8 · af205e8
2 parents 5d19d3e + 85b76e5
commit af205e8
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 23 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -143,9 +143,8 @@
     "NA": "N.A.",
     "SORT_BY_NAMES": "Sort by Names",
     "INCORRECT_DATA_ENTRY": "Incorrect Data Entry",
-    "DUPLICATED_USER": "Duplicated User",
-    "FACILITATOR_COUNT": "Facilitators Total count: {{count}}",
-    "LEARNER_COUNT": "Learners Total count: {{count}}"
+    "DUPLICATED_USER": "Duplicated User"
+
 
   },
   "LOGIN_PAGE": {

diff --git a/src/components/CohortFacilitatorList.tsx b/src/components/CohortFacilitatorList.tsx
@@ -14,6 +14,8 @@ import NoDataFound from './common/NoDataFound';
 import Loader from './Loader';
 import { showToastMessage } from './Toastify';
 import SearchBar from './Searchbar';
+import { useRouter } from 'next/router';
+import useStore from '@/store/store';
 
 interface UserDataProps {
   name: string;
@@ -38,6 +40,8 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
 
   const [filteredData, setFilteredData] =  React.useState(userData);
   const [searchTerm, setSearchTerm] =  React.useState('');
+  const setCohortFacilitatorsCount = useStore((state) => state.setCohortFacilitatorsCount);
+
 
 
   const { t } = useTranslation();
@@ -77,6 +81,7 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
 
             console.log(`userDetails`, userDetails);
             setUserData(userDetails);
+            setCohortFacilitatorsCount(userDetails.length)
             setFilteredData(userDetails);
 
           }
@@ -137,14 +142,7 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
           }}
         >
 
-          <Typography
-              style={{
-                width: '100%',
-                marginLeft: '20px',
-              }}
-            >
-                    {t('COMMON.FACILITATOR_COUNT',  { count: userData?.length})}
-            </Typography>
+
 
           <Grid container>
             {filteredData?.map((data: any) => {

diff --git a/src/components/CohortLearnerList.tsx b/src/components/CohortLearnerList.tsx
@@ -14,6 +14,7 @@ import Loader from './Loader';
 import { showToastMessage } from './Toastify';
 import NoDataFound from './common/NoDataFound';
 import SearchBar from './Searchbar';
+import useStore from '@/store/store';
 
 interface UserDataProps {
   name: string;
@@ -41,7 +42,8 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
   const [userData, setUserData] = React.useState<UserDataProps[]>();
   const [filteredData, setFilteredData] = useState(userData);
 
-
+  const setCohortLearnerCount = useStore((state) => state.setCohortLearnerCount);
+
   const [isLearnerDeleted, setIsLearnerDeleted] =
     React.useState<boolean>(false);
 
@@ -78,6 +80,7 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
             });
 
             console.log(`userDetails`, userDetails);
+            setCohortLearnerCount(userDetails.length);
             setUserData(userDetails);
             setFilteredData(userDetails);
           }
@@ -138,14 +141,7 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
             },
           }}
         >
-                    <Typography
-              style={{
-                width: '100%',
-                marginLeft: '20px',
-              }}
-            >
-                    {t('COMMON.LEARNER_COUNT',  { count: userData?.length})}
-            </Typography>
+
           <Grid container>
 
             {filteredData?.map((data: any) => {

diff --git a/src/pages/centers/[cohortId]/index.tsx b/src/pages/centers/[cohortId]/index.tsx
@@ -153,6 +153,7 @@ const CohortPage = () => {
     (state: { setBlockId: any }) => state.setBlockId
   );
 
+   const { tab} = router.query;
   const [open, setOpen] = React.useState(false);
   const theme = useTheme<any>();
   const [selectedDate, setSelectedDate] =
@@ -188,7 +189,14 @@ const CohortPage = () => {
   const [onEditEvent, setOnEditEvent] = useState(false);
   const [sortedSessions, setSortedSessions] = useState<any>([]);
   const [initialSlideIndex, setInitialSlideIndex] = useState<any>();
-
+  const [cohortFacilitatorListCount, setCohortFacilitatorListCount] = useState<any>();
+  const cohortFacilitatorsCount = useStore(
+    (state: { cohortFacilitatorsCount: any }) => state.cohortFacilitatorsCount
+  );
+  const [cohortLearnerListCount, setCohortLearnerListCount] = useState<any>();
+  const cohortLearnerCount = useStore(
+    (state: { cohortLearnerCount: any }) => state.cohortLearnerCount
+  );
   const handleClick = (selection: string) => {
     setDisableNextButton(false);
     setClickedBox(selection);
@@ -224,6 +232,11 @@ const CohortPage = () => {
       setCreateEvent(false);
     }
   }, [eventCreated, createEvent]);
+
+  useEffect(() => {
+    setCohortFacilitatorListCount(cohortFacilitatorsCount);
+    setCohortLearnerListCount(cohortLearnerCount)
+  },[cohortFacilitatorsCount, cohortLearnerCount]);
 
   const handleOpen = () => {
     setOpen(true);
@@ -729,9 +742,16 @@ const CohortPage = () => {
             <Tab value={1} label={t('COMMON.CENTER_SESSIONS')} />
           )}
 
-          <Tab value={2} label={t('COMMON.LEARNER_LIST')} />
+          <Tab value={2} label={t('COMMON.LEARNER_LIST')+ 
+    (tab === "2" ?"("+ cohortLearnerListCount+")": "")} />
           {role === Role.TEAM_LEADER && (
-            <Tab value={3} label={t('COMMON.FACILITATOR_LIST')} />
+            <Tab 
+  value={3} 
+  label={
+    t('COMMON.FACILITATOR_LIST') + 
+    (tab === "3" ? "("+cohortFacilitatorListCount+")": "")
+  } 
+/>
           )}
         </Tabs>
       </Box>

diff --git a/src/store/store.js b/src/store/store.js
@@ -12,6 +12,10 @@ const useStore = create(
       userRole: '',
       pairs: [],
       isActiveYearSelected: '',
+      cohortFacilitatorsCount:0,
+      setCohortFacilitatorsCount: (newValue) => set((state) => ({ cohortFacilitatorsCount: newValue })),
+      cohortLearnerCount:0,
+      setCohortLearnerCount: (newValue) => set((state) => ({ cohortLearnerCount: newValue })),
       setValue: (newValue) => set((state) => ({ value: newValue })),
       setBlock: (newBlock) => set((state) => ({ block: newBlock })),
       setUserRole: (newRole) => set((state) => ({ userRole: newRole })),