ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 16:34:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added today button

Browse Source
This commit is contained in:
Milan Paunovic
2024-10-20 13:39:39 +02:00
parent f715a77661
commit 3424f06816
2 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/pages/calendar/CalendarHeader.tsx
View File

@ -1,10 +1,11 @@
import React, {memo} from 'react'; 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 {MaterialIcons} from "@expo/vector-icons";
import {modeMap, months} from './constants'; import {modeMap, months} from './constants';
import {StyleSheet} from "react-native"; import {StyleSheet} from "react-native";
import {useAtom} from "jotai"; import {useAtom} from "jotai";
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms"; import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
import {isSameDay} from "date-fns";
export const CalendarHeader = memo(() => { export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom); const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
@ -28,6 +29,8 @@ export const CalendarHeader = memo(() => {
setSelectedDate(updatedDate); setSelectedDate(updatedDate);
}; };
const isSelectedDateToday = isSameDay(selectedDate, new Date())
return ( return (
<View <View
style={{ style={{
@ -65,6 +68,14 @@ export const CalendarHeader = memo(() => {
</Picker> </Picker>
</View> </View>
<View row>
{!isSelectedDateToday && (
<Button size={"small"} marginR-5 label={"Today"} onPress={() => {
setSelectedDate(new Date())
setMode("day")
}}/>
)}
<View> <View>
<SegmentedControl <SegmentedControl
segments={[{label: "D"}, {label: "W"}, {label: "M"}]} segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
@ -80,7 +91,9 @@ export const CalendarHeader = memo(() => {
/> />
</View> </View>
</View> </View>
); </View>
)
;
}); });
const styles = StyleSheet.create({ const styles = StyleSheet.create({

9
components/pages/calendar/EventCalendar.tsx
View File

@ -1,8 +1,8 @@
import React, { useCallback, useMemo, useState, useEffect } from 'react'; import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {Calendar} from "react-native-big-calendar"; import {Calendar} from "react-native-big-calendar";
import { StyleSheet, View, ActivityIndicator } from "react-native"; import {ActivityIndicator, StyleSheet, View} from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents"; import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import { useAtom, useAtomValue, useSetAtom } from "jotai"; import {useAtom, useSetAtom} from "jotai";
import { import {
editVisibleAtom, editVisibleAtom,
eventForEditAtom, eventForEditAtom,
@ -21,7 +21,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
const {data: events, isLoading} = useGetEvents(); const {data: events, isLoading} = useGetEvents();
const {profileData} = useAuthContext(); const {profileData} = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom); const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const mode = useAtomValue(modeAtom); const [mode, setMode] = useAtom(modeAtom);
const setEditVisible = useSetAtom(editVisibleAtom); const setEditVisible = useSetAtom(editVisibleAtom);
const setEventForEdit = useSetAtom(eventForEditAtom); const setEventForEdit = useSetAtom(eventForEditAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom); const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
@ -48,6 +48,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
if (mode === "day") { if (mode === "day") {
setSelectedNewEndDate(date); setSelectedNewEndDate(date);
} else { } else {
setMode("day")
setSelectedDate(date); setSelectedDate(date);
} }
}, },