{user.displayName ?? user.username}

import { router } from 'expo-router'; import { useState } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import useSWR from 'swr'; import type { ProfileDTO } from '@musicshare/shared'; import { api } from '@/lib/api'; import { showError } from '@/lib/errors'; import { useRealtime } from '@/lib/useRealtime'; import { useSession } from '@/lib/session'; import { colors, space } from '@/lib/theme'; import { Avatar } from './Avatar'; import { NowPlayingCard } from './NowPlayingCard'; import { RecentPlays } from './RecentPlays'; import { Screen } from './Screen'; import { TrackCard } from './TrackCard'; import { Body, Button, Card, Heading, Row, Title } from './ui'; export function ProfileView({ username, edges }: { username: string; edges?: ('top' | 'bottom')[] }) { const { me } = useSession(); const { data: profile, error, mutate } = useSWR(`/users/${username}`); const [busy, setBusy] = useState(false); const [refreshing, setRefreshing] = useState(false); useRealtime(true, (msg) => { if (msg.type === 'now_playing' && profile && msg.data.user.id === profile.user.id) { // A new track moves the previous one into "Recently played", so refetch; otherwise patch in place. const newTrack = msg.data.track.id !== profile.nowPlaying?.track.id; mutate({ ...profile, nowPlaying: msg.data }, { revalidate: newTrack }); } }); const act = async (fn: () => Promise) => { setBusy(true); try { await fn(); await mutate(); } catch (err) { showError(err); } setBusy(false); }; if (error) { return ( User not found. ); } if (!profile) return ; const { user } = profile; return ( { setRefreshing(true); await mutate().catch(() => {}); setRefreshing(false); }}> {user.displayName ?? user.username} @{user.username} · {profile.followerCount} followers · {profile.followingCount} following {user.bio && {user.bio}} {profile.isSelf ? (