@churchapps/apphelper 0.6.15 → 0.6.17

package/src/components/wrapper/ChurchList.tsx

@@ -1,145 +0,0 @@
-"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/NavItem.tsx

@@ -1,47 +0,0 @@
-"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>)
-};

package/src/components/wrapper/NewPrivateMessage.tsx

@@ -1,249 +0,0 @@
-"use client";
-
-import {
-  Button,
-  TextField,
-  Paper,
-  Box,
-  Typography,
-  Stack,
-  IconButton,
-  List,
-  ListItemAvatar,
-  ListItemText,
-  ListItemButton,
-  InputAdornment,
-  Divider,
-  Skeleton
-} from "@mui/material";
-import { 
-  ArrowBack as ArrowBackIcon, 
-  PersonSearch as PersonSearchIcon
-} from "@mui/icons-material";
-import React, { useEffect, useState } from "react";
-import { ApiHelper, Locale } from "../../helpers";
-import { ConversationInterface, PersonInterface, PrivateMessageInterface, UserContextInterface } from "@churchapps/helpers";
-import { AddNote } from "../notes/AddNote";
-import { PersonAvatar } from "../PersonAvatar";
-
-interface Props {
-  context: UserContextInterface;
-  onSelectMessage: (pm: PrivateMessageInterface) => void
-  onBack: () => void
-  selectedPerson?: PersonInterface
-}
-
-export const NewPrivateMessage: React.FC<Props> = (props) => {
-
-  const [searchText, setSearchText] = React.useState("");
-  const [searchResults, setSearchResults] = React.useState([]);
-  const [selectedPerson, setSelectedPerson] = React.useState<PersonInterface>(null);
-
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchText(e.currentTarget.value);
-  }
-
-  /*
-    const handleKeyDown = (e: React.KeyboardEvent<any>) => {
-      //if (e.key === "Enter") { e.preventDefault(); handleSubmit(null); }
-    }
-  */
-
-  const handlePersonSelected = async (person: PersonInterface) => {
-    try {
-      const existing: PrivateMessageInterface = await ApiHelper.get("/privateMessages/existing/" + person.id, "MessagingApi");
-      if (existing?.id) {
-        existing.person = person;
-        props.onSelectMessage(existing);
-        return;
-      }
-    } catch (error) {
-      // No existing conversation found, continue to create new one
-    }
-    setSelectedPerson(person);
-  }
-
-
-  const handleNoteAdded = () => {
-    handlePersonSelected(selectedPerson);
-  }
-
-  const createConversation = async () => {
-    const conv: ConversationInterface = { allowAnonymousPosts: false, contentType: "privateMessage", contentId: props.context.person.id, title: props.context.person.name.display + " " + Locale.label("wrapper.privateMessage", "Private Message"), visibility: "hidden" }
-    const result: ConversationInterface[] = await ApiHelper.post("/conversations", [conv], "MessagingApi");
-
-    const pm: PrivateMessageInterface = {
-      fromPersonId: props.context.person.id,
-      toPersonId: selectedPerson.id,
-      conversationId: result[0].id
-    }
-    const privateMessages: PrivateMessageInterface[] = await ApiHelper.post("/privateMessages", [pm], "MessagingApi");
-    return privateMessages[0].conversationId;
-  }
-
-
-  useEffect(() => {
-    if (props.selectedPerson) handlePersonSelected(props.selectedPerson);
-  }, [props.selectedPerson]);
-
-
-  const [isSearching, setIsSearching] = useState(false);
-
-  const handleSearchSubmit = async (e: React.MouseEvent) => {
-    if (e !== null) e.preventDefault();
-    if (!searchText.trim()) return;
-    
-    setIsSearching(true);
-    let term = escape(searchText.trim());
-    const data = await ApiHelper.get("/people/search?term=" + term, "MembershipApi");
-    setSearchResults(data);
-    setIsSearching(false);
-  };
-
-  if (!selectedPerson) return (
-    <Paper elevation={0} sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
-        <Stack direction="row" alignItems="center" spacing={2}>
-          <IconButton onClick={props.onBack}>
-            <ArrowBackIcon />
-          </IconButton>
-          <Typography variant="h6" component="h2">
-            {Locale.label("wrapper.newPrivateMessage", "New Private Message")}
-          </Typography>
-        </Stack>
-      </Box>
-
-      <Box sx={{ p: 3 }}>
-        <Stack spacing={3}>
-          <Box>
-            <Typography variant="body1" color="textSecondary" gutterBottom>
-              {Locale.label("wrapper.searchForPerson", "Search for a person to message")}
-            </Typography>
-            <TextField 
-              fullWidth 
-              placeholder="Search by name..." 
-              id="searchText" 
-              data-testid="search-input" 
-              value={searchText} 
-              onChange={handleChange}
-              onKeyDown={(e) => {
-                e.stopPropagation();
-                if (e.key === 'Enter') handleSearchSubmit(null);
-              }}
-              InputProps={{ 
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <PersonSearchIcon color="action" />
-                  </InputAdornment>
-                ),
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <Button 
-                      variant="contained" 
-                      size="small"
-                      onClick={handleSearchSubmit}
-                      disabled={!searchText.trim() || isSearching}
-                    >
-                      {Locale.label("common.search", "Search")}
-                    </Button>
-                  </InputAdornment>
-                )
-              }}
-              sx={{ mt: 1 }}
-            />
-          </Box>
-
-          {isSearching && (
-            <Box>
-              {[...Array(3)].map((_, index) => (
-                <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>
-              ))}
-            </Box>
-          )}
-
-          {!isSearching && searchResults.length > 0 && (
-            <Box>
-              <Typography variant="subtitle2" color="textSecondary" gutterBottom>
-                {searchResults.length} {searchResults.length === 1 ? 'person' : 'people'} found
-              </Typography>
-              <List sx={{ bgcolor: 'background.paper', borderRadius: 1 }}>
-                {searchResults.map((person, index) => (
-                  <React.Fragment key={person.id}>
-                    <ListItemButton 
-                      onClick={() => handlePersonSelected(person)}
-                      sx={{ py: 2 }}
-                    >
-                      <ListItemAvatar>
-                        <PersonAvatar person={person} size="small" />
-                      </ListItemAvatar>
-                      <ListItemText 
-                        primary={person.name.display}
-                        secondary={person.contactInfo?.email || ''}
-                      />
-                    </ListItemButton>
-                    {index < searchResults.length - 1 && <Divider />}
-                  </React.Fragment>
-                ))}
-              </List>
-            </Box>
-          )}
-
-          {!isSearching && searchText && searchResults.length === 0 && (
-            <Box sx={{ textAlign: 'center', py: 4 }}>
-              <PersonSearchIcon sx={{ fontSize: 48, color: 'grey.400', mb: 2 }} />
-              <Typography variant="h6" color="textSecondary">
-                No people found
-              </Typography>
-              <Typography variant="body2" color="textSecondary">
-                Try searching with a different name
-              </Typography>
-            </Box>
-          )}
-        </Stack>
-      </Box>
-    </Paper>
-  );
-  else {
-    return (
-      <Paper elevation={0} sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-        <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
-          <Stack direction="row" alignItems="center" spacing={2}>
-            <IconButton onClick={props.onBack}>
-              <ArrowBackIcon />
-            </IconButton>
-            <Typography variant="h6" component="h2">
-              {Locale.label("wrapper.newPrivateMessage", "New Private Message")}
-            </Typography>
-          </Stack>
-        </Box>
-
-        <Box sx={{ p: 3 }}>
-          <Stack direction="row" spacing={2} alignItems="center" sx={{ mb: 3 }}>
-            <PersonAvatar person={selectedPerson} size="medium" />
-            <Box>
-              <Typography variant="subtitle1" fontWeight="medium">
-                {selectedPerson.name.display}
-              </Typography>
-              {selectedPerson.contactInfo?.email && (
-                <Typography variant="body2" color="textSecondary">
-                  {selectedPerson.contactInfo.email}
-                </Typography>
-              )}
-            </Box>
-          </Stack>
-          <Divider sx={{ mb: 3 }} />
-          <AddNote 
-            context={props.context} 
-            conversationId={null} 
-            onUpdate={handleNoteAdded} 
-            createConversation={createConversation} 
-          />
-        </Box>
-      </Paper>
-    )
-  }
-}

