@churchapps/apphelper 0.5.10 → 0.6.0

package/src/components/wrapper/ChurchList.tsx

@@ -1,154 +1,145 @@
-"use client";
-
-import React, { useState } from "react";
-import { LoginUserChurchInterface, UserContextInterface, ArrayHelper } from "@churchapps/helpers";
-import { ApiHelper } from "@churchapps/helpers";
-import { UserHelper } from "../../helpers/UserHelper";
-import { NavItem } from "./NavItem";
-import { Locale } from "../../helpers";
-
-export interface Props { userChurches: LoginUserChurchInterface[], currentUserChurch: LoginUserChurchInterface, context: UserContextInterface, onDelete?: () => void, onChurchChange?: () => void }
-
-export const ChurchList: React.FC<Props> = props => {
-	console.log('ChurchList - Rendering with props:', props);
-	
-	const [userChurches, setUserChurches] = useState(() => {
-		try {
-			// If we have currentUserChurch, use it as fallback
-			if (props.currentUserChurch && (!props.userChurches || !Array.isArray(props.userChurches))) {
-				console.log('ChurchList - Using currentUserChurch as single item array');
-				return [props.currentUserChurch];
-			}
-			
-			let churches = props.userChurches;
-			
-			// Ensure we have an array
-			if (!Array.isArray(churches)) {
-				console.warn('ChurchList - Expected array but got:', typeof churches, churches);
-				// If it's a plain church object and we have currentUserChurch, use that
-				if (props.currentUserChurch) {
-					return [props.currentUserChurch];
-				}
-				churches = [];
-			}
-			
-			console.log('ChurchList - Processing churches array:', churches);
-			
-			// Filter for valid userChurch objects (should have church property)
-			const validChurches = churches.filter(uc => {
-				const isValid = uc && uc.church && uc.church.id;
-				if (!isValid) {
-					console.warn('ChurchList - Invalid church structure:', uc);
-				}
-				return isValid;
-			});
-			
-			// If no valid churches but we have currentUserChurch, use it
-			if (validChurches.length === 0 && props.currentUserChurch) {
-				console.log('ChurchList - No valid churches found, using currentUserChurch');
-				return [props.currentUserChurch];
-			}
-			
-			console.log('ChurchList - Valid churches:', validChurches);
-			return validChurches;
-		} catch (error) {
-			console.error('ChurchList - Error processing churches:', error);
-			// Last resort: if we have currentUserChurch, use it
-			if (props.currentUserChurch) {
-				return [props.currentUserChurch];
-			}
-			return [];
-		}
-	});
-	
-	// Update local state when props change
-	React.useEffect(() => {
-		try {
-			// If we have currentUserChurch, use it as fallback
-			if (props.currentUserChurch && (!props.userChurches || !Array.isArray(props.userChurches))) {
-				setUserChurches([props.currentUserChurch]);
-				return;
-			}
-			
-			let churches = props.userChurches;
-			
-			// Ensure we have an array
-			if (!Array.isArray(churches)) {
-				if (props.currentUserChurch) {
-					setUserChurches([props.currentUserChurch]);
-					return;
-				}
-				churches = [];
-			}
-			
-			// Filter for valid userChurch objects
-			const validChurches = churches.filter(uc => uc && uc.church && uc.church.id);
-			
-			// If no valid churches but we have currentUserChurch, use it
-			if (validChurches.length === 0 && props.currentUserChurch) {
-				setUserChurches([props.currentUserChurch]);
-			} else {
-				setUserChurches(validChurches);
-			}
-		} catch (error) {
-			console.error('ChurchList useEffect - Error updating churches:', error);
-			if (props.currentUserChurch) {
-				setUserChurches([props.currentUserChurch]);
-			} else {
-				setUserChurches([]);
-			}
-		}
-	}, [props.userChurches, props.currentUserChurch]);
-
-	const handleDelete = async (uc: LoginUserChurchInterface) => {
-		// Helper function to get label with fallback
-		const getLabel = (key: string, fallback: string) => {
-			const label = Locale.label(key);
-			return label && label !== key ? label : fallback;
-		};
-		
-		const confirmMessage = getLabel("wrapper.sureRemoveChurch", "Are you sure you wish to delete this church? You will no longer be a member of {}.").replace("{}", uc.church.name?.toUpperCase());
-		if (window.confirm(confirmMessage)) {
-			await ApiHelper.delete(`/userchurch/record/${props.context.user.id}/${uc.church.id}/${uc.person.id}`, "MembershipApi");
-			await ApiHelper.delete(`/rolemembers/self/${uc.church.id}/${props.context.user.id}`, "MembershipApi");
-			// remove the same from userChurches
-			const idx = ArrayHelper.getIndex(UserHelper.userChurches, "church.id", uc.church.id);
-			if (idx > -1) UserHelper.userChurches.splice(idx, 1);
-			props?.onDelete();
-		}
-	}
-
-	// Helper function to get label with fallback
-	const getLabel = (key: string, fallback: string) => {
-		const label = Locale.label(key);
-		return label && label !== key ? label : fallback;
-	};
-
-	let result: React.ReactElement[] = [];
-	
-	userChurches.forEach(uc => {
-		const userChurch = uc;
-		const churchName = uc.church.name;
-		result.push(<NavItem
-			key={userChurch.church.id}
-			selected={(uc.church.id === props.currentUserChurch.church.id) && true}
-			onClick={async () => {
-				console.log('ChurchList - Selecting church:', userChurch.church.name);
-				await UserHelper.selectChurch(props.context, userChurch.church.id, null);
-				console.log('ChurchList - Church selected');
-				
-				// Call the onChurchChange callback if provided
-				if (props.onChurchChange) {
-					props.onChurchChange();
-				}
-			}}
-			label={churchName || "Unknown"}
-			icon="church"
-			deleteIcon={uc.church.id !== props.currentUserChurch.church.id ? "delete" : null}
-			deleteLabel={getLabel("wrapper.deleteChurch", "Delete")}
-			deleteFunction={() => { handleDelete(uc); }}
-		/>);
-	});
-
-	return <div id="church-list">{result}</div>;
-};
+"use client";
+
+import React, { useState } from "react";
+import { LoginUserChurchInterface, UserContextInterface, ArrayHelper } from "@churchapps/helpers";
+import { ApiHelper } from "@churchapps/helpers";
+import { UserHelper } from "../../helpers/UserHelper";
+import { NavItem } from "./NavItem";
+import { Locale } from "../../helpers";
+
+export interface Props { userChurches: LoginUserChurchInterface[], currentUserChurch: LoginUserChurchInterface, context: UserContextInterface, onDelete?: () => void, onChurchChange?: () => void }
+
+export const ChurchList: React.FC<Props> = props => {
+	const [userChurches, setUserChurches] = useState(() => {
+		try {
+			// If we have currentUserChurch, use it as fallback
+			if (props.currentUserChurch && (!props.userChurches || !Array.isArray(props.userChurches))) {
+				return [props.currentUserChurch];
+			}
+
+			let churches = props.userChurches;
+
+			// Ensure we have an array
+			if (!Array.isArray(churches)) {
+				console.warn('ChurchList - Expected array but got:', typeof churches, churches);
+				// If it's a plain church object and we have currentUserChurch, use that
+				if (props.currentUserChurch) {
+					return [props.currentUserChurch];
+				}
+				churches = [];
+			}
+
+			// Filter for valid userChurch objects (should have church property)
+			const validChurches = churches.filter(uc => {
+				const isValid = uc && uc.church && uc.church.id;
+				if (!isValid) {
+					console.warn('ChurchList - Invalid church structure:', uc);
+				}
+				return isValid;
+			});
+
+			// If no valid churches but we have currentUserChurch, use it
+			if (validChurches.length === 0 && props.currentUserChurch) {
+				return [props.currentUserChurch];
+			}
+
+			return validChurches;
+		} catch (error) {
+			console.error('ChurchList - Error processing churches:', error);
+			// Last resort: if we have currentUserChurch, use it
+			if (props.currentUserChurch) {
+				return [props.currentUserChurch];
+			}
+			return [];
+		}
+	});
+	
+	// Update local state when props change
+	React.useEffect(() => {
+		try {
+			// If we have currentUserChurch, use it as fallback
+			if (props.currentUserChurch && (!props.userChurches || !Array.isArray(props.userChurches))) {
+				setUserChurches([props.currentUserChurch]);
+				return;
+			}
+			
+			let churches = props.userChurches;
+			
+			// Ensure we have an array
+			if (!Array.isArray(churches)) {
+				if (props.currentUserChurch) {
+					setUserChurches([props.currentUserChurch]);
+					return;
+				}
+				churches = [];
+			}
+			
+			// Filter for valid userChurch objects
+			const validChurches = churches.filter(uc => uc && uc.church && uc.church.id);
+			
+			// If no valid churches but we have currentUserChurch, use it
+			if (validChurches.length === 0 && props.currentUserChurch) {
+				setUserChurches([props.currentUserChurch]);
+			} else {
+				setUserChurches(validChurches);
+			}
+		} catch (error) {
+			console.error('ChurchList useEffect - Error updating churches:', error);
+			if (props.currentUserChurch) {
+				setUserChurches([props.currentUserChurch]);
+			} else {
+				setUserChurches([]);
+			}
+		}
+	}, [props.userChurches, props.currentUserChurch]);
+
+	const handleDelete = async (uc: LoginUserChurchInterface) => {
+		// Helper function to get label with fallback
+		const getLabel = (key: string, fallback: string) => {
+			const label = Locale.label(key);
+			return label && label !== key ? label : fallback;
+		};
+		
+		const confirmMessage = getLabel("wrapper.sureRemoveChurch", "Are you sure you wish to delete this church? You will no longer be a member of {}.").replace("{}", uc.church.name?.toUpperCase());
+		if (window.confirm(confirmMessage)) {
+			await ApiHelper.delete(`/userchurch/record/${props.context.user.id}/${uc.church.id}/${uc.person.id}`, "MembershipApi");
+			await ApiHelper.delete(`/rolemembers/self/${uc.church.id}/${props.context.user.id}`, "MembershipApi");
+			// remove the same from userChurches
+			const idx = ArrayHelper.getIndex(UserHelper.userChurches, "church.id", uc.church.id);
+			if (idx > -1) UserHelper.userChurches.splice(idx, 1);
+			props?.onDelete();
+		}
+	}
+
+	// Helper function to get label with fallback
+	const getLabel = (key: string, fallback: string) => {
+		const label = Locale.label(key);
+		return label && label !== key ? label : fallback;
+	};
+
+	let result: React.ReactElement[] = [];
+	
+	userChurches.forEach(uc => {
+		const userChurch = uc;
+		const churchName = uc.church.name;
+		result.push(<NavItem
+			key={userChurch.church.id}
+			selected={(uc.church.id === props.currentUserChurch.church.id) && true}
+			onClick={async () => {
+				await UserHelper.selectChurch(props.context, userChurch.church.id, null);
+				
+				// Call the onChurchChange callback if provided
+				if (props.onChurchChange) {
+					props.onChurchChange();
+				}
+			}}
+			label={churchName || "Unknown"}
+			icon="church"
+			deleteIcon={uc.church.id !== props.currentUserChurch.church.id ? "delete" : null}
+			deleteLabel={getLabel("wrapper.deleteChurch", "Delete")}
+			deleteFunction={() => { handleDelete(uc); }}
+		/>);
+	});
+
+	return <div id="church-list">{result}</div>;
+};

