102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import { TamaguiProvider, Stack, Text, Button, ScrollView } from 'tamagui';
|
||
|
|
|
||
|
|
const PendingFriendRequestsScreen = () => {
|
||
|
|
const [pendingRequests, setPendingRequests] = useState([]);
|
||
|
|
const [error, setError] = useState('');
|
||
|
|
|
||
|
|
const fetchPendingRequests = async () => {
|
||
|
|
try {
|
||
|
|
const yourAuthToken = localStorage.getItem("jwtToken");
|
||
|
|
const response = await fetch("http://localhost:4000/friend-requests/pending", {
|
||
|
|
method: "GET",
|
||
|
|
headers: {
|
||
|
|
"Authorization": `Bearer ${yourAuthToken}`,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
const errorText = await response.text();
|
||
|
|
throw new Error(errorText || "Failed to fetch friend requests");
|
||
|
|
}
|
||
|
|
|
||
|
|
const requests = await response.json();
|
||
|
|
setPendingRequests(requests);
|
||
|
|
} catch (err) {
|
||
|
|
console.error("Error fetching pending friend requests:", err);
|
||
|
|
setError("Failed to load friend requests.");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleResponse = async (requestId, response) => {
|
||
|
|
try {
|
||
|
|
const yourAuthToken = localStorage.getItem("jwtToken");
|
||
|
|
const res = await fetch("http://localhost:4000/friend-request/respond", {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
"Authorization": `Bearer ${yourAuthToken}`,
|
||
|
|
},
|
||
|
|
body: JSON.stringify({ requestId, response }),
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!res.ok) {
|
||
|
|
const errorText = await res.text();
|
||
|
|
throw new Error(errorText || "Failed to process friend request");
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update the UI after a successful response
|
||
|
|
setPendingRequests((prevRequests) =>
|
||
|
|
prevRequests.filter((request) => request.id !== requestId)
|
||
|
|
);
|
||
|
|
} catch (err) {
|
||
|
|
console.error(`Error ${response}ing friend request:`, err);
|
||
|
|
alert(`Failed to ${response} friend request.`);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchPendingRequests();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TamaguiProvider>
|
||
|
|
<Stack f={1} justifyContent="center" alignItems="center" padding="$4" space="$4">
|
||
|
|
<Text fontSize="$6" fontWeight="bold">
|
||
|
|
Pending Friend Requests
|
||
|
|
</Text>
|
||
|
|
|
||
|
|
{error ? (
|
||
|
|
<Text color="red" fontSize="$2">
|
||
|
|
{error}
|
||
|
|
</Text>
|
||
|
|
) : (
|
||
|
|
<ScrollView contentContainerStyle={{ padding: 10 }}>
|
||
|
|
{pendingRequests.map((request) => (
|
||
|
|
<Stack key={request.id} padding="$3" borderWidth={1} borderRadius="$4" borderColor="$borderColor" space="$2">
|
||
|
|
<Text fontSize="$4">{request.sender.username}</Text>
|
||
|
|
<Button
|
||
|
|
backgroundColor="green"
|
||
|
|
color="white"
|
||
|
|
onPress={() => handleResponse(request.id, "accepted")}
|
||
|
|
>
|
||
|
|
Accept
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
backgroundColor="red"
|
||
|
|
color="white"
|
||
|
|
onPress={() => handleResponse(request.id, "rejected")}
|
||
|
|
>
|
||
|
|
Reject
|
||
|
|
</Button>
|
||
|
|
</Stack>
|
||
|
|
))}
|
||
|
|
</ScrollView>
|
||
|
|
)}
|
||
|
|
</Stack>
|
||
|
|
</TamaguiProvider>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PendingFriendRequestsScreen;
|