Fixing team code replace bug on Weekly Summaries Report page

Author: TaariqMansurie

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}`);
-
-      // 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'),
-      }));
+      const initialTabIndex = 0;
+      const activeTab = navItems[initialTabIndex];
 
-      // 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,60 @@ 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 },
       }));
 
-      // 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 +323,6 @@ const WeeklySummariesReport = props => {
           [prevState.activeTab]: false,
         },
       }));
-      return null;
     }
   };
 
@@ -763,10 +686,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
+      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 = () => {
@@ -1068,10 +1001,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 +1038,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';