@churchapps/apphelper 0.4.50 → 0.5.0

package/src/components/header/index.tsx

@@ -1,2 +1,2 @@
-export { Banner } from "./Banner";
-export { SiteHeader } from "./SiteHeader";
+export { Banner } from "./Banner";
+export { SiteHeader } from "./SiteHeader";

package/src/components/index.tsx

@@ -1,20 +1,20 @@
-export { ErrorMessages } from "./ErrorMessages";
-export { ExportLink } from "./ExportLink";
-export { DisplayBox } from "./DisplayBox";
-export { FloatingSupport } from "./FloatingSupport";
-export { FormSubmissionEdit } from "./FormSubmissionEdit";
-export { HelpIcon } from "./HelpIcon";
-export { ImageEditor } from "./ImageEditor";
-export { InputBox } from "./InputBox";
-export { Loading } from "./Loading";
-export { Notes } from "./notes/Notes";
-export { PageHeader } from "./PageHeader";
-export { PersonAvatar } from "./PersonAvatar";
-export { QuestionEdit } from "./QuestionEdit";
-export { SmallButton } from "./SmallButton";
-export { SupportModal } from "./SupportModal";
-export { TabPanel } from "./TabPanel";
-export * from "./wrapper";
-export * from "./notes";
-export * from "./header";
-export * from "./gallery";
+export { ErrorMessages } from "./ErrorMessages";
+export { ExportLink } from "./ExportLink";
+export { DisplayBox } from "./DisplayBox";
+export { FloatingSupport } from "./FloatingSupport";
+export { FormSubmissionEdit } from "./FormSubmissionEdit";
+export { HelpIcon } from "./HelpIcon";
+export { ImageEditor } from "./ImageEditor";
+export { InputBox } from "./InputBox";
+export { Loading } from "./Loading";
+export { Notes } from "./notes/Notes";
+export { PageHeader } from "./PageHeader";
+export { PersonAvatar } from "./PersonAvatar";
+export { QuestionEdit } from "./QuestionEdit";
+export { SmallButton } from "./SmallButton";
+export { SupportModal } from "./SupportModal";
+export { TabPanel } from "./TabPanel";
+export * from "./wrapper";
+export * from "./notes";
+export * from "./header";
+export * from "./gallery";

package/src/components/notes/AddNote.tsx

@@ -1,180 +1,180 @@
-"use client";
-
-import React, { useState, useEffect } from "react"
-import { ApiHelper, Locale, PersonHelper } from "../../helpers"
-import { MessageInterface, UserContextInterface } from "@churchapps/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"
-
-type Props = {
-  messageId?: string;
-  onUpdate: () => void;
-  createConversation: () => Promise<string>;
-  conversationId?: string;
-  context: UserContextInterface
-};
-
-export function AddNote({ context, ...props }: Props) {
-  const [message, setMessage] = useState<MessageInterface>()
-  const [errors, setErrors] = React.useState<string[]>([]);
-  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: any) => setMessage(n));
-    else setMessage({ conversationId: props.conversationId, content: "" });
-    return () => {
-      setMessage(null);
-    };
-  }, [props.messageId, props.conversationId])
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
-    setErrors([]);
-    const m = { ...message } as MessageInterface;
-    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 } as MessageInterface;
-          m.content = "";
-          setMessage(m);
-        })
-        .catch((error: any) => {
-          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 (
-    <Box sx={{ width: '100%' }}>
-      <ErrorMessages errors={errors} />
-      
-      <Paper 
-        variant="outlined" 
-        sx={{ 
-          p: 2, 
-          bgcolor: 'grey.50',
-          borderColor: 'grey.300'
-        }}
-      >
-        <Stack direction="row" spacing={2} alignItems="flex-start">
-          <Avatar 
-            src={image} 
-            alt={context?.person?.name?.display}
-            sx={{ width: 48, height: 48 }}
-          />
-          
-          <Box sx={{ flex: 1 }}>
-            <TextField
-              fullWidth
-              multiline
-              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'
-                }
-              }}
-            />
-            
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 1, gap: 0.5 }}>
-              {deleteFunction && (
-                <IconButton
-                  size="small"
-                  onClick={deleteFunction}
-                  disabled={isSubmitting}
-                  sx={{ color: 'error.main' }}
-                >
-                  <DeleteIcon fontSize="small" />
-                </IconButton>
-              )}
-              <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'
-                  }
-                }}
-              >
-                {isSubmitting ? <CircularProgress size={18} color="inherit" /> : <SendIcon fontSize="small" />}
-              </IconButton>
-            </Box>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
+"use client";
+
+import React, { useState, useEffect } from "react"
+import { ApiHelper, Locale, PersonHelper } from "../../helpers"
+import { MessageInterface, UserContextInterface } from "@churchapps/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"
+
+type Props = {
+  messageId?: string;
+  onUpdate: () => void;
+  createConversation: () => Promise<string>;
+  conversationId?: string;
+  context: UserContextInterface
+};
+
+export function AddNote({ context, ...props }: Props) {
+  const [message, setMessage] = useState<MessageInterface>()
+  const [errors, setErrors] = React.useState<string[]>([]);
+  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: any) => setMessage(n));
+    else setMessage({ conversationId: props.conversationId, content: "" });
+    return () => {
+      setMessage(null);
+    };
+  }, [props.messageId, props.conversationId])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    setErrors([]);
+    const m = { ...message } as MessageInterface;
+    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 } as MessageInterface;
+          m.content = "";
+          setMessage(m);
+        })
+        .catch((error: any) => {
+          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 (
+    <Box sx={{ width: '100%' }}>
+      <ErrorMessages errors={errors} />
+      
+      <Paper 
+        variant="outlined" 
+        sx={{ 
+          p: 2, 
+          bgcolor: 'grey.50',
+          borderColor: 'grey.300'
+        }}
+      >
+        <Stack direction="row" spacing={2} alignItems="flex-start">
+          <Avatar 
+            src={image} 
+            alt={context?.person?.name?.display}
+            sx={{ width: 48, height: 48 }}
+          />
+          
+          <Box sx={{ flex: 1 }}>
+            <TextField
+              fullWidth
+              multiline
+              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'
+                }
+              }}
+            />
+            
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 1, gap: 0.5 }}>
+              {deleteFunction && (
+                <IconButton
+                  size="small"
+                  onClick={deleteFunction}
+                  disabled={isSubmitting}
+                  sx={{ color: 'error.main' }}
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              )}
+              <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'
+                  }
+                }}
+              >
+                {isSubmitting ? <CircularProgress size={18} color="inherit" /> : <SendIcon fontSize="small" />}
+              </IconButton>
+            </Box>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}