package/src/components/wrapper/NewPrivateMessage.tsx

@@ -62,7 +62,6 @@ export const NewPrivateMessage: React.FC<Props> = (props) => {
       }
     } catch (error) {
       // No existing conversation found, continue to create new one
-      console.log("No existing conversation found for person:", person.id);
     }
     setSelectedPerson(person);
   }
@@ -161,7 +160,7 @@ export const NewPrivateMessage: React.FC<Props> = (props) => {
           {isSearching && (
             <Box>
               {[...Array(3)].map((_, index) => (
-                <Box key={index} sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+                <Box key={`skeleton-${index}`} sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                   <Skeleton variant="circular" width={48} height={48} sx={{ mr: 2 }} />
                   <Skeleton variant="text" width="60%" height={24} />
                 </Box>

package/src/components/wrapper/Notifications.tsx

@@ -205,7 +205,7 @@ export const Notifications: React.FC<Props> = (props) => {
         {isLoading ? (
           <Box sx={{ p: 2 }}>
             {[...Array(3)].map((_, index) => (
-              <Box key={index} sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+              <Box key={`skeleton-${index}`} sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
                 <Skeleton variant="circular" width={48} height={48} sx={{ mr: 2 }} />
                 <Box sx={{ flex: 1 }}>
                   <Skeleton variant="text" width="80%" height={24} />

package/src/components/wrapper/PrivateMessageDetails.tsx

@@ -31,17 +31,13 @@ export const PrivateMessageDetails: React.FC<Props> = (props) => {
     const clearNotification = async () => {
       if (props.privateMessage.notifyPersonId === props.context.person.id) {
         try {
-          console.log("Marking private message as read:", props.privateMessage.id);
-          
           // Clear the notification by getting the private message details
           await ApiHelper.get(`/privateMessages/${props.privateMessage.id}`, "MessagingApi");
-          
+
           // Manually refresh notification counts to ensure immediate UI update
           const notificationService = NotificationService.getInstance();
           await notificationService.refresh();
-          
-          console.log("Private message marked as read and notifications refreshed");
-          
+
           // Notify parent component that message was marked as read
           if (props.onMessageRead) {
             props.onMessageRead();

package/src/components/wrapper/PrivateMessages.tsx

@@ -527,7 +527,7 @@ export const PrivateMessages: React.FC<Props> = React.memo((props) => {
         {isLoading ? (
           <Box sx={{ p: 2 }}>
             {[...Array(3)].map((_, index) => (
-              <Box key={index} sx={{ px: 2, py: 0.5, mb: 1 }}>
+              <Box key={`skeleton-${index}`} sx={{ px: 2, py: 0.5, mb: 1 }}>
                 <Box sx={{
                   p: 3,
                   borderRadius: 3,

package/src/components/wrapper/UserMenu.tsx

@@ -96,10 +96,8 @@ 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,7 +149,6 @@ const UserMenuContent: React.FC<Props> = React.memo((props) => {
   const [tabIndex, setTabIndex] = React.useState(0);
 
   const getTabs = () => {
-    console.log('UserMenu getTabs - Current tabIndex:', tabIndex);
     return (
       <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
         <TabPanel value={tabIndex} index={0}>
@@ -165,26 +162,16 @@ const UserMenuContent: React.FC<Props> = React.memo((props) => {
           <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)) {
@@ -193,10 +180,9 @@ const UserMenuContent: React.FC<Props> = React.memo((props) => {
                 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 
+                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

package/src/helpers/ErrorHelper.ts

@@ -1,43 +1,41 @@
-import { ErrorLogInterface, ErrorAppDataInterface } from "@churchapps/helpers";
-import { ApiHelper } from "@churchapps/helpers";
-
-
-export class ErrorHelper {
-
-	static getAppData: () => { churchId: string, userId: string, originUrl: string, application: string };
-	static customErrorHandler: (errorLog: ErrorLogInterface) => void;
-
-	static init = (getAppData: () => ErrorAppDataInterface, customErrorHandler: (errorLog: ErrorLogInterface) => void) => {
-		ErrorHelper.getAppData = getAppData;
-		ErrorHelper.customErrorHandler = customErrorHandler;
-	}
-
-	static logError = (errorType: string, message: string, details: string) => {
-	if (this.getAppData) {
-		const data = this.getAppData();
-		const log: ErrorLogInterface = {
-			application: data.application,
-			errorTime: new Date(),
-			userId: data.userId,
-			churchId: data.churchId,
-			originUrl: data.originUrl,
-			errorType: errorType,
-			message: message,
-			details: details
-		}
-
-		console.log("ERROR LOG", log);
-
-		if (log.errorType === "401" && log.message.indexOf("/users/login") > -1) return;
-		if (log.message.indexOf("clientErrors") > -1) return;
-		try {
-			// Error posting to /errors endpoint disabled
-			// ApiHelper.postAnonymous("/clientErrors", [log], "MembershipApi");
-		} catch (error) {
-			console.log(error)
-		}
-		if (ErrorHelper.customErrorHandler) ErrorHelper.customErrorHandler(log);
-	}
-}
-
-}
+import { ErrorLogInterface, ErrorAppDataInterface } from "@churchapps/helpers";
+import { ApiHelper } from "@churchapps/helpers";
+
+
+export class ErrorHelper {
+
+	static getAppData: () => { churchId: string, userId: string, originUrl: string, application: string };
+	static customErrorHandler: (errorLog: ErrorLogInterface) => void;
+
+	static init = (getAppData: () => ErrorAppDataInterface, customErrorHandler: (errorLog: ErrorLogInterface) => void) => {
+		ErrorHelper.getAppData = getAppData;
+		ErrorHelper.customErrorHandler = customErrorHandler;
+	}
+
+	static logError = (errorType: string, message: string, details: string) => {
+	if (this.getAppData) {
+		const data = this.getAppData();
+		const log: ErrorLogInterface = {
+			application: data.application,
+			errorTime: new Date(),
+			userId: data.userId,
+			churchId: data.churchId,
+			originUrl: data.originUrl,
+			errorType: errorType,
+			message: message,
+			details: details
+		}
+
+
+		if (log.errorType === "401" && log.message.indexOf("/users/login") > -1) return;
+		if (log.message.indexOf("clientErrors") > -1) return;
+		try {
+			// Error posting to /errors endpoint disabled
+			// ApiHelper.postAnonymous("/clientErrors", [log], "MembershipApi");
+		} catch (error) {
+		}
+		if (ErrorHelper.customErrorHandler) ErrorHelper.customErrorHandler(log);
+	}
+}
+
+}