Merge pull request #303 from shreyas1434shinde/latestTeamLeaderModal

Issue #PS-789 fix:[FRONTEND] Implement centre list view
tekdi · Jun 20, 2024 · adfc4f5 · adfc4f5
2 parents b4eb329 + 7e7c7dd
commit adfc4f5
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 61 deletions.
diff --git a/src/components/ManageCentersModal.tsx b/src/components/ManageCentersModal.tsx
@@ -42,7 +42,7 @@ const ManageCentersModal: React.FC<ManageUsersModalProps> = ({
 
   return (
     <div>
-      <Button onClick={handleOpen}>Open modal</Button>
+      {/* <Button onClick={handleOpen}>Open modal</Button> */}
       <Modal
         open={open}
         onClose={handleClose}

diff --git a/src/pages/centers/index.tsx b/src/pages/centers/index.tsx
@@ -1,23 +1,58 @@
 import { Box, Button } from '@mui/material';
+import React, { useEffect } from 'react';
+import { cohort, cohortAttendancePercentParam } from '@/utils/Interfaces';
 
 import AddIcon from '@mui/icons-material/Add';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import Header from '@/components/Header';
 import Image from 'next/image';
+import Loader from '@/components/Loader';
 import building from '../../assets/images/apartment.png';
+import { cohortList } from '@/services/CohortServices';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { showToastMessage } from '@/components/Toastify';
 import { useRouter } from 'next/router';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 
 const TeachingCenters = () => {
+  const [loading, setLoading] = React.useState(false);
   const { t } = useTranslation();
   const theme = useTheme<any>();
   const router = useRouter();
+  const [cohortsData, setCohortsData] = React.useState<Array<cohort>>([]);
+  const [classId, setClassId] = React.useState('');
+  const [manipulatedCohortData, setManipulatedCohortData] =
+    React.useState<Array<cohort>>(cohortsData);
+
+  // API call to get center list
+  useEffect(() => {
+    const fetchCohortList = async () => {
+      const userId = localStorage.getItem('userId');
+      setLoading(true);
+      try {
+        if (userId) {
+          const limit = 0;
+          const page = 0;
+          const filters = { userId: userId };
+          const resp = await cohortList({ limit, page, filters });
+          setCohortsData(resp?.results?.cohortDetails);
+          setLoading(false);
+        }
+      } catch (error) {
+        console.error('Error fetching  cohort list:', error);
+        showToastMessage(t('COMMON.SOMETHING_WENT_WRONG'), 'error');
+        setLoading(false);
+      }
+    };
+    fetchCohortList();
+  }, []);
+
   return (
     <>
       <Header />
+      {loading && <Loader showBackdrop={true} loadingText={t('LOADING')} />}
       <Box sx={{ padding: '0 18px' }}>
         <Box
           textAlign={'left'}
@@ -46,63 +81,63 @@ const TeachingCenters = () => {
             <Box className="fs-12 fw-500 ">{t('COMMON.ADD_CENTER')}</Box>
           </Box>
         </Box>
-        <Box
-          className="linerGradient"
-          sx={{ borderRadius: '16px' }}
-          mt={2}
-          p={2}
-        >
-          <Box
-            onClick={() => {
-              //   router.push(`/centers/${cohortId}`); // Check route
-              router.push(`/centers/12345`); //TODO: Replace 12345 with cohortId
-            }}
-            sx={{ cursor: 'pointer' }}
-          >
-            <Box>Khapari Dharmu, Chimur, Chandrapur</Box>
-            {/* will come from API */}
-            <Box
-              sx={{
-                display: 'flex',
-                gap: '10px',
-                background: '#fff',
-                height: '56px',
-                borderRadius: '8px',
-              }}
-              mt={1}
-            >
-              <Box
-                sx={{
-                  width: '56px',
-                  display: 'flex',
-                  background: '#FFDEA1',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderTopLeftRadius: '8px',
-                  borderBottomLeftRadius: '8px',
-                }}
-              >
-                <Image src={building} alt="apartment" />
-              </Box>
+        <Box className="linerGradient" sx={{ borderRadius: '16px' }} p={2}>
+          {cohortsData?.map((item, index) => {
+            return (
+              <React.Fragment key={index}>
+                <Box
+                  onClick={() => {
+                    router.push(`/centers/${item.cohortId}`);
+                  }}
+                  sx={{ cursor: 'pointer', marginBottom: '20px' }}
+                >
+                  <Box>Khapari Dharmu, Chimur, Chandrapur</Box>
+                  {/* will come from API */}
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      gap: '10px',
+                      background: '#fff',
+                      height: '56px',
+                      borderRadius: '8px',
+                    }}
+                    mt={1}
+                  >
+                    <Box
+                      sx={{
+                        width: '56px',
+                        display: 'flex',
+                        background: '#FFDEA1',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        borderTopLeftRadius: '8px',
+                        borderBottomLeftRadius: '8px',
+                      }}
+                    >
+                      <Image src={building} alt="apartment" />
+                    </Box>
 
-              <Box
-                sx={{
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  width: '100%',
-                  padding: '0 10px',
-                }}
-              >
-                <Box>Khapari Dharmu</Box>
-                {/* will come from API */}
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        width: '100%',
+                        padding: '0 10px',
+                      }}
+                    >
+                      <Box>{item.name}</Box>
+                      {/* will come from API */}
 
-                <ChevronRightIcon />
-              </Box>
-            </Box>
-          </Box>
+                      <ChevronRightIcon />
+                    </Box>
+                  </Box>
+                </Box>
+              </React.Fragment>
+            );
+          })}
 
-          <Box mt={3}>
+          {/* <Box mt={3}>
             <Box sx={{ fontSize: '16px', color: theme.palette.warning['300'] }}>
               Bhiwapur, Nagpur (Remote)
             </Box>
@@ -148,7 +183,7 @@ const TeachingCenters = () => {
                 <ChevronRightIcon />
               </Box>
             </Box>
-          </Box>
+          </Box> */}
         </Box>
       </Box>
     </>

diff --git a/src/pages/manageUser.tsx b/src/pages/manageUser.tsx
@@ -161,14 +161,23 @@ const manageUser = () => {
                       </Box>
                       <Box
                         sx={{
-                          fontSize: '12px',
-                          fontWeight: '500',
                           padding: '4px',
                           color: theme.palette.success.contrastText,
+                          fontSize: '12px',
+                          borderRadius: '8px',
                         }}
                       >
-                        Bhiwapur, Jabarbodi, Kargaon,
-                        <span style={{ color: theme.palette.warning['400'] }}>
+                        <span
+                          style={{
+                            color: theme.palette.warning.contrastText,
+                            fontWeight: '500',
+                          }}
+                        >
+                          Bhiwapur, Jabarbodi, Kargaon,
+                        </span>
+                        <span
+                          style={{ color: theme.palette.warning.contrastText }}
+                        >
                           and 3 more
                         </span>
                       </Box>
@@ -193,7 +202,7 @@ const manageUser = () => {
                   'Metpanjara',
                 ]}
               />
-              use this after you integrate in bottom modal
+              {/* use this after you integrate in bottom modal */}
               <ManageCentersModal
                 centersName={[
                   'Khapari Dharmu',

diff --git a/src/styles/customTheme.tsx b/src/styles/customTheme.tsx
@@ -38,6 +38,7 @@ const customTheme = extendTheme({
           A200: '#4d4639',
           A400: '#FFFFFF',
           A700: '#EDEDED',
+          contrastText: ' #3B383E',
         },
         error: {
           main: '#BA1A1A',