@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
104 lines • 5.88 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect } from "react";
import { ApiHelper, Locale, PersonHelper } from "../../helpers";
import { Box, Stack, TextField, IconButton, Paper, CircularProgress, Avatar } from "@mui/material";
import { Send as SendIcon, Delete as DeleteIcon } from "@mui/icons-material";
import { ErrorMessages } from "../ErrorMessages";
export function AddNote({ context, ...props }) {
const [message, setMessage] = useState();
const [errors, setErrors] = React.useState([]);
const [isSubmitting, setIsSubmitting] = React.useState(false);
const headerText = props.messageId ? "Edit note" : "Add a note";
useEffect(() => {
if (props.messageId)
ApiHelper.get(`/messages/${props.messageId}`, "MessagingApi").then((n) => setMessage(n));
else
setMessage({ conversationId: props.conversationId, content: "" });
return () => {
setMessage(null);
};
}, [props.messageId, props.conversationId]);
const handleChange = (e) => {
setErrors([]);
const m = { ...message };
m.content = e.target.value;
setMessage(m);
};
const validate = () => {
const result = [];
if (!message.content.trim())
result.push(Locale.label("notes.validate.content", "Please enter a message"));
setErrors(result);
return result.length === 0;
};
async function handleSave() {
if (validate()) {
setIsSubmitting(true);
let cId = props.conversationId;
if (!cId)
cId = await props.createConversation();
const m = { ...message };
m.conversationId = cId;
ApiHelper.post("/messages", [m], "MessagingApi")
.then(() => {
props.onUpdate();
const m = { ...message };
m.content = "";
setMessage(m);
})
.catch((error) => {
console.error("Error saving message:", error);
if (error?.message === "Forbidden") {
setErrors(["You can't edit the message sent by others."]);
}
else {
setErrors([error?.message || "Failed to save message. Please try again."]);
}
})
.finally(() => { setIsSubmitting(false); });
}
}
;
async function deleteNote() {
await ApiHelper.delete(`/messages/${props.messageId}`, "MessagingApi");
props.onUpdate();
}
const deleteFunction = props.messageId ? deleteNote : null;
const image = PersonHelper.getPhotoUrl(context?.person);
return (_jsxs(Box, { sx: { width: '100%' }, children: [_jsx(ErrorMessages, { errors: errors }), _jsx(Paper, { variant: "outlined", sx: {
p: 2,
bgcolor: 'grey.50',
borderColor: 'grey.300'
}, children: _jsxs(Stack, { direction: "row", spacing: 2, alignItems: "flex-start", children: [_jsx(Avatar, { src: image, alt: context?.person?.name?.display, sx: { width: 48, height: 48 } }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(TextField, { fullWidth: true, multiline: true, rows: 2, name: "noteText", "aria-label": headerText, placeholder: props.messageId ? "Edit your message..." : "Type a message...", variant: "standard", value: message?.content || '', onChange: handleChange, disabled: isSubmitting, InputProps: {
disableUnderline: true,
sx: {
fontSize: '1rem',
'& textarea': {
resize: 'vertical',
minHeight: '40px'
}
}
}, sx: {
bgcolor: 'white',
borderRadius: 1,
p: 1,
border: '1px solid',
borderColor: 'grey.300',
'&:hover': {
borderColor: 'grey.400'
},
'&.Mui-focused': {
borderColor: 'primary.main'
}
} }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', mt: 1, gap: 0.5 }, children: [deleteFunction && (_jsx(IconButton, { size: "small", onClick: deleteFunction, disabled: isSubmitting, sx: { color: 'error.main' }, children: _jsx(DeleteIcon, { fontSize: "small" }) })), _jsx(IconButton, { size: "small", color: "primary", onClick: handleSave, disabled: isSubmitting || !message?.content?.trim(), sx: {
bgcolor: 'primary.main',
color: 'white',
'&:hover': { bgcolor: 'primary.dark' },
'&:disabled': {
bgcolor: 'action.disabledBackground',
color: 'action.disabled'
}
}, children: isSubmitting ? _jsx(CircularProgress, { size: 18, color: "inherit" }) : _jsx(SendIcon, { fontSize: "small" }) })] })] })] }) })] }));
}
//# sourceMappingURL=AddNote.js.map