@churchapps/apphelper 0.4.17 → 0.4.18

package/src/components/wrapper/UserMenu.tsx

@@ -10,6 +10,8 @@ import { Locale } from "../../helpers";
 import { PrivateMessages } from "./PrivateMessages";
 import { Notifications } from "./Notifications";
 import { useCookies, CookiesProvider } from "react-cookie";
+import { NotificationService } from "../../helpers/NotificationService";
+import { SocketHelper } from "../../helpers";
 
 
 interface Props {
@@ -24,15 +26,66 @@ interface Props {
   onNavigate: (url: string) => void;
 }
 
-const UserMenuContent: React.FC<Props> = (props) => {
+// Create a persistent store for modal state that survives component re-renders
+const modalStateStore = {
+  showPM: false,
+  showNotifications: false,
+  listeners: new Set<() => void>(),
+  
+  setShowPM(value: boolean) {
+    this.showPM = value;
+    this.listeners.forEach((listener: () => void) => listener());
+  },
+  
+  setShowNotifications(value: boolean) {
+    this.showNotifications = value;
+    this.listeners.forEach((listener: () => void) => listener());
+  },
+  
+  subscribe(listener: () => void) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+};
+
+const UserMenuContent: React.FC<Props> = React.memo((props) => {
   const userName = props.userName;
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const [showPM, setShowPM] = React.useState(false);
-  const [showNotifications, setShowNotifications] = React.useState(false);
-  const [refreshKey, setRefreshKey] = React.useState(0);
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+  const [refreshKey, setRefreshKey] = React.useState(() => Math.random());
   const [, , removeCookie] = useCookies(["lastChurchId"]);
+  const [directNotificationCounts, setDirectNotificationCounts] = React.useState(() => props.notificationCounts || { notificationCount: 0, pmCount: 0 });
   const open = Boolean(anchorEl);
 
+  // Subscribe to modal state changes
+  React.useEffect(() => {
+    return modalStateStore.subscribe(forceUpdate);
+  }, [forceUpdate]);
+  
+  // Subscribe directly to NotificationService to update badge counts without re-renders
+  React.useEffect(() => {
+    const notificationService = NotificationService.getInstance();
+    const unsubscribe = notificationService.subscribe((newCounts) => {
+      setDirectNotificationCounts(newCounts);
+    });
+    
+    // Initialize with current counts
+    if (notificationService.isReady()) {
+      setDirectNotificationCounts(notificationService.getCounts());
+    }
+    
+    return unsubscribe;
+  }, []);
+
+  const showPM = modalStateStore.showPM;
+  const showNotifications = modalStateStore.showNotifications;
+
+  // Create a stable callback for onUpdate that doesn't depend on props
+  const stableOnUpdate = React.useCallback(() => {
+    // Use NotificationService directly to avoid dependency on props.loadCounts
+    NotificationService.getInstance().refresh();
+  }, []);
+
 
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault();
@@ -54,17 +107,25 @@ const UserMenuContent: React.FC<Props> = (props) => {
     const churchId = UserHelper.currentUserChurch.church.id;
     let result: React.ReactElement[] = [];
 
+    // Helper function to get label with fallback
+    const getLabel = (key: string, fallback: string) => {
+      const label = Locale.label(key);
+      return label && label !== key ? label : fallback;
+    };
 
-    result.push(<NavItem onClick={() => {setShowPM(true)}} label={Locale.label("wrapper.messages")} icon="mail" key="/messages" onNavigate={props.onNavigate} badgeCount={props.notificationCounts.pmCount} />);
+    result.push(<NavItem onClick={() => {modalStateStore.setShowPM(true)}} label={getLabel("wrapper.messages", "Messages")} icon="mail" key="/messages" onNavigate={props.onNavigate} badgeCount={directNotificationCounts.pmCount} />);
 
-    result.push(<NavItem onClick={() => {setShowNotifications(true)}} label={Locale.label("wrapper.notifications")} icon="notifications" key="/notifications" onNavigate={props.onNavigate} badgeCount={props.notificationCounts.notificationCount} />);
+    result.push(<NavItem onClick={() => {modalStateStore.setShowNotifications(true)}} label={getLabel("wrapper.notifications", "Notifications")} icon="notifications" key="/notifications" onNavigate={props.onNavigate} badgeCount={directNotificationCounts.notificationCount} />);
 
-    if (props.appName === "CHUMS") result.push(<NavItem url={"/profile"} key="/profile" label={Locale.label("wrapper.profile")} icon="person" onNavigate={props.onNavigate} />);
-    else result.push(<NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}&returnUrl=/profile`} key="/profile" label={Locale.label("wrapper.profile")} icon="person" external={true} onNavigate={props.onNavigate} />);
-    result.push(<NavItem url="/logout" label={Locale.label("wrapper.logout")} icon="logout" key="/logout" onNavigate={props.onNavigate} />);
-    result.push(<div style={{borderTop:"1px solid #CCC", paddingTop:2, paddingBottom:2}}></div>)
-    result.push(<NavItem label="Switch App" key={Locale.label("wrapper.switchApp")} icon="apps" onClick={() => { setTabIndex(1); }} />);
-    result.push(<NavItem label={Locale.label("wrapper.switchChurch")} key="Switch Church" icon="church" onClick={handleSwitchChurch} />);
+    if (props.appName === "CHUMS") result.push(<NavItem url={"/profile"} key="/profile" label={getLabel("wrapper.profile", "Profile")} icon="person" onNavigate={props.onNavigate} />);
+    else result.push(<NavItem url={`${CommonEnvironmentHelper.ChumsRoot}/login?jwt=${jwt}&churchId=${churchId}&returnUrl=/profile`} key="/profile" label={getLabel("wrapper.profile", "Profile")} icon="person" external={true} onNavigate={props.onNavigate} />);
+    // Create logout URL with current page as return URL
+    const currentPath = typeof window !== 'undefined' ? window.location.pathname + window.location.search : '/';
+    const logoutUrl = `/login?action=logout&returnUrl=${encodeURIComponent(currentPath)}`;
+    result.push(<NavItem url={logoutUrl} label={getLabel("wrapper.logout", "Logout")} icon="logout" key="/logout" onNavigate={props.onNavigate} />);
+    result.push(<div key="divider" style={{borderTop:"1px solid #CCC", paddingTop:2, paddingBottom:2}}></div>)
+    result.push(<NavItem label={getLabel("wrapper.switchApp", "Switch App")} key="Switch App" icon="apps" onClick={() => { setTabIndex(1); }} />);
+    result.push(<NavItem label={getLabel("wrapper.switchChurch", "Switch Church")} key="Switch Church" icon="church" onClick={handleSwitchChurch} />);
     return result;
   }
 
@@ -85,7 +146,7 @@ const UserMenuContent: React.FC<Props> = (props) => {
   };
 
   const handleItemClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    console.log(e);
+    // Handle menu item clicks if needed
   }
 
   const [tabIndex, setTabIndex] = React.useState(0);
@@ -110,28 +171,118 @@ const UserMenuContent: React.FC<Props> = (props) => {
   );
 
   const getModals = () => {
-    if (showPM) return (
-      <Dialog open onClose={() => setShowPM(false)} maxWidth="md" fullWidth>
-        <DialogTitle>{Locale.label("wrapper.messages")}</DialogTitle>
-        <DialogContent>
-          <PrivateMessages context={props.context} refreshKey={refreshKey} onUpdate={props.loadCounts} />
-        </DialogContent>
-      </Dialog>);
-    else if (showNotifications) return (<Dialog open onClose={() => setShowNotifications(false)} maxWidth="md" fullWidth>
-      <DialogTitle>{Locale.label("wrapper.notifications")}</DialogTitle>
-      <DialogContent>
-      		<Notifications context={props.context} appName={props.appName} onUpdate={props.loadCounts} onNavigate={props.onNavigate} />
-      	</DialogContent>
-    </Dialog>);
-    else return <></>;
+    // Helper function to get label with fallback
+    const getLabel = (key: string, fallback: string) => {
+      const label = Locale.label(key);
+      return label && label !== key ? label : fallback;
+    };
+    
+    return (
+      <>
+        <Dialog 
+          open={showPM}
+          onClose={() => {
+            modalStateStore.setShowPM(false);
+          }} 
+          maxWidth="md" 
+          fullWidth
+          PaperProps={{
+            sx: {
+              height: '80vh',
+              maxHeight: '700px',
+              display: 'flex',
+              flexDirection: 'column'
+            }
+          }}
+        >
+          <DialogTitle>{getLabel("wrapper.messages", "Messages")}</DialogTitle>
+          <DialogContent 
+            sx={{ 
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              p: 0,
+              overflow: 'hidden',
+              minHeight: 0
+            }}
+          >
+            <PrivateMessages context={props.context} refreshKey={currentRefreshKey} onUpdate={stableOnUpdate} />
+          </DialogContent>
+        </Dialog>
+        
+        <Dialog 
+          open={showNotifications} 
+          onClose={() => {
+            modalStateStore.setShowNotifications(false);
+          }} 
+          maxWidth="md" 
+          fullWidth
+        >
+          <DialogTitle>{getLabel("wrapper.notifications", "Notifications")}</DialogTitle>
+          <DialogContent>
+            <Notifications context={props.context} appName={props.appName} onUpdate={props.loadCounts} onNavigate={props.onNavigate} />
+          </DialogContent>
+        </Dialog>
+      </>
+    );
   }
 
-  const totalNotifcations = props.notificationCounts.notificationCount + props.notificationCounts.pmCount;
+  const totalNotifcations = directNotificationCounts.notificationCount + directNotificationCounts.pmCount;
 
+  // Use a ref to track if we should update refresh key
+  const stableRefreshKeyRef = React.useRef(refreshKey);
+  
+  // Set up WebSocket handlers to update refreshKey when messages arrive
   React.useEffect(() => {
-    console.log("THE COUNTS CHANGED")
-    setRefreshKey(Math.random());
-  }, [props.notificationCounts]);
+    if (!props.context?.person?.id) return;
+    
+    const handleMessageUpdate = (data: any) => {
+      // Only update refreshKey if a modal is open to trigger child updates
+      if (modalStateStore.showPM || modalStateStore.showNotifications) {
+        const newKey = Math.random();
+        setRefreshKey(newKey);
+        stableRefreshKeyRef.current = newKey;
+      }
+    };
+    
+    const handlePrivateMessage = (data: any) => {
+      // Only update refreshKey if PM modal is open
+      if (modalStateStore.showPM) {
+        const newKey = Math.random();
+        setRefreshKey(newKey);
+        stableRefreshKeyRef.current = newKey;
+      }
+    };
+    
+    const handleNotification = (data: any) => {
+      // Update refreshKey if any modal is open to trigger child updates
+      if (modalStateStore.showPM || modalStateStore.showNotifications) {
+        const newKey = Math.random();
+        setRefreshKey(newKey);
+        stableRefreshKeyRef.current = newKey;
+      }
+    };
+    
+    // Register WebSocket handlers
+    const messageHandlerId = `UserMenu-MessageUpdate-${props.context.person.id}`;
+    const privateMessageHandlerId = `UserMenu-PrivateMessage-${props.context.person.id}`;
+    const notificationHandlerId = `UserMenu-Notification-${props.context.person.id}`;
+    
+    SocketHelper.addHandler("message", messageHandlerId, handleMessageUpdate);
+    SocketHelper.addHandler("privateMessage", privateMessageHandlerId, handlePrivateMessage);
+    SocketHelper.addHandler("notification", notificationHandlerId, handleNotification);
+    
+    // Cleanup
+    return () => {
+      SocketHelper.removeHandler(messageHandlerId);
+      SocketHelper.removeHandler(privateMessageHandlerId);
+      SocketHelper.removeHandler(notificationHandlerId);
+    };
+  }, [props.context?.person?.id]); // Removed showPM, showNotifications dependencies
+  
+  
+  // Use current refresh key
+  const currentRefreshKey = refreshKey;
 
   return (
     <>
@@ -147,12 +298,44 @@ const UserMenuContent: React.FC<Props> = (props) => {
       {getModals()}
     </>
   );
-};
+});
 
-export const UserMenu: React.FC<Props> = (props) => {
+export const UserMenu: React.FC<Props> = React.memo((props) => {
   return (
     <CookiesProvider defaultSetOptions={{ path: '/' }}>
       <UserMenuContent {...props} />
     </CookiesProvider>
   );
-};
+}, (prevProps, nextProps) => {
+  // Only re-render if essential props change, ignore notification count changes completely
+  if (prevProps.userName !== nextProps.userName) {
+    return false;
+  }
+  
+  if (prevProps.profilePicture !== nextProps.profilePicture) {
+    return false;
+  }
+  
+  if (prevProps.appName !== nextProps.appName) {
+    return false;
+  }
+  
+  // Check if context has actually changed (deep comparison of relevant parts)
+  if (prevProps.context?.person?.id !== nextProps.context?.person?.id ||
+      prevProps.context?.userChurch?.church?.id !== nextProps.context?.userChurch?.church?.id) {
+    return false;
+  }
+  
+  // Check if userChurches array changed
+  if (prevProps.userChurches?.length !== nextProps.userChurches?.length) {
+    return false;
+  }
+  
+  // Check if loadCounts function reference changed (important for functionality)
+  if (prevProps.loadCounts !== nextProps.loadCounts) {
+    return false;
+  }
+  
+  // Ignore both notificationCounts and onNavigate changes as they don't affect the component
+  return true; // Skip re-render
+});

package/src/components/wrapper/index.tsx

@@ -1,7 +1,8 @@
 export { NavItem } from "./NavItem";
 export { AppList } from "./AppList";
-export { SiteWrapper } from "./SiteWrapper";
 export { ChurchList } from "./ChurchList";
 export { UserMenu } from "./UserMenu";
-export {NewPrivateMessage} from "./NewPrivateMessage";
+export { NewPrivateMessage } from "./NewPrivateMessage";
+export { PrivateMessages } from "./PrivateMessages";
 export { PrivateMessageDetails } from "./PrivateMessageDetails";
+export { Notifications } from "./Notifications";

package/src/helpers/ArrayHelper.ts

@@ -17,7 +17,6 @@ export class ArrayHelper {
       const valB = b[propertyName];
       if (valA < valB) return descending ? 1 : -1;
       else return descending ? -1 : 1;
-      //console.log(valA, valB, valA < valB, )
     });
   }
 

package/src/helpers/ErrorHelper.ts

@@ -1,5 +1,5 @@
 import { ErrorLogInterface, ErrorAppDataInterface } from "@churchapps/helpers";
-import { ApiHelper } from "./ApiHelper";
+import { ApiHelper } from "@churchapps/helpers";
 
 
 export class ErrorHelper {

package/src/helpers/EventHelper.ts

@@ -21,7 +21,6 @@ export class EventHelper {
   static getFullRRule = (event:EventInterface) => {
     let rrule = RRule.fromString(event.recurrenceRule);
     rrule.options.dtstart = new Date(event.start);
-    console.log("START", rrule.options.dtstart, event.start, rrule)
     return rrule;
   }
 
@@ -30,7 +29,6 @@ export class EventHelper {
       if (events[i].exceptionDates?.length>0)
       {
         const parsedDates = events[i].exceptionDates.map(d=>new Date(d).toISOString());
-        //console.log("Compare", events[i].start.toISOString(), parsedDates, parsedDates.indexOf(events[i].start.toISOString()));
         if (parsedDates.indexOf(events[i].start.toISOString())>-1) events.splice(i,1);
       }
     }
@@ -39,7 +37,6 @@ export class EventHelper {
   static getPartialRRuleString = (options:ParsedOptions) => {
     const parts = new RRule(options).toString().split("RRULE:");
     const result = parts.length===2 ? parts[1] : "";
-    console.log("getPartialRRuleString", options, new RRule(options).toString(), result);
     return result;
   }
 

package/src/helpers/Locale.ts

@@ -103,7 +103,12 @@ export class Locale {
 	}
 
 	// Keep the old method for backward compatibility
-	static label(key: string): string {
-		return this.t(key);
+	static label(key: string, fallback?: string): string {
+		const translation = this.t(key);
+		// If translation equals the key, it means no translation was found
+		if (translation === key && fallback) {
+			return fallback;
+		}
+		return translation;
 	}
 }

package/src/helpers/NotificationService.ts

@@ -0,0 +1,211 @@
+import { SocketHelper } from "./SocketHelper";
+import { ApiHelper, UserContextInterface } from "@churchapps/helpers";
+
+export interface NotificationCounts {
+  notificationCount: number;
+  pmCount: number;
+}
+
+export class NotificationService {
+  private static instance: NotificationService;
+  private counts: NotificationCounts = { notificationCount: 0, pmCount: 0 };
+  private listeners: Array<(counts: NotificationCounts) => void> = [];
+  private isInitialized: boolean = false;
+  private currentPersonId: string | null = null;
+  private loadTimeout: any | null = null;
+
+  private constructor() {}
+
+  static getInstance(): NotificationService {
+    if (!NotificationService.instance) {
+      NotificationService.instance = new NotificationService();
+    }
+    return NotificationService.instance;
+  }
+
+  /**
+   * Initialize the notification service with user context
+   */
+  async initialize(context: UserContextInterface): Promise<void> {
+    if (this.isInitialized) return;
+
+    try {
+      // Store current person ID for conversation counting
+      this.currentPersonId = context?.person?.id || null;
+      
+      // Initialize WebSocket connection
+      await SocketHelper.init();
+
+      // Set person/church context for websocket
+      if (context?.person?.id && context?.userChurch?.church?.id) {
+        SocketHelper.setPersonChurch({
+          personId: context.person.id,
+          churchId: context.userChurch.church.id
+        });
+      }
+
+      // Register handlers for notification updates
+      this.registerWebSocketHandlers();
+
+      // Load initial notification counts
+      await this.loadNotificationCounts();
+
+      this.isInitialized = true;
+
+    } catch (error) {
+      console.error("❌ Failed to initialize NotificationService:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * Register websocket handlers for real-time notification updates
+   */
+  private registerWebSocketHandlers(): void {
+    // Handler for new private messages
+    SocketHelper.addHandler("privateMessage", "NotificationService-PM", (data: any) => {
+      console.log('🔔 NotificationService: New private message received, updating counts');
+      this.debouncedLoadNotificationCounts();
+    });
+
+    // Handler for general notifications
+    SocketHelper.addHandler("notification", "NotificationService-Notification", (data: any) => {
+      console.log('🔔 NotificationService: New notification received, updating counts');
+      this.debouncedLoadNotificationCounts();
+    });
+
+    // Handler for message updates that could affect notification counts
+    SocketHelper.addHandler("message", "NotificationService-MessageUpdate", (data: any) => {
+      // Only update counts if the message update involves the current person
+      if (data?.message?.personId === this.currentPersonId || 
+          data?.notifyPersonId === this.currentPersonId) {
+        console.log('🔔 NotificationService: Message update affecting current user, updating counts');
+        this.debouncedLoadNotificationCounts();
+      }
+    });
+
+    // Handler for reconnect events
+    SocketHelper.addHandler("reconnect", "NotificationService-Reconnect", (data: any) => {
+      console.log('🔔 NotificationService: WebSocket reconnected, refreshing counts');
+      this.loadNotificationCounts(); // Don't debounce reconnect - need immediate update
+    });
+  }
+
+  /**
+   * Load notification counts from the API with debouncing
+   */
+  private debouncedLoadNotificationCounts(): void {
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+    }
+    
+    this.loadTimeout = setTimeout(() => {
+      this.loadNotificationCounts();
+    }, 300); // 300ms debounce
+  }
+
+  /**
+   * Load notification counts from the API
+   */
+  async loadNotificationCounts(): Promise<void> {
+    try {
+      // Use the unreadCount endpoint which returns both notification and PM counts
+      const counts = await ApiHelper.get("/notifications/unreadCount", "MessagingApi");
+      
+      const newCounts = { 
+        notificationCount: counts?.notificationCount || 0, 
+        pmCount: counts?.pmCount || 0
+      };
+
+      // Update counts and notify listeners
+      this.updateCounts(newCounts);
+
+    } catch (error) {
+      console.error("❌ Failed to load notification counts:", error);
+      // Don't throw - just log the error and keep existing counts
+    }
+  }
+
+  /**
+   * Update counts and notify all listeners
+   */
+  private updateCounts(newCounts: NotificationCounts): void {
+    const countsChanged = 
+      this.counts.notificationCount !== newCounts.notificationCount ||
+      this.counts.pmCount !== newCounts.pmCount;
+
+    if (countsChanged) {
+      this.counts = { ...newCounts };
+      
+      // Notify all listeners
+      this.listeners.forEach(listener => {
+        try {
+          listener(this.counts);
+        } catch (error) {
+          console.error("❌ Error in notification listener:", error);
+        }
+      });
+    }
+  }
+
+  /**
+   * Subscribe to notification count changes
+   */
+  subscribe(listener: (counts: NotificationCounts) => void): () => void {
+    this.listeners.push(listener);
+
+    // Immediately call with current counts
+    listener(this.counts);
+
+    // Return unsubscribe function
+    return () => {
+      this.listeners = this.listeners.filter(l => l !== listener);
+    };
+  }
+
+  /**
+   * Get current notification counts
+   */
+  getCounts(): NotificationCounts {
+    return { ...this.counts };
+  }
+
+  /**
+   * Manually refresh notification counts
+   */
+  async refresh(): Promise<void> {
+    await this.loadNotificationCounts();
+  }
+
+  /**
+   * Cleanup the service
+   */
+  cleanup(): void {
+    // Clear any pending timeout
+    if (this.loadTimeout) {
+      clearTimeout(this.loadTimeout);
+      this.loadTimeout = null;
+    }
+
+    // Remove websocket handlers
+    SocketHelper.removeHandler("NotificationService-PM");
+    SocketHelper.removeHandler("NotificationService-Notification");
+    SocketHelper.removeHandler("NotificationService-MessageUpdate");
+    SocketHelper.removeHandler("NotificationService-Reconnect");
+
+    // Clear listeners
+    this.listeners = [];
+    
+    // Reset state
+    this.counts = { notificationCount: 0, pmCount: 0 };
+    this.currentPersonId = null;
+    this.isInitialized = false;
+  }
+
+  /**
+   * Check if service is initialized
+   */
+  isReady(): boolean {
+    return this.isInitialized && SocketHelper.isConnected();
+  }
+}