Change timelog to redirect to current week tab on button clicks

Author: Venkataramanan Venkateswaran

src/components/Badge/Badge.jsx

@@ -50,12 +50,15 @@ function Badge(props) {
   const generateBadgeText = (totalBadges, badgeCollection, personalBestMaxHrs) => {
     if (!totalBadges) return 'You have no badges. ';
 
-    const newBadges = badgeCollection.filter(
-      value => Date.now() - new Date(value.lastModified).getTime() <= WEEK_DIFF,
-    );
+    const newBadges = (Array.isArray(badgeCollection) ? badgeCollection : [])
+      .filter(b => b && b.lastModified)
+      .filter(b => {
+        const t = new Date(b.lastModified).getTime();
+        return Number.isFinite(t) && Date.now() - t <= WEEK_DIFF;
+      });
 
     const roundedHours = Math.floor(personalBestMaxHrs);
-    const personalMaxText = newBadges.find(badgeObj => badgeObj.badge.type === 'Personal Max')
+    const personalMaxText = newBadges.find(badgeObj => badgeObj?.badge?.type === 'Personal Max')
       ? ` and a personal best of ${roundedHours} ${roundedHours === 1 ? 'hour' : 'hours'} in a week`
       : '';
 
@@ -71,7 +74,7 @@ function Badge(props) {
         if (badge?.badge?.badgeName === 'Personal Max' || badge?.badge?.type === 'Personal Max') {
           count += 1;
         } else {
-          count += Number(badge.count);
+          count += Number(badge?.count);
         }
       });
       setTotalBadge(Math.round(count));

src/components/Badge/NewBadges.jsx

@@ -6,20 +6,24 @@ import './Badge.css';
 function NewBadges(props) {
   const filterBadges = allBadges => {
     try {
-      const filteredList = allBadges.filter(
-        value => Date.now() - new Date(value.lastModified).getTime() <= WEEK_DIFF,
-      );
-
-      filteredList &&
-        filteredList.sort((a, b) => {
-          if (a?.badge?.ranking === 0) return 1;
-          if (b?.badge?.ranking === 0) return -1;
-          if (a?.badge?.ranking > b?.badge?.ranking) return 1;
-          if (a?.badge?.ranking < b?.badge?.ranking) return -1;
-          if (a?.badge?.badgeName > b?.badge?.badgeName) return 1;
-          if (a?.badge?.badgeName < b?.badge?.badgeName) return -1;
-          return 0;
+      const list = Array.isArray(allBadges) ? allBadges : [];
+      const filteredList = list
+        .filter(b => b && b.lastModified) // drop null/undefined/missing lastModified
+        .filter(b => {
+          const t = new Date(b.lastModified).getTime();
+          return Number.isFinite(t) && Date.now() - t <= WEEK_DIFF;
         });
+
+      filteredList.sort((a, b) => {
+        if (a?.badge?.ranking === 0) return 1;
+        if (b?.badge?.ranking === 0) return -1;
+        if (a?.badge?.ranking > b?.badge?.ranking) return 1;
+        if (a?.badge?.ranking < b?.badge?.ranking) return -1;
+        if (a?.badge?.badgeName > b?.badge?.badgeName) return 1;
+        if (a?.badge?.badgeName < b?.badge?.badgeName) return -1;
+        return 0;
+      });
+
       return filteredList;
     } catch (error) {
       console.log(error);

src/components/Header/Header.jsx

@@ -368,7 +368,7 @@ export function Header(props) {
                   </NavLink>
                 </NavItem>
                 <NavItem className="responsive-spacing">
-                  <NavLink tag={Link} to="/timelog">
+                  <NavLink tag={Link} to="/timelog#currentWeek">
                     <span className="dashboard-text-link">{TIMELOG}</span>
                   </NavLink>
                 </NavItem>

src/components/LeaderBoard/Leaderboard.jsx

@@ -1027,7 +1027,7 @@ function LeaderBoard({
                       </td>
                       <td className="align-middle" aria-label="Description or purpose of the cell">
                         <Link
-                          to={`/timelog/${item.personId}`}
+                          to={`/timelog/${item.personId}#currentWeek`}
                           title={`TangibleEffort: ${item.tangibletime} hours`}
                         >
                           <Progress value={item.barprogress} color={item.barcolor} />

src/components/TeamMemberTasks/TeamMemberTask.jsx

@@ -204,7 +204,10 @@ const TeamMemberTask = React.memo(
                               data-testid="icon"
                             />
 
-                            <Link to={`/timelog/${user.personId}`} className="timelog-info">
+                            <Link
+                              to={`/timelog/${user.personId}#currentWeek`}
+                              className="timelog-info"
+                            >
                               <i
                                 className="fa fa-clock-o"
                                 aria-hidden="true"

src/components/Timelog/Timelog.jsx

@@ -212,12 +212,11 @@ if (role === 'Volunteer' && userHaveTask.length > 0) {
     return tab;
   };
 
-useEffect(() => {
-  const tab = tabMapping[location.hash];
-  if (tab !== undefined) {
-    changeTab(tab);
-  }
-}, [location.hash]);  // This effect will run whenever the hash changes
+  useEffect(() => {
+    if (initialTab != null && !location.hash) {
+      changeTab(initialTab);
+    }
+  }, [initialTab, location.hash]); // This effect will run whenever the hash changes
 
 /* ---------------- methods -------------- */
 const updateTimeEntryItems = () => {
@@ -286,9 +285,21 @@ const generateAllTimeEntryItems = () => {
       const res = await axios.get(url);
 
       const data = res.data.length > 0 ? res.data : [];
-      const defaultTabValue = defaultTab(data);
-      setTimeLogState({ ...timeLogState, isTimeEntriesLoading: false });
-      setInitialTab(defaultTabValue);
+      const mappedHash = tabMapping[location.hash];
+
+      if (mappedHash !== undefined) {
+        // If the URL has a known hash, open that tab immediately
+        setTimeLogState(s => ({
+          ...s,
+          isTimeEntriesLoading: false,
+          activeTab: mappedHash,
+        }));
+        setInitialTab(null); // so the initialTab effect won’t override
+      } else {
+        // No hash → fall back to your existing default logic
+        setTimeLogState(s => ({ ...s, isTimeEntriesLoading: false }));
+        setInitialTab(defaultTab(data));
+      }
     } catch (e) {
       console.log(e);
     }
@@ -345,23 +356,16 @@ const generateAllTimeEntryItems = () => {
     }
 
     // Clear the hash to trigger the useEffect on hash change
-    if (location.hash) {
-      window.location.hash = '';
-    }
+    // if (location.hash) {
+    //   window.location.hash = '';
+    // }
 
     setTimeLogState({
       ...timeLogState,
       activeTab: tab,
     });
   };
 
-  useEffect(() => {
-    const tab = tabMapping[location.hash];
-    if (tab !== undefined) {
-      changeTab(tab);
-    }
-  }, [location.hash]); // This effect will run whenever the hash changes
-
   const handleInputChange = e => {
     setTimeLogState({ ...timeLogState, [e.target.name]: e.target.value });
   };
@@ -518,6 +522,13 @@ const generateAllTimeEntryItems = () => {
 
   /* ---------------- useEffects -------------- */
 
+  useEffect(() => {
+    const mapped = tabMapping[location.hash];
+    if (mapped !== undefined) {
+      setTimeLogState(s => ({ ...s, activeTab: mapped }));
+    }
+  }, [location.hash]);
+
   // Update user ID if it changes in the URL
   useEffect(() => {
     if (urlId) {
@@ -543,9 +554,6 @@ const generateAllTimeEntryItems = () => {
     props.getBadgeCount(displayUserId);
   }, [displayUserId, props]);
 
-  useEffect(() => {
-    changeTab(initialTab);
-  }, [initialTab]);
 
   useEffect(() => {
     // Build the time log after new data is loaded