From e2288467b70581480542cadd1fd517e3b8e0a4ba Mon Sep 17 00:00:00 2001
From: Linus109 <linus.waldowsky@student.fh-kiel.de>
Date: Sat, 29 Nov 2025 23:04:40 +0100
Subject: [PATCH] fixed calendar dates for the single days

---
 src/Constants.tsx    |   4 +-
 src/app/Calender.tsx | 149 ++++++++++++++++++++++++++++---------------
 2 files changed, 99 insertions(+), 54 deletions(-)

diff --git a/src/Constants.tsx b/src/Constants.tsx
index 46c0476..961ded4 100644
--- a/src/Constants.tsx
+++ b/src/Constants.tsx
@@ -13,7 +13,7 @@ export const MONTHS = [
   "December",
 ] as const;
 
-export type MonthValue = (typeof MONTHS)[number];
+export type Month = (typeof MONTHS)[number];
 
 export const DAYS = [
   "Monday",
@@ -25,4 +25,4 @@ export const DAYS = [
   "Sunday",
 ] as const;
 
-export type DayValue = (typeof DAYS)[number];
+export type Day = (typeof DAYS)[number];
diff --git a/src/app/Calender.tsx b/src/app/Calender.tsx
index 6fd4d04..6698704 100644
--- a/src/app/Calender.tsx
+++ b/src/app/Calender.tsx
@@ -1,47 +1,59 @@
 import { Pressable, Text, View } from "react-native";
-import { DAYS, MONTHS } from "../Constants";
+import { DAYS, MONTHS, Month } from "../Constants";
 import Header from "../components/Header";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import currentTheme from "../Themes";
 import BaseBackground from "../components/BaseBackground";
 
 // TODO: month selection dropdown menu
 
-const Calender = () => (
-  <BaseBackground>
-    <CalenderHeader />
-    <WeekDaysLine />
-    <CalenderGrid />
-  </BaseBackground>
-);
-
-const CalenderHeader = () => {
+const Calendar = () => {
   const [monthIndex, setMonthIndex] = useState(0);
-  const [currentYear, setCurrentYear] = useState(2025);
+  const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
 
   const changeMonth = (delta: number) => {
     setMonthIndex((prev) => {
       const newIndex = prev + delta;
       if (newIndex > 11) {
-        setCurrentYear(currentYear + 1);
+        setCurrentYear((y) => y + 1);
         return 0;
       }
       if (newIndex < 0) {
-        setCurrentYear(currentYear - 1);
+        setCurrentYear((y) => y - 1);
         return 11;
       }
       return newIndex;
     });
   };
 
-  const prevMonth = () => changeMonth(-1);
-  const nextMonth = () => changeMonth(1);
+  return (
+    <BaseBackground>
+      <CalendarHeader
+        changeMonth={changeMonth}
+        monthIndex={monthIndex}
+        currentYear={currentYear}
+      />
+      <WeekDaysLine />
+      <CalendarGrid month={MONTHS[monthIndex]} year={currentYear} />
+    </BaseBackground>
+  );
+};
+
+type CalendarHeaderProps = {
+  changeMonth: (delta: number) => void;
+  monthIndex: number;
+  currentYear: number;
+};
+
+const CalendarHeader = (props: CalendarHeaderProps) => {
+  const prevMonth = () => props.changeMonth(-1);
+  const nextMonth = () => props.changeMonth(1);
 
   return (
     <Header className="flex flex-row items-center justify-between">
       <ChangeMonthButton onPress={prevMonth} title={"<"} />
       <Text className="text-4xl">
-        {MONTHS[monthIndex]} {currentYear}
+        {MONTHS[props.monthIndex]} {props.currentYear}
       </Text>
       <ChangeMonthButton onPress={nextMonth} title={">"} />
     </Header>
@@ -77,42 +89,75 @@ const WeekDaysLine = () => (
   </View>
 );
 
-const CalenderGrid = () => (
-  <View
-    className="h-full flex-1 flex-col flex-wrap gap-2 p-2"
-    style={{
-      backgroundColor: currentTheme.calenderBg,
-    }}
-  >
-    {Array.from({ length: 6 }).map((_, i) => (
-      <View
-        key={i}
-        className="w-full flex-1 flex-row justify-around items-center gap-2"
-      >
-        {/* TODO: correctly retrieve or calculate the date */}
-        {Array.from({ length: 7 }).map((_, j) => (
-          <SingleDay key={j} date={i * 7 + (j+1)} />
-        ))}
-      </View>
-    ))}
-  </View>
-);
+type CalendarGridProps = {
+  month: Month;
+  year: number;
+};
+
+const CalendarGrid = (props: CalendarGridProps) => {
+  const { baseDate, dateOffset } = useMemo(() => {
+    const monthIndex = MONTHS.indexOf(props.month);
+    const base = new Date(props.year, monthIndex, 1);
+    const offset = base.getDay() === 0 ? 6 : base.getDay() - 1;
+    return { baseDate: base, dateOffset: offset };
+  }, [props.month, props.year]);
+
+  // TODO: create array beforehand in a useMemo
+  const createDateFromOffset = (offset: number): Date => {
+    const date = new Date(baseDate);
+    date.setDate(date.getDate() + offset);
+    return date;
+  };
+
+  return (
+    <View
+      className="h-full flex-1 flex-col flex-wrap gap-2 p-2"
+      style={{
+        backgroundColor: currentTheme.calenderBg,
+      }}
+    >
+      {Array.from({ length: 6 }).map((_, i) => (
+        <View
+          key={i}
+          className="w-full flex-1 flex-row justify-around items-center gap-2"
+        >
+          {Array.from({ length: 7 }).map((_, j) => (
+            <SingleDay
+              key={j}
+              date={createDateFromOffset(i * 7 + j - dateOffset)}
+              month={props.month}
+            />
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+};
 
 type SingleDayProps = {
-  date: number,
-}
+  date: Date;
+  month: Month;
+};
 
-const SingleDay = (props: SingleDayProps) => (
-  <View
-    className="h-full flex-1 aspect-auto rounded-xl"
-    style={{
-      backgroundColor: currentTheme.primeBg,
-    }}
-  >
-    <Text>
-      {props.date}
-    </Text>
-  </View>
-);
+const SingleDay = (props: SingleDayProps) => {
+  const isSameMonth = MONTHS[props.date.getMonth()] === props.month;
 
-export default Calender;
+  return (
+    <View
+      className="h-full flex-1 aspect-auto rounded-xl items-center"
+      style={{
+        backgroundColor: currentTheme.primeBg,
+      }}
+    >
+      <Text
+        className={
+          `text-xl ` + (isSameMonth ? "text-black" : "text-black/50")
+        }
+      >
+        {props.date.getDate()}
+      </Text>
+    </View>
+  );
+};
+
+export default Calendar;