@churchapps/apphelper 0.4.12 → 0.4.18

package/src/helpers/SocketHelper.ts

@@ -1,17 +1,17 @@
-import { ConnectionInterface, LoginUserChurchInterface, SocketActionHandlerInterface, SocketPayloadInterface, UserChurchInterface } from "@churchapps/helpers";
-import { ApiHelper } from "./ApiHelper";
-import { ArrayHelper } from "./ArrayHelper";
-import { CommonEnvironmentHelper } from "./CommonEnvironmentHelper";
+import { ConnectionInterface, LoginUserChurchInterface, SocketActionHandlerInterface, SocketPayloadInterface, UserChurchInterface, ApiHelper, ArrayHelper, CommonEnvironmentHelper } from "@churchapps/helpers";
 
 export class SocketHelper {
   static socket: WebSocket;
   static socketId: string;
   static actionHandlers: SocketActionHandlerInterface[] = [];
   private static personIdChurchId: {personId:string, churchId:string} = {personId:"", churchId:""};
+  private static reconnectTimeout: number | null = null;
+  private static isCleanedUp: boolean = false;
+  private static maxReconnectAttempts: number = 10;
+  private static reconnectAttempts: number = 0;
 
   static setPersonChurch = (pc: {personId:string, churchId:string}) => {
     if (pc?.personId && pc.personId && pc.churchId!==this.personIdChurchId.churchId && pc.personId!==this.personIdChurchId.personId) {
-    //if (pc?.personId && pc.personId!==this.personIdChurchId.personId && this.socketId!==undefined && this.socketId) {
       this.personIdChurchId = pc;
       this.createAlertConnection();
     }
@@ -20,58 +20,203 @@ export class SocketHelper {
   static createAlertConnection = () => {
     if (SocketHelper.personIdChurchId.personId && SocketHelper.socketId) {
       const connection: ConnectionInterface = { conversationId: "alerts", churchId: SocketHelper.personIdChurchId.churchId, displayName: "Test", socketId: SocketHelper.socketId, personId:SocketHelper.personIdChurchId.personId }
-      ApiHelper.postAnonymous("/connections", [connection], "MessagingApi");
+      
+      ApiHelper.postAnonymous("/connections", [connection], "MessagingApi").catch((error: any) => {
+        console.error("❌ Failed to create alert connection:", error);
+      });
     }
   }
 
   static init = async () => {
-    if (SocketHelper.socket !== undefined && SocketHelper.socket.readyState !== SocketHelper.socket.OPEN) {
-      try { SocketHelper.socket.close(); } catch (e) { console.log(e); }
+    // Clean up existing connection first
+    SocketHelper.cleanup();
+    
+    // Reset cleanup flag
+    SocketHelper.isCleanedUp = false;
+    
+    if (SocketHelper.socket && SocketHelper.socket.readyState !== SocketHelper.socket.CLOSED) {
+      try { 
+        SocketHelper.socket.close(); 
+      } catch (e) { 
+        console.error("❌ Error closing existing socket:", e); 
+      }
     }
 
-    await new Promise((resolve) => {
-      SocketHelper.socket = new WebSocket(CommonEnvironmentHelper.MessagingApiSocket);
-      SocketHelper.socket.onmessage = (event) => {
-        const payload = JSON.parse(event.data);
-        SocketHelper.handleMessage(payload);
-      };
-      SocketHelper.socket.onopen = async (e) => {
-        SocketHelper.socket.send("getId");  //not sure this is needed.  It auto-sends socketId on connect
-        setTimeout(() => { resolve(null); }, 500);
-      };
-      SocketHelper.socket.onclose = async (e) => {
-        //SocketHelper.events.disconnectHandler();
-        setTimeout(() => {
-          //Silently reconnect
-          if (SocketHelper.socket.readyState === SocketHelper.socket.CLOSED) {
-            SocketHelper.init().then(() => {
-              //SocketHelper.createAlertConnection();
-              SocketHelper.handleMessage({ action: "reconnect", data: null })
-            });
+    await new Promise((resolve, reject) => {
+      try {
+        SocketHelper.socket = new WebSocket(CommonEnvironmentHelper.MessagingApiSocket);
+        
+        SocketHelper.socket.onmessage = (event) => {
+          if (SocketHelper.isCleanedUp) return;
+          
+          try {
+            const payload = JSON.parse(event.data);
+            SocketHelper.handleMessage(payload);
+          } catch (error) {
+            console.error("❌ Error parsing socket message:", error);
           }
-        }, 1000);
-
-        //SocketHelper.handleMessage({ action: "disconnect", data: null })
+        };
+        
+        SocketHelper.socket.onopen = async (e) => {
+          SocketHelper.reconnectAttempts = 0; // Reset reconnect attempts on successful connection
+          SocketHelper.socket.send("getId");  // Request socket ID
+          setTimeout(() => { resolve(null); }, 500);
+        };
+        
+        SocketHelper.socket.onclose = async (e) => {
+          // Clear any existing reconnect timeout
+          if (SocketHelper.reconnectTimeout) {
+            clearTimeout(SocketHelper.reconnectTimeout);
+            SocketHelper.reconnectTimeout = null;
+          }
+          
+          // Only attempt reconnection if not manually cleaned up and within retry limits
+          if (!SocketHelper.isCleanedUp && SocketHelper.reconnectAttempts < SocketHelper.maxReconnectAttempts) {
+            SocketHelper.reconnectAttempts++;
+            const backoffDelay = Math.min(1000 * Math.pow(2, SocketHelper.reconnectAttempts - 1), 30000);
+            
+            console.log(`🔄 WebSocket reconnecting... attempt ${SocketHelper.reconnectAttempts}/${SocketHelper.maxReconnectAttempts}`);
+            
+            SocketHelper.reconnectTimeout = setTimeout(() => {
+              if (!SocketHelper.isCleanedUp && SocketHelper.socket && SocketHelper.socket.readyState === SocketHelper.socket.CLOSED) {
+                SocketHelper.init().then(() => {
+                  SocketHelper.handleMessage({ action: "reconnect", data: null });
+                }).catch((error) => {
+                  console.error("❌ Reconnection failed:", error);
+                });
+              }
+            }, backoffDelay);
+          } else if (SocketHelper.reconnectAttempts >= SocketHelper.maxReconnectAttempts) {
+            console.error("❌ WebSocket max reconnection attempts reached");
+          }
+        };
+        
+        SocketHelper.socket.onerror = (error) => {
+          console.error("❌ WebSocket connection error:", error);
+          reject(error);
+        };
+        
+      } catch (error) {
+        console.error("❌ Error initializing socket:", error);
+        reject(error);
       }
     });
   }
 
   static addHandler = (action: string, id: string, handleMessage: (data: any) => void) => {
     const existing = ArrayHelper.getOne(SocketHelper.actionHandlers, "id", id);
-    if (existing !== null) existing.handleMessage = handleMessage;
-    else SocketHelper.actionHandlers.push({ action, id, handleMessage });
+    if (existing !== null) {
+      existing.handleMessage = handleMessage;
+    } else {
+      SocketHelper.actionHandlers.push({ action, id, handleMessage });
+    }
+  }
+
+  static removeHandler = (id: string) => {
+    SocketHelper.actionHandlers = SocketHelper.actionHandlers.filter(handler => handler.id !== id);
+  }
+
+  static removeHandlersByAction = (action: string) => {
+    SocketHelper.actionHandlers = SocketHelper.actionHandlers.filter(handler => handler.action !== action);
+  }
+
+  static clearAllHandlers = () => {
+    SocketHelper.actionHandlers = [];
   }
 
   static handleMessage = (payload: SocketPayloadInterface) => {
-    //console.log("MESSAGE", payload)
-    if (payload.action==="socketId") {
-      SocketHelper.socketId = payload.data;
-      SocketHelper.createAlertConnection();
+    if (SocketHelper.isCleanedUp) return;
+    
+    try {
+      if (payload.action==="socketId") {
+        SocketHelper.socketId = payload.data;
+        SocketHelper.createAlertConnection();
+      }
+      else {
+        const matchingHandlers = ArrayHelper.getAll(SocketHelper.actionHandlers, "action", payload.action);
+        matchingHandlers.forEach((handler) => {
+          try {
+            handler.handleMessage(payload.data);
+          } catch (error) {
+            console.error(`❌ Error in handler ${handler.id}:`, error);
+          }
+        });
+      }
+    } catch (error) {
+      console.error("❌ Error handling socket message:", error);
+    }
+  }
+
+  static cleanup = () => {
+    SocketHelper.isCleanedUp = true;
+    
+    // Clear reconnect timeout
+    if (SocketHelper.reconnectTimeout) {
+      clearTimeout(SocketHelper.reconnectTimeout);
+      SocketHelper.reconnectTimeout = null;
+    }
+    
+    // Close socket connection
+    if (SocketHelper.socket && SocketHelper.socket.readyState !== SocketHelper.socket.CLOSED) {
+      try {
+        SocketHelper.socket.close();
+      } catch (error) {
+        console.error("Error closing socket:", error);
+      }
+    }
+    
+    // Clear references
+    SocketHelper.socket = null;
+    SocketHelper.socketId = null;
+    SocketHelper.actionHandlers = [];
+    SocketHelper.personIdChurchId = {personId:"", churchId:""};
+    SocketHelper.reconnectAttempts = 0;
+  }
+
+  static disconnect = () => {
+    SocketHelper.cleanup();
+  }
+
+  static isConnected = (): boolean => {
+    return SocketHelper.socket && SocketHelper.socket.readyState === SocketHelper.socket.OPEN;
+  }
+
+  static getConnectionState = (): string => {
+    if (!SocketHelper.socket) return "UNINITIALIZED";
+    
+    switch (SocketHelper.socket.readyState) {
+      case SocketHelper.socket.CONNECTING:
+        return "CONNECTING";
+      case SocketHelper.socket.OPEN:
+        return "OPEN";
+      case SocketHelper.socket.CLOSING:
+        return "CLOSING";
+      case SocketHelper.socket.CLOSED:
+        return "CLOSED";
+      default:
+        return "UNKNOWN";
     }
-    else {
-      ArrayHelper.getAll(SocketHelper.actionHandlers, "action", payload.action).forEach((handler) => {
-        handler.handleMessage(payload.data);
+  }
+
+  // Global cleanup on window unload
+  static setupGlobalCleanup = () => {
+    if (typeof window !== "undefined") {
+      const cleanup = () => {
+        SocketHelper.cleanup();
+      };
+      
+      window.addEventListener("beforeunload", cleanup);
+      window.addEventListener("unload", cleanup);
+      
+      // Also cleanup on page visibility change (when tab is closed)
+      document.addEventListener("visibilitychange", () => {
+        if (document.visibilityState === "hidden") {
+          // Optional: cleanup when tab becomes hidden
+          // SocketHelper.cleanup();
+        }
       });
+      
+      return cleanup;
     }
   }
 

package/src/helpers/UserHelper.ts

@@ -1,4 +1,4 @@
-import { ApiHelper } from "./ApiHelper"
+import { ApiHelper } from "@churchapps/helpers"
 import { UserInterface, UserContextInterface, IApiPermission, PersonInterface, LoginUserChurchInterface } from "@churchapps/helpers";
 
 export class UserHelper {
@@ -44,7 +44,7 @@ export class UserHelper {
 
 		let result = false;
 		if (permissions !== undefined) {
-			permissions.forEach(element => {
+			permissions.forEach((element: any) => {
 				if (element.contentType === contentType && element.action === action) result = true;
 			});
 		}

package/src/helpers/index.ts

@@ -1,20 +1,50 @@
-export * from "@churchapps/helpers";
+// Re-export from @churchapps/helpers
+export { 
+  ApiHelper, 
+  AppearanceHelper as BaseAppearanceHelper,
+  ArrayHelper, 
+  CommonEnvironmentHelper, 
+  CurrencyHelper, 
+  DateHelper, 
+  ErrorHelper, 
+  EventHelper, 
+  FileHelper, 
+  PersonHelper, 
+  UserHelper, 
+  UniqueIdHelper,
+  Permissions
+} from "@churchapps/helpers";
+
+// Re-export interfaces from @churchapps/helpers
+export type { 
+  ErrorLogInterface,
+  UserContextInterface,
+  PermissionInterface,
+  ChurchInterface,
+  PersonInterface,
+  UserInterface,
+  LoginUserChurchInterface,
+  ContactInfoInterface,
+  DonationInterface,
+  FundInterface,
+  PaymentMethodInterface,
+  StripeDonationInterface,
+  FundDonationInterface,
+  ResetPasswordRequestInterface,
+  ResetPasswordResponseInterface,
+  ConnectionInterface,
+  SocketActionHandlerInterface,
+  SocketPayloadInterface,
+  UserChurchInterface
+} from "@churchapps/helpers";
+
+// Export local helpers
 export { AnalyticsHelper } from "./AnalyticsHelper";
-export { ApiHelper } from "./ApiHelper";
-export { ArrayHelper } from "./ArrayHelper";
-export { CommonEnvironmentHelper } from "./CommonEnvironmentHelper";
-export { CurrencyHelper } from "./CurrencyHelper"
-export { DateHelper } from "./DateHelper";
-export { ErrorHelper } from "./ErrorHelper";
-export { EventHelper } from "./EventHelper";
-export { FileHelper } from "./FileHelper";
-export { Locale } from "./Locale";
-export { PersonHelper } from "./PersonHelper"
-export { SocketHelper } from "./SocketHelper";
-export { UserHelper } from "./UserHelper";
-export { UniqueIdHelper } from "./UniqueIdHelper";
-export { createEmotionCache } from "./createEmotionCache";
-export { DonationHelper } from "./DonationHelper";
 export { AppearanceHelper } from "./AppearanceHelper";
 export type { AppearanceInterface } from "./AppearanceHelper";
+export { createEmotionCache } from "./createEmotionCache";
+export { Locale } from "./Locale";
 export { SlugHelper } from "./SlugHelper";
+export { SocketHelper } from "./SocketHelper";
+export { NotificationService } from "./NotificationService";
+export type { NotificationCounts } from "./NotificationService";

package/src/hooks/index.ts

@@ -1 +1,3 @@
 export { useMountedState } from "./useMountedState";
+export { useNotifications } from "./useNotifications";
+export type { UseNotificationsResult } from "./useNotifications";

package/src/hooks/useNotifications.ts

@@ -0,0 +1,94 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { NotificationService, NotificationCounts } from '../helpers/NotificationService';
+import { UserContextInterface } from '@churchapps/helpers';
+
+export interface UseNotificationsResult {
+  counts: NotificationCounts;
+  isLoading: boolean;
+  isReady: boolean;
+  refresh: () => Promise<void>;
+  error: string | null;
+}
+
+/**
+ * Custom hook for managing real-time notifications
+ * 
+ * @param context - User context containing person and church information
+ * @returns Object containing notification counts and management functions
+ * 
+ * @example
+ * ```tsx
+ * const { counts, isLoading, refresh } = useNotifications(context);
+ * 
+ * return (
+ *   <UserMenu 
+ *     notificationCounts={counts}
+ *     loadCounts={refresh}
+ *     // ... other props
+ *   />
+ * );
+ * ```
+ */
+export function useNotifications(context: UserContextInterface | null): UseNotificationsResult {
+  const [counts, setCounts] = useState<NotificationCounts>({ notificationCount: 0, pmCount: 0 });
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Get the singleton instance only once
+  const notificationService = React.useMemo(() => NotificationService.getInstance(), []);
+
+  // Initialize the service when context becomes available
+  useEffect(() => {
+    if (!context?.person?.id || !context?.userChurch?.church?.id) {
+      setIsLoading(false);
+      return;
+    }
+
+    const initializeService = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        
+        await notificationService.initialize(context);
+      } catch (err) {
+        console.error("❌ useNotifications: Failed to initialize:", err);
+        setError(err instanceof Error ? err.message : 'Failed to initialize notifications');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    initializeService();
+  }, [context?.person?.id, context?.userChurch?.church?.id]);
+
+  // Subscribe to notification count changes
+  useEffect(() => {
+    const unsubscribe = notificationService.subscribe((newCounts) => {
+      setCounts(newCounts);
+    });
+
+    // Cleanup subscription on unmount
+    return () => {
+      unsubscribe();
+    };
+  }, [notificationService]);
+
+  // Refresh function - memoized without dependencies for stable reference
+  const refresh = useCallback(async () => {
+    try {
+      setError(null);
+      await NotificationService.getInstance().refresh();
+    } catch (err) {
+      console.error("❌ useNotifications: Refresh failed:", err);
+      setError(err instanceof Error ? err.message : 'Failed to refresh notifications');
+    }
+  }, []);
+
+  return {
+    counts,
+    isLoading,
+    isReady: notificationService.isReady(),
+    refresh,
+    error
+  };
+}

package/src/index.ts

@@ -1,6 +1,3 @@
 export * from "./helpers";
 export * from "./components";
-export * from "@churchapps/helpers";
-export * from "./pageComponents";
-export * from "./hooks";
-export * from "./donationComponents";
+export * from "./hooks";

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "ESNext",
     "esModuleInterop": true,
     "lib": ["ES2021", "DOM"],
     "typeRoots": ["node_modules/@types"],
@@ -25,7 +25,7 @@
   "include": [
     "src/**/*"
   ],
-  "exclude": [  // Added exclude
+  "exclude": [
     "node_modules",
     "dist"
   ]

package/.eslintignore

@@ -1,4 +0,0 @@
-build
-node_modules
-.github
-.vscode

package/.github/FUNDING.yml

@@ -1 +0,0 @@
-github: [ChurchApps]

package/.vscode/settings.json

@@ -1,6 +0,0 @@
-{
-  "editor": {
-    "insertSpaces": false,
-    "tabSize": 2
-  }
-}