Zias van Nes
d3adac8acc
Move avatar initials, fallback styling, and loading/loading-state UI into ProfilePicture and update components to use it. Export ProfilePicture from the lib index.
422 lines
10 KiB
Svelte
422 lines
10 KiB
Svelte
<script lang="ts">
|
|
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/card';
|
|
import { Button } from '$lib/components/button';
|
|
import { Input } from '$lib/components/input';
|
|
import ProfilePicture from '$lib/components/ProfilePicture.svelte';
|
|
import { Badge } from '$lib/components/badge';
|
|
import { toast } from 'svelte-sonner';
|
|
import type { PageData } from './$types';
|
|
|
|
type Friendship = {
|
|
id: string;
|
|
userId: string;
|
|
friendId: string;
|
|
status: string;
|
|
createdAt: string;
|
|
friendUsername: string;
|
|
friendProfilePictureUrl: string | null;
|
|
};
|
|
|
|
type SearchUser = {
|
|
id: string;
|
|
username: string;
|
|
profilePictureUrl: string | null;
|
|
friendshipStatus: string;
|
|
};
|
|
|
|
let { data }: { data: PageData } = $props();
|
|
let searchQuery = $state('');
|
|
let searchResults = $state<SearchUser[]>([]);
|
|
let isSearching = $state(false);
|
|
let activeTab = $state('friends');
|
|
|
|
let friends = $state<Friendship[]>(data.friends);
|
|
let sentRequests = $state<Friendship[]>(data.sentRequests);
|
|
let receivedRequests = $state<Friendship[]>(data.receivedRequests);
|
|
|
|
async function searchUsers() {
|
|
if (searchQuery.trim().length < 2) {
|
|
searchResults = [];
|
|
return;
|
|
}
|
|
|
|
isSearching = true;
|
|
try {
|
|
const response = await fetch(`/api/users?q=${encodeURIComponent(searchQuery.trim())}`);
|
|
if (!response.ok) {
|
|
throw new Error('Failed to search users');
|
|
}
|
|
searchResults = await response.json();
|
|
} catch (error) {
|
|
console.error('Error searching users:', error);
|
|
toast.error('Failed to search users');
|
|
} finally {
|
|
isSearching = false;
|
|
}
|
|
}
|
|
|
|
async function sendFriendRequest(friendId: string) {
|
|
try {
|
|
const response = await fetch('/api/friends', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ friendId })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.message || 'Failed to send friend request');
|
|
}
|
|
|
|
toast.success('Friend request sent!');
|
|
// Update the search results to reflect the new status
|
|
searchResults = searchResults.map((user) =>
|
|
user.id === friendId ? { ...user, friendshipStatus: 'pending' } : user
|
|
);
|
|
} catch (error) {
|
|
console.error('Error sending friend request:', error);
|
|
toast.error(error instanceof Error ? error.message : 'Failed to send friend request');
|
|
}
|
|
}
|
|
|
|
async function respondToFriendRequest(friendshipId: string, action: 'accept' | 'decline') {
|
|
try {
|
|
const response = await fetch(`/api/friends/${friendshipId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ action })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to ${action} friend request`);
|
|
}
|
|
|
|
toast.success(`Friend request ${action}ed!`);
|
|
|
|
// Remove from received requests
|
|
receivedRequests = receivedRequests.filter((req: Friendship) => req.id !== friendshipId);
|
|
|
|
// If accepted, refetch friends list
|
|
if (action === 'accept') {
|
|
const friendsResponse = await fetch('/api/friends?type=friends&status=accepted');
|
|
if (friendsResponse.ok) {
|
|
friends = await friendsResponse.json();
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error(`Error ${action}ing friend request:`, error);
|
|
toast.error(`Failed to ${action} friend request`);
|
|
}
|
|
}
|
|
|
|
async function removeFriend(friendshipId: string) {
|
|
try {
|
|
const response = await fetch(`/api/friends/${friendshipId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to remove friend');
|
|
}
|
|
|
|
toast.success('Friend removed');
|
|
friends = friends.filter((friend: Friendship) => friend.id !== friendshipId);
|
|
} catch (error) {
|
|
console.error('Error removing friend:', error);
|
|
toast.error('Failed to remove friend');
|
|
}
|
|
}
|
|
|
|
// Search users when query changes with debounce
|
|
let searchTimeout: ReturnType<typeof setTimeout>;
|
|
$effect(() => {
|
|
// Track searchQuery dependency explicitly
|
|
searchQuery;
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(searchUsers, 300);
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Friends - Serengo</title>
|
|
</svelte:head>
|
|
|
|
<div class="friends-page">
|
|
<div class="friends-container">
|
|
<!-- Tab Navigation -->
|
|
<div class="tabs">
|
|
<Button
|
|
variant={activeTab === 'friends' ? 'default' : 'outline'}
|
|
onclick={() => (activeTab = 'friends')}
|
|
>
|
|
Friends ({friends.length})
|
|
</Button>
|
|
<Button
|
|
variant={activeTab === 'requests' ? 'default' : 'outline'}
|
|
onclick={() => (activeTab = 'requests')}
|
|
>
|
|
Requests ({receivedRequests.length})
|
|
</Button>
|
|
<Button
|
|
variant={activeTab === 'search' ? 'default' : 'outline'}
|
|
onclick={() => (activeTab = 'search')}
|
|
>
|
|
Find Friends
|
|
</Button>
|
|
</div>
|
|
|
|
<!-- Friends List -->
|
|
{#if activeTab === 'friends'}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Your Friends</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{#if friends.length === 0}
|
|
<p class="empty-state">
|
|
No friends yet. Use the "Find Friends" tab to search for people!
|
|
</p>
|
|
{:else}
|
|
<div class="user-grid">
|
|
{#each friends as friend (friend.id)}
|
|
<div class="user-card">
|
|
<ProfilePicture
|
|
username={friend.friendUsername}
|
|
profilePictureUrl={friend.friendProfilePictureUrl}
|
|
/>
|
|
<div class="user-info">
|
|
<span class="username">{friend.friendUsername}</span>
|
|
<Badge variant="secondary">Friend</Badge>
|
|
</div>
|
|
<Button variant="destructive" size="sm" onclick={() => removeFriend(friend.id)}>
|
|
Remove
|
|
</Button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</CardContent>
|
|
</Card>
|
|
{/if}
|
|
|
|
<!-- Friend Requests -->
|
|
{#if activeTab === 'requests'}
|
|
<div class="requests-section">
|
|
<!-- Received Requests -->
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Friend Requests ({receivedRequests.length})</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{#if receivedRequests.length === 0}
|
|
<p class="empty-state">No pending friend requests</p>
|
|
{:else}
|
|
<div class="user-grid">
|
|
{#each receivedRequests as request (request.id)}
|
|
<div class="user-card">
|
|
<ProfilePicture
|
|
username={request.friendUsername}
|
|
profilePictureUrl={request.friendProfilePictureUrl}
|
|
/>
|
|
<div class="user-info">
|
|
<span class="username">{request.friendUsername}</span>
|
|
<Badge variant="outline">Pending</Badge>
|
|
</div>
|
|
<div class="request-actions">
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
onclick={() => respondToFriendRequest(request.id, 'accept')}
|
|
>
|
|
Accept
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onclick={() => respondToFriendRequest(request.id, 'decline')}
|
|
>
|
|
Decline
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<!-- Sent Requests -->
|
|
{#if sentRequests.length > 0}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Sent Requests ({sentRequests.length})</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="user-grid">
|
|
{#each sentRequests as request (request.id)}
|
|
<div class="user-card">
|
|
<ProfilePicture
|
|
username={request.friendUsername}
|
|
profilePictureUrl={request.friendProfilePictureUrl}
|
|
/>
|
|
<div class="user-info">
|
|
<span class="username">{request.friendUsername}</span>
|
|
<Badge variant="secondary">Sent</Badge>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Search Users -->
|
|
{#if activeTab === 'search'}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Find Friends</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div class="search-section">
|
|
<Input bind:value={searchQuery} placeholder="Search for users by username..." />
|
|
|
|
{#if isSearching}
|
|
<p class="loading">Searching...</p>
|
|
{:else if searchQuery.trim().length >= 2}
|
|
{#if searchResults.length === 0}
|
|
<p class="empty-state">No users found matching "{searchQuery}"</p>
|
|
{:else}
|
|
<div class="user-grid">
|
|
{#each searchResults as user (user.id)}
|
|
<div class="user-card">
|
|
<ProfilePicture
|
|
username={user.username}
|
|
profilePictureUrl={user.profilePictureUrl}
|
|
/>
|
|
<div class="user-info">
|
|
<span class="username">{user.username}</span>
|
|
{#if user.friendshipStatus === 'accepted'}
|
|
<Badge variant="secondary">Friend</Badge>
|
|
{:else if user.friendshipStatus === 'pending'}
|
|
<Badge variant="outline">Request Sent</Badge>
|
|
{:else if user.friendshipStatus === 'blocked'}
|
|
<Badge variant="destructive">Blocked</Badge>
|
|
{/if}
|
|
</div>
|
|
{#if user.friendshipStatus === 'none'}
|
|
<Button onclick={() => sendFriendRequest(user.id)} size="sm">
|
|
Add Friend
|
|
</Button>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{:else if searchQuery.trim().length > 0}
|
|
<p class="hint">Please enter at least 2 characters to search</p>
|
|
{/if}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.friends-page {
|
|
padding: 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.friends-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.user-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
}
|
|
|
|
.user-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
flex: 1;
|
|
}
|
|
|
|
.username {
|
|
font-weight: 500;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.request-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.requests-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.search-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.empty-state,
|
|
.loading,
|
|
.hint {
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
color: #6b7280;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.friends-page {
|
|
padding: 12px;
|
|
}
|
|
|
|
.user-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tabs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.request-actions {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|