diff --git a/platform/src/common/components/AQNumberCard/index.jsx b/platform/src/common/components/AQNumberCard/index.jsx index e9a7b64672..db48cd24bf 100644 --- a/platform/src/common/components/AQNumberCard/index.jsx +++ b/platform/src/common/components/AQNumberCard/index.jsx @@ -330,7 +330,7 @@ const AQNumberCard = ({ className = '' }) => { [dispatch], ); - if (loading) { + if (loading || isFetchingActiveGroup) { return (
{ setLoading(true); setSelectedGroupId(group._id); try { - const response = await dispatch( + await dispatch( updateUserPreferences({ user_id: userID, group_id: group._id, }), ); - if (response?.payload?.success) { - localStorage.setItem('activeGroup', JSON.stringify(group)); - dispatch(setOrganizationName(group.grp_title)); - } else { - console.warn('Failed to update user preferences'); - } } catch (error) { console.error('Error updating user preferences:', error); } finally { @@ -84,10 +78,15 @@ const OrganizationDropdown = () => { const handleDropdownSelect = useCallback( (group) => { if (group?._id !== activeGroupId) { + // Immediately update organization name + dispatch(setOrganizationName(group.grp_title)); + localStorage.setItem('activeGroup', JSON.stringify(group)); + + // Dispatch preferences update asynchronously handleUpdatePreferences(group); } }, - [activeGroupId, handleUpdatePreferences], + [activeGroupId, handleUpdatePreferences, dispatch], ); if (!activeGroupId || groupList.length === 0) { diff --git a/platform/src/common/components/Modal/dataDownload/modules/DataDownload.jsx b/platform/src/common/components/Modal/dataDownload/modules/DataDownload.jsx index 47b7c9c9db..9faabf3b3f 100644 --- a/platform/src/common/components/Modal/dataDownload/modules/DataDownload.jsx +++ b/platform/src/common/components/Modal/dataDownload/modules/DataDownload.jsx @@ -58,6 +58,7 @@ const DataDownload = ({ onClose }) => { id: activeGroupId, title: groupTitle, groupList, + loading: isFetchingActiveGroup, } = useGetActiveGroup(); const preferencesData = useSelector( (state) => state.defaults.individual_preferences, @@ -128,12 +129,16 @@ const DataDownload = ({ onClose }) => { * Fetch sites summary whenever the selected organization changes. */ useEffect(() => { + if (isFetchingActiveGroup) return; + if (formData.organization) { dispatch( - fetchSitesSummary({ group: formData.organization.name.toLowerCase() }), + fetchSitesSummary({ + group: formData.organization.name.toLowerCase(), + }), ); } - }, [dispatch, formData.organization]); + }, [dispatch, formData.organization, isFetchingActiveGroup]); /** * Clears all selected sites and resets form data. diff --git a/platform/src/core/hooks/useGetActiveGroupId.jsx b/platform/src/core/hooks/useGetActiveGroupId.jsx index fd896c33a6..acea9d2f7d 100644 --- a/platform/src/core/hooks/useGetActiveGroupId.jsx +++ b/platform/src/core/hooks/useGetActiveGroupId.jsx @@ -1,39 +1,44 @@ -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; export function useGetActiveGroup() { + const [activeGroup, setActiveGroup] = useState(null); const [loading, setLoading] = useState(true); const userInfo = useSelector((state) => state?.login?.userInfo); const chartData = useSelector((state) => state.chart); - const activeGroupFromStorage = useMemo(() => { - try { - return JSON.parse(localStorage.getItem('activeGroup') || 'null'); - } catch (error) { - console.error('Error parsing activeGroup from local storage:', error); - return null; - } - }, []); + useEffect(() => { + setLoading(false); + }, [userInfo]); useEffect(() => { + setLoading(true); + + const matchingGroup = userInfo?.groups?.find( + (group) => group.grp_title.toLowerCase() === chartData?.organizationName, + ); + + setActiveGroup(matchingGroup); setLoading(false); - }, [userInfo, activeGroupFromStorage]); + }, [chartData?.organizationName]); // If no userInfo or groups, return stored or default values if (!userInfo || !userInfo.groups || !chartData?.organizationName) { return { loading, - id: activeGroupFromStorage?.id || null, - title: activeGroupFromStorage?.grp_title || null, + id: activeGroup?.id || null, + title: activeGroup?.grp_title || null, userID: userInfo?.id || null, groupList: userInfo?.groups || [], }; } // Prioritize stored group if it exists in user's groups - if (activeGroupFromStorage) { + if (chartData.organizationName) { const storedGroupInUserGroups = userInfo.groups.find( - (group) => group._id === activeGroupFromStorage._id, + (group) => + group.grp_title.toLowerCase() === + chartData.organizationName.toLowerCase(), ); if (storedGroupInUserGroups) {