Skip to content

Commit 8bc8388

Browse files
rushi-tekdirushi-tekdi
authored
Merge pull request #2687 from Rushikesh-Sonawane99/release-1.15.0
Issue #PS-6448 fix: Fixed YN village load issue
2 parents 569ec3e + df989e5 commit 8bc8388

File tree

1 file changed

+95
-24
lines changed

1 file changed

+95
-24
lines changed

‎mfes/youthNet/src/pages/villages/index.tsx‎

Lines changed: 95 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
} from '@mui/material';
2222
import { useTranslation } from 'next-i18next';
2323
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
24-
import React, { useEffect, useMemo, useState } from 'react';
24+
import React, { useEffect, useMemo, useRef, useState } from 'react';
2525
import { useTheme } from '@mui/material/styles';
2626
import SearchBar from '../../components/Searchbar';
2727
import SortBy from '../../components/youthNet/SortBy';
@@ -412,7 +412,8 @@ const Index = () => {
412412
}
413413
}, [value, mobilizerCenterOptions, selectedCenterIdForLocation]);
414414

415-
// For Lead on Villages (2) / Youth/Volunteers (3): on center change reset state/district/block/village and lists, then populate from new center's catchment
415+
// For Lead on Villages (2) / Youth/Volunteers (3): populate state/district/block from center catchment.
416+
// Village/youth lists are reset only when user changes center (in dropdown onSelect), not here, so effect re-runs (e.g. blockId) don't wipe the list.
416417
useEffect(() => {
417418
if (
418419
(value !== 2 && value !== 3) ||
@@ -421,14 +422,6 @@ const Index = () => {
421422
) {
422423
return;
423424
}
424-
// Reset village selection and location-dependent lists when center changes
425-
setSelectedVillageValue([]);
426-
setVillageList([]);
427-
setVillageListWithUsers([]);
428-
setFilteredVillageListWithUsers([]);
429-
setVillageCount(0);
430-
setYouthList([]);
431-
setFilteredYouthList([]);
432425

433426
const { states, districtsByState, blocksByDistrict } =
434427
getStatesDistrictsAndBlocksFromCenterCatchment(selectedCenterIdForLocation);
@@ -616,10 +609,15 @@ const Index = () => {
616609
} catch (e) {
617610
setLoading(false);
618611
}
619-
}, [searchInput, appliedFilters, value]);
612+
}, [searchInput, appliedFilters, value, villageListWithUsers, youthList]);
620613

