Issue #PS-000 feat: Used tanstack query

tekdi · Aug 28, 2024 · 678802c · 678802c
1 parent 1ba79bb
commit 678802c
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 20 deletions.
diff --git a/src/components/AddFacilitator.tsx b/src/components/AddFacilitator.tsx
@@ -5,6 +5,7 @@ import {
 import {
   FormContext,
   FormContextType,
+  QueryKeys,
   RoleId,
   Telemetry,
 } from '@/utils/app.constant';
@@ -38,6 +39,7 @@ import { useTranslation } from 'next-i18next';
 import { tenantId } from '../../app.config';
 import FormButtons from './FormButtons';
 import { showToastMessage } from './Toastify';
+import { useQueryClient } from '@tanstack/react-query';
 interface AddFacilitatorModalprops {
   open: boolean;
   onClose: () => void;
@@ -61,6 +63,7 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
   const [createFacilitator, setCreateFacilitator] = React.useState(false);
   const [isVisible, setIsVisible] = React.useState(true);
   const [uiSchema, setUiSchema] = React.useState<any>();
+  const queryClient = useQueryClient();
   const [reloadProfile, setReloadProfile] = React.useState(false);
   const [email, setEmail] = React.useState('');
   const [formData, setFormData] = React.useState<any>();
@@ -287,6 +290,7 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
             );
             setReloadProfile(true);
             onReload?.();
+            queryClient.invalidateQueries({ queryKey: [QueryKeys.GET_ACTIVE_FACILITATOR] });
           }
           onClose();
         } else {
@@ -299,6 +303,8 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
                 if (response) {
                   onFacilitatorAdded?.();
                   onClose();
+                  queryClient.invalidateQueries({ queryKey: [QueryKeys.GET_ACTIVE_FACILITATOR] });
+                  queryClient.invalidateQueries({ queryKey: [QueryKeys.MY_COHORTS, userId] });
                   showToastMessage(
                     t('COMMON.FACILITATOR_ADDED_SUCCESSFULLY'),
                     'success'

diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx
@@ -28,6 +28,7 @@ import { showToastMessage } from './Toastify';
 import manageUserStore from '@/store/manageUserStore';
 import { ArrowDropDownIcon } from '@mui/x-date-pickers/icons';
 import { telemetryFactory } from '@/utils/telemetry';
+import { toPascalCase } from '@/utils/Helper';
 
 interface CohortSelectionSectionProps {
   classId: string;
@@ -424,7 +425,7 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
                         </FormControl>
                       ) : (
                         <Typography color={theme.palette.warning['300']}>
-                          {cohortsData[0]?.name}
+                          {toPascalCase(cohortsData[0]?.name)}
                         </Typography>
                       )}
                     </Box>

diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx
@@ -10,7 +10,7 @@ import { cohortList, getCohortList } from '@/services/CohortServices';
 import { getMyUserList } from '@/services/MyClassDetailsService';
 import reassignLearnerStore from '@/store/reassignLearnerStore';
 import useStore from '@/store/store';
-import { Role, Status } from '@/utils/app.constant';
+import { QueryKeys, Role, Status } from '@/utils/app.constant';
 import AddIcon from '@mui/icons-material/Add';
 import ApartmentIcon from '@mui/icons-material/Apartment';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -30,6 +30,7 @@ import DeleteUserModal from './DeleteUserModal';
 import Loader from './Loader';
 import ReassignModal from './ReassignModal';
 import SimpleModal from './SimpleModal';
+import { useQueryClient } from '@tanstack/react-query';
 
 interface Cohort {
   cohortId: string;
@@ -67,6 +68,8 @@ const ManageUser: React.FC<ManageUsersProps> = ({
   const router = useRouter();
   const store = manageUserStore();
   const newStore = useStore();
+  const queryClient = useQueryClient();
+
   const [value, setValue] = React.useState(1);
   const [users, setUsers] = useState<
     {
@@ -141,7 +144,12 @@ const ManageUser: React.FC<ManageUsersProps> = ({
           };
           const fields = ['age'];
 
-          const resp = await getMyUserList({ limit, page, filters, fields });
+          // const resp = await getMyUserList({ limit, page, filters, fields });
+          const resp = await queryClient.fetchQuery({
+            queryKey: [QueryKeys.GET_ACTIVE_FACILITATOR, filters],
+            queryFn: () => getMyUserList({ limit, page, filters, fields }),
+          });
+
           const facilitatorList = resp.result?.getUserDetails;
 
           if (!facilitatorList || facilitatorList?.length === 0) {
@@ -150,9 +158,13 @@ const ManageUser: React.FC<ManageUsersProps> = ({
           }
           const userIds = facilitatorList?.map((user: any) => user.userId);
 
-          const cohortDetailsPromises = userIds?.map((userId: string) =>
-            getCohortList(userId, { filter: 'true' })
+          const cohortDetailsPromises = userIds.map((userId: string) =>
+            queryClient.fetchQuery({
+              queryKey: [QueryKeys.MY_COHORTS, userId],
+              queryFn: () => getCohortList(userId, { filter: 'true' }),
+            })
           );
+
           const cohortDetailsResults = await Promise.allSettled(
             cohortDetailsPromises
           );

diff --git a/src/pages/assessments/index.tsx b/src/pages/assessments/index.tsx
@@ -33,10 +33,12 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import { AssessmentType, Program } from '../../../app.config';
+import { useQueryClient } from '@tanstack/react-query';
 
 const Assessments = () => {
   const theme = useTheme<any>();
   const router = useRouter();
+  const queryClient = useQueryClient();
   const { t } = useTranslation();
   const [modalOpen, setModalOpen] = useState(false);
 
@@ -95,9 +97,6 @@ const Assessments = () => {
             ...user,
             name: toPascalCase(user.name),
             userId: user.userId,
-            // percentageString: '0%',
-            // percentage: 0,
-            // status: 'Not_Started',
           }));
           console.log(`userDetails`, userDetails);
           setCohortMembers(userDetails);
@@ -125,7 +124,10 @@ const Assessments = () => {
         program: [Program],
         se_boards: [stateName],
         // subject: [subjects || subject],
-        assessment1: assessmentType === 'pre' ? AssessmentType.PRE_TEST : AssessmentType.POST_TEST,
+        assessment1:
+          assessmentType === 'pre'
+            ? AssessmentType.PRE_TEST
+            : AssessmentType.POST_TEST,
       };
       try {
         if (stateName) {
@@ -134,8 +136,10 @@ const Assessments = () => {
             setLearnerList([]);
             setFilteredLearnerList([]);
             setAssessmentList([]);
-            const searchResults = await getDoIdForAssessmentDetails({
-              filters,
+
+            const searchResults = await queryClient.fetchQuery({
+              queryKey: ['contentSearch', { filters }],
+              queryFn: () => getDoIdForAssessmentDetails({ filters }),
             });
 
             if (searchResults?.responseCode === 'OK') {
@@ -317,7 +321,8 @@ const Assessments = () => {
       case AssessmentStatus.COMPLETED:
         return (
           <Box>
-            {t('ASSESSMENTS.OVERALL_SCORE')}: <span style={{ color: color }}>{percentage}%</span>
+            {t('ASSESSMENTS.OVERALL_SCORE')}:{' '}
+            <span style={{ color: color }}>{percentage}%</span>
           </Box>
         );
       default:
@@ -595,9 +600,9 @@ const Assessments = () => {
           </Grid>
         </Box>
       )}
-      {!isLoading && !filteredLearnerList?.length && !!assessmentList?.length && (
-        <NoDataFound />
-      )}
+      {!isLoading &&
+        !filteredLearnerList?.length &&
+        !!assessmentList?.length && <NoDataFound />}
 
       <AssessmentSortModal
         open={modalOpen}

diff --git a/src/pages/assessments/user/[userId]/index.tsx b/src/pages/assessments/user/[userId]/index.tsx
@@ -34,6 +34,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AssessmentType, Program } from '../../../../../app.config';
+import { useQueryClient } from '@tanstack/react-query';
 
 const statusKeyMap: any = {
   [AssessmentStatus.COMPLETED]: 'ASSESSMENTS.COMPLETED',
@@ -46,6 +47,7 @@ function AssessmentsDetails() {
   const { t } = useTranslation();
   const router = useRouter();
   const searchParams = useSearchParams();
+  const queryClient = useQueryClient();
   const assessmentTypeParam = searchParams.get('assessmentType');
   const centerId = searchParams.get('center');
   const params = useParams<{ userId: string }>();
@@ -92,10 +94,12 @@ function AssessmentsDetails() {
             setAssessmentList([]);
             setSubject([]);
             setAssessmentInfo({});
-            const searchResults = await getDoIdForAssessmentDetails({
-              filters,
-            });
+
 
+            const searchResults = await queryClient.fetchQuery({
+              queryKey: ['contentSearch', { filters }],
+              queryFn: () => getDoIdForAssessmentDetails({ filters }),
+            });
             if (searchResults?.responseCode === 'OK') {
               const result = searchResults?.result;
               if (result) {
@@ -203,7 +207,7 @@ function AssessmentsDetails() {
   useEffect(() => {
     const getUserInfo = async () => {
       try {
-        const response = await getUserDetails(params.userId);
+        const response = await queryClient.fetchQuery({ queryKey: ['userRead', params.userId], queryFn: () => getUserDetails(params.userId) }); 
         console.log('response', response);
         if (response?.result?.userData) {
           setUserDetails(response?.result?.userData);

diff --git a/src/services/queries.ts b/src/services/queries.ts
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { getUserDetails } from './ProfileService';
 import { cohortList } from './CohortServices';
-import { refetchInterval, gcTime } from '@/utils/app.constant';
+import { refetchInterval } from '@/utils/app.constant';
 
 export function useProfileInfo(
   userId: string | string[],

diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts
@@ -111,4 +111,10 @@ export enum AssessmentStatus {
   NOT_STARTED = 'Not_Started',
   IN_PROGRESS = 'In_Progress',
   COMPLETED = 'Completed',
+}
+
+
+export enum QueryKeys {
+  GET_ACTIVE_FACILITATOR = 'getActiveFacilitatorList',
+  MY_COHORTS = 'myCohorts',
 }