105 lines
3.5 KiB
TypeScript
105 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Typography from '@mui/material/Typography';
|
|
import { Link } from 'react-router-dom';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
|
import { useChat } from '../contexts/ChatContext';
|
|
import { nextcloudApi } from '../services/nextcloud';
|
|
import { notificationsApi } from '../services/notifications';
|
|
import ChatRoomList from '../components/chat/ChatRoomList';
|
|
import ChatMessageView from '../components/chat/ChatMessageView';
|
|
|
|
const ChatContent: React.FC = () => {
|
|
const { rooms, selectedRoomToken, connected } = useChat();
|
|
const queryClient = useQueryClient();
|
|
const markedRoomsRef = React.useRef(new Set<string>());
|
|
|
|
// Dismiss nextcloud_talk notifications when on this page
|
|
React.useEffect(() => {
|
|
notificationsApi.dismissByType('nextcloud_talk').then(() => {
|
|
queryClient.invalidateQueries({ queryKey: ['notifications'] });
|
|
queryClient.invalidateQueries({ queryKey: ['unreadNotificationCount'] });
|
|
}).catch(() => {});
|
|
}, [queryClient]);
|
|
|
|
// Mark unread rooms as read when rooms data updates
|
|
React.useEffect(() => {
|
|
const unread = rooms.filter(
|
|
(r) => r.unreadMessages > 0 && !markedRoomsRef.current.has(r.token),
|
|
);
|
|
if (unread.length === 0) return;
|
|
unread.forEach((r) => markedRoomsRef.current.add(r.token));
|
|
Promise.allSettled(unread.map((r) => nextcloudApi.markAsRead(r.token))).then(() => {
|
|
queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
|
|
});
|
|
}, [rooms, queryClient]);
|
|
|
|
// Mark selected room as read when a conversation is opened
|
|
React.useEffect(() => {
|
|
if (!selectedRoomToken) return;
|
|
nextcloudApi.markAsRead(selectedRoomToken).then(() => {
|
|
queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
|
|
}).catch(() => {});
|
|
}, [selectedRoomToken, queryClient]);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
height: 'calc(100vh - 112px)',
|
|
display: 'flex',
|
|
border: 1,
|
|
borderColor: 'divider',
|
|
borderRadius: 1,
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{!connected ? (
|
|
<Box sx={{ p: 3, display: 'flex', alignItems: 'center' }}>
|
|
<Typography variant="body1" color="text.secondary">
|
|
Nextcloud nicht verbunden. Bitte verbinden Sie sich in den{' '}
|
|
<Link to="/settings" style={{ color: 'inherit' }}>Einstellungen</Link>.
|
|
</Typography>
|
|
</Box>
|
|
) : (
|
|
<>
|
|
<Box
|
|
sx={{
|
|
width: 280,
|
|
flexShrink: 0,
|
|
borderRight: 1,
|
|
borderColor: 'divider',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<ChatRoomList />
|
|
</Box>
|
|
<Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
|
{selectedRoomToken ? (
|
|
<ChatMessageView />
|
|
) : (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
|
|
<Typography variant="body1" color="text.secondary">
|
|
Wähle ein Gespräch aus, um zu beginnen.
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const ChatPage: React.FC = () => {
|
|
return (
|
|
<DashboardLayout>
|
|
<ChatContent />
|
|
</DashboardLayout>
|
|
);
|
|
};
|
|
|
|
export default ChatPage;
|