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

Notifications sorting, modal fixes

Browse Source
This commit is contained in:
Milan Paunovic
2024-12-15 18:45:04 +01:00
parent 56f37cef94
commit 72aa06ad22
5 changed files with 52 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/_layout.tsx
View File

@ -209,8 +209,6 @@ export default function RootLayout() {
useEffect(() => { useEffect(() => {
if (loaded) { if (loaded) {
SplashScreen.hideAsync();
const typographies: Partial<Record<TextStyle, FontStyle>> = {}; const typographies: Partial<Record<TextStyle, FontStyle>> = {};
( (
[ [

3
components/pages/calendar/DetailedCalendar.tsx
View File

@ -50,7 +50,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
}), []); }), []);
const containerProps = useMemo(() => ({ const containerProps = useMemo(() => ({
hourWidth: 60, hourWidth: 70,
allowPinchToZoom: true, allowPinchToZoom: true,
useHaptic: true, useHaptic: true,
scrollToNow: true, scrollToNow: true,
@ -84,6 +84,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
{...containerProps} {...containerProps}
numberOfDays={numberOfDays} numberOfDays={numberOfDays}
calendarWidth={calendarWidth} calendarWidth={calendarWidth}
onDateChanged={debouncedOnDateChanged} onDateChanged={debouncedOnDateChanged}
firstDay={firstDay} firstDay={firstDay}
events={formattedEvents ?? []} events={formattedEvents ?? []}

77
components/pages/calendar/ManuallyAddEventModal.tsx
View File

@ -113,7 +113,7 @@ export const ManuallyAddEventModal = () => {
} }
const baseDate = editEvent?.end ?? initialDate ?? new Date(); const baseDate = editEvent?.end ?? initialDate ?? new Date();
return addHours(startOfHour(baseDate), 1); return addHours(baseDate, 1);
}); });
const [startDate, setStartDate] = useState(initialDate ?? new Date()); const [startDate, setStartDate] = useState(initialDate ?? new Date());
const [endDate, setEndDate] = useState( const [endDate, setEndDate] = useState(
@ -162,7 +162,7 @@ export const ManuallyAddEventModal = () => {
} }
const baseDate = editEvent?.end ?? initialDate ?? new Date(); const baseDate = editEvent?.end ?? initialDate ?? new Date();
return addHours(startOfHour(baseDate), 1); return addHours(baseDate, 1);
}); });
setStartDate(initialDate ?? new Date()); setStartDate(initialDate ?? new Date());
@ -356,6 +356,14 @@ export const ManuallyAddEventModal = () => {
newDate.setHours(currentDate.getHours()); newDate.setHours(currentDate.getHours());
newDate.setMinutes(currentDate.getMinutes()); newDate.setMinutes(currentDate.getMinutes());
setDate(newDate); setDate(newDate);
if (isStart && newDate > endDate) {
const newEndDate = new Date(newDate);
newEndDate.setHours(endDate.getHours());
newEndDate.setMinutes(endDate.getMinutes());
setEndDate(newEndDate);
}
onDismiss(); onDismiss();
}} }}
theme={{ theme={{
@ -397,18 +405,18 @@ export const ManuallyAddEventModal = () => {
</View> </View>
</View> </View>
<TouchableOpacity <View row marginB-10 spread centerV>
onPress={() => setShowStartDatePicker(true)} <View row centerV>
style={styles.dateButton} <Feather name="calendar" size={25} color="#919191"/>
> <TouchableOpacity onPress={() => setShowStartDatePicker(true)}>
<View row centerV spread paddingR-30>
<View row centerV>
<Feather name="calendar" size={25} color="#919191"/>
<Text marginL-8 style={styles.dateText}> <Text marginL-8 style={styles.dateText}>
{format(startDate, 'MMM d, yyyy')} {format(startDate, 'MMM d, yyyy')}
</Text> </Text>
</View> </TouchableOpacity>
{!isAllDay && ( </View>
{!isAllDay && (
<View right marginR-30>
<DateTimePicker <DateTimePicker
value={startTime} value={startTime}
onChange={(time) => { onChange={(time) => {
@ -419,24 +427,24 @@ export const ManuallyAddEventModal = () => {
minuteInterval={5} minuteInterval={5}
mode="time" mode="time"
timeFormat="HH:mm" timeFormat="HH:mm"
style={styles.timePicker} style={[styles.timePicker]}
/> />
)} </View>
</View> )}
</TouchableOpacity> </View>
{!isAllDay && ( {!isAllDay && (
<TouchableOpacity <View row marginB-10 spread centerV>
onPress={() => setShowEndDatePicker(true)} <View row centerV>
style={styles.dateButton} <Feather name="calendar" size={25} color="#919191"/>
> <TouchableOpacity onPress={() => setShowEndDatePicker(true)}>
<View row centerV spread paddingR-30>
<View row centerV>
<Feather name="calendar" size={25} color="#919191"/>
<Text marginL-8 style={styles.dateText}> <Text marginL-8 style={styles.dateText}>
{format(endDate, 'MMM d, yyyy')} {format(endDate, 'MMM d, yyyy')}
</Text> </Text>
</View> </TouchableOpacity>
</View>
<View right marginR-30>
<DateTimePicker <DateTimePicker
value={endTime} value={endTime}
onChange={(time) => { onChange={(time) => {
@ -453,15 +461,16 @@ export const ManuallyAddEventModal = () => {
minuteInterval={5} minuteInterval={5}
mode="time" mode="time"
timeFormat="HH:mm" timeFormat="HH:mm"
style={styles.timePicker} style={[styles.timePicker]}
/> />
</View> </View>
</TouchableOpacity> </View>
)} )}
{renderCalendarPicker(true, showStartDatePicker, () => setShowStartDatePicker(false))} {renderCalendarPicker(true, showStartDatePicker, () => setShowStartDatePicker(false))}
{renderCalendarPicker(false, showEndDatePicker, () => setShowEndDatePicker(false))} {renderCalendarPicker(false, showEndDatePicker, () => setShowEndDatePicker(false))}
</View>) </View>
)
return ( return (
<> <>
@ -533,9 +542,8 @@ export const ManuallyAddEventModal = () => {
Cancel Cancel
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
<View row center>
<DropModalIcon onPress={close}/>
</View>
<View flexS row gap-10> <View flexS row gap-10>
<TouchableOpacity onPress={handleSave}> <TouchableOpacity onPress={handleSave}>
<Text <Text
@ -822,4 +830,15 @@ const styles = StyleSheet.create({
marginBottom: 10, marginBottom: 10,
marginTop: 25, marginTop: 25,
}, },
timePicker: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
},
dateText: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
},
dateButton: {
marginTop: 10,
}
}); });

2
components/pages/calendar/useFormattedEvents.ts
View File

@ -31,7 +31,7 @@ interface FormattedEvent {
// Precompute time constants // Precompute time constants
const DAY_IN_MS = 24 * 60 * 60 * 1000; const DAY_IN_MS = 24 * 60 * 60 * 1000;
const PERIOD_IN_MS = 5 * DAY_IN_MS; const PERIOD_IN_MS = 45 * DAY_IN_MS;
const TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone; const TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
// Memoize date range calculations // Memoize date range calculations

2
hooks/firebase/useGetNotifications.ts
View File

@ -35,11 +35,11 @@ export const useGetNotifications = () => {
const snapshot = await firestore() const snapshot = await firestore()
.collection("Notifications") .collection("Notifications")
.where("familyId", "==", profileData?.familyId) .where("familyId", "==", profileData?.familyId)
.orderBy("timestamp", "desc")
.get(); .get();
return snapshot.docs.map((doc) => { return snapshot.docs.map((doc) => {
const data = doc.data() as NotificationFirestore; const data = doc.data() as NotificationFirestore;
return { return {
id: doc.id, id: doc.id,
...data, ...data,