109 lines
3.1 KiB
TypeScript
109 lines
3.1 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { XStack, Paragraph, YStack, Button, Text, H6, Avatar } from 'tamagui';
|
|
import { useRouter } from 'expo-router';
|
|
|
|
export default function ContactsPage() {
|
|
const [contacts, setContacts] = useState([]);
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(true);
|
|
const router = useRouter();
|
|
|
|
// Fetch friends from the server
|
|
const fetchFriends = async () => {
|
|
try {
|
|
const authToken = localStorage.getItem('jwtToken'); // Retrieve JWT token
|
|
if (!authToken) {
|
|
throw new Error('Authentication required. Please log in.');
|
|
}
|
|
|
|
const response = await fetch('http://localhost:4000/friends', {
|
|
method: 'GET',
|
|
headers: {
|
|
Authorization: `Bearer ${authToken}`,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorText = await response.text();
|
|
throw new Error(errorText || 'Failed to fetch contacts');
|
|
}
|
|
|
|
const friends = await response.json();
|
|
setContacts(friends);
|
|
} catch (err) {
|
|
console.error('Error fetching friends:', err);
|
|
setError(err.message || 'Failed to load contacts.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Navigate to chat screen
|
|
const navigateToChat = (contact) => {
|
|
router.push({
|
|
pathname: `/chat/${contact.username}`, // Use dynamic route
|
|
params: { friendUsername: contact.username }, // Pass necessary params
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchFriends();
|
|
}, []);
|
|
|
|
return (
|
|
<YStack flex={1} bg="$background" px="$5" pt="$5">
|
|
<H6 fontSize={25} mb="$4" color="$primaryText">
|
|
Your Contacts
|
|
</H6>
|
|
|
|
{loading ? (
|
|
<Text>Loading contacts...</Text>
|
|
) : error ? (
|
|
<Text color="red">{error}</Text>
|
|
) : contacts.length === 0 ? (
|
|
<Text>No contacts found. Add some friends to start chatting!</Text>
|
|
) : (
|
|
contacts.map((contact) => (
|
|
<XStack
|
|
key={contact.id}
|
|
bg="$backgroundLight"
|
|
padding="$4"
|
|
borderRadius="$12"
|
|
mb="$3"
|
|
space="$3"
|
|
alignItems="center"
|
|
hoverStyle={{ bg: '$gray8' }}
|
|
>
|
|
{/* Profile Picture */}
|
|
<Avatar size={50} circular>
|
|
<Avatar.Image
|
|
src={`/assets/images/Gnome_child.png`} // Placeholder avatar
|
|
alt={`${contact.username}'s avatar`}
|
|
/>
|
|
</Avatar>
|
|
|
|
{/* Contact Details */}
|
|
<YStack flex={1} alignItems="flex-start">
|
|
<Paragraph fontSize={18} fontWeight="bold" color="$primaryText">
|
|
{contact.username}
|
|
</Paragraph>
|
|
<Text fontSize={14} color="$secondaryText">
|
|
{contact.status} {/* Placeholder for online/offline */}
|
|
</Text>
|
|
</YStack>
|
|
|
|
{/* Message Button */}
|
|
<Button
|
|
size="$2"
|
|
onPress={() => navigateToChat(contact)}
|
|
theme="blue"
|
|
>
|
|
Message
|
|
</Button>
|
|
</XStack>
|
|
))
|
|
)}
|
|
</YStack>
|
|
);
|
|
}
|