90 lines
3.0 KiB
JavaScript
90 lines
3.0 KiB
JavaScript
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import { FlatList, View, Text, Image, TouchableOpacity, ActivityIndicator } from 'react-native';
|
||
|
|
import axios from 'axios';
|
||
|
|
import { useNavigation } from '@react-navigation/native';
|
||
|
|
import { useTailwind } from 'tailwind-rn';
|
||
|
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||
|
|
|
||
|
|
const Notifications = () => {
|
||
|
|
const [notifications, setNotifications] = useState([]);
|
||
|
|
const [page, setPage] = useState(1);
|
||
|
|
const navigation = useNavigation();
|
||
|
|
|
||
|
|
|
||
|
|
const tailwind = useTailwind();
|
||
|
|
|
||
|
|
// Fetch notifications from the server
|
||
|
|
const fetchNotifications = async () => {
|
||
|
|
try {
|
||
|
|
const token = await AsyncStorage.getItem('token');
|
||
|
|
console.log(token)
|
||
|
|
const apiUrl = await AsyncStorage.getItem('apiEndpoint')
|
||
|
|
|
||
|
|
|
||
|
|
const res = await axios.get(`${apiUrl}/api/v1/app/notify/notifications?page=${page}`, {
|
||
|
|
headers: {'Authorization': token, } // replace token with your JWT token
|
||
|
|
});
|
||
|
|
setNotifications([...notifications, ...res.data]);
|
||
|
|
setPage(page + 1);
|
||
|
|
} catch (err) {
|
||
|
|
console.error("fetch: ", err);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Fetch notifications when the component mounts
|
||
|
|
useEffect(() => {
|
||
|
|
fetchNotifications();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// Mark a notification as read and navigate to the relevant screen
|
||
|
|
const handlePress = async (notification) => {
|
||
|
|
try {
|
||
|
|
const token = AsyncStorage.getItem('token');
|
||
|
|
const apiUrl = await AsyncStorage.getItem('apiEndpoint')
|
||
|
|
|
||
|
|
|
||
|
|
await axios.put(`${apiUrl}/api/v1/app/notify/notifications/${notification._id}`, {}, {
|
||
|
|
headers: { 'Authorization': token } // replace token with your JWT token
|
||
|
|
});
|
||
|
|
if (notification.type === 'like') {
|
||
|
|
navigation.navigate('Likes', { switId: notification.switId });
|
||
|
|
} else if (notification.type === 'comment') {
|
||
|
|
navigation.navigate('Comments', { postId: notification.postId });
|
||
|
|
} else if (notification.type === 'follow') {
|
||
|
|
navigation.navigate('Profile', { userId: notification.fromUser });
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
console.error("press: ", err);
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Render a single notification
|
||
|
|
const renderNotification = ({ item }) => (
|
||
|
|
<View style={tailwind('border-b border-gray-200 p-2 flex-row items-center')}>
|
||
|
|
<Image source={{ uri: item.fromUser.profilePicture }} style={tailwind('w-12 h-12 rounded-full')} />
|
||
|
|
<TouchableOpacity style={tailwind('ml-2 flex-grow')} onPress={() => handlePress(item)}>
|
||
|
|
<Text style={tailwind('text-lg')}>{item.text}</Text>
|
||
|
|
<Text style={tailwind('text-sm text-gray-500')}>{new Date(item.createdAt).toLocaleString()}</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<View style={tailwind('pr-2')}>
|
||
|
|
<ActivityIndicator size="small" color="#0000ff" />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={tailwind('flex-1')}>
|
||
|
|
<FlatList
|
||
|
|
data={notifications}
|
||
|
|
renderItem={renderNotification}
|
||
|
|
keyExtractor={item => item._id}
|
||
|
|
onEndReached={fetchNotifications}
|
||
|
|
onEndReachedThreshold={0.5}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Notifications;
|