@churchapps/apphelper 0.4.12 → 0.4.17

package/src/components/wrapper/Notifications.tsx

@@ -59,10 +59,10 @@ export const Notifications: React.FC<Props> = (props) => {
       const displayDuration = DateHelper.getDisplayDuration(datePosted);
 
       result.push(
-        <div className="note" style={{ cursor: "pointer" }} onClick={(e) => { e.preventDefault(); }}>
+        <div className="note" style={{ cursor: "pointer" }} onClick={(e) => { e.preventDefault(); }} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(notification); } }}>
           <Box sx={{ width: "100%" }} className="note-contents">
             <Stack direction="row" justifyContent="space-between">
-              <div style={{width:"100%"}} onClick={(e) => { e.preventDefault(); handleClick(notification); }}>
+              <div style={{width:"100%"}} onClick={(e) => { e.preventDefault(); handleClick(notification); }} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(notification); } }} aria-label={`View notification: ${notification.message}`}>
                 <span className="text-grey" style={{float:"right"}}>{displayDuration}</span>
                 <p>
                   <Icon>notifications</Icon> 

package/src/components/wrapper/PrivateMessages.tsx

@@ -56,7 +56,16 @@ export const PrivateMessages: React.FC<Props> = (props) => {
       const contents = message.content?.split("\n")[0];
       const privateMessage = pm;
       result.push(
-        <div key={pm.id} className="note" style={{ cursor: "pointer" }} onClick={(e) => { e.preventDefault(); setSelectedMessage(privateMessage) }}>
+        <div 
+          key={pm.id} 
+          className="note" 
+          style={{ cursor: "pointer" }} 
+          onClick={(e) => { e.preventDefault(); setSelectedMessage(privateMessage) }}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedMessage(privateMessage); } }}
+          aria-label={`View private message from ${person.name?.display}`}
+        >
           <div className="postedBy">
             <img src={photoUrl} alt="avatar" />
           </div>

package/src/components/wrapper/SiteWrapper.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { CSSProperties } from "react";
+import React, { CSSProperties, useCallback, useMemo } from "react";
 import { IconButton, Toolbar, Icon, Typography, Box, Container, Link } from "@mui/material";
 import { UserHelper, AppearanceHelper, PersonHelper, AppearanceInterface, ApiHelper } from "../../helpers";
 import { UserMenu } from "./UserMenu";
@@ -23,21 +23,24 @@ export const SiteWrapper: React.FC<Props> = props => {
   const [churchLogo, setChurchLogo] = React.useState<string>();
   const [open, setOpen] = React.useState(false);
   const [notificationCounts, setNotificationCounts] = React.useState({notificationCount:0, pmCount:0});
-  const toggleDrawer = () => { setOpen(!open); };
+  const toggleDrawer = useCallback(() => { setOpen(!open); }, [open]);
   const isMounted = useMountedState();
 
-  const CustomDrawer = (open) ? OpenDrawer({backgroundColor:props.appearance.wrapperBackground}) : ClosedDrawer({backgroundColor:props.appearance.wrapperBackground});
-  const CustomAppBar = (open) ? OpenDrawerAppBar : ClosedDrawerAppBar;
+  const CustomDrawer = useMemo(() => 
+    (open) ? OpenDrawer({backgroundColor:props.appearance?.wrapperBackground}) : ClosedDrawer({backgroundColor:props.appearance?.wrapperBackground}),
+    [open, props.appearance?.wrapperBackground]
+  );
+  const CustomAppBar = useMemo(() => (open) ? OpenDrawerAppBar : ClosedDrawerAppBar, [open]);
 
-  const loadCounts = () => {
+  const loadCounts = useCallback(() => {
     ApiHelper.get("/notifications/unreadCount", "MessagingApi").then(data => {
       if (!notificationCounts || JSON.stringify(notificationCounts) !== JSON.stringify(data)) setNotificationCounts(data);
     });
-  }
+  }, [notificationCounts]);
 
-  const handleNotification = () => {
+  const handleNotification = useCallback(() => {
     loadCounts();
-  }
+  }, [loadCounts]);
 
 
 
@@ -63,10 +66,18 @@ export const SiteWrapper: React.FC<Props> = props => {
     SocketHelper.addHandler("notification", "notificationBell", handleNotification);
     SocketHelper.init();
     loadCounts();
-  }, []);
-
-  const boxStyle: CSSProperties = { flexGrow: 1, marginTop: 8, minHeight: "90vh" }
-  if (!props.omitOverflow) boxStyle.overflow = "auto";
+    
+    // Cleanup function to remove handlers and disconnect socket
+    return () => {
+      SocketHelper.removeHandler("notificationBell");
+    };
+  }, [handleNotification, loadCounts]);
+
+  const boxStyle: CSSProperties = useMemo(() => {
+    const style: CSSProperties = { flexGrow: 1, marginTop: 8, minHeight: "90vh" };
+    if (!props.omitOverflow) style.overflow = "auto";
+    return style;
+  }, [props.omitOverflow]);
 
   return <>
     <CustomAppBar position="absolute">
