Merge pull request #2402 from airqo-platform/hotfix-demo-feedback

[Hotfix] Fix current org change

Author: Baalmart

platform/src/common/components/AQNumberCard/index.jsx

@@ -330,7 +330,7 @@ const AQNumberCard = ({ className = '' }) => {
     [dispatch],
   );
 
-  if (loading) {
+  if (loading || isFetchingActiveGroup) {
     return (
       <div
         className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 ${className}`}

platform/src/common/components/Dropdowns/OrganizationDropdown.jsx

@@ -59,18 +59,12 @@ const OrganizationDropdown = () => {
       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) {

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.

platform/src/core/hooks/useGetActiveGroupId.jsx

@@ -1,39 +1,45 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
+const findGroupByOrgName = (groups, orgName) =>
+  groups?.find(
+    (group) => group.grp_title.toLowerCase() === orgName?.toLowerCase(),
+  );
+
 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(true);
+
+    const matchingGroup = findGroupByOrgName(
+      userInfo?.groups,
+      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,
-      userID: userInfo?.id || 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) {
-    const storedGroupInUserGroups = userInfo.groups.find(
-      (group) => group._id === activeGroupFromStorage._id,
+  if (chartData.organizationName) {
+    const storedGroupInUserGroups = findGroupByOrgName(
+      userInfo?.groups,
+      chartData?.organizationName,
     );
 
     if (storedGroupInUserGroups) {
@@ -48,8 +54,9 @@ export function useGetActiveGroup() {
   }
 
   // Find group matching chart organization name
-  const matchingGroup = userInfo.groups.find(
-    (group) => group.grp_title === chartData.organizationName,
+  const matchingGroup = findGroupByOrgName(
+    userInfo?.groups,
+    chartData?.organizationName,
   );
 
   if (matchingGroup) {