81 lines
3.2 KiB
JavaScript
81 lines
3.2 KiB
JavaScript
|
import {ScrollView, Text, View} from "react-native";
|
||
|
import Card from "../components/card";
|
||
|
import Accordion from "../components/acordion";
|
||
|
import {LayoutScrollView} from "../components/screens/layout";
|
||
|
import {useSnapshot} from "valtio";
|
||
|
import NotificationStore, {getNotifications} from "../store/notificationStore";
|
||
|
import {useEffect} from "react";
|
||
|
import {useNavigation} from "@react-navigation/native";
|
||
|
import Api from "../services/api";
|
||
|
|
||
|
|
||
|
|
||
|
const Notification = () => {
|
||
|
|
||
|
const {notifications} = useSnapshot(NotificationStore)
|
||
|
const navigation = useNavigation();
|
||
|
|
||
|
useEffect(() => {
|
||
|
navigation.addListener('blur', () => {
|
||
|
NotificationStore.newNotificationBadge = 0
|
||
|
// todo set notification to recited by calling http endpoint
|
||
|
Api.setNotificationsRecited({notificationIds: notifications.map(elem => elem.id)})
|
||
|
.then(() => {
|
||
|
// Revalidate it
|
||
|
getNotifications()
|
||
|
})
|
||
|
|
||
|
})
|
||
|
}, []);
|
||
|
|
||
|
|
||
|
return (
|
||
|
<LayoutScrollView title={"Уведомления"}>
|
||
|
<Accordion title={"Новые"} style={{marginBottom: 20}}>
|
||
|
{
|
||
|
notifications
|
||
|
.filter(notification => !notification.is_recited)
|
||
|
.map((notification) => (
|
||
|
<Card.Block key={notification.id}>
|
||
|
<Card.Header>
|
||
|
<Card.TitleHeader>
|
||
|
{notification.title}
|
||
|
</Card.TitleHeader>
|
||
|
</Card.Header>
|
||
|
<Card.Body>
|
||
|
<Card.TextSmall>
|
||
|
{notification.description}
|
||
|
</Card.TextSmall>
|
||
|
</Card.Body>
|
||
|
</Card.Block>
|
||
|
))
|
||
|
}
|
||
|
|
||
|
</Accordion>
|
||
|
|
||
|
<Accordion title={"Прочитанные"} style={{marginBottom: 20}}>
|
||
|
{
|
||
|
notifications
|
||
|
.filter(notification => notification.is_recited)
|
||
|
.map(notification => (
|
||
|
<Card.Block key={notification.id}>
|
||
|
<Card.Header>
|
||
|
<Card.TitleHeader>
|
||
|
{notification.title}
|
||
|
</Card.TitleHeader>
|
||
|
</Card.Header>
|
||
|
<Card.Body>
|
||
|
<Card.TextSmall>
|
||
|
{notification.description}
|
||
|
</Card.TextSmall>
|
||
|
</Card.Body>
|
||
|
</Card.Block>
|
||
|
))
|
||
|
}
|
||
|
|
||
|
</Accordion>
|
||
|
</LayoutScrollView>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
export default Notification
|