@@ -81,7 +92,7 @@ export const SiteWrapper: React.FC<Props> = props => {
       </Toolbar>
     </CustomAppBar>
 
-    <CustomDrawer style={{ backgroundColor: props.appearance?.wrapperBackground }} variant="permanent" open={open} onMouseOver={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
+    <CustomDrawer style={{ backgroundColor: props.appearance?.wrapperBackground }} variant="permanent" open={open} onMouseOver={useCallback(() => setOpen(true), [])} onMouseLeave={useCallback(() => setOpen(false), [])}>
       <Toolbar sx={{ display: "flex", alignItems: "center", width: "100%", px: [1] }}>
         <img src={churchLogo || "/images/logo-wrapper.png"} alt="logo" style={{ maxWidth: 170 }} />
         <div style={{ justifyContent: "flex-end", flex: 1, display: "flex" }}>

package/src/components/wrapper/UserMenu.tsx

@@ -1,13 +1,10 @@
 "use client";
 
 import React from "react";
-import { ApiHelper } from "../../helpers/ApiHelper";
-import { UserHelper } from "../../helpers/UserHelper";
+import { ApiHelper, UserHelper, LoginUserChurchInterface, UserContextInterface, CommonEnvironmentHelper } from "@churchapps/helpers";
 import { Avatar, Menu, Typography, Icon, Button, Box, Badge, Modal, Dialog, DialogContent, DialogTitle } from "@mui/material";
 import { NavItem, AppList } from ".";
-import { LoginUserChurchInterface, UserContextInterface } from "@churchapps/helpers";
 import { ChurchList } from "./ChurchList";
-import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
 import { TabPanel } from "../TabPanel";
 import { Locale } from "../../helpers";
 import { PrivateMessages } from "./PrivateMessages";

package/src/helpers/AnalyticsHelper.ts

@@ -1,6 +1,5 @@
 import ReactGA from "react-ga4";
-import { CommonEnvironmentHelper } from "./CommonEnvironmentHelper";
-import { UserHelper } from "./UserHelper";
+import { CommonEnvironmentHelper, UserHelper } from "@churchapps/helpers";
 
 export class AnalyticsHelper {
 

package/src/helpers/Locale.ts

@@ -66,7 +66,7 @@ export class Locale {
 			.init({
 				resources,
 				fallbackLng: "en",
-				debug: process.env.NODE_ENV === "development",
+				debug: false,
 				interpolation: {
 					escapeValue: false,
 				},

package/src/helpers/PersonHelper.ts

@@ -1,5 +1,4 @@
-import { PersonInterface, ContactInfoInterface } from "@churchapps/helpers";
-import { CommonEnvironmentHelper } from "./CommonEnvironmentHelper";
+import { PersonInterface, ContactInfoInterface, CommonEnvironmentHelper } from "@churchapps/helpers";
 import { Locale } from "./Locale";
 
 export class PersonHelper {

package/src/helpers/SocketHelper.ts

@@ -1,13 +1,14 @@
-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) {
@@ -25,53 +26,191 @@ export class SocketHelper {
   }
 
   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 !== undefined && SocketHelper.socket.readyState !== SocketHelper.socket.CLOSED) {
+      try { 
+        SocketHelper.socket.close(); 
+      } catch (e) { 
+        console.log("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; // Don't process messages after cleanup
+          
+          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");  //not sure this is needed.  It auto-sends socketId on connect
+          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); // Exponential backoff with max 30s
+            
+            SocketHelper.reconnectTimeout = setTimeout(() => {
+              if (!SocketHelper.isCleanedUp && SocketHelper.socket.readyState === SocketHelper.socket.CLOSED) {
+                SocketHelper.init().then(() => {
+                  SocketHelper.handleMessage({ action: "reconnect", data: null });
+                }).catch((error) => {
+                  console.error("Reconnection failed:", error);
+                });
+              }
+            }, backoffDelay);
+          }
+        };
+        
+        SocketHelper.socket.onerror = (error) => {
+          console.error("WebSocket 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; // Don't handle messages after cleanup
+    
+    try {
+      //console.log("MESSAGE", payload)
+      if (payload.action==="socketId") {
+        SocketHelper.socketId = payload.data;
+        SocketHelper.createAlertConnection();
+      }
+      else {
+        ArrayHelper.getAll(SocketHelper.actionHandlers, "action", payload.action).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);
     }
-    else {
-      ArrayHelper.getAll(SocketHelper.actionHandlers, "action", payload.action).forEach((handler) => {
-        handler.handleMessage(payload.data);
+  }
+
+  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";
+    }
+  }
+
+  // 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/index.ts

@@ -1,20 +1,48 @@
-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";

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
-  }
-}