621614
useEffect(() => {
622615
const getYouthData = async () => {
616+
const villagesWeAreFetching = Array.isArray(selectedVillageValue)
617+
? selectedVillageValue
618+
: selectedVillageValue != null && selectedVillageValue !== ''
619+
? [selectedVillageValue]
620+
: [];
623621
try {
624622
setLoading(true);
625623
const filters = {
@@ -629,7 +627,19 @@ const Index = () => {
629627
};
630628

631629
const result = await fetchUserList({ filters });
632-
console.log('result', result);
630+
const currentKey = JSON.stringify(
631+
Array.isArray(selectedVillageValueRef.current)
632+
? selectedVillageValueRef.current
633+
: selectedVillageValueRef.current != null && selectedVillageValueRef.current !== ''
634+
? [selectedVillageValueRef.current]
635+
: []
636+
);
637+
const fetchKey = JSON.stringify(villagesWeAreFetching);
638+
if (currentKey !== fetchKey) {
639+
setLoading(false);
640+
return;
641+
}
642+
633643
if (result.getUserDetails) {
634644
const transformedYouthData = result?.getUserDetails.map(
635645
(user: any) => {
@@ -686,7 +696,6 @@ const Index = () => {
686696
const ascending = [...transformedYouthData].sort((a, b) =>
687697
a.name.localeCompare(b.name)
688698
);
689-
690699
setYouthList(ascending);
691700
setFilteredYouthList(ascending);
692701
} else {
@@ -945,8 +954,15 @@ const Index = () => {
945954
if (villageList?.length !== 0) getVillageYouthData();
946955
}, [villageList, selectedVillageValue]);
947956

957+
const selectedBlockValueRef = useRef(selectedBlockValue);
958+
selectedBlockValueRef.current = selectedBlockValue;
959+
960+
const selectedVillageValueRef = useRef(selectedVillageValue);
961+
selectedVillageValueRef.current = selectedVillageValue;
962+
948963
useEffect(() => {
949964
const getVillageList = async () => {
965+
const blockWeAreFetching = selectedBlockValue;
950966
try {
951967
if (YOUTHNET_USER_ROLE.MOBILIZER === getLoggedInUserRole()) {
952968
let villageDataString = localStorage.getItem('villageData');
@@ -972,24 +988,26 @@ const Index = () => {
972988
fieldName,
973989
});
974990

991+
if (selectedBlockValueRef.current !== blockWeAreFetching) return;
992+
975993
const transformedVillageData = villageResponce?.result?.values?.map(
976994
(item: any) => ({
977995
Id: item?.value,
978996
name: item?.label,
979997
})
980998
);
981-
setVillageCount(transformedVillageData.length);
982-
983-
setVillageList(transformedVillageData);
999+
setVillageCount(transformedVillageData?.length ?? 0);
1000+
setVillageList(transformedVillageData ?? []);
9841001
if (selectedBlockValue === blockId) {
9851002
setSelectedVillageValue(villageId);
9861003
} else {
9871004
if (YOUTHNET_USER_ROLE.MOBILIZER === getLoggedInUserRole())
9881005
setSelectedVillageValue(villageId);
989-
else setSelectedVillageValue(transformedVillageData[0]?.Id);
1006+
else setSelectedVillageValue(transformedVillageData?.[0]?.Id);
9901007
}
9911008
}
9921009
} catch (error) {
1010+
if (selectedBlockValueRef.current !== blockWeAreFetching) return;
9931011
console.log(error);
9941012
}
9951013
};
@@ -1611,11 +1629,14 @@ const Index = () => {
16111629
};
16121630

16131631
useEffect(() => {
1632+
const noVillageSelection =
1633+
!selectedVillageValue ||
1634+
(Array.isArray(selectedVillageValue) && selectedVillageValue.length === 0);
16141635
if (
16151636
value === 3 &&
16161637
villageList &&
16171638
villageList.length > 0 &&
1618-
!selectedVillageValue
1639+
noVillageSelection
16191640
) {
16201641
setSelectedVillageValue(villageList?.map((village: any) => village.Id));
16211642
}
@@ -2742,6 +2763,16 @@ const Index = () => {
27422763
defaultValue={selectedCenterIdForLocation || mobilizerCenterOptions?.[0]?.id}
27432764
onSelect={(centerId) => {
27442765
setSelectedCenterIdForLocation(centerId);
2766+
setSelectedStateValue('');
2767+
setSelectedDistrictValue('');
2768+
setSelectedBlockValue('');
2769+
setSelectedVillageValue([]);
2770+
setVillageList([]);
2771+
setVillageListWithUsers([]);
2772+
setFilteredVillageListWithUsers([]);
2773+
setVillageCount(0);
2774+
setYouthList([]);
2775+
setFilteredYouthList([]);
27452776
}}
27462777
label={t('COMMON.CENTER')}
27472778
/>
@@ -2752,7 +2783,12 @@ const Index = () => {
27522783
name={stateData?.STATE_NAME}
27532784
values={stateData}
27542785
defaultValue={selectedStateValue || stateData?.[0]?.id}
2755-
onSelect={(val) => setSelectedStateValue(val)}
2786+
onSelect={(val) => {
2787+
setSelectedStateValue(val);
2788+
setSelectedVillageValue([]);
2789+
setYouthList([]);
2790+
setFilteredYouthList([]);
2791+
}}
27562792
label={t('YOUTHNET_USERS_AND_VILLAGES.STATE')}
27572793
/>
27582794
) : (
@@ -2779,7 +2815,12 @@ const Index = () => {
27792815
defaultValue={
27802816
selectedDistrictValue || districtData?.[0]?.id
27812817
}
2782-
onSelect={(val) => setSelectedDistrictValue(val)}
2818+
onSelect={(val) => {
2819+
setSelectedDistrictValue(val);
2820+
setSelectedVillageValue([]);
2821+
setYouthList([]);
2822+
setFilteredYouthList([]);
2823+
}}
27832824
label={t('YOUTHNET_USERS_AND_VILLAGES.DISTRICTS')}
27842825
/>
27852826
) : (
@@ -2804,7 +2845,12 @@ const Index = () => {
28042845
name={blockData?.BLOCK_NAME}
28052846
values={blockData}
28062847
defaultValue={selectedBlockValue || blockData?.[0]?.id}
2807-
onSelect={(val) => setSelectedBlockValue(val)}
2848+
onSelect={(val) => {
2849+
setSelectedBlockValue(val);
2850+
setSelectedVillageValue([]);
2851+
setYouthList([]);
2852+
setFilteredYouthList([]);
2853+
}}
28082854
label={t('YOUTHNET_USERS_AND_VILLAGES.BLOCKS')}
28092855
/>
28102856
) : (
@@ -2957,6 +3003,16 @@ const Index = () => {
29573003
defaultValue={selectedCenterIdForLocation || mobilizerCenterOptions?.[0]?.id}
29583004
onSelect={(centerId) => {
29593005
setSelectedCenterIdForLocation(centerId);
3006+
setSelectedStateValue('');
3007+
setSelectedDistrictValue('');
3008+
setSelectedBlockValue('');
3009+
setSelectedVillageValue([]);
3010+
setVillageList([]);
3011+
setVillageListWithUsers([]);
3012+
setFilteredVillageListWithUsers([]);
3013+
setVillageCount(0);
3014+
setYouthList([]);
3015+
setFilteredYouthList([]);
29603016
}}
29613017
label={t('COMMON.CENTER')}
29623018
/>
@@ -2967,7 +3023,12 @@ const Index = () => {
29673023
name={stateData?.STATE_NAME}
29683024
values={stateData}
29693025
defaultValue={selectedStateValue || stateData?.[0]?.id}
2970-
onSelect={(val) => setSelectedStateValue(val)}
3026+
onSelect={(val) => {
3027+
setSelectedStateValue(val);
3028+
setSelectedVillageValue([]);
3029+
setYouthList([]);
3030+
setFilteredYouthList([]);
3031+
}}
29713032
label={t('YOUTHNET_USERS_AND_VILLAGES.STATE')}
29723033
/>
29733034
) : (
@@ -2994,7 +3055,12 @@ const Index = () => {
29943055
defaultValue={
29953056
selectedDistrictValue || districtData?.[0]?.id
29963057
}
2997-
onSelect={(val) => setSelectedDistrictValue(val)}
3058+
onSelect={(val) => {
3059+
setSelectedDistrictValue(val);
3060+
setSelectedVillageValue([]);
3061+
setYouthList([]);
3062+
setFilteredYouthList([]);
3063+
}}
29983064
label={t('YOUTHNET_USERS_AND_VILLAGES.DISTRICTS')}
29993065
/>
30003066
) : (
@@ -3019,7 +3085,12 @@ const Index = () => {
30193085
name={blockData?.BLOCK_NAME}
30203086
values={blockData}
30213087
defaultValue={selectedBlockValue || blockData?.[0]?.id}
3022-
onSelect={(val) => setSelectedBlockValue(val)}
3088+
onSelect={(val) => {
3089+
setSelectedBlockValue(val);
3090+
setSelectedVillageValue([]);
3091+
setYouthList([]);
3092+
setFilteredYouthList([]);
3093+
}}
30233094
label={t('YOUTHNET_USERS_AND_VILLAGES.BLOCKS')}
30243095
/>
30253096
) : (

0 commit comments

Comments
 (0)