mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 08:24:55 +00:00
Fix day circle rendering
This commit is contained in:
Milan Paunovic
@ -1,8 +1,8 @@
|
||||
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 React, {useCallback, useEffect, useMemo, useState} from "react";
|
||||
import {Calendar} from "react-native-big-calendar";
|
||||
import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native";
|
||||
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
|
||||
import {useAtom, useSetAtom} from "jotai";
|
||||
import {
|
||||
editVisibleAtom,
|
||||
eventForEditAtom,
|
||||
@ -10,9 +10,9 @@ import {
|
||||
selectedDateAtom,
|
||||
selectedNewEventDateAtom,
|
||||
} from "@/components/pages/calendar/atoms";
|
||||
import { useAuthContext } from "@/contexts/AuthContext";
|
||||
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
|
||||
import { act } from "react-test-renderer";
|
||||
import {useAuthContext} from "@/contexts/AuthContext";
|
||||
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
|
||||
import {Text} from "react-native-ui-lib";
|
||||
|
||||
interface EventCalendarProps {
|
||||
calendarHeight: number;
|
||||
@ -26,11 +26,10 @@ const getTotalMinutes = () => {
|
||||
};
|
||||
|
||||
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
({ calendarHeight }) => {
|
||||
const { data: events, isLoading } = useGetEvents();
|
||||
const { profileData } = useAuthContext();
|
||||
({calendarHeight}) => {
|
||||
const {data: events, isLoading} = useGetEvents();
|
||||
const {profileData} = useAuthContext();
|
||||
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
|
||||
const [activeDate, setActiveDate] = useState<Date>(new Date());
|
||||
const [mode, setMode] = useAtom(modeAtom);
|
||||
|
||||
const setEditVisible = useSetAtom(editVisibleAtom);
|
||||
@ -40,6 +39,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
const [isRendering, setIsRendering] = useState(true);
|
||||
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
|
||||
|
||||
const todaysDate = new Date()
|
||||
|
||||
useEffect(() => {
|
||||
if (events && mode) {
|
||||
setIsRendering(true);
|
||||
@ -54,7 +55,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
(event: CalendarEvent) => {
|
||||
if (mode === "day" || mode === "week") {
|
||||
setEditVisible(true);
|
||||
console.log({ event });
|
||||
console.log({event});
|
||||
setEventForEdit(event);
|
||||
} else {
|
||||
setMode("day");
|
||||
@ -84,7 +85,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
);
|
||||
|
||||
const memoizedEventCellStyle = useCallback(
|
||||
(event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
|
||||
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
|
||||
[]
|
||||
);
|
||||
|
||||
@ -93,32 +94,23 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
[profileData]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setActiveDate(new Date());
|
||||
|
||||
const interval = setInterval(() => setActiveDate(new Date()), 60000);
|
||||
return () => clearInterval(interval);
|
||||
const isSameDate = useCallback((date1: Date, date2: Date) => {
|
||||
return (
|
||||
date1.getDate() === date2.getDate() &&
|
||||
date1.getMonth() === date2.getMonth() &&
|
||||
date1.getFullYear() === date2.getFullYear()
|
||||
);
|
||||
}, []);
|
||||
|
||||
const dayHeaderColor = useMemo(() => {
|
||||
const isSameDate =
|
||||
activeDate.getDate() === selectedDate.getDate() &&
|
||||
activeDate.getMonth() === selectedDate.getMonth() &&
|
||||
activeDate.getFullYear() === selectedDate.getFullYear();
|
||||
|
||||
return isSameDate && mode === "day" ? "white" : "#4d4d4d";
|
||||
}, [selectedDate, mode, activeDate]);
|
||||
return isSameDate(todaysDate, selectedDate) && mode === "day" ? "white" : "#4d4d4d";
|
||||
}, [selectedDate, mode]);
|
||||
|
||||
const dateStyle = useMemo(() => {
|
||||
const isSameDate =
|
||||
activeDate.getDate() === selectedDate.getDate() &&
|
||||
activeDate.getMonth() === selectedDate.getMonth() &&
|
||||
activeDate.getFullYear() === selectedDate.getFullYear();
|
||||
|
||||
return isSameDate && mode === "day"
|
||||
return isSameDate(todaysDate, selectedDate) && mode === "day"
|
||||
? styles.dayHeader
|
||||
: styles.otherDayHeader;
|
||||
}, [selectedDate, mode, activeDate]);
|
||||
}, [selectedDate, mode]);
|
||||
|
||||
const memoizedHeaderContentStyle = useMemo(() => {
|
||||
if (mode === "day") {
|
||||
@ -134,6 +126,55 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
|
||||
const memoizedEvents = useMemo(() => events ?? [], [events]);
|
||||
|
||||
const renderCustomDateForMonth = (date: Date) => {
|
||||
const circleStyle = useMemo<ViewStyle>(
|
||||
() => ({
|
||||
position: "absolute",
|
||||
width: 30,
|
||||
height: 30,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 15,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const defaultStyle = useMemo<ViewStyle>(
|
||||
() => ({
|
||||
...circleStyle,
|
||||
}),
|
||||
[circleStyle]
|
||||
);
|
||||
|
||||
const currentDateStyle = useMemo<ViewStyle>(
|
||||
() => ({
|
||||
...circleStyle,
|
||||
backgroundColor: "#4184f2",
|
||||
}),
|
||||
[circleStyle]
|
||||
);
|
||||
|
||||
const renderDate = useCallback(
|
||||
(date: Date) => {
|
||||
const isCurrentDate = isSameDate(todaysDate, date);
|
||||
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
|
||||
|
||||
return (
|
||||
<View style={{alignItems: "center"}}>
|
||||
<View style={appliedStyle}>
|
||||
<Text style={{color: isCurrentDate ? "white" : "black"}}>
|
||||
{date.getDate()}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
[todaysDate, currentDateStyle, defaultStyle] // dependencies
|
||||
);
|
||||
|
||||
return renderDate(date);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setOffsetMinutes(getTotalMinutes());
|
||||
}, [events, mode]);
|
||||
@ -141,7 +182,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
if (isLoading || isRendering) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#0000ff" />
|
||||
<ActivityIndicator size="large" color="#0000ff"/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@ -157,7 +198,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
onPressEvent={handlePressEvent}
|
||||
weekStartsOn={memoizedWeekStartsOn}
|
||||
height={calendarHeight}
|
||||
activeDate={activeDate}
|
||||
activeDate={todaysDate}
|
||||
date={selectedDate}
|
||||
onPressCell={handlePressCell}
|
||||
headerContentStyle={memoizedHeaderContentStyle}
|
||||
@ -165,6 +206,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||
scrollOffsetMinutes={offsetMinutes}
|
||||
dayHeaderStyle={dateStyle}
|
||||
dayHeaderHighlightColor={dayHeaderColor}
|
||||
renderCustomDateForMonth={renderCustomDateForMonth}
|
||||
showAdjacentMonths
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -118,6 +118,7 @@
|
||||
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
|
||||
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
|
||||
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
|
||||
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
|
||||
</array>
|
||||
<key>UILaunchStoryboardName</key>
|
||||
<string>SplashScreen</string>
|
||||
|
||||
Reference in New Issue
Block a user