matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use isActive instead of chatPanelOpen in ChatMessageView so messages load on /chat page

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-28 10:44:44 +01:00
parent 60e1329815
commit 992a184784
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/chat/ChatMessageView.tsx
View File

@@ -13,15 +13,13 @@ import CloseIcon from '@mui/icons-material/Close';
import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query';
import { nextcloudApi } from '../../services/nextcloud'; import { nextcloudApi } from '../../services/nextcloud';
import { useChat } from '../../contexts/ChatContext'; import { useChat } from '../../contexts/ChatContext';
import { useLayout } from '../../contexts/LayoutContext';
import ChatMessage from './ChatMessage'; import ChatMessage from './ChatMessage';
import type { NextcloudMessage } from '../../types/nextcloud.types'; import type { NextcloudMessage } from '../../types/nextcloud.types';
const LONG_POLL_TIMEOUT = 25; const LONG_POLL_TIMEOUT = 25;
const ChatMessageView: React.FC = () => { const ChatMessageView: React.FC = () => {
const { selectedRoomToken, selectRoom, rooms, loginName } = useChat(); const { selectedRoomToken, selectRoom, rooms, loginName, isActive } = useChat();
const { chatPanelOpen } = useLayout();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const scrollContainerRef = useRef<HTMLDivElement>(null); const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -56,7 +54,7 @@ const ChatMessageView: React.FC = () => {
// Initial fetch + long-poll loop for near-instant message delivery // Initial fetch + long-poll loop for near-instant message delivery
useEffect(() => { useEffect(() => {
if (!selectedRoomToken || !chatPanelOpen) return; if (!selectedRoomToken || !isActive) return;
let cancelled = false; let cancelled = false;
let currentAbort: AbortController | null = null; let currentAbort: AbortController | null = null;
@@ -134,7 +132,7 @@ const ChatMessageView: React.FC = () => {
cancelled = true; cancelled = true;
currentAbort?.abort(); currentAbort?.abort();
}; };
}, [selectedRoomToken, chatPanelOpen, queryClient, fetchReactions]); }, [selectedRoomToken, isActive, queryClient, fetchReactions]);
const room = rooms.find((r) => r.token === selectedRoomToken); const room = rooms.find((r) => r.token === selectedRoomToken);
const isOneToOne = room?.type === 1; const isOneToOne = room?.type === 1;
@@ -149,12 +147,12 @@ const ChatMessageView: React.FC = () => {
// Mark room as read when first opened // Mark room as read when first opened
useEffect(() => { useEffect(() => {
if (selectedRoomToken && chatPanelOpen) { if (selectedRoomToken && isActive) {
nextcloudApi.markAsRead(selectedRoomToken).then(() => { nextcloudApi.markAsRead(selectedRoomToken).then(() => {
queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] }); queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
}).catch(() => {}); }).catch(() => {});
} }
}, [selectedRoomToken, chatPanelOpen, queryClient]); }, [selectedRoomToken, isActive, queryClient]);
// Smart scroll: instant on initial load, smooth only when user is near bottom // Smart scroll: instant on initial load, smooth only when user is near bottom
useEffect(() => { useEffect(() => {

2
frontend/src/contexts/ChatContext.tsx
View File

@@ -12,6 +12,7 @@ interface ChatContextType {
selectRoom: (token: string | null) => void; selectRoom: (token: string | null) => void;
connected: boolean; connected: boolean;
loginName: string | null; loginName: string | null;
isActive: boolean;
} }
const ChatContext = createContext<ChatContextType | undefined>(undefined); const ChatContext = createContext<ChatContextType | undefined>(undefined);
@@ -119,6 +120,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
selectRoom, selectRoom,
connected, connected,
loginName, loginName,
isActive,
}; };
return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>; return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;