package/src/components/notes/Note.tsx

@@ -1,68 +1,68 @@
-import { Icon, IconButton, Stack, Box, Typography } from "@mui/material";
-import React, { useState, useEffect } from "react";
-import { DateHelper } from "../../helpers"
-import { MessageInterface, UserContextInterface } from "@churchapps/helpers"
-import { PersonAvatar } from "../PersonAvatar"
-
-interface Props {
-  message: MessageInterface;
-  showEditNote: (noteId?: string) => void;
-  context: UserContextInterface;
-}
-
-export const Note: React.FC<Props> = (props) => {
-  const [message, setMessage] = useState<MessageInterface>(null);
-
-  useEffect(() => setMessage(props.message), [props.message]);
-
-  if (message === null) return null;
-  let datePosted = new Date(message.timeUpdated || message.timeSent);
-  const displayDuration = DateHelper.getDisplayDuration(datePosted);
-
-  const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent;
-  const contents = message.content?.split("\n");
-  
-  return (
-    <Box sx={{ display: 'flex', gap: 2, mb: 2, p: 1, '&:hover': { bgcolor: 'action.hover', borderRadius: 1 } }}>
-      <PersonAvatar person={message.person} size="small" />
-      <Box sx={{ flex: 1 }}>
-        <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
-          <Box sx={{ flex: 1 }}>
-            <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 0.5 }}>
-              <Typography variant="subtitle2" fontWeight="bold">
-                {message.person?.name?.display}
-              </Typography>
-              <Typography variant="caption" color="text.secondary">
-                {displayDuration}
-              </Typography>
-              {isEdited && (
-                <Typography variant="caption" color="text.secondary">
-                  (edited)
-                </Typography>
-              )}
-            </Stack>
-            <Box>
-              {contents.map((c, i) => c ? (
-                <Typography key={i} variant="body2" sx={{ mb: 0.5 }}>
-                  {c}
-                </Typography>
-              ) : (
-                <Box key={i} sx={{ height: '1em' }} />
-              ))}
-            </Box>
-          </Box>
-          {(message?.id && message.personId === props.context?.person.id) && (
-            <IconButton 
-              size="small" 
-              aria-label="editNote" 
-              onClick={() => props.showEditNote(message.id)}
-              sx={{ opacity: 0.7, '&:hover': { opacity: 1 } }}
-            >
-              <Icon fontSize="small">edit</Icon>
-            </IconButton>
-          )}
-        </Stack>
-      </Box>
-    </Box>
-  );
-};
+import { Icon, IconButton, Stack, Box, Typography } from "@mui/material";
+import React, { useState, useEffect } from "react";
+import { DateHelper } from "../../helpers"
+import { MessageInterface, UserContextInterface } from "@churchapps/helpers"
+import { PersonAvatar } from "../PersonAvatar"
+
+interface Props {
+  message: MessageInterface;
+  showEditNote: (noteId?: string) => void;
+  context: UserContextInterface;
+}
+
+export const Note: React.FC<Props> = (props) => {
+  const [message, setMessage] = useState<MessageInterface>(null);
+
+  useEffect(() => setMessage(props.message), [props.message]);
+
+  if (message === null) return null;
+  let datePosted = new Date(message.timeUpdated || message.timeSent);
+  const displayDuration = DateHelper.getDisplayDuration(datePosted);
+
+  const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent;
+  const contents = message.content?.split("\n");
+  
+  return (
+    <Box sx={{ display: 'flex', gap: 2, mb: 2, p: 1, '&:hover': { bgcolor: 'action.hover', borderRadius: 1 } }}>
+      <PersonAvatar person={message.person} size="small" />
+      <Box sx={{ flex: 1 }}>
+        <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
+          <Box sx={{ flex: 1 }}>
+            <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 0.5 }}>
+              <Typography variant="subtitle2" fontWeight="bold">
+                {message.person?.name?.display}
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                {displayDuration}
+              </Typography>
+              {isEdited && (
+                <Typography variant="caption" color="text.secondary">
+                  (edited)
+                </Typography>
+              )}
+            </Stack>
+            <Box>
+              {contents.map((c, i) => c ? (
+                <Typography key={i} variant="body2" sx={{ mb: 0.5 }}>
+                  {c}
+                </Typography>
+              ) : (
+                <Box key={i} sx={{ height: '1em' }} />
+              ))}
+            </Box>
+          </Box>
+          {(message?.id && message.personId === props.context?.person.id) && (
+            <IconButton 
+              size="small" 
+              aria-label="editNote" 
+              onClick={() => props.showEditNote(message.id)}
+              sx={{ opacity: 0.7, '&:hover': { opacity: 1 } }}
+            >
+              <Icon fontSize="small">edit</Icon>
+            </IconButton>
+          )}
+        </Stack>
+      </Box>
+    </Box>
+  );
+};