From 902c5bbb968f1cbc5218bcd4e5483df4c7bbeea4 Mon Sep 17 00:00:00 2001
From: warre <warre.provoost@ugent.be>
Date: Thu, 23 May 2024 16:33:48 +0200
Subject: [PATCH] show red dots on home page

---
 frontend/src/pages/home/HomePage.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/home/HomePage.tsx b/frontend/src/pages/home/HomePage.tsx
index 35775325..94956541 100644
--- a/frontend/src/pages/home/HomePage.tsx
+++ b/frontend/src/pages/home/HomePage.tsx
@@ -11,14 +11,13 @@ import {
 import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
 import { DayCalendarSkeleton, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import dayjs, { Dayjs } from "dayjs";
 import { PickersDay, PickersDayProps } from "@mui/x-date-pickers/PickersDay";
 import { ProjectDeadlineCard } from "../project/projectDeadline/ProjectDeadlineCard.tsx";
 import { ProjectDeadline } from "../project/projectDeadline/ProjectDeadline.tsx";
 import { useLoaderData } from "react-router-dom";
 import { Me } from "../../types/me.ts";
-
 interface DeadlineInfoProps {
   selectedDay: Dayjs;
   deadlines: ProjectDeadline[];
@@ -144,6 +143,11 @@ export default function HomePage() {
     .sort((a, b) => dayjs(b.deadline).diff(dayjs(a.deadline)))
     .slice(0, 3); // only show the first 3
   const noDeadlineProject = projects.filter((p) => p.deadline === undefined);
+
+  useEffect(() => {
+    handleMonthChange(selectedDay, projects, setHighlightedDays);
+  }, [projects, selectedDay]);
+
   return (
     <Container style={{ paddingTop: "50px" }}>
       <Grid container spacing={2} wrap="nowrap">