@churchapps/apphelper 0.4.50 → 0.5.0

package/src/components/wrapper/ChurchList.tsx

@@ -1,154 +1,154 @@
-"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 => {
+	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>;
+};

package/src/components/wrapper/NavItem.tsx

@@ -1,47 +1,47 @@
-"use client";
-
-import React from "react";
-import { Badge, Icon, IconButton, ListItemButton, ListItemIcon, ListItemText, Tooltip } from "@mui/material";
-
-interface Props {
-	badgeCount?: number;
-	url?: string;
-	target?: string;
-	label: string;
-	icon: string;
-	onClick?: () => void;
-	onNavigate?: (url: string) => void;
-	external?: boolean;
-	selected?: boolean;
-	deleteIcon?: string;
-	deleteLabel?: string;
-	deleteFunction?: () => void;
-}
-
-export const NavItem: React.FC<Props> = (props) => {
-
-	const getIcon = () => {
-		if (props.badgeCount && props.badgeCount > 0) return <Badge badgeContent={props.badgeCount} color="error"><Icon>{props.icon}</Icon></Badge>
-		else return <Icon>{props.icon}</Icon>
-	}
-
-	const getLinkContents = () => (<ListItemButton data-testid={`nav-item-${props.label?.toLowerCase()?.replace(/\s+/g, '-')}`}>
-		<Tooltip title={props.label || ""} arrow placement="right">
-			<ListItemIcon sx={{ minWidth: "40px" }}>{getIcon()}</ListItemIcon>
-		</Tooltip>
-		<ListItemText primary={props.label} />
-		{props?.deleteIcon
-			? (
-				<Tooltip title={props.deleteLabel || ""} arrow placement="left">
-					<IconButton onClick={props.deleteFunction ? (e) => { e.stopPropagation(); e.preventDefault(); props.deleteFunction() } : null} sx={{ color: "#f7a9a9" }} size="small" aria-label={props.deleteLabel || "Delete item"} data-testid="nav-item-delete">
-						<Icon sx={{ fontSize: 19 }}>delete</Icon>
-					</IconButton>
-				</Tooltip>
-			)
-			: ""}
-	</ListItemButton>)
-
-	if (props.external) return (<a href={props.url} target={props.target} rel="noreferrer" style={{ textDecoration: "none" }} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : window.location.href = props.url }}>{getLinkContents()}</a>)
-	else return (<a href="about:blank" style={{ textDecoration: "none" }} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : props.onNavigate(props.url) }}>{getLinkContents()}</a>)
-	//else return (<StyledNavLink to={props.url || "about:blank"} target={props.target} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); (props.onClick) ? props.onClick() : props.onNavigate(props.url)}}>{getLinkContents()}</StyledNavLink>)
-};
+"use client";
+
+import React from "react";
+import { Badge, Icon, IconButton, ListItemButton, ListItemIcon, ListItemText, Tooltip } from "@mui/material";
+
+interface Props {
+	badgeCount?: number;
+	url?: string;
+	target?: string;
+	label: string;
+	icon: string;
+	onClick?: () => void;
+	onNavigate?: (url: string) => void;
+	external?: boolean;
+	selected?: boolean;
+	deleteIcon?: string;
+	deleteLabel?: string;
+	deleteFunction?: () => void;
+}
+
+export const NavItem: React.FC<Props> = (props) => {
+
+	const getIcon = () => {
+		if (props.badgeCount && props.badgeCount > 0) return <Badge badgeContent={props.badgeCount} color="error"><Icon>{props.icon}</Icon></Badge>
+		else return <Icon>{props.icon}</Icon>
+	}
+
+	const getLinkContents = () => (<ListItemButton data-testid={`nav-item-${props.label?.toLowerCase()?.replace(/\s+/g, '-')}`}>
+		<Tooltip title={props.label || ""} arrow placement="right">
+			<ListItemIcon sx={{ minWidth: "40px" }}>{getIcon()}</ListItemIcon>
+		</Tooltip>
+		<ListItemText primary={props.label} />
+		{props?.deleteIcon
+			? (
+				<Tooltip title={props.deleteLabel || ""} arrow placement="left">
+					<IconButton onClick={props.deleteFunction ? (e) => { e.stopPropagation(); e.preventDefault(); props.deleteFunction() } : null} sx={{ color: "#f7a9a9" }} size="small" aria-label={props.deleteLabel || "Delete item"} data-testid="nav-item-delete">
+						<Icon sx={{ fontSize: 19 }}>delete</Icon>
+					</IconButton>
+				</Tooltip>
+			)
+			: ""}
+	</ListItemButton>)
+
+	if (props.external) return (<a href={props.url} target={props.target} rel="noreferrer" style={{ textDecoration: "none" }} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : window.location.href = props.url }}>{getLinkContents()}</a>)
+	else return (<a href="about:blank" style={{ textDecoration: "none" }} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); props.onClick ? props.onClick() : props.onNavigate(props.url) }}>{getLinkContents()}</a>)
+	//else return (<StyledNavLink to={props.url || "about:blank"} target={props.target} className={(props.selected) ? "selected" : ""} onClick={(e) => { e.preventDefault(); (props.onClick) ? props.onClick() : props.onNavigate(props.url)}}>{getLinkContents()}</StyledNavLink>)
+};