@churchapps/apphelper
Version:
Library of helper functions for React and NextJS ChurchApps
93 lines • 6.35 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { ApiHelper, Locale, PersonHelper } from "../../helpers";
import { UserHelper } from "@churchapps/helpers";
import { Box, Stack, TextField, IconButton, Paper, CircularProgress, Avatar, Icon } from "@mui/material";
import { EmojiPicker } from "./EmojiPicker";
import { ErrorMessages } from "../ErrorMessages";
export function AddNote({ context, onCancel, ...props }) {
const [message, setMessage] = useState();
const [errors, setErrors] = useState([]);
const [isSubmitting, setIsSubmitting] = useState(false);
const [emojiAnchorEl, setEmojiAnchorEl] = useState(null);
const headerText = props.messageId ? "Edit note" : "Add a note";
const churchId = UserHelper.currentUserChurch?.church?.id || "";
useEffect(() => {
if (props.messageId) {
ApiHelper.get(`/messages/${churchId}/${props.messageId}`, "MessagingApi")
.then((n) => setMessage(n));
}
else {
setMessage({ conversationId: props.conversationId, content: "" });
}
return () => setMessage(null);
}, [props.messageId, props.conversationId]);
const handleChange = (e) => {
setErrors([]);
setMessage({ ...message, content: e.target.value });
};
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())
return;
setIsSubmitting(true);
let cId = props.conversationId;
if (!cId)
cId = await props.createConversation();
const m = { ...message, conversationId: cId };
ApiHelper.post("/messages", [m], "MessagingApi")
.then(() => {
props.onUpdate();
setMessage({ ...message, content: "" });
})
.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() {
if (!props.messageId)
return;
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", alignItems: "center", mt: 1 }, children: [props.messageId && (_jsx(IconButton, { size: "small", onClick: () => {
setMessage({ ...message, content: "" });
onCancel?.();
}, disabled: isSubmitting, sx: { color: "grey.700" }, children: _jsx(Icon, { fontSize: "small", children: "cancel" }) })), _jsx(Box, { sx: { flex: 1 } }), _jsxs(Box, { sx: { display: "flex", gap: 0.5 }, children: [_jsx(IconButton, { size: "small", onClick: (e) => setEmojiAnchorEl(e.currentTarget), disabled: isSubmitting, sx: { color: "grey.600" }, children: _jsx(Icon, { fontSize: "small", children: "sentiment_satisfied_alt" }) }), deleteFunction && (_jsx(IconButton, { size: "small", onClick: deleteFunction, disabled: isSubmitting, sx: { color: "error.main" }, children: _jsx(Icon, { fontSize: "small", children: "delete" }) })), _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(Icon, { fontSize: "small", children: "send" }) })] })] })] })] }) }), _jsx(EmojiPicker, { anchorEl: emojiAnchorEl, open: Boolean(emojiAnchorEl), onClose: () => setEmojiAnchorEl(null), onSelect: (emoji) => setMessage({ ...message, content: (message?.content || "") + emoji }) })] }));
}
//# sourceMappingURL=AddNote.js.map