ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-14 09:17:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Notification changes

Browse Source
This commit is contained in:
Milan Paunovic
2024-11-22 03:25:16 +01:00
parent f74a6390a2
commit 06a3a2dc8f
33 changed files with 1961 additions and 1447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
components/pages/notifications/NotificationsPage.tsx
View File

@ -1,14 +1,25 @@
import {FlatList, StyleSheet} from "react-native";
import React from "react";
import React, {useCallback} from "react";
import {Card, Text, View} from "react-native-ui-lib";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import {useGetNotifications} from "@/hooks/firebase/useGetNotifications";
import {Notification, useGetNotifications} from "@/hooks/firebase/useGetNotifications";
import {formatDistanceToNow} from "date-fns";
import {useRouter} from "expo-router";
import {useSetAtom} from "jotai";
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
const NotificationsPage = () => {
const {data: notifications} = useGetNotifications()
console.log(notifications?.[0])
const setSelectedDate = useSetAtom(selectedDateAtom);
const setMode = useSetAtom(modeAtom);
const {data: notifications} = useGetNotifications();
const {push} = useRouter();
const goToEventDay = useCallback((notification: Notification) => () => {
if (notification?.date) {
setSelectedDate(notification.date);
setMode("day")
}
push({pathname: "/calendar"});
}, [push, setSelectedDate]);
return (
@ -18,32 +29,56 @@ const NotificationsPage = () => {
<HeaderTemplate
message={"Welcome to your notifications!"}
isWelcome={false}
children={
<Text
style={{fontFamily: "Manrope_400Regular", fontSize: 14}}
>
See your notifications here.
</Text>
}
/>
>
<Text style={styles.subtitle}>
See your notifications here.
</Text>
</HeaderTemplate>
</View>
<FlatList contentContainerStyle={{paddingBottom: 10, paddingHorizontal: 25}}
data={notifications ?? []}
renderItem={({item}) => <Card padding-20 gap-10 marginB-10>
<Text text70>{item.content}</Text>
<View row spread>
<Text
text90>{formatDistanceToNow(new Date(item.timestamp), {addSuffix: true})}</Text>
<Text text90>{item.timestamp.toLocaleDateString()}</Text>
</View>
</Card>}/>
</View>
<FlatList
contentContainerStyle={styles.listContainer}
data={notifications ?? []}
renderItem={({item}) => (
<Card
padding-20
marginB-10
key={item.content}
onPress={goToEventDay(item)}
activeOpacity={0.6}
enableShadow={false}
style={styles.card}
>
<Text text70>{item.content}</Text>
<View row spread marginT-10>
<Text text90>
{formatDistanceToNow(new Date(item.timestamp), {addSuffix: true})}
</Text>
<Text text90>
{item.timestamp.toLocaleDateString()}
</Text>
</View>
</Card>
)}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
listContainer: {
paddingBottom: 10,
paddingHorizontal: 25,
},
card: {
width: '100%',
backgroundColor: 'white',
},
subtitle: {
fontFamily: "Manrope_400Regular",
fontSize: 14,
},
searchField: {
borderWidth: 0.7,
borderColor: "#9b9b9b",
@ -54,4 +89,4 @@ const styles = StyleSheet.create({
},
});
export default NotificationsPage;
export default NotificationsPage;