@churchapps/apphelper 0.4.12 → 0.4.18

package/src/components/notes/Notes.tsx

@@ -19,18 +19,72 @@ export function Notes(props: Props) {
 
   const [messages, setMessages] = React.useState<MessageInterface[]>(null)
   const [editMessageId, setEditMessageId] = React.useState(null)
+  const [isInitialLoad, setIsInitialLoad] = React.useState(true)
+  const [previousMessageCount, setPreviousMessageCount] = React.useState(0)
+
+  // Add CSS for custom scrollbar styling
+  React.useEffect(() => {
+    const styleId = 'notes-scrollbar-styles';
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.textContent = `
+        .notes-scroll-container {
+          scrollbar-width: thin;
+          scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
+        }
+        .notes-scroll-container::-webkit-scrollbar {
+          width: 12px;
+          background: transparent;
+        }
+        .notes-scroll-container::-webkit-scrollbar-track {
+          background: rgba(0, 0, 0, 0.1);
+          border-radius: 6px;
+          margin: 4px;
+        }
+        .notes-scroll-container::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.3);
+          border-radius: 6px;
+          border: 2px solid transparent;
+          background-clip: content-box;
+        }
+        .notes-scroll-container::-webkit-scrollbar-thumb:hover {
+          background: rgba(0, 0, 0, 0.5);
+          background-clip: content-box;
+        }
+        .notes-scroll-container::-webkit-scrollbar-corner {
+          background: transparent;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }, []);
 
   const loadNotes = async () => {
-    const messages: MessageInterface[] = (props.conversationId) ? await ApiHelper.get("/messages/conversation/" + props.conversationId, "MessagingApi") : [];
-    if (messages.length > 0) {
-      const peopleIds = ArrayHelper.getIds(messages, "personId");
-      const people = await ApiHelper.get("/people/basic?ids=" + peopleIds.join(","), "MembershipApi");
-      messages.forEach(n => {
-        n.person = ArrayHelper.getOne(people, "id", n.personId);
-      })
+    try {
+      const messages: MessageInterface[] = (props.conversationId) ? await ApiHelper.get("/messages/conversation/" + props.conversationId, "MessagingApi") : [];
+      if (messages.length > 0) {
+        const peopleIds = ArrayHelper.getIds(messages, "personId");
+        const people = await ApiHelper.get("/people/basic?ids=" + peopleIds.join(","), "MembershipApi");
+        messages.forEach(n => {
+          n.person = ArrayHelper.getOne(people, "id", n.personId);
+        })
+      }
+      setMessages(messages);
+      setEditMessageId(null);
+      
+      // Mark as no longer initial load after first load
+      if (isInitialLoad) {
+        setIsInitialLoad(false);
+      }
+    } catch (error) {
+      console.error("❌ Failed to load messages for conversation:", props.conversationId, error);
+      // Don't clear messages on error - keep showing existing messages
+      // Only set isInitialLoad to false if this was the first load attempt
+      if (isInitialLoad) {
+        setIsInitialLoad(false);
+      }
     }
-    setMessages(messages);
-    setEditMessageId(null);
   };
 
   const getNotes = () => {
@@ -45,25 +99,110 @@ export function Notes(props: Props) {
 
   const getNotesWrapper = () => {
     const notes = getNotes();
-    if (props.maxHeight) return <div id="notesScroll" style={{maxHeight: props.maxHeight, overflowY: "scroll"}}>{notes}</div>
+    if (props.maxHeight) {
+      return (
+        <div 
+          id="notesScroll" 
+          style={{
+            flex: 1,
+            minHeight: 0,
+            overflowY: "auto",
+            overflowX: "hidden",
+            padding: "8px 12px",
+            scrollBehavior: "smooth",
+            height: "100%"
+          }}
+          className="notes-scroll-container"
+          data-testid="message-scroll-area"
+        >
+          <div style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px",
+            minHeight: "min-content"
+          }}>
+            {notes}
+          </div>
+        </div>
+      );
+    }
     else return notes;
   }
 
   React.useEffect(() => { loadNotes() }, [props.conversationId, props.refreshKey]); //eslint-disable-line
 
+  // Simply reload notes when refreshKey changes
+  // This is triggered by the parent component when WebSocket messages arrive
+
+  // Auto-scroll to bottom only when new messages are added (not on initial load)
   React.useEffect(() => {
-    if (props.maxHeight && messages?.length>0) {
-      setTimeout(() => {
-        const element = window?.document?.getElementById("notesScroll");
-        if (element) element.scrollTop = element.scrollHeight;
-      }, 100);
+    if (props.maxHeight && messages?.length > 0 && !isInitialLoad) {
+      const currentMessageCount = messages.length;
+      
+      // Only auto-scroll if messages were added
+      if (currentMessageCount > previousMessageCount) {
+        // Use requestAnimationFrame for smoother scrolling
+        requestAnimationFrame(() => {
+          const element = window?.document?.getElementById("notesScroll");
+          if (element) {
+            element.scrollTop = element.scrollHeight;
+          }
+        });
+      }
+      
+      setPreviousMessageCount(currentMessageCount);
+    } else if (messages?.length > 0 && isInitialLoad) {
+      // On initial load, just set the previous count without scrolling
+      setPreviousMessageCount(messages.length);
     }
-  }, [messages, props.maxHeight]);
+  }, [messages, props.maxHeight, isInitialLoad, previousMessageCount]);
 
-  let result = <>
-    {getNotesWrapper()}
-    {messages && (<AddNote context={props.context} conversationId={props.conversationId} onUpdate={loadNotes} createConversation={props.createConversation} messageId={editMessageId} />)}
-  </>
+  let result = props.maxHeight ? (
+    <div style={{ 
+      height: "100%", 
+      display: "flex", 
+      flexDirection: "column", 
+      overflow: "hidden",
+      minHeight: 0
+    }}>
+      {/* Messages area - scrollable */}
+      <div style={{ 
+        flex: 1, 
+        minHeight: 0, 
+        display: "flex", 
+        flexDirection: "column",
+        overflow: "hidden"
+      }}>
+        {getNotesWrapper()}
+      </div>
+      
+      {/* Input area - always visible at bottom */}
+      {messages && (
+        <div style={{ 
+          flexShrink: 0, 
+          borderTop: "1px solid #e0e0e0", 
+          backgroundColor: "#fafafa", 
+          padding: "12px",
+          minHeight: "auto",
+          maxHeight: "200px"
+        }}>
+          <AddNote 
+            context={props.context} 
+            conversationId={props.conversationId} 
+            onUpdate={loadNotes} 
+            createConversation={props.createConversation} 
+            messageId={editMessageId} 
+          />
+        </div>
+      )}
+    </div>
+  ) : (
+    <>
+      {getNotesWrapper()}
+      {messages && (<AddNote context={props.context} conversationId={props.conversationId} onUpdate={loadNotes} createConversation={props.createConversation} messageId={editMessageId} />)}
+    </>
+  );
+  
   if (props.noDisplayBox) return result;
-  else return (<DisplayBox id="notesBox" data-testid="notes-box" headerIcon="sticky_note_2" headerText={Locale.label("notes.notes")}>{result}</DisplayBox>);
+  else return (<DisplayBox id="notesBox" data-testid="notes-box" headerIcon="sticky_note_2" headerText={Locale.label("notes.notes", "Notes")}>{result}</DisplayBox>);
 };

package/src/components/wrapper/AppList.tsx

@@ -1,11 +1,8 @@
 "use client";
 
 import React from "react";
-import { ApiHelper } from "../../helpers/ApiHelper";
-import { UserHelper } from "../../helpers/UserHelper";
+import { ApiHelper, UserHelper, CommonEnvironmentHelper, LoginUserChurchInterface } from "@churchapps/helpers";
 import { NavItem } from "./NavItem";
-import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
-import { LoginUserChurchInterface } from "@churchapps/helpers";
 
 export interface Props { appName: string; currentUserChurch: LoginUserChurchInterface; onNavigate: (url: string) => void; }
 

package/src/components/wrapper/ChurchList.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import { LoginUserChurchInterface, UserContextInterface, ArrayHelper } from "@churchapps/helpers";
-import { ApiHelper } from "../../helpers/ApiHelper";
+import { ApiHelper } from "@churchapps/helpers";
 import { UserHelper } from "../../helpers/UserHelper";
 import { NavItem } from "./NavItem";
 import { Locale } from "../../helpers";
@@ -10,11 +10,45 @@ import { Locale } from "../../helpers";
 export interface Props { userChurches: LoginUserChurchInterface[], currentUserChurch: LoginUserChurchInterface, context: UserContextInterface, onDelete?: () => void }
 
 export const ChurchList: React.FC<Props> = props => {
-	const [userChurches, setUserChurches] = useState(UserHelper.userChurches.filter(uc => uc.apis.length > 0));
+	
+	const [userChurches, setUserChurches] = useState(() => {
+		try {
+			// Handle both array and single object cases
+			let churches = props.userChurches;
+			if (!Array.isArray(churches)) {
+				churches = churches ? [churches] : [];
+			}
+			return churches.filter(uc => uc && uc.apis && uc.apis.length > 0);
+		} catch (error) {
+			console.error('Error filtering userChurches:', error);
+			return [];
+		}
+	});
+	
+	// Update local state when props change
+	React.useEffect(() => {
+		try {
+			// Handle both array and single object cases
+			let churches = props.userChurches;
+			if (!Array.isArray(churches)) {
+				churches = churches ? [churches] : [];
+			}
+			setUserChurches(churches.filter(uc => uc && uc.apis && uc.apis.length > 0));
+		} catch (error) {
+			console.error('Error updating userChurches:', error);
+			setUserChurches([]);
+		}
+	}, [props.userChurches]);
 
 	const handleDelete = async (uc: LoginUserChurchInterface) => {
-		const label = Locale.label("wrapper.sureRemoveChurch").replace("{}", uc.church.name?.toUpperCase());
-		if (window.confirm(label)) {
+		// 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
@@ -24,6 +58,12 @@ export const ChurchList: React.FC<Props> = props => {
 		}
 	}
 
+	// 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;
@@ -35,7 +75,7 @@ export const ChurchList: React.FC<Props> = props => {
 			label={churchName || "Unknown"}
 			icon="church"
 			deleteIcon={uc.church.id !== props.currentUserChurch.church.id ? "delete" : null}
-			deleteLabel={Locale.label("wrapper.deleteChurch")}
+			deleteLabel={getLabel("wrapper.deleteChurch", "Delete")}
 			deleteFunction={() => { handleDelete(uc); }}
 		/>);
 	});

package/src/components/wrapper/NewPrivateMessage.tsx

@@ -1,11 +1,35 @@
 "use client";
 
-import { Button, TextField, TableRow, TableCell, Table, TableBody } from "@mui/material";
-import React, { useEffect } from "react";
+import { 
+  Button, 
+  TextField, 
+  Paper, 
+  Box, 
+  Typography, 
+  Stack, 
+  IconButton, 
+  List, 
+  ListItem, 
+  ListItemAvatar, 
+  ListItemText, 
+  ListItemButton,
+  InputAdornment,
+  Divider,
+  Skeleton,
+  Avatar,
+  useTheme
+} from "@mui/material";
+import { 
+  ArrowBack as ArrowBackIcon, 
+  Search as SearchIcon,
+  PersonSearch as PersonSearchIcon,
+  Chat as ChatIcon
+} from "@mui/icons-material";
+import React, { useEffect, useState } from "react";
 import { ApiHelper, Locale, PersonHelper } from "../../helpers";
 import { ConversationInterface, PersonInterface, PrivateMessageInterface, UserContextInterface } from "@churchapps/helpers";
 import { AddNote } from "../notes/AddNote";
-import { SmallButton } from "../SmallButton";
+import { PersonAvatar } from "../PersonAvatar";
 
 interface Props {
   context: UserContextInterface;
@@ -20,11 +44,6 @@ export const NewPrivateMessage: React.FC<Props> = (props) => {
   const [searchResults, setSearchResults] = React.useState([]);
   const [selectedPerson, setSelectedPerson] = React.useState<PersonInterface>(null);
 
-  const handleSubmit = (e: React.MouseEvent) => {
-    if (e !== null) e.preventDefault();
-    let term = escape(searchText.trim());
-    ApiHelper.get("/people/search?term=" + term, "MembershipApi").then(data => setSearchResults(data));
-  }
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchText(e.currentTarget.value);
@@ -51,24 +70,13 @@ export const NewPrivateMessage: React.FC<Props> = (props) => {
     setSelectedPerson(person);
   }
 
-  const getPeople = () => {
-    let result = [];
-    for (let i = 0; i < searchResults.length; i++) {
-      const p = searchResults[i];
-      result.push(<TableRow key={p.id}>
-        <TableCell><img src={PersonHelper.getPhotoUrl(p)} alt="avatar" /></TableCell>
-        <TableCell><a href="about:blank" onClick={(e) => { e.preventDefault(); handlePersonSelected(p) }}>{p.name.display}</a></TableCell>
-      </TableRow>);
-    }
-    return result;
-  }
 
   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"), visibility: "hidden" }
+    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 = {
@@ -86,34 +94,163 @@ export const NewPrivateMessage: React.FC<Props> = (props) => {
   }, [props.selectedPerson]);
 
 
+  const theme = useTheme();
+  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 (
-    <div style={{ paddingLeft: 10, paddingRight: 10 }}>
-      <span style={{ float: "right" }}>
-        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
-      </span>
-      <b>{Locale.label("wrapper.newPrivateMessage")}</b>
-      <div>{Locale.label("wrapper.searchForPerson")}</div>
-
-      <TextField fullWidth label="Name" id="searchText" data-testid="search-input" name="searchText" type="text" placeholder="Name" value={searchText} onChange={handleChange}
-        onKeyDown={(e) => {e.stopPropagation()}}
-        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-testid="search-button" onClick={handleSubmit}>{Locale.label("common.search")}</Button> }}
-      />
-      <br />
-      <Table id="smallPeopleTable" size="small">
-        <TableBody>{getPeople()}</TableBody>
-      </Table>
-    </div>
+    <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={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 (
-      <div style={{ paddingLeft: 10, paddingRight: 10 }}>
-        <span style={{ float: "right" }}>
-          <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
-        </span>
-        <b>{Locale.label("wrapper.newPrivateMessage")}</b>
-        <div>To: {selectedPerson.name.display}</div>
-        <AddNote context={props.context} conversationId={null} onUpdate={handleNoteAdded} createConversation={createConversation} />
-      </div>
+      <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>
     )
   }
 }