@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
53 lines • 3.18 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Paper, Box, Typography, Stack, IconButton } from "@mui/material";
import { ArrowBack as ArrowBackIcon } from "@mui/icons-material";
import { Notes } from "../notes/Notes";
import { ApiHelper, Locale, NotificationService } from "../../helpers";
import { PersonAvatar } from "../PersonAvatar";
export const PrivateMessageDetails = (props) => {
// Clear notification when conversation is opened
React.useEffect(() => {
const clearNotification = async () => {
if (props.privateMessage.notifyPersonId === props.context.person.id) {
try {
// Clear the notification by getting the private message details
await ApiHelper.get(`/privateMessages/${props.privateMessage.id}`, "MessagingApi");
// Manually refresh notification counts to ensure immediate UI update
const notificationService = NotificationService.getInstance();
await notificationService.refresh();
// Notify parent component that message was marked as read
if (props.onMessageRead) {
props.onMessageRead();
}
}
catch (error) {
console.error("Failed to clear notification:", error);
}
}
};
clearNotification();
}, [props.privateMessage.id, props.privateMessage.notifyPersonId, props.context.person.id]);
return (_jsxs(Paper, { elevation: 0, sx: {
height: "100%",
display: "flex",
flexDirection: "column",
overflow: "hidden",
position: "relative"
}, children: [_jsx(Box, { sx: {
p: 2,
borderBottom: 1,
borderColor: "divider",
flexShrink: 0,
backgroundColor: "background.paper",
zIndex: 1
}, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, children: [_jsx(IconButton, { onClick: props.onBack, children: _jsx(ArrowBackIcon, {}) }), _jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", sx: { flex: 1 }, children: [_jsx(PersonAvatar, { person: props.privateMessage.person, size: "small" }), _jsxs(Box, { children: [_jsx(Typography, { variant: "h6", component: "h2", children: props.privateMessage.person.name.display }), _jsx(Typography, { variant: "caption", color: "textSecondary", children: Locale.label("wrapper.privateConversation", "Private Conversation") })] })] })] }) }), _jsx(Box, { sx: {
flex: 1,
display: "flex",
flexDirection: "column",
minHeight: 0,
overflow: "hidden"
}, children: _jsx(Notes, { maxHeight: "100%", context: props.context, conversationId: props.privateMessage.conversationId, noDisplayBox: true, refreshKey: props.refreshKey }) })] }));
};
//# sourceMappingURL=PrivateMessageDetails.js.map