Merge pull request #3688 from OneCommunityGlobal/Taariq_fix_Weekly_Summary_Reports_Team_Code_Changes_on_refresh

Taariq fix weekly summary reports team code changes on refresh

Author: one-community

src/components/Badge/__tests__/NewBadges.test.js

@@ -151,7 +151,7 @@ describe('NewBadges component', () => {
     expect(badgeImages).toHaveLength(3);
 
     fireEvent.mouseEnter(badgeImages[0]);
-    screen.findByText(/Early Bird/);
+    await screen.findByText(/Early Bird/);
   });
 
   it('should filter out badges earned older than a week', async () => {

src/components/Projects/WBS/wbs.test.jsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
@@ -8,8 +9,6 @@ import configureStore from 'redux-mock-store';
 import WBS from './wbs';
 import { setWBSStart, setWBS } from '../../../actions/wbs';
 
-
-
 jest.mock('../../../actions/wbs', () => ({
   addNewWBS: jest.fn(),
   fetchAllWBS: jest.fn(),
@@ -45,7 +44,7 @@ describe('WBS Component', () => {
           frontPermissions: ['deleteWbs', 'addWbs', 'fetchAllWBS'],
           backPermissions: [],
         },
-        role: "Manager",
+        role: 'Manager',
       },
     },
     role: { roles: [] },
@@ -74,6 +73,7 @@ describe('WBS Component', () => {
   });
 
   it('dispatches setWBSStart and setWBS when fetchAllWBS is called on mount', async () => {
+    jest.setTimeout(10000);
     const mockWBSData = [{ _id: 'wbs1', wbsName: 'WBS 1' }];
     axios.get.mockResolvedValueOnce({ data: mockWBSData });
 
@@ -82,11 +82,11 @@ describe('WBS Component', () => {
     expect(store.dispatch).toHaveBeenCalledWith(setWBSStart());
 
     await waitFor(() => {
+      expect(store.dispatch).toHaveBeenCalledWith(setWBSStart());
       expect(store.dispatch).toHaveBeenCalledWith(setWBS(mockWBSData));
     });
   });
 
-
   it('renders AddWBS component', () => {
     renderComponent();
     expect(screen.getByTestId('add-wbs')).toBeInTheDocument();
@@ -114,5 +114,4 @@ describe('WBS Component', () => {
     expect(screen.getByText('#')).toBeInTheDocument();
     expect(screen.getByText('Name')).toBeInTheDocument();
   });
-  
-});
+});

src/components/WeeklySummariesReport/WeeklySummariesReport.jsx

@@ -207,92 +207,27 @@ const WeeklySummariesReport = props => {
     }
   };
 
-  // Initial data loading
   const createIntialSummaries = async () => {
     try {
-      const {
-        allBadgeData,
-        getWeeklySummariesReport,
-        fetchAllBadges,
-        hasPermission,
-        auth,
-        setTeamCodes,
-      } = props;
-
-      // Get the active tab from session storage or use default
-      const activeTab =
-        sessionStorage.getItem('tabSelection') === null
-          ? navItems[1]
-          : sessionStorage.getItem('tabSelection');
-
-      // Get the week index for the active tab
-      const weekIndex = navItems.indexOf(activeTab);
-
-      // console.log(`Initial load: Fetching data for tab ${activeTab} with weekIndex ${weekIndex}`);
+      const initialTabIndex = 0;
+      const activeTab = navItems[initialTabIndex];
 
-      // Set initial loading and active tab state
-      setState(prevState => ({
-        ...prevState,
-        loading: true,
-        activeTab,
-        tabsLoading: {
-          ...prevState.tabsLoading,
-          [activeTab]: true,
-        },
-      }));
-
-      // Get permissions
-      const badgeStatusCode = await fetchAllBadges();
-      setPermissionState(prev => ({
-        ...prev,
-        bioEditPermission: hasPermission('putUserProfileImportantInfo'),
-        canEditSummaryCount: hasPermission('putUserProfileImportantInfo'),
-        codeEditPermission:
-          hasPermission('editTeamCode') ||
-          auth.user.role === 'Owner' ||
-          auth.user.role === 'Administrator',
-        canSeeBioHighlight: hasPermission('highlightEligibleBios'),
-      }));
-
-      // Fetch data for the active tab only
-      const res = await getWeeklySummariesReport(weekIndex);
-      // console.log('API response:', res);
-      // console.log('Response data:', res?.data);
-      // console.log('Data is array:', Array.isArray(res?.data));
-      // console.log('Data length:', res?.data?.length);
+      const res = await props.getWeeklySummariesReport(initialTabIndex);
       const summaries = res?.data ?? [];
 
-      if (!Array.isArray(summaries) || summaries.length === 0) {
-        setState(prevState => ({
-          ...prevState,
-          loading: false,
-          tabsLoading: {
-            ...prevState.tabsLoading,
-            [activeTab]: false,
-          },
-        }));
-        return null;
-      }
-
-      // Process the data
-      const teamCodeGroup = {};
-      const teamCodes = [];
-
-      // Shallow copy and sort
       let summariesCopy = [...summaries];
       summariesCopy = alphabetize(summariesCopy);
 
-      // Add new key of promised hours by week
       summariesCopy = summariesCopy.map(summary => {
         const promisedHoursByWeek = weekDates.map(weekDate =>
           getPromisedHours(weekDate.toDate, summary.weeklycommittedHoursHistory),
         );
-
         const filterColor = summary.filterColor || null;
-
         return { ...summary, promisedHoursByWeek, filterColor };
       });
 
+      const teamCodeGroup = {};
+      const teamCodes = [];
       const colorOptionGroup = new Set();
       const colorOptions = [];
       const COLORS = [
@@ -318,7 +253,6 @@ const WeeklySummariesReport = props => {
         '#C8A2C8',
       ];
 
-      // Process team codes and colors
       summariesCopy.forEach(summary => {
         const code = summary.teamCode || 'noCodeLabel';
         if (teamCodeGroup[code]) {
@@ -327,70 +261,61 @@ const WeeklySummariesReport = props => {
           teamCodeGroup[code] = [summary];
         }
 
-        if (summary.weeklySummaryOption) colorOptionGroup.add(summary.weeklySummaryOption);
+        if (summary.weeklySummaryOption) {
+          colorOptionGroup.add(summary.weeklySummaryOption);
+        }
       });
 
       Object.keys(teamCodeGroup).forEach(code => {
         if (code !== 'noCodeLabel') {
           teamCodes.push({
             value: code,
             label: `${code} (${teamCodeGroup[code].length})`,
-            _ids: teamCodeGroup[code]?.map(item => item._id),
+            _ids: teamCodeGroup[code].map(item => item._id),
           });
         }
       });
 
-      setTeamCodes(teamCodes);
+      if (teamCodeGroup.noCodeLabel?.length > 0) {
+        teamCodes.push({
+          value: '',
+          label: `Select All With NO Code (${teamCodeGroup.noCodeLabel.length})`,
+          _ids: teamCodeGroup.noCodeLabel.map(item => item._id),
+        });
+      }
 
       colorOptionGroup.forEach(option => {
-        colorOptions.push({
-          value: option,
-          label: option,
-        });
+        colorOptions.push({ value: option, label: option });
       });
 
-      colorOptions.sort((a, b) => `${a.label}`.localeCompare(`${b.label}`));
-      teamCodes
-        .sort((a, b) => `${a.label}`.localeCompare(`${b.label}`))
-        .push({
-          value: '',
-          label: `Select All With NO Code (${teamCodeGroup.noCodeLabel?.length || 0})`,
-          _ids: teamCodeGroup?.noCodeLabel?.map(item => item._id),
-        });
+      colorOptions.sort((a, b) => a.label.localeCompare(b.label));
+      teamCodes.sort((a, b) => a.label.localeCompare(b.label));
 
       const chartData = [];
 
-      // Store the data in the tab-specific state
       setState(prevState => ({
         ...prevState,
         loading: false,
-        allRoleInfo: [],
+        activeTab,
         summaries: summariesCopy,
-        loadedTabs: [activeTab],
-        summariesByTab: {
-          [activeTab]: summariesCopy,
-        },
-        badges: allBadgeData,
-        hasSeeBadgePermission: badgeStatusCode === 200,
         filteredSummaries: summariesCopy,
+        loadedTabs: [activeTab],
+        summariesByTab: { [activeTab]: summariesCopy },
         tableData: teamCodeGroup,
         chartData,
         COLORS,
         colorOptions,
         teamCodes,
         teamCodeWarningUsers: summariesCopy.filter(s => s.teamCodeWarning),
-        auth,
-        tabsLoading: {
-          [activeTab]: false,
-        },
+        tabsLoading: { ...prevState.tabsLoading, [activeTab]: false },
+        selectedCodes: [],
       }));
 
-      // Now load info collections
+      // 🔐 Now load info collections
       await intialInfoCollections(summariesCopy);
-
-      return summariesCopy;
     } catch (error) {
-      // console.error('Error in createInitialSummaries:', error);
+      // eslint-disable-next-line no-console
+      console.error('Error in createInitialSummaries:', error);
       setState(prevState => ({
         ...prevState,
         loading: false,
@@ -399,7 +324,6 @@ const WeeklySummariesReport = props => {
           [prevState.activeTab]: false,
         },
       }));
-      return null;
     }
   };
 
@@ -763,10 +687,20 @@ const WeeklySummariesReport = props => {
   };
 
   const handleSelectCodeChange = event => {
-    setState(prev => ({
-      ...prev,
-      selectedCodes: event,
-    }));
+    setState(prev => {
+      const selectedValues = event.map(e => e.value);
+      // Move selected codes to the front of the dropdown list // newly added
+      const reorderedTeamCodes = [
+        ...prev.teamCodes.filter(code => selectedValues.includes(code.value)), // selected first
+        ...prev.teamCodes.filter(code => !selectedValues.includes(code.value)), // then the rest
+      ];
+
+      return {
+        ...prev,
+        selectedCodes: event,
+        teamCodes: reorderedTeamCodes,
+      };
+    });
   };
 
   const handleOverHoursToggleChange = () => {
@@ -939,6 +873,11 @@ const WeeklySummariesReport = props => {
             _ids: updatedSummaries.filter(s => s.teamCode === replaceCode).map(s => s._id),
           });
 
+        const reorderedTeamCodes = [
+          updatedSelectedCodes[0], // the newly replaced code on top
+          ...updatedTeamCodes.filter(tc => tc.value !== updatedSelectedCodes[0].value),
+        ];
+
         const updatedWarningUsers = [...teamCodeWarningUsers];
         updatedUsers.forEach(({ userId, teamCodeWarning }) => {
           const existingIndex = updatedWarningUsers.findIndex(user => user._id === userId);
@@ -961,7 +900,9 @@ const WeeklySummariesReport = props => {
         setState(prev => ({
           ...prev,
           summaries: updatedSummaries,
-          teamCodes: updatedTeamCodes,
+          // teamCodes: updatedTeamCodes,
+          teamCodes: reorderedTeamCodes,
+          // selectedCodes: [],
           selectedCodes: updatedSelectedCodes,
           replaceCode: '',
           replaceCodeError: null,
@@ -1068,10 +1009,12 @@ const WeeklySummariesReport = props => {
     let isMounted = true;
     window._isMounted = isMounted;
 
-    // console.log('Initial useEffect running');
-
-    // Only load the initial tab, nothing else
-    createIntialSummaries();
+    // Wrap createIntialSummaries in an async fn so we can await it
+    const loadInitialData = async () => {
+      await createIntialSummaries();
+    };
+    // Kick off the async load on mount
+    loadInitialData();
 
     return () => {
       isMounted = false;
@@ -1103,6 +1046,37 @@ const WeeklySummariesReport = props => {
     state.summaries,
     state.activeTab,
   ]);
+
+  useEffect(() => {
+    // On mount: fetch all badges before deriving permissions
+    const fetchInitialPermissions = async () => {
+      try {
+        // Fetch all badges first so we can derive up‑to‑date permissions
+        await props.fetchAllBadges();
+        setPermissionState(prev => ({
+          ...prev,
+          bioEditPermission: props.hasPermission('putUserProfileImportantInfo'),
+          // codeEditPermission: props.hasPermission('replaceTeamCodes'),
+          // allow team‑code edits for specific roles or permissions
+          codeEditPermission:
+            props.hasPermission('editTeamCode') ||
+            props.auth?.user?.role === 'Owner' ||
+            props.auth?.user?.role === 'Administrator',
+          // Permit editing of summary hour counts if the user has that badge
+          canEditSummaryCount: props.hasPermission('editSummaryHoursCount'),
+          // Show bio highlights only to users with that permission
+          canSeeBioHighlight: props.hasPermission('highlightEligibleBios'),
+        }));
+      } catch (error) {
+        // log failure fetching badges or permissions
+        // eslint-disable-next-line no-console
+        console.error('Failed to fetch badges or permissions', error);
+      }
+    };
+
+    fetchInitialPermissions();
+  }, []);
+
   const { role, darkMode } = props;
   const { error } = props;
   const hasPermissionToFilter = role === 'Owner' || role === 'Administrator';