fix and update
This commit is contained in:
lendry
@@ -65,6 +65,7 @@ import { useAuth } from '@/components/id/auth-provider';
|
||||
import { useToast } from '@/components/id/toast-provider';
|
||||
import { useRealtime } from '@/components/notifications/realtime-provider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { MediaImageSkeleton } from '@/components/ui/media-image-skeleton';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useRequireAuth } from '@/hooks/use-require-auth';
|
||||
@@ -88,6 +89,7 @@ import {
|
||||
fetchFamilyPresence,
|
||||
forwardChatMessages,
|
||||
getApiErrorMessage,
|
||||
getAccessToken,
|
||||
leaveFamilyGroup,
|
||||
markChatRoomRead,
|
||||
removeChatRoomMember,
|
||||
@@ -197,22 +199,24 @@ function FamilySidebarAvatar({
|
||||
uploading?: boolean;
|
||||
onUpload: (file: File) => void;
|
||||
}) {
|
||||
const { isLoading: authLoading } = useAuth();
|
||||
const [url, setUrl] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasAvatar || !token) {
|
||||
if (!hasAvatar || !token || authLoading) {
|
||||
setUrl(null);
|
||||
return;
|
||||
}
|
||||
apiFetch<{ accessUrl: string }>(`/media/families/${groupId}/avatar/url`, {}, token)
|
||||
.then((response) => setUrl(response.accessUrl))
|
||||
.catch(() => setUrl(null));
|
||||
}, [groupId, hasAvatar, token]);
|
||||
}, [authLoading, groupId, hasAvatar, token]);
|
||||
|
||||
return (
|
||||
<HoverUploadAvatar
|
||||
name={name}
|
||||
imageUrl={url}
|
||||
imageToken={token}
|
||||
uploading={uploading}
|
||||
onFileSelect={onUpload}
|
||||
className="h-11 w-11 shrink-0"
|
||||
@@ -230,6 +234,10 @@ function familyMemberRoleLabel(role: string) {
|
||||
return role === 'owner' ? 'Создатель семьи' : 'Участник';
|
||||
}
|
||||
|
||||
/** Desktop: зона под fixed UserMenu + колокольчик (IdShell), на mobile не применяется */
|
||||
const DESKTOP_CHAT_RIGHT_GUTTER = 'lg:pr-64';
|
||||
const DESKTOP_CHAT_TOP_GUTTER = 'lg:pt-14';
|
||||
|
||||
function shouldSkipGroupedAlbumMessage(messages: ChatMessage[], index: number) {
|
||||
const message = messages[index];
|
||||
if (!message) return false;
|
||||
@@ -257,7 +265,7 @@ function collectAlbumMessages(messages: ChatMessage[], startIndex: number) {
|
||||
|
||||
export function FamilyGroupView({ groupId }: { groupId: string }) {
|
||||
const router = useRouter();
|
||||
const { user, token } = useAuth();
|
||||
const { user, token, isLoading: authLoading } = useAuth();
|
||||
const { isReady, isPinLocked } = useRequireAuth();
|
||||
const { showToast } = useToast();
|
||||
const { subscribe, connected } = useRealtime();
|
||||
@@ -469,9 +477,10 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
|
||||
}, [isPinLocked, rooms, showToast, token]);
|
||||
|
||||
const loadPresence = useCallback(async () => {
|
||||
if (!token || isPinLocked) return;
|
||||
const accessToken = getAccessToken() ?? token?.trim() ?? null;
|
||||
if (!accessToken || isPinLocked) return;
|
||||
try {
|
||||
const response = await fetchFamilyPresence(groupId, token);
|
||||
const response = await fetchFamilyPresence(groupId, accessToken);
|
||||
setPresenceMembers(response.members ?? []);
|
||||
} catch {
|
||||
// ignore background presence errors
|
||||
@@ -479,13 +488,14 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
|
||||
}, [groupId, isPinLocked, token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isReady || !token || isPinLocked) return;
|
||||
const accessToken = getAccessToken() ?? token?.trim() ?? null;
|
||||
if (!isReady || !accessToken || isPinLocked || authLoading) return;
|
||||
setLoading(true);
|
||||
loadGroup()
|
||||
.catch((error) => showToast(getApiErrorMessage(error, 'Не удалось загрузить семью') ?? 'Ошибка'))
|
||||
.finally(() => setLoading(false));
|
||||
void loadPresence();
|
||||
}, [isPinLocked, isReady, loadGroup, loadPresence, showToast, token]);
|
||||
}, [authLoading, isPinLocked, isReady, loadGroup, loadPresence, showToast, token]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleAvatarUpdated() {
|
||||
@@ -496,11 +506,12 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
|
||||
}, [loadGroup]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token || isPinLocked) return;
|
||||
const accessToken = getAccessToken() ?? token?.trim() ?? null;
|
||||
if (!accessToken || isPinLocked || authLoading) return;
|
||||
void loadPresence();
|
||||
const timer = window.setInterval(() => void loadPresence(), 25_000);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [connected, isPinLocked, loadPresence, token]);
|
||||
}, [authLoading, connected, isPinLocked, loadPresence, token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeRoomId || activeRoomIsBot) return;
|
||||
@@ -1699,7 +1710,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
|
||||
>
|
||||
{activeRoom ? (
|
||||
<>
|
||||
<div className="flex items-center justify-between gap-2 border-b border-[#dce3ec] bg-white px-3 py-3 sm:px-4 lg:pr-48">
|
||||
<div className={cn('flex items-center justify-between gap-2 border-b border-[#dce3ec] bg-white px-3 py-3 sm:px-4', DESKTOP_CHAT_RIGHT_GUTTER)}>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2 sm:gap-3">
|
||||
<button
|
||||
type="button"
|
||||
@@ -1903,6 +1914,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
|
||||
<ChatPinnedMessageBanner
|
||||
senderName={pinnedMessage.senderName}
|
||||
preview={pinnedPreview}
|
||||
className={DESKTOP_CHAT_RIGHT_GUTTER}
|
||||
onClick={() => {
|
||||
if (!scrollToChatMessage(pinnedMessage.id)) {
|
||||
showToast('Закреплённое сообщение пока не загружено в ленте');
|
||||
@@ -1910,7 +1922,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<div className={cn('flex-1 space-y-2 overflow-y-auto px-4 py-4', isDragging && 'select-none')}>
|
||||
<div className={cn('flex-1 space-y-2 overflow-y-auto px-4 py-4', DESKTOP_CHAT_RIGHT_GUTTER, DESKTOP_CHAT_TOP_GUTTER, isDragging && 'select-none')}>
|
||||
{visibleMessages.map((message, messageIndex) => {
|
||||
if (shouldSkipGroupedAlbumMessage(visibleMessages, messageIndex)) {
|
||||
return null;
|
||||
@@ -2055,10 +2067,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
|
||||
}
|
||||
if (!media?.blobUrl || media.status === 'loading') {
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-sm text-[#667085]">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Загрузка файла...
|
||||
</div>
|
||||
<MediaImageSkeleton className="max-h-72 w-full max-w-[320px]" rounded="xl" />
|
||||
);
|
||||
}
|
||||
if (message.type === 'IMAGE') {
|
||||
@@ -2256,7 +2265,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
|
||||
onDelete={() => void handleBulkDelete()}
|
||||
/>
|
||||
) : (
|
||||
<div className="border-t border-[#dce3ec] bg-white px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] sm:px-3 sm:py-3">
|
||||
<div className={cn('border-t border-[#dce3ec] bg-white px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] sm:px-3 sm:py-3', DESKTOP_CHAT_RIGHT_GUTTER)}>
|
||||
{editingMessageId ? (
|
||||
<ChatMessageEditBanner
|
||||
preview={draft.trim() || messages.find((item) => item.id === editingMessageId)?.content || undefined}
|
||||
|
||||
Reference in New Issue
Block a user