411 lines
11 KiB
TypeScript
411 lines
11 KiB
TypeScript
import { useState, useCallback } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
Pressable,
|
|
ActivityIndicator,
|
|
Image,
|
|
RefreshControl,
|
|
StyleSheet,
|
|
} from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { apiFetch } from '../../lib/api';
|
|
import { AppHeader } from '../../components/AppHeader';
|
|
import { RoomCard, type Room } from '../../components/chat/RoomCard';
|
|
import { CreateRoomSheet } from '../../components/chat/CreateRoomSheet';
|
|
import { colors } from '../../lib/theme';
|
|
|
|
type DmConversation = {
|
|
partnerId: string;
|
|
partnerName: string;
|
|
partnerAvatar: string | null;
|
|
lastMessage: string;
|
|
lastMessageAt: string;
|
|
unreadCount: number;
|
|
isOwn: boolean;
|
|
};
|
|
|
|
function formatTime(ts: string, justNowLabel: string): string {
|
|
const diff = Date.now() - new Date(ts).getTime();
|
|
if (diff < 60_000) return justNowLabel;
|
|
if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m`;
|
|
if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h`;
|
|
return new Date(ts).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
|
|
}
|
|
|
|
function DmItem({ conv, onPress }: { conv: DmConversation; onPress: () => void }) {
|
|
const { t } = useTranslation();
|
|
const hasUnread = conv.unreadCount > 0;
|
|
|
|
return (
|
|
<Pressable onPress={onPress} android_ripple={{ color: '#f5f5f5' }}>
|
|
{({ pressed }) => (
|
|
<View style={[styles.dmRow, { opacity: pressed ? 0.75 : 1 }]}>
|
|
<View style={styles.dmAvatar}>
|
|
{conv.partnerAvatar ? (
|
|
<Image source={{ uri: conv.partnerAvatar }} style={styles.dmAvatarImg} />
|
|
) : (
|
|
<Text style={styles.dmAvatarInitials}>
|
|
{conv.partnerName.slice(0, 2).toUpperCase()}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
<View style={styles.dmInfo}>
|
|
<View style={styles.dmHeaderRow}>
|
|
<Text style={styles.dmName} numberOfLines={1}>
|
|
{conv.partnerName}
|
|
</Text>
|
|
<Text
|
|
style={[styles.dmTime, { color: hasUnread ? '#007AFF' : '#a3a3a3' }]}
|
|
>
|
|
{formatTime(conv.lastMessageAt, t('chat.just_now'))}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.dmBottomRow}>
|
|
<Text
|
|
numberOfLines={1}
|
|
style={[
|
|
styles.dmLast,
|
|
{
|
|
fontFamily: hasUnread ? 'Nunito_600SemiBold' : 'Nunito_400Regular',
|
|
color: hasUnread ? '#171717' : '#a3a3a3',
|
|
},
|
|
]}
|
|
>
|
|
{conv.isOwn ? t('chat.you') : ''}
|
|
{conv.lastMessage}
|
|
</Text>
|
|
{hasUnread && (
|
|
<View style={styles.unreadBadge}>
|
|
<Text style={styles.unreadBadgeText}>{conv.unreadCount}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
export default function ChatScreen() {
|
|
const { t } = useTranslation();
|
|
const router = useRouter();
|
|
const [tab, setTab] = useState<'groups' | 'direct'>('groups');
|
|
const [createOpen, setCreateOpen] = useState(false);
|
|
|
|
const {
|
|
data: rooms = [],
|
|
isLoading: loadingRooms,
|
|
isRefetching: refetchingRooms,
|
|
refetch: refetchRooms,
|
|
} = useQuery<Room[]>({
|
|
queryKey: ['chat-rooms'],
|
|
queryFn: () => apiFetch('/api/chat/rooms'),
|
|
staleTime: 30_000,
|
|
});
|
|
|
|
const {
|
|
data: convs = [],
|
|
isLoading: loadingDms,
|
|
isRefetching: refetchingDms,
|
|
refetch: refetchDms,
|
|
} = useQuery<DmConversation[]>({
|
|
queryKey: ['dm-conversations'],
|
|
queryFn: () => apiFetch('/api/chat/dm-conversations'),
|
|
staleTime: 30_000,
|
|
enabled: tab === 'direct',
|
|
});
|
|
|
|
const unreadDms = convs.reduce((s, c) => s + (c.unreadCount ?? 0), 0);
|
|
|
|
const openRoom = useCallback(
|
|
(roomId: string) => {
|
|
router.push(`/room?roomId=${roomId}`);
|
|
},
|
|
[router],
|
|
);
|
|
|
|
const openDm = useCallback(
|
|
(userId: string) => {
|
|
router.push(`/dm?userId=${userId}`);
|
|
},
|
|
[router],
|
|
);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<AppHeader />
|
|
|
|
{/* Header */}
|
|
<View style={styles.headerSection}>
|
|
<View style={styles.titleRow}>
|
|
<Text style={styles.title}>{t('chat.title')}</Text>
|
|
{tab === 'groups' && (
|
|
<Pressable
|
|
onPress={() => setCreateOpen(true)}
|
|
style={({ pressed }) => [styles.createBtn, { opacity: pressed ? 0.7 : 1 }]}
|
|
>
|
|
<Ionicons name="add" size={20} color="#fff" />
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
|
|
{/* Tabs */}
|
|
<View style={styles.tabs}>
|
|
<Pressable
|
|
onPress={() => setTab('groups')}
|
|
style={[styles.tab, tab === 'groups' && styles.tabActive]}
|
|
>
|
|
<Ionicons
|
|
name="people"
|
|
size={14}
|
|
color={tab === 'groups' ? '#007AFF' : '#737373'}
|
|
/>
|
|
<Text style={[styles.tabText, tab === 'groups' && styles.tabTextActive]}>
|
|
{t('chat.groups')}
|
|
</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
onPress={() => setTab('direct')}
|
|
style={[styles.tab, tab === 'direct' && styles.tabActive]}
|
|
>
|
|
<Ionicons
|
|
name="chatbubbles"
|
|
size={14}
|
|
color={tab === 'direct' ? '#007AFF' : '#737373'}
|
|
/>
|
|
<Text style={[styles.tabText, tab === 'direct' && styles.tabTextActive]}>
|
|
{t('chat.direct')}
|
|
</Text>
|
|
{unreadDms > 0 && (
|
|
<View style={styles.tabBadge}>
|
|
<Text style={styles.tabBadgeText}>{unreadDms}</Text>
|
|
</View>
|
|
)}
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
|
|
{tab === 'groups' ? (
|
|
<FlatList
|
|
data={loadingRooms ? [] : rooms}
|
|
keyExtractor={(item) => item.id}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={refetchingRooms}
|
|
onRefresh={refetchRooms}
|
|
tintColor={colors.brandOrange}
|
|
/>
|
|
}
|
|
ListEmptyComponent={
|
|
loadingRooms ? (
|
|
<View style={styles.emptyBox}>
|
|
<ActivityIndicator color={colors.brandOrange} />
|
|
</View>
|
|
) : (
|
|
<View style={styles.emptyBox}>
|
|
<Ionicons name="people-outline" size={42} color="#d4d4d4" />
|
|
<Text style={styles.emptyText}>{t('chat.no_rooms')}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
renderItem={({ item }) => <RoomCard room={item} onPress={() => openRoom(item.id)} />}
|
|
contentContainerStyle={{ paddingBottom: 100 }}
|
|
/>
|
|
) : (
|
|
<FlatList
|
|
data={loadingDms ? [] : convs}
|
|
keyExtractor={(item) => item.partnerId}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={refetchingDms}
|
|
onRefresh={refetchDms}
|
|
tintColor={colors.brandOrange}
|
|
/>
|
|
}
|
|
ListEmptyComponent={
|
|
loadingDms ? (
|
|
<View style={styles.emptyBox}>
|
|
<ActivityIndicator color={colors.brandOrange} />
|
|
</View>
|
|
) : (
|
|
<View style={styles.emptyBox}>
|
|
<Ionicons name="chatbubble-ellipses-outline" size={42} color="#d4d4d4" />
|
|
<Text style={styles.emptyText}>{t('chat.no_chats')}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
renderItem={({ item }) => <DmItem conv={item} onPress={() => openDm(item.partnerId)} />}
|
|
contentContainerStyle={{ paddingBottom: 100 }}
|
|
/>
|
|
)}
|
|
|
|
<CreateRoomSheet
|
|
visible={createOpen}
|
|
onClose={() => setCreateOpen(false)}
|
|
onCreated={(room) => {
|
|
refetchRooms();
|
|
openRoom(room.id);
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: '#fafafa' },
|
|
headerSection: {
|
|
paddingHorizontal: 16,
|
|
paddingTop: 14,
|
|
paddingBottom: 10,
|
|
backgroundColor: '#fff',
|
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
borderBottomColor: '#e5e5e5',
|
|
},
|
|
titleRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
title: {
|
|
fontSize: 22,
|
|
fontFamily: 'Nunito_800ExtraBold',
|
|
color: '#171717',
|
|
},
|
|
createBtn: {
|
|
width: 34,
|
|
height: 34,
|
|
borderRadius: 17,
|
|
backgroundColor: '#007AFF',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
tabs: {
|
|
flexDirection: 'row',
|
|
marginTop: 12,
|
|
backgroundColor: '#f5f5f5',
|
|
borderRadius: 10,
|
|
padding: 3,
|
|
},
|
|
tab: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 7,
|
|
borderRadius: 8,
|
|
},
|
|
tabActive: {
|
|
backgroundColor: '#fff',
|
|
shadowColor: '#000',
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 2,
|
|
shadowOffset: { width: 0, height: 1 },
|
|
},
|
|
tabText: {
|
|
fontSize: 12,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
color: '#737373',
|
|
marginLeft: 5,
|
|
},
|
|
tabTextActive: {
|
|
color: '#007AFF',
|
|
fontFamily: 'Nunito_700Bold',
|
|
},
|
|
tabBadge: {
|
|
minWidth: 16,
|
|
height: 16,
|
|
borderRadius: 8,
|
|
backgroundColor: '#007AFF',
|
|
paddingHorizontal: 4,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginLeft: 5,
|
|
},
|
|
tabBadgeText: {
|
|
fontSize: 9,
|
|
fontFamily: 'Nunito_700Bold',
|
|
color: '#fff',
|
|
},
|
|
emptyBox: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 60,
|
|
paddingHorizontal: 32,
|
|
},
|
|
emptyText: {
|
|
fontSize: 13,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
color: '#a3a3a3',
|
|
marginTop: 12,
|
|
},
|
|
// DM row styles
|
|
dmRow: {
|
|
width: '100%',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 11,
|
|
backgroundColor: '#fff',
|
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
borderBottomColor: '#f5f5f5',
|
|
},
|
|
dmAvatar: {
|
|
width: 42,
|
|
height: 42,
|
|
borderRadius: 21,
|
|
backgroundColor: '#e5e5e5',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
overflow: 'hidden',
|
|
marginRight: 10,
|
|
},
|
|
dmAvatarImg: { width: 42, height: 42 },
|
|
dmAvatarInitials: {
|
|
fontSize: 13,
|
|
fontFamily: 'Nunito_700Bold',
|
|
color: '#525252',
|
|
},
|
|
dmInfo: { flex: 1, minWidth: 0 },
|
|
dmHeaderRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
dmName: {
|
|
fontSize: 14,
|
|
fontFamily: 'Nunito_700Bold',
|
|
color: '#171717',
|
|
flexShrink: 1,
|
|
marginRight: 6,
|
|
},
|
|
dmTime: { fontSize: 11, fontFamily: 'Nunito_600SemiBold' },
|
|
dmBottomRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginTop: 2,
|
|
},
|
|
dmLast: { fontSize: 12, flex: 1 },
|
|
unreadBadge: {
|
|
minWidth: 20,
|
|
height: 20,
|
|
paddingHorizontal: 6,
|
|
borderRadius: 10,
|
|
backgroundColor: '#007AFF',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginLeft: 8,
|
|
},
|
|
unreadBadgeText: {
|
|
fontSize: 10,
|
|
fontFamily: 'Nunito_700Bold',
|
|
color: '#fff',
|
|
},
|
|
});
|