fixed calendar dates for the single days

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];

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,7 +89,27 @@ const WeekDaysLine = () => (
   </View>
 );
 
-const CalenderGrid = () => (
+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={{
@@ -89,30 +121,43 @@ const CalenderGrid = () => (
           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)} />
+            <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) => (
+const SingleDay = (props: SingleDayProps) => {
+  const isSameMonth = MONTHS[props.date.getMonth()] === props.month;
+
+  return (
     <View
-    className="h-full flex-1 aspect-auto rounded-xl"
+      className="h-full flex-1 aspect-auto rounded-xl items-center"
       style={{
         backgroundColor: currentTheme.primeBg,
       }}
     >
-    <Text>
-      {props.date}
+      <Text
+        className={
+          `text-xl ` + (isSameMonth ? "text-black" : "text-black/50")
+        }
+      >
+        {props.date.getDate()}
       </Text>
     </View>
-);
+  );
+};
 
-export default Calender;
+export default Calendar;