@churchapps/apphelper 0.4.18 → 0.4.20

package/src/components/wrapper/Notifications.tsx

@@ -88,7 +88,7 @@ export const Notifications: React.FC<Props> = (props) => {
   const getNotificationList = () => {
     if (notifications.length === 0) {
       return (
-        <Box sx={{ textAlign: 'center', py: 4 }}>
+        <Box id="notifications-empty" sx={{ textAlign: 'center', py: 4 }}>
           <NotificationsIcon sx={{ fontSize: 48, color: 'grey.400', mb: 2 }} />
           <Typography variant="h6" color="textSecondary">
             No notifications
@@ -101,7 +101,7 @@ export const Notifications: React.FC<Props> = (props) => {
     }
 
     return (
-      <List sx={{ width: '100%' }}>
+      <List id="notifications-list" sx={{ width: '100%' }}>
         {notifications.map((notification, index) => {
           let datePosted = new Date(notification.timeSent);
           const displayDuration = DateHelper.getDisplayDuration(datePosted);
@@ -110,6 +110,7 @@ export const Notifications: React.FC<Props> = (props) => {
           return (
             <React.Fragment key={notification.id}>
               <ListItem
+                id={`notification-item-${notification.id}`}
                 component="button"
                 onClick={() => handleClick(notification)}
                 sx={{
@@ -194,14 +195,14 @@ export const Notifications: React.FC<Props> = (props) => {
 
 
   return (
-    <Paper elevation={0} sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
+    <Paper id="notifications-panel" elevation={0} sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <Box id="notifications-header" sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
         <Typography variant="h6" component="h2">
           Notifications
         </Typography>
       </Box>
       
-      <Box sx={{ flex: 1, overflow: 'auto' }}>
+      <Box id="notifications-content" sx={{ flex: 1, overflow: 'auto' }}>
         {isLoading ? (
           <Box sx={{ p: 2 }}>
             {[...Array(3)].map((_, index) => (

package/src/components/wrapper/UserMenu.tsx

@@ -19,8 +19,6 @@ interface Props {
 	loadCounts: () => void;
   userName: string;
   profilePicture: string;
-  userChurches: LoginUserChurchInterface[];
-  currentUserChurch: LoginUserChurchInterface;
   context: UserContextInterface;
   appName: string;
   onNavigate: (url: string) => void;
@@ -98,8 +96,10 @@ const UserMenuContent: React.FC<Props> = React.memo((props) => {
   };
 
   const handleSwitchChurch = () => {
+    console.log('UserMenu - handleSwitchChurch called');
     removeCookie("lastChurchId", { path: "/" });
     setTabIndex(2);
+    console.log('UserMenu - tabIndex set to 2');
   };
 
   const getMainLinks = () => {
@@ -151,24 +151,64 @@ const UserMenuContent: React.FC<Props> = React.memo((props) => {
 
   const [tabIndex, setTabIndex] = React.useState(0);
 
-  const getTabs = () => (
-    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-      <TabPanel value={tabIndex} index={0}>
-        {getMainLinks()}
-      </TabPanel>
-      <TabPanel value={tabIndex} index={1}>
-        <NavItem label="Back" key="AppBack" icon="arrow_back" onClick={() => { setTabIndex(0); }} />
-        <AppList currentUserChurch={props.currentUserChurch} appName={props.appName} onNavigate={props.onNavigate} />
-      </TabPanel>
-      <TabPanel value={tabIndex} index={2}>
-        <div style={{ maxHeight: '70vh', overflowY: "auto" }}>
-          <NavItem label="Back" key="ChurchBack" icon="arrow_back" onClick={() => { setTabIndex(0); }} />
-          <ChurchList userChurches={props.userChurches} currentUserChurch={props.currentUserChurch} context={props.context} onDelete={handleClose} />
-        </div>
-      </TabPanel>
-
-    </Box>
-  );
+  const getTabs = () => {
+    console.log('UserMenu getTabs - Current tabIndex:', tabIndex);
+    return (
+      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+        <TabPanel value={tabIndex} index={0}>
+          {getMainLinks()}
+        </TabPanel>
+        <TabPanel value={tabIndex} index={1}>
+          <NavItem label="Back" key="AppBack" icon="arrow_back" onClick={() => { setTabIndex(0); }} />
+          <AppList currentUserChurch={props.context?.userChurch} appName={props.appName} onNavigate={props.onNavigate} />
+        </TabPanel>
+        <TabPanel value={tabIndex} index={2}>
+          <div style={{ maxHeight: '70vh', overflowY: "auto" }}>
+            <NavItem label="Back" key="ChurchBack" icon="arrow_back" onClick={() => { setTabIndex(0); }} />
+            {(() => {
+              console.log('UserMenu Church Tab - Rendering church list section');
+              console.log('UserMenu Church Tab - Full context:', props.context);
+              console.log('UserMenu Church Tab - context.userChurches:', props.context?.userChurches);
+              console.log('UserMenu Church Tab - context.userChurches[0]:', props.context?.userChurches?.[0]);
+              console.log('UserMenu Church Tab - context.userChurch:', props.context?.userChurch);
+              console.log('UserMenu Church Tab - userChurches type:', typeof props.context?.userChurches);
+              console.log('UserMenu Church Tab - userChurches is array?', Array.isArray(props.context?.userChurches));
+              console.log('UserMenu Church Tab - userChurches length:', props.context?.userChurches?.length);
+              
+              // Check if userChurches is actually the userChurch object
+              if (props.context?.userChurches && !Array.isArray(props.context.userChurches) && (props.context.userChurches as any).id) {
+                console.error('UserMenu - ERROR: context.userChurches contains a single church object instead of an array!');
+                console.log('UserMenu - Attempting to use context.userChurch as single item array');
+                const churchArray = props.context.userChurch ? [props.context.userChurch] : [];
+                return <ChurchList userChurches={churchArray} currentUserChurch={props.context?.userChurch} context={props.context} onDelete={handleClose} onChurchChange={() => {
+                    handleClose();
+                    // Don't navigate - just close the menu and let the context update trigger re-renders
+                }} />;
+              }
+              
+              if (!props.context?.userChurches) {
+                return <Typography sx={{ p: 2, color: 'text.secondary' }}>Loading churches...</Typography>;
+              } else if (!Array.isArray(props.context.userChurches)) {
+                return <Typography sx={{ p: 2, color: 'text.secondary', fontWeight: 'bold' }}>Error: Invalid church data format</Typography>;
+              } else if (props.context.userChurches.length === 0) {
+                return <Typography sx={{ p: 2, color: 'text.secondary' }}>No churches available</Typography>;
+              } else {
+                // Ensure we always pass an array
+                const churchesArray = Array.isArray(props.context.userChurches) 
+                  ? props.context.userChurches 
+                  : [props.context.userChurches];
+                console.log('UserMenu - Passing to ChurchList:', churchesArray);
+                return <ChurchList userChurches={churchesArray} currentUserChurch={props.context?.userChurch} context={props.context} onDelete={handleClose} onChurchChange={() => {
+                    handleClose();
+                    // Don't navigate - just close the menu and let the context update trigger re-renders
+                }} />;
+              }
+            })()}
+          </div>
+        </TabPanel>
+      </Box>
+    );
+  };
 
   const getModals = () => {
     // Helper function to get label with fallback
@@ -180,6 +220,7 @@ const UserMenuContent: React.FC<Props> = React.memo((props) => {
     return (
       <>
         <Dialog 
+          id="private-messages-modal"
           open={showPM}
           onClose={() => {
             modalStateStore.setShowPM(false);
@@ -195,7 +236,7 @@ const UserMenuContent: React.FC<Props> = React.memo((props) => {
             }
           }}
         >
-          <DialogTitle>{getLabel("wrapper.messages", "Messages")}</DialogTitle>
+          <DialogTitle id="private-messages-title">{getLabel("wrapper.messages", "Messages")}</DialogTitle>
           <DialogContent 
             sx={{ 
               flex: 1,
@@ -211,6 +252,7 @@ const UserMenuContent: React.FC<Props> = React.memo((props) => {
         </Dialog>
         
         <Dialog 
+          id="notifications-modal"
           open={showNotifications} 
           onClose={() => {
             modalStateStore.setShowNotifications(false);
@@ -218,7 +260,7 @@ const UserMenuContent: React.FC<Props> = React.memo((props) => {
           maxWidth="md" 
           fullWidth
         >
-          <DialogTitle>{getLabel("wrapper.notifications", "Notifications")}</DialogTitle>
+          <DialogTitle id="notifications-title">{getLabel("wrapper.notifications", "Notifications")}</DialogTitle>
           <DialogContent>
             <Notifications context={props.context} appName={props.appName} onUpdate={props.loadCounts} onNavigate={props.onNavigate} />
           </DialogContent>
@@ -286,13 +328,13 @@ const UserMenuContent: React.FC<Props> = React.memo((props) => {
 
   return (
     <>
-      <Button onClick={handleClick} color="inherit" aria-controls={open ? "account-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} style={{ textTransform: "none" }} endIcon={<Icon>expand_more</Icon>}>
-        <Badge badgeContent={totalNotifcations} color="error" invisible={totalNotifcations===0}>
-          <Avatar src={getProfilePic()} sx={{ width: 32, height: 32, marginRight: 1 }}></Avatar>
+      <Button id="user-menu-button" onClick={handleClick} color="inherit" aria-controls={open ? "account-menu" : undefined} aria-haspopup="true" aria-expanded={open ? "true" : undefined} style={{ textTransform: "none" }} endIcon={<Icon>expand_more</Icon>}>
+        <Badge id="user-menu-notification-badge" badgeContent={totalNotifcations} color="error" invisible={totalNotifcations===0}>
+          <Avatar id="user-menu-avatar" src={getProfilePic()} sx={{ width: 32, height: 32, marginRight: 1 }}></Avatar>
         </Badge>
       </Button>
 
-      <Menu anchorEl={anchorEl} id="account-menu" open={open} onClose={handleClose} onClick={(e) => { handleItemClick(e) }} slotProps={{ paper: paperProps }} transformOrigin={{ horizontal: "right", vertical: "top" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} sx={{ "& .MuiBox-root": { borderBottom: 0 } }}>
+      <Menu anchorEl={anchorEl} id="user-menu-dropdown" open={open} onClose={handleClose} onClick={(e) => { handleItemClick(e) }} slotProps={{ paper: paperProps }} transformOrigin={{ horizontal: "right", vertical: "top" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} sx={{ "& .MuiBox-root": { borderBottom: 0 } }}>
         {getTabs()}
       </Menu>
       {getModals()}
@@ -326,8 +368,8 @@ export const UserMenu: React.FC<Props> = React.memo((props) => {
     return false;
   }
   
-  // Check if userChurches array changed
-  if (prevProps.userChurches?.length !== nextProps.userChurches?.length) {
+  // Check if userChurches array changed in context
+  if (prevProps.context?.userChurches?.length !== nextProps.context?.userChurches?.length) {
     return false;
   }
   

package/src/helpers/UserHelper.ts

@@ -11,6 +11,19 @@ export class UserHelper {
 	static selectChurch = async (context?: UserContextInterface, churchId?: string, keyName?: string) => {
 		let userChurch = null;
 
+		// Ensure userChurches is initialized
+		if (!UserHelper.userChurches || !Array.isArray(UserHelper.userChurches)) {
+			console.error('UserHelper.userChurches is not initialized or not an array:', UserHelper.userChurches);
+			// Try to get userChurches from context if available
+			if (context?.userChurches && Array.isArray(context.userChurches)) {
+				console.log('Using userChurches from context');
+				UserHelper.userChurches = context.userChurches;
+			} else {
+				console.error('Cannot select church: no valid userChurches available');
+				return;
+			}
+		}
+
 		if (churchId) {
 			UserHelper.userChurches.forEach(uc => {
 				if (uc.church.id === churchId) userChurch = uc;
@@ -25,7 +38,20 @@ export class UserHelper {
 			// TODO - remove context code from here and perform the logic in the component itself.
 			if (context) {
 				if (context.userChurch !== null) UserHelper.churchChanged = true;
+				console.log('UserHelper.selectChurch - Setting userChurch in context:', userChurch);
 				context.setUserChurch(UserHelper.currentUserChurch);
+				
+				// Also ensure user is still set in context
+				if (UserHelper.user && context.setUser) {
+					console.log('UserHelper.selectChurch - Ensuring user is set in context:', UserHelper.user);
+					context.setUser(UserHelper.user);
+				}
+				
+				// Update person if available
+				if (UserHelper.person && context.setPerson) {
+					console.log('UserHelper.selectChurch - Ensuring person is set in context:', UserHelper.person);
+					context.setPerson(UserHelper.person);
+				}
 			}
 		}
 	}