75 lines
2.6 KiB
JavaScript
75 lines
2.6 KiB
JavaScript
import { StatusBar } from 'expo-status-bar';
|
|
import React from 'react';
|
|
import { View, Text, StyleSheet, SafeAreaView, FlatList } from 'react-native';
|
|
import { Card } from 'react-native-paper';
|
|
import SinglePost from '../components/SinglePostComponent';
|
|
import Moment from 'moment';
|
|
import { useSnapshot } from 'valtio';
|
|
import GlobalState from '../contexts/GlobalState.js';
|
|
import API from '../API.js';
|
|
import { useFocusEffect } from '@react-navigation/native';
|
|
|
|
let NotificationsView = ({ navigation, route }) => {
|
|
const gState = useSnapshot(GlobalState);
|
|
const viewer = gState.me;
|
|
|
|
useFocusEffect(
|
|
React.useCallback(() => {
|
|
let active = true;
|
|
const markViewed = async () => {
|
|
const notifications = Array.isArray(viewer?.notifications) ? viewer.notifications : [];
|
|
const hasUnviewed = notifications.some((n) => n && n.viewed !== true);
|
|
if (!hasUnviewed) return;
|
|
const result = await API.markNotificationsViewed();
|
|
if (!active || result?.status !== "ok") return;
|
|
if (!GlobalState.me.notifications) GlobalState.me.notifications = [];
|
|
GlobalState.me.notifications = GlobalState.me.notifications.map((n) => ({ ...n, viewed: true }));
|
|
};
|
|
markViewed();
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [viewer?.notifications?.length])
|
|
);
|
|
|
|
const renderNotification = (({ item }) => {
|
|
const gotToPost = () => {
|
|
navigation.navigate('SinglePost', { postid: item.postid });
|
|
};
|
|
return (
|
|
<Card style={{ margin: 3 }} onPress={gotToPost}>
|
|
<Card.Content>
|
|
<Text style={{ fontWeight: item.viewed ? 'normal' : '700' }}>{item.body}</Text>
|
|
<Text style={{ fontWeight: 'normal', fontSize: 12 }}>
|
|
{" " + Moment(item.ts).fromNow()}
|
|
</Text>
|
|
<SinglePost postId={item.postid} hideComments={true} />
|
|
</Card.Content>
|
|
</Card>
|
|
)
|
|
});
|
|
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View>
|
|
<FlatList
|
|
data={[...viewer.notifications].reverse().slice(0, 10)}
|
|
renderItem={renderNotification}
|
|
keyExtractor={item => item.ts}
|
|
/>
|
|
</View>
|
|
<StatusBar style="auto" />
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
export default NotificationsView;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#edf2f7",
|
|
},
|
|
});
|