package/src/components/wrapper/Notifications.tsx

@@ -1,220 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { ApiHelper } from "@churchapps/helpers";
-import {
-  Box,
-  Stack,
-  Typography,
-  Paper,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Avatar,
-  Chip,
-  Divider,
-  IconButton,
-  Skeleton
-} from "@mui/material";
-import { 
-  Notifications as NotificationsIcon, 
-  Task as TaskIcon, 
-  Assignment as AssignmentIcon, 
-  OpenInNew as OpenInNewIcon 
-} from "@mui/icons-material";
-import { NotificationInterface, UserContextInterface } from "@churchapps/helpers";
-import { DateHelper } from "../../helpers";
-
-interface Props {
-  appName: string;
-  context: UserContextInterface;
-  onNavigate: (url: string) => void;
-  onUpdate: () => void;
-}
-
-export const Notifications: React.FC<Props> = (props) => {
-  const [notifications, setNotifications] = useState<NotificationInterface[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  const loadData = async () => {
-    setIsLoading(true);
-    const n: NotificationInterface[] = await ApiHelper.get("/notifications/my", "MessagingApi");
-    setNotifications(n);
-    setIsLoading(false);
-    props.onUpdate();
-  }
-
-  React.useEffect(() => { loadData(); }, []); //eslint-disable-line
-
-  const getAppUrl = (appName:string) => {
-    switch (appName) {
-      case props.appName.toLowerCase(): return "";
-      case "b1admin": return "https://admin.b1.church";
-      case "b1": return "https://" + props.context.userChurch.church.subDomain + ".b1.church";
-      default: return "";
-    }
-  }
-
-  const handleClick = (notification:NotificationInterface) => {
-    let app = "";
-    let path = "";
-    switch (notification.contentType) {
-      case "task": app = "b1admin"; path = "/tasks/" + notification.contentId; break;
-      case "assignment": app = "b1"; path = "/my/plans/" + notification.contentId; break;
-    }
-
-    const appUrl = getAppUrl(app);
-    if (appUrl === "") {
-      props.onNavigate(path);
-    }
-    else {
-      window.open(appUrl + path, "_blank");
-    }
-  }
-
-  const getNotificationIcon = (contentType: string) => {
-    switch (contentType) {
-      case "task": return <TaskIcon />;
-      case "assignment": return <AssignmentIcon />;
-      default: return <NotificationsIcon />;
-    }
-  }
-
-  const getNotificationList = () => {
-    if (notifications.length === 0) {
-      return (
-        <Box id="notifications-empty" sx={{ textAlign: 'center', py: 4 }}>
-          <NotificationsIcon sx={{ fontSize: 48, color: 'grey.400', mb: 2 }} />
-          <Typography variant="h6" color="textSecondary">
-            No notifications
-          </Typography>
-          <Typography variant="body2" color="textSecondary">
-            You're all caught up!
-          </Typography>
-        </Box>
-      );
-    }
-
-    return (
-      <List id="notifications-list" sx={{ width: '100%' }}>
-        {notifications.map((notification, index) => {
-          let datePosted = new Date(notification.timeSent);
-          const displayDuration = DateHelper.getDisplayDuration(datePosted);
-          const isUnread = notification.isNew;
-
-          return (
-            <React.Fragment key={notification.id}>
-              <ListItem
-                id={`notification-item-${notification.id}`}
-                component="button"
-                onClick={() => handleClick(notification)}
-                sx={{
-                  alignItems: 'flex-start',
-                  py: 2,
-                  cursor: 'pointer',
-                  bgcolor: isUnread ? 'action.hover' : 'transparent',
-                  '&:hover': {
-                    bgcolor: 'action.hover'
-                  },
-                  borderRadius: 1,
-                  mb: 0.5
-                }}
-              >
-                <ListItemAvatar>
-                  <Avatar 
-                    sx={{ 
-                      bgcolor: isUnread ? 'primary.main' : 'grey.400',
-                      width: 48,
-                      height: 48
-                    }}
-                  >
-                    {getNotificationIcon(notification.contentType)}
-                  </Avatar>
-                </ListItemAvatar>
-                <ListItemText
-                  primary={
-                    <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
-                      <Typography
-                        variant="body1"
-                        sx={{ 
-                          fontWeight: isUnread ? 600 : 400,
-                          flex: 1,
-                          pr: 1
-                        }}
-                      >
-                        {notification.message}
-                      </Typography>
-                      <Stack direction="row" alignItems="center" spacing={1}>
-                        {isUnread && (
-                          <Chip
-                            size="small"
-                            label="New"
-                            color="primary"
-                            sx={{ height: 20, fontSize: '0.7rem' }}
-                          />
-                        )}
-                        <Typography variant="caption" color="textSecondary">
-                          {displayDuration}
-                        </Typography>
-                      </Stack>
-                    </Stack>
-                  }
-                  secondary={
-                    notification.link && (
-                      <Box sx={{ mt: 1 }}>
-                        <IconButton
-                          size="small"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            window.open(notification.link, '_blank');
-                          }}
-                          sx={{ p: 0.5 }}
-                        >
-                          <OpenInNewIcon fontSize="small" />
-                          <Typography variant="caption" sx={{ ml: 0.5 }}>
-                            View Details
-                          </Typography>
-                        </IconButton>
-                      </Box>
-                    )
-                  }
-                />
-              </ListItem>
-              {index < notifications.length - 1 && <Divider variant="inset" component="li" />}
-            </React.Fragment>
-          );
-        })}
-      </List>
-    );
-  }
-
-
-  return (
-    <Paper id="notifications-panel" elevation={0} sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <Box id="notifications-header" sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}>
-        <Typography variant="h6" component="h2">
-          Notifications
-        </Typography>
-      </Box>
-      
-      <Box id="notifications-content" sx={{ flex: 1, overflow: 'auto' }}>
-        {isLoading ? (
-          <Box sx={{ p: 2 }}>
-            {[...Array(3)].map((_, index) => (
-              <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} />
-                  <Skeleton variant="text" width="40%" height={20} />
-                </Box>
-              </Box>
-            ))}
-          </Box>
-        ) : (
-          getNotificationList()
-        )}
-      </Box>
-    </Paper>
-  );
-};