From 3424f0681621f5cdda8f8a26f9f5fcf6da58db33 Mon Sep 17 00:00:00 2001
From: Milan Paunovic <milan.paunovic@visit.com>
Date: Sun, 20 Oct 2024 13:39:39 +0200
Subject: [PATCH] Added today button

---
 components/pages/calendar/CalendarHeader.tsx | 43 +++++++++++++-------
 components/pages/calendar/EventCalendar.tsx  | 27 ++++++------
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/components/pages/calendar/CalendarHeader.tsx b/components/pages/calendar/CalendarHeader.tsx
index e97f064..fb902c8 100644
--- a/components/pages/calendar/CalendarHeader.tsx
+++ b/components/pages/calendar/CalendarHeader.tsx
@@ -1,10 +1,11 @@
 import React, {memo} from 'react';
-import {Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
+import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
 import {MaterialIcons} from "@expo/vector-icons";
 import {modeMap, months} from './constants';
 import {StyleSheet} from "react-native";
 import {useAtom} from "jotai";
 import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
+import {isSameDay} from "date-fns";
 
 export const CalendarHeader = memo(() => {
     const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
@@ -28,6 +29,8 @@ export const CalendarHeader = memo(() => {
         setSelectedDate(updatedDate);
     };
 
+    const isSelectedDateToday = isSameDay(selectedDate, new Date())
+
     return (
         <View
             style={{
@@ -65,22 +68,32 @@ export const CalendarHeader = memo(() => {
                 </Picker>
             </View>
 
-            <View>
-                <SegmentedControl
-                    segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
-                    backgroundColor="#ececec"
-                    inactiveColor="#919191"
-                    activeBackgroundColor="#ea156c"
-                    activeColor="white"
-                    outlineColor="white"
-                    outlineWidth={3}
-                    segmentLabelStyle={styles.segmentslblStyle}
-                    onChangeIndex={handleSegmentChange}
-                    initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
-                />
+            <View row>
+                {!isSelectedDateToday && (
+                    <Button size={"small"} marginR-5 label={"Today"} onPress={() => {
+                        setSelectedDate(new Date())
+                        setMode("day")
+                    }}/>
+                )}
+
+                <View>
+                    <SegmentedControl
+                        segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
+                        backgroundColor="#ececec"
+                        inactiveColor="#919191"
+                        activeBackgroundColor="#ea156c"
+                        activeColor="white"
+                        outlineColor="white"
+                        outlineWidth={3}
+                        segmentLabelStyle={styles.segmentslblStyle}
+                        onChangeIndex={handleSegmentChange}
+                        initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
+                    />
+                </View>
             </View>
         </View>
-    );
+    )
+        ;
 });
 
 const styles = StyleSheet.create({
diff --git a/components/pages/calendar/EventCalendar.tsx b/components/pages/calendar/EventCalendar.tsx
index 39e7dbb..2f1fea8 100644
--- a/components/pages/calendar/EventCalendar.tsx
+++ b/components/pages/calendar/EventCalendar.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
-import { Calendar } from "react-native-big-calendar";
-import { StyleSheet, View, ActivityIndicator } from "react-native";
-import { useGetEvents } from "@/hooks/firebase/useGetEvents";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {Calendar} from "react-native-big-calendar";
+import {ActivityIndicator, StyleSheet, View} from "react-native";
+import {useGetEvents} from "@/hooks/firebase/useGetEvents";
+import {useAtom, useSetAtom} from "jotai";
 import {
     editVisibleAtom,
     eventForEditAtom,
@@ -10,18 +10,18 @@ import {
     selectedDateAtom,
     selectedNewEventDateAtom
 } from "@/components/pages/calendar/atoms";
-import { useAuthContext } from "@/contexts/AuthContext";
-import { CalendarEvent } from "@/components/pages/calendar/interfaces";
+import {useAuthContext} from "@/contexts/AuthContext";
+import {CalendarEvent} from "@/components/pages/calendar/interfaces";
 
 interface EventCalendarProps {
     calendarHeight: number;
 }
 
-export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calendarHeight }) => {
-    const { data: events, isLoading } = useGetEvents();
-    const { profileData } = useAuthContext();
+export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => {
+    const {data: events, isLoading} = useGetEvents();
+    const {profileData} = useAuthContext();
     const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
-    const mode = useAtomValue(modeAtom);
+    const [mode, setMode] = useAtom(modeAtom);
     const setEditVisible = useSetAtom(editVisibleAtom);
     const setEventForEdit = useSetAtom(eventForEditAtom);
     const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
@@ -48,6 +48,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
             if (mode === "day") {
                 setSelectedNewEndDate(date);
             } else {
+                setMode("day")
                 setSelectedDate(date);
             }
         },
@@ -59,7 +60,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
     }, [setSelectedDate]);
 
     const memoizedEventCellStyle = useCallback(
-        (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
+        (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
         []
     );
 
@@ -78,7 +79,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
     if (isLoading || isRendering) {
         return (
             <View style={styles.loadingContainer}>
-                <ActivityIndicator size="large" color="#0000ff" />
+                <ActivityIndicator size="large" color="#0000ff"/>
             </View>
         );
     }