feat: close calendar on day press

Author: trevorpfiz

apps/expo/src/components/home/home-calendar.tsx

@@ -12,16 +12,17 @@ import { BasicCalendar } from "~/components/basic-calendar";
 import { useDateStore } from "~/stores/dateStore";
 
 export function HomeCalendar() {
-  const { selectedDate, setSelectedDate } = useDateStore();
+  const { selectedDate, setSelectedDate, setIsCalendarOpen } = useDateStore();
   const [currentCalendarMonth, setCurrentCalendarMonth] =
     useState(selectedDate);
 
   const handleDayPress = useCallback<CalendarOnDayPress>(
     (dateId) => {
       setCurrentCalendarMonth(fromDateId(dateId));
       setSelectedDate(fromDateId(dateId));
+      setIsCalendarOpen(false); // Close the dialog after selecting a date
     },
-    [setSelectedDate],
+    [setSelectedDate, setIsCalendarOpen],
   );
 
   const calendarActiveDateRanges = useMemo<CalendarActiveDateRange[]>(

apps/expo/src/components/home/home-header.tsx

@@ -15,15 +15,15 @@ import { Calendar } from "~/lib/icons/calendar";
 import { useDateStore } from "~/stores/dateStore";
 
 export default function HomeHeader() {
-  const { selectedDate } = useDateStore();
+  const { selectedDate, isCalendarOpen, setIsCalendarOpen } = useDateStore();
 
   const formattedDate = isToday(selectedDate)
     ? "Today"
     : format(selectedDate, "MMMM do, yyyy");
 
   return (
     <View className="flex-row items-center justify-between px-2">
-      <Dialog>
+      <Dialog open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
         <DialogTrigger asChild>
           <Button variant="ghost" className="flex-row items-center gap-2">
             <Calendar className="text-foreground" size={24} />

apps/expo/src/stores/dateStore.ts

@@ -3,11 +3,15 @@ import { create } from "zustand";
 interface DateState {
   selectedDate: Date;
   setSelectedDate: (date: Date) => void;
+  isCalendarOpen: boolean;
+  setIsCalendarOpen: (isOpen: boolean) => void;
 }
 
 export const useDateStore = create<DateState>((set) => ({
   selectedDate: new Date(),
   setSelectedDate: (date: Date) => set({ selectedDate: date }),
+  isCalendarOpen: false,
+  setIsCalendarOpen: (isOpen: boolean) => set({ isCalendarOpen: isOpen }),
 }));
 
 // Example persist-middleware with MMKV