cally/components/pages/notifications/NotificationsPage.tsx

import {FlatList, StyleSheet} from "react-native";
import React, {useCallback} from "react";
import {Card, Text, View} from "react-native-ui-lib";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
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 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 (
        <View flexG height={"100%"}>
            <View flexG>
                <View marginH-25>
                    <HeaderTemplate
                        message={"Welcome to your notifications!"}
                        isWelcome={false}
                    >
                        <Text style={styles.subtitle}>
                            See your notifications here.
                        </Text>
                    </HeaderTemplate>
                </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",
        borderRadius: 15,
        height: 42,
        paddingLeft: 10,
        marginVertical: 20,
    },
});

export default NotificationsPage;