@churchapps/apphelper 0.4.12 → 0.4.18

package/src/components/header/PrimaryMenu.tsx

@@ -1,57 +1,100 @@
-import React from "react";
-import { Box, Button, Icon, Menu } from "@mui/material";
+import React, { useState, useRef } from "react";
+import { Box, Button, Icon, Paper, Popper, Grow, ClickAwayListener } from "@mui/material";
 import { NavItem } from "../wrapper/NavItem";
 
 interface Props {
-  label: string,
-  menuItems: { url: string, icon:string, label: string }[]
-	onNavigate: (url: string) => void,
+  label: string;
+  menuItems: { url: string; icon: string; label: string }[];
+  onNavigate: (url: string) => void;
 }
 
-export const PrimaryMenu = (props:Props) => {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
+export const PrimaryMenu = (props: Props) => {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLButtonElement>(null);
 
-  const handleClose = () => { setAnchorEl(null); };
-
-  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-    setAnchorEl(e.currentTarget);
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
   };
 
-  const paperProps = {
-    elevation: 0,
-    sx: {
-      backgroundColor: "var(--c1)",
-      color: "#FFF",
-      overflow: "visible",
-      filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-
-      "& .MuiAvatar-root": { width: 32, height: 32, ml: -0.5, mr: 1 },
-      minWidth: 300
+  const handleClose = (event: Event | React.SyntheticEvent) => {
+    if (
+      anchorRef.current &&
+      anchorRef.current.contains(event.target as HTMLElement)
+    ) {
+      return;
     }
+    setOpen(false);
+  };
+
+  const handleItemClick = (url: string) => {
+    setOpen(false);
+    props.onNavigate(url);
   };
 
   const getNavItems = () => {
     let result: React.ReactElement[] = [];
-    props.menuItems.forEach(item => {
-      result.push(<NavItem url={item.url} label={item.label.toUpperCase()} icon={item.icon} key={item.url} onNavigate={props.onNavigate} />);
+    props.menuItems.forEach((item) => {
+      result.push(
+        <NavItem
+          url={item.url}
+          label={item.label.toUpperCase()}
+          icon={item.icon}
+          key={item.url}
+          onNavigate={handleItemClick}
+        />
+      );
     });
     return result;
-  }
-
-  return (<>
-    <Button onClick={handleClick} color="inherit" aria-controls={open ? "account-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} endIcon={<Icon>expand_more</Icon>} id="primaryNavButton">
-      <img src="/images/logo-icon.png" alt="Primary Menu" />
-      <h2>{props.label}</h2>
-    </Button>
-
-    <Menu anchorEl={anchorEl} id="account-menu" open={anchorEl!==null} onClose={handleClose} slotProps={{ paper: paperProps }} transformOrigin={{ horizontal: "right", vertical: "top" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} sx={{ "& .MuiBox-root": { borderBottom: 0 } }}>
-      <Box sx={{ borderBottom: 1, borderColor: "divider" }} id="primaryMenu">
-        {getNavItems()}
-      </Box>
-    </Menu>
-  </>
-
-  )
-}
+  };
+
+  return (
+    <>
+      <Button
+        ref={anchorRef}
+        onClick={handleToggle}
+        color="inherit"
+        endIcon={<Icon>expand_more</Icon>}
+        id="primaryNavButton"
+      >
+        <img src="/images/logo-icon.png" alt="Primary Menu" />
+        <h2>{props.label}</h2>
+      </Button>
+
+      <Popper
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        placement="bottom-end"
+        transition
+        disablePortal={true}
+        style={{ zIndex: 1300, color: "#FFF" }}
+      >
+        {({ TransitionProps }) => (
+          <Grow {...TransitionProps}>
+            <Paper
+              elevation={3}
+              sx={{
+                backgroundColor: "var(--c1)",
+                color: "#FFF",
+                minWidth: 300,
+                paddingY: "10px",
+                filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+              }}
+            >
+              <ClickAwayListener onClickAway={handleClose}>
+                <Box
+                  sx={{
+                    "& a": { color: "#FFF", textDecoration: "none" },
+                    "& a:hover": { color: "#DDD" },
+                  }}
+                >
+                  {getNavItems()}
+                </Box>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  );
+};

package/src/components/header/SiteHeader.tsx

@@ -7,7 +7,8 @@ import { PrimaryMenu } from "./PrimaryMenu";
 import { SecondaryMenu } from "./SecondaryMenu";
 import { SecondaryMenuAlt } from "./SecondaryMenuAlt";
 import { SupportDrawer } from "./SupportDrawer";
-import { UserContextInterface } from "@churchapps/helpers";
+import { UserContextInterface, CommonEnvironmentHelper } from "@churchapps/helpers";
+import { NotificationService } from "../../helpers/NotificationService";
 
 type Props = {
   primaryMenuLabel: string;
@@ -19,11 +20,68 @@ type Props = {
   onNavigate: (url: string) => void;
 }
 
-export const SiteHeader = (props:Props) => {
+export const SiteHeader = React.memo((props:Props) => {
+  // Initialize NotificationService without subscribing to count changes to prevent re-renders
+  React.useEffect(() => {
+    const initializeNotifications = async () => {
+      if (props.context?.person?.id && props.context?.userChurch?.church?.id) {
+        const service = NotificationService.getInstance();
+        await service.initialize(props.context);
+      }
+    };
+    
+    initializeNotifications();
+  }, [props.context?.person?.id, props.context?.userChurch?.church?.id]);
+  
+  const refresh = React.useCallback(async () => {
+    // Direct access to NotificationService for refresh functionality
+    await NotificationService.getInstance().refresh();
+  }, []);
+  
+  // Memoize userName to prevent recreation
+  const userName = React.useMemo(() => {
+    if (props.context?.user) {
+      return `${props.context.user.firstName} ${props.context.user.lastName}`;
+    }
+    return '';
+  }, [props.context?.user?.firstName, props.context?.user?.lastName]);
+  
+  // Memoize profilePicture URL
+  const profilePicture = React.useMemo(() => {
+    return PersonHelper.getPhotoUrl(props.context?.person);
+  }, [props.context?.person]);
+  
+  // Create a stable context object to prevent UserMenu recreation
+  const stableContext = React.useMemo(() => {
+    if (!props.context) return undefined;
+    
+    return {
+      user: props.context.user,
+      person: props.context.person,
+      userChurch: props.context.userChurch,
+      userChurches: props.context.userChurches,
+      setUser: props.context.setUser,
+      setPerson: props.context.setPerson,
+      setUserChurch: props.context.setUserChurch,
+      setUserChurches: props.context.setUserChurches
+    };
+  }, [
+    props.context?.user?.id,
+    props.context?.user?.firstName,
+    props.context?.user?.lastName,
+    props.context?.person?.id,
+    props.context?.userChurch?.church?.id,
+    props.context?.userChurches,
+    props.context?.setUser,
+    props.context?.setPerson,
+    props.context?.setUserChurch,
+    props.context?.setUserChurches
+  ]);
 
   const CustomAppBar = styled(AppBar)(
     ({ theme }) => ({
       zIndex: theme.zIndex.drawer + 1,
+      backgroundColor: "var(--c1, #1565C0)",
       transition: theme.transitions.create(["width", "margin"], {
         easing: theme.transitions.easing.sharp,
         duration: theme.transitions.duration.leavingScreen
@@ -63,21 +121,86 @@ export const SiteHeader = (props:Props) => {
 
   /*<Typography variant="h6" noWrap>{UserHelper.currentUserChurch?.church?.name || ""}</Typography>*/
   return (<>
-    <div style={{backgroundColor:"var(--c1)", color: "#FFF"}}>
+    <div style={{
+      '--c1': '#1565C0',
+      '--c1d1': '#1358AD', 
+      '--c1d2': '#114A99',
+      '--c1l2': '#568BDA',
+      backgroundColor:"var(--c1)", 
+      color: "#FFF"
+    } as React.CSSProperties}>
       <CustomAppBar position="absolute">
-        <Toolbar sx={{ pr: "24px", backgroundColor: "var(--c1)" }}>
+        <Toolbar sx={{ pr: "24px", backgroundColor: "var(--c1)", minHeight: "64px !important" }}>
           <PrimaryMenu label={props.primaryMenuLabel} menuItems={props.primaryMenuItems} onNavigate={props.onNavigate} />
           <SecondaryMenu label={props.secondaryMenuLabel} menuItems={props.secondaryMenuItems} onNavigate={props.onNavigate} />
           <div style={{ flex: 1 }}>
             <SecondaryMenuAlt label={props.secondaryMenuLabel} menuItems={props.secondaryMenuItems} onNavigate={props.onNavigate} />
           </div>
-          {UserHelper.user && <UserMenu profilePicture={PersonHelper.getPhotoUrl(props.context?.person)} userName={`${UserHelper.user?.firstName} ${UserHelper.user?.lastName}`} userChurches={UserHelper.userChurches} currentUserChurch={UserHelper.currentUserChurch} context={props.context} appName={props.appName} loadCounts={() => {}} notificationCounts={{notificationCount:0, pmCount:0}} onNavigate={props.onNavigate} />}
-          {!UserHelper.user && <Link href="/login" color="inherit" style={{ textDecoration: "none" }}>Login</Link>}
+          {props.context?.user?.id && (
+            <UserMenu 
+              key="user-menu-stable" 
+              profilePicture={profilePicture} 
+              userName={userName} 
+              userChurches={props.context?.userChurches} 
+              currentUserChurch={props.context?.userChurch} 
+              context={stableContext} 
+              appName={props.appName} 
+              loadCounts={refresh} 
+              notificationCounts={{notificationCount: 0, pmCount: 0}} 
+              onNavigate={props.onNavigate} 
+            />
+          )}
+          {!props.context?.user?.id && <Link href="/login" color="inherit" style={{ textDecoration: "none" }}>Login</Link>}
           <SupportDrawer appName={props.appName} relatedArticles={getRelatedArticles()} />
         </Toolbar>
       </CustomAppBar>
-
+      <div id="appBarSpacer"></div>
     </div>
   </>
   );
-}
+}, (prevProps, nextProps) => {
+  // Custom comparison to prevent unnecessary re-renders
+  
+  // Check if essential props have changed
+  if (prevProps.primaryMenuLabel !== nextProps.primaryMenuLabel ||
+      prevProps.secondaryMenuLabel !== nextProps.secondaryMenuLabel ||
+      prevProps.appName !== nextProps.appName) {
+    return false;
+  }
+  
+  // Check if menu items arrays have changed (shallow comparison)
+  if (prevProps.primaryMenuItems?.length !== nextProps.primaryMenuItems?.length ||
+      prevProps.secondaryMenuItems?.length !== nextProps.secondaryMenuItems?.length) {
+    return false;
+  }
+  
+  // Check if user context has actually changed (deep comparison of essential parts)
+  const prevUser = prevProps.context?.user;
+  const nextUser = nextProps.context?.user;
+  
+  if (prevUser?.id !== nextUser?.id ||
+      prevUser?.firstName !== nextUser?.firstName ||
+      prevUser?.lastName !== nextUser?.lastName) {
+    return false;
+  }
+  
+  // Check if person context has changed
+  if (prevProps.context?.person?.id !== nextProps.context?.person?.id) {
+    return false;
+  }
+  
+  // Check if church context has changed
+  if (prevProps.context?.userChurch?.church?.id !== nextProps.context?.userChurch?.church?.id) {
+    return false;
+  }
+  
+  // Check if onNavigate function reference has changed
+  if (prevProps.onNavigate !== nextProps.onNavigate) {
+    return false;
+  }
+  
+  // All essential props are the same, skip re-render
+  return true;
+});
+
+SiteHeader.displayName = 'SiteHeader';

package/src/components/header/SupportDrawer.tsx

@@ -33,7 +33,7 @@ export const SupportDrawer = (props: Props) => {
 
   const loadData = () => {
     if (UserHelper?.currentUserChurch?.church?.id) {
-      ApiHelper.get("/settings/public/" + UserHelper.currentUserChurch.church.id, "MembershipApi").then((data) => {
+      ApiHelper.get("/settings/public/" + UserHelper.currentUserChurch.church.id, "MembershipApi").then((data: any) => {
         const contactRes = data?.supportContact;
         if (contactRes && contactRes !== "") setSupportContact(contactRes);
         

package/src/components/index.tsx

@@ -8,14 +8,11 @@ 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 { MarkdownEditor } from "./markdownEditor/MarkdownEditor";
-export { MarkdownPreview } from "./markdownEditor/MarkdownPreview";
-
 export * from "./wrapper";
-export * from "./markdownEditor";
 export * from "./notes";
-export * from "./reporting";
 export * from "./header";

package/src/components/notes/AddNote.tsx

@@ -3,7 +3,16 @@
 import React, { useState, useEffect } from "react"
 import { ApiHelper, Locale, PersonHelper } from "../../helpers"
 import { MessageInterface, UserContextInterface } from "@churchapps/helpers"
-import { Icon, Stack, TextField } from "@mui/material"
+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"
 import { SmallButton } from "../SmallButton"
 
@@ -22,7 +31,7 @@ export function AddNote({ context, ...props }: Props) {
   const headerText = props.messageId ? "Edit note" : "Add a note"
 
   useEffect(() => {
-    if (props.messageId) ApiHelper.get(`/messages/${props.messageId}`, "MessagingApi").then(n => setMessage(n));
+    if (props.messageId) ApiHelper.get(`/messages/${props.messageId}`, "MessagingApi").then((n: any) => setMessage(n));
     else setMessage({ conversationId: props.conversationId, content: "" });
     return () => {
       setMessage(null);
@@ -38,7 +47,7 @@ export function AddNote({ context, ...props }: Props) {
 
   const validate = () => {
     const result = [];
-    if (!message.content.trim()) result.push(Locale.label("notes.validate.content"));
+    if (!message.content.trim()) result.push(Locale.label("notes.validate.content", "Please enter a message"));
     setErrors(result);
     return result.length === 0;
   }
@@ -58,8 +67,13 @@ export function AddNote({ context, ...props }: Props) {
           m.content = "";
           setMessage(m);
         })
-        .catch((error) => {
-          if (error?.message === "Forbidden") setErrors(["You can't edit the message sent by others."])
+        .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); });
     }
@@ -75,21 +89,93 @@ export function AddNote({ context, ...props }: Props) {
   const image = PersonHelper.getPhotoUrl(context?.person)
 
   return (
-    <>
+    <Box sx={{ width: '100%' }}>
       <ErrorMessages errors={errors} />
-
-      <Stack direction="row" spacing={1.5} style={{ marginTop: 15 }} justifyContent="end">
-
-        {image ? <img src={image} alt="user" style={{ width: 60, height: 45, borderRadius: 5, marginLeft: 8 }} /> : <Icon>person</Icon>}
-        <Stack direction="column" spacing={2} style={{ width: "100%" }} justifyContent="end">
-          <div><b>{context?.person?.name?.display}</b></div>
-          <TextField fullWidth name="noteText" aria-label={headerText} placeholder="Add a note" multiline style={{ marginTop: 0, border: "none" }} variant="standard" onChange={handleChange} value={message?.content} />
-        </Stack>
-        <Stack direction="column" spacing={1} justifyContent="end">
-          <SmallButton icon="send" onClick={handleSave} />
-          {deleteFunction && <SmallButton icon="delete" onClick={deleteFunction} disabled={isSubmitting} />}
+      
+      <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>
-      </Stack>
-    </>
+      </Paper>
+    </Box>
   );
 }

package/src/components/notes/Note.tsx

@@ -1,7 +1,8 @@
-import { Icon, IconButton, Stack, Box } from "@mui/material";
+import { Icon, IconButton, Stack, Box, Typography } from "@mui/material";
 import React, { useState, useEffect } from "react";
 import { DateHelper, PersonHelper } from "../../helpers"
 import { MessageInterface, UserContextInterface } from "@churchapps/helpers"
+import { PersonAvatar } from "../PersonAvatar"
 
 interface Props {
   message: MessageInterface;
@@ -15,33 +16,53 @@ export const Note: React.FC<Props> = (props) => {
   useEffect(() => setMessage(props.message), [props.message]);
 
   if (message === null) return null;
-  const photoUrl = PersonHelper.getPhotoUrl(message.person);
   let datePosted = new Date(message.timeUpdated || message.timeSent);
   const displayDuration = DateHelper.getDisplayDuration(datePosted);
 
-  const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent && <>(edited)</>;
+  const isEdited = message.timeUpdated && message.timeUpdated !== message.timeSent;
   const contents = message.content?.split("\n");
+  
   return (
-    <div className="note">
-      <div className="postedBy">
-        <img src={photoUrl} alt="avatar" />
-      </div>
-      <Box sx={{ width: "100%" }} className="note-contents">
-        <Stack direction="row" justifyContent="space-between">
-          <div>
-            <b>{message.person?.name?.display}</b> · <span className="text-grey">{displayDuration}{isEdited}</span>
-            {contents.map((c, i) => c ? <p key={i}>{c}</p> : <br />)}
-          </div>
-          <div>
-            {(message?.id && message.personId === props.context?.person.id) && (
-              <IconButton aria-label="editNote" onClick={() => props.showEditNote(message.id)}>
-                <Icon style={{ color: "#03a9f4" }}>edit</Icon>
-              </IconButton>
-            )}
-          </div>
+    <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>
-    </div>
+    </Box>
   );
 };