Memoize years array in InputDatePicker to prevent infinite re-renders

- Use useMemo to cache the years array between renders
- Prevents recreating the array on every render which was causing infinite loops
- Dependencies: currYear and validStartYear

web/src/refresh-components/inputs/InputDatePicker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Button from "@/refresh-components/buttons/Button";
 import Calendar from "@/refresh-components/Calendar";
 import {
@@ -6,12 +8,12 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import InputSelect from "@/refresh-components/inputs/InputSelect";
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { SvgCalendar } from "@opal/icons";
 
 export interface InputDatePickerProps {
-  selectedDate: Date | null;
-  setSelectedDate: (date: Date | null) => void;
+  selectedDate?: Date | null;
+  setSelectedDate?: (date: Date | null) => void;
   startYear?: number;
   disabled?: boolean;
 }
@@ -21,20 +23,39 @@ function extractYear(date: Date | null): number {
 }
 
 export default function InputDatePicker({
-  selectedDate,
+  selectedDate: selectedDateProp,
   setSelectedDate,
   startYear = 1970,
   disabled = false,
 }: InputDatePickerProps) {
   const validStartYear = Math.max(startYear, 1970);
   const currYear = extractYear(new Date());
-  const years = Array(currYear - validStartYear + 1)
-    .fill(currYear)
-    .map((currYear, index) => currYear - index);
-  const [open, setOpen] = useState(false);
-  const [displayedMonth, setDisplayedMonth] = useState<Date>(
-    selectedDate ?? new Date()
+  const years = useMemo(
+    () =>
+      Array(currYear - validStartYear + 1)
+        .fill(currYear)
+        .map((currYear, index) => currYear - index),
+    [currYear, validStartYear]
   );
+  const [open, setOpen] = useState(false);
+  const [internalDate, setInternalDate] = useState<Date | null>(
+    selectedDateProp ?? null
+  );
+  const [displayedMonth, setDisplayedMonth] = useState<Date>(
+    selectedDateProp ?? new Date()
+  );
+
+  // Component is controlled only if setSelectedDate is provided
+  const isControlled = setSelectedDate !== undefined;
+  const selectedDate = isControlled ? selectedDateProp ?? null : internalDate;
+
+  const handleDateChange = (date: Date | null) => {
+    if (isControlled) {
+      setSelectedDate(date);
+    } else {
+      setInternalDate(date);
+    }
+  };
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -64,7 +85,7 @@ export default function InputDatePicker({
           <Button
             onClick={() => {
               const now = new Date();
-              setSelectedDate(now);
+              handleDateChange(now);
               setDisplayedMonth(now);
             }}
           >
@@ -76,7 +97,7 @@ export default function InputDatePicker({
           selected={selectedDate ?? undefined}
           onSelect={(date) => {
             if (date) {
-              setSelectedDate(date);
+              handleDateChange(date);
               setOpen(false);
             }
           }}