Profile menu refresh when selected year changes

Author: ColinToft

hooks/useUserData.ts

@@ -8,7 +8,9 @@ interface UseUserDataReturn extends UserData {
   isLoading: boolean;
 }
 
-export const useUserData = (): UseUserDataReturn & {
+export const useUserData = (
+  selectedYearRange?: string
+): UseUserDataReturn & {
   refetchUserData: () => void;
 } => {
   const { data: session, status } = useSession();
@@ -34,18 +36,16 @@ export const useUserData = (): UseUserDataReturn & {
         const today = new Date();
         const currentYear =
           today.getMonth() >= 8 ? today.getFullYear() : today.getFullYear() - 1;
-        const selectedYearRange = `${currentYear} - ${currentYear + 1}`;
+        const yearRange =
+          selectedYearRange ?? `${currentYear} - ${currentYear + 1}`;
 
         setFetchedUserData({
           id: user.id,
           name: `${user.firstName} ${user.lastName}`,
           email: user.email,
           image: user.profilePicture ?? undefined,
           role: user.role as Role,
-          usedAbsences: getSelectedYearAbsences(
-            user.absences,
-            selectedYearRange
-          ),
+          usedAbsences: getSelectedYearAbsences(user.absences, yearRange),
         });
       } catch (error) {
         console.error('Failed to fetch user data:', error);
@@ -55,7 +55,7 @@ export const useUserData = (): UseUserDataReturn & {
     } else if (status !== 'loading') {
       setIsLoading(false);
     }
-  }, [session?.user?.id, status]);
+  }, [session?.user?.id, status, selectedYearRange]);
 
   useEffect(() => {
     fetchUser();

src/pages/dashboard.tsx

@@ -9,13 +9,14 @@ import TotalAbsencesCard from '../components/TotalAbsencesCard';
 import UserManagementCard from '../components/UserManagementCard';
 export default function DashboardPage() {
   const theme = useTheme();
-  const userData = useUserData();
   const router = useRouter();
   const currentYear = new Date().getFullYear();
 
   const [selectedYearRange, setSelectedYearRange] = useState(
     `${currentYear - 1} - ${currentYear}`
   );
+  const userData = useUserData(selectedYearRange);
+
   const [absenceData, setAbsenceData] = useState<YearlyAbsenceData[]>([]);
   const [loading, setLoading] = useState(true);
   const [startYear, endYear] = selectedYearRange.split(' - ');