@churchapps/apphelper 0.4.50 → 0.5.0

package/src/components/wrapper/Notifications.tsx

@@ -1,223 +1,223 @@
-"use client";
-
-import React, { useState } from "react";
-import { ApiHelper } from "@churchapps/helpers";
-import { 
-  Box, 
-  Icon, 
-  Stack, 
-  Typography, 
-  Paper, 
-  List, 
-  ListItem, 
-  ListItemAvatar, 
-  ListItemText, 
-  Avatar, 
-  Chip, 
-  Divider, 
-  IconButton, 
-  Skeleton, 
-  useTheme 
-} 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 theme = useTheme();
-
-  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 "chums": return "https://app.chums.org";
-      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 = "chums"; 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={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>
-  );
-};
+"use client";
+
+import React, { useState } from "react";
+import { ApiHelper } from "@churchapps/helpers";
+import { 
+  Box, 
+  Icon, 
+  Stack, 
+  Typography, 
+  Paper, 
+  List, 
+  ListItem, 
+  ListItemAvatar, 
+  ListItemText, 
+  Avatar, 
+  Chip, 
+  Divider, 
+  IconButton, 
+  Skeleton, 
+  useTheme 
+} 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 theme = useTheme();
+
+  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 "chums": return "https://app.chums.org";
+      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 = "chums"; 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={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>
+  );
+};

package/src/components/wrapper/PrivateMessageDetails.tsx

@@ -1,112 +1,112 @@
-"use client";
-
-import React from "react";
-import { 
-  Paper, 
-  Box, 
-  Typography, 
-  Stack, 
-  IconButton, 
-  useTheme 
-} from "@mui/material";
-import { ArrowBack as ArrowBackIcon } from "@mui/icons-material";
-import { PrivateMessageInterface, UserContextInterface } from "@churchapps/helpers";
-import { Notes } from "../notes/Notes";
-import { ApiHelper, Locale, NotificationService } from "../../helpers";
-import { PersonAvatar } from "../PersonAvatar";
-
-interface Props {
-  context: UserContextInterface;
-  privateMessage: PrivateMessageInterface;
-  onBack: () => void
-  refreshKey: number;
-  onMessageRead?: () => void;
-}
-
-export const PrivateMessageDetails: React.FC<Props> = (props) => {
-  const theme = useTheme();
-  
-  // Clear notification when conversation is opened
-  React.useEffect(() => {
-    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();
-          }
-        } catch (error) {
-          console.error("Failed to clear notification:", error);
-        }
-      }
-    };
-    
-    clearNotification();
-  }, [props.privateMessage.id, props.privateMessage.notifyPersonId, props.context.person.id]);
-  
-  return (
-    <Paper elevation={0} sx={{ 
-      height: '100%', 
-      display: 'flex', 
-      flexDirection: 'column', 
-      overflow: 'hidden',
-      position: 'relative'
-    }}>
-      {/* Fixed Header - Always visible */}
-      <Box sx={{ 
-        p: 2, 
-        borderBottom: 1, 
-        borderColor: 'divider',
-        flexShrink: 0,
-        backgroundColor: 'background.paper',
-        zIndex: 1
-      }}>
-        <Stack direction="row" alignItems="center" spacing={2}>
-          <IconButton onClick={props.onBack}>
-            <ArrowBackIcon />
-          </IconButton>
-          <Stack direction="row" spacing={2} alignItems="center" sx={{ flex: 1 }}>
-            <PersonAvatar person={props.privateMessage.person} size="small" />
-            <Box>
-              <Typography variant="h6" component="h2">
-                {props.privateMessage.person.name.display}
-              </Typography>
-              <Typography variant="caption" color="textSecondary">
-                {Locale.label("wrapper.privateConversation", "Private Conversation")}
-              </Typography>
-            </Box>
-          </Stack>
-        </Stack>
-      </Box>
-      
-      {/* Chat area - Scrollable content */}
-      <Box sx={{ 
-        flex: 1, 
-        display: 'flex', 
-        flexDirection: 'column',
-        minHeight: 0,
-        overflow: 'hidden'
-      }}>
-        <Notes 
-          maxHeight="100%" 
-          context={props.context} 
-          conversationId={props.privateMessage.conversationId} 
-          noDisplayBox={true} 
-          refreshKey={props.refreshKey} 
-        />
-      </Box>
-    </Paper>
-  );
-};
-
+"use client";
+
+import React from "react";
+import { 
+  Paper, 
+  Box, 
+  Typography, 
+  Stack, 
+  IconButton, 
+  useTheme 
+} from "@mui/material";
+import { ArrowBack as ArrowBackIcon } from "@mui/icons-material";
+import { PrivateMessageInterface, UserContextInterface } from "@churchapps/helpers";
+import { Notes } from "../notes/Notes";
+import { ApiHelper, Locale, NotificationService } from "../../helpers";
+import { PersonAvatar } from "../PersonAvatar";
+
+interface Props {
+  context: UserContextInterface;
+  privateMessage: PrivateMessageInterface;
+  onBack: () => void
+  refreshKey: number;
+  onMessageRead?: () => void;
+}
+
+export const PrivateMessageDetails: React.FC<Props> = (props) => {
+  const theme = useTheme();
+  
+  // Clear notification when conversation is opened
+  React.useEffect(() => {
+    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();
+          }
+        } catch (error) {
+          console.error("Failed to clear notification:", error);
+        }
+      }
+    };
+    
+    clearNotification();
+  }, [props.privateMessage.id, props.privateMessage.notifyPersonId, props.context.person.id]);
+  
+  return (
+    <Paper elevation={0} sx={{ 
+      height: '100%', 
+      display: 'flex', 
+      flexDirection: 'column', 
+      overflow: 'hidden',
+      position: 'relative'
+    }}>
+      {/* Fixed Header - Always visible */}
+      <Box sx={{ 
+        p: 2, 
+        borderBottom: 1, 
+        borderColor: 'divider',
+        flexShrink: 0,
+        backgroundColor: 'background.paper',
+        zIndex: 1
+      }}>
+        <Stack direction="row" alignItems="center" spacing={2}>
+          <IconButton onClick={props.onBack}>
+            <ArrowBackIcon />
+          </IconButton>
+          <Stack direction="row" spacing={2} alignItems="center" sx={{ flex: 1 }}>
+            <PersonAvatar person={props.privateMessage.person} size="small" />
+            <Box>
+              <Typography variant="h6" component="h2">
+                {props.privateMessage.person.name.display}
+              </Typography>
+              <Typography variant="caption" color="textSecondary">
+                {Locale.label("wrapper.privateConversation", "Private Conversation")}
+              </Typography>
+            </Box>
+          </Stack>
+        </Stack>
+      </Box>
+      
+      {/* Chat area - Scrollable content */}
+      <Box sx={{ 
+        flex: 1, 
+        display: 'flex', 
+        flexDirection: 'column',
+        minHeight: 0,
+        overflow: 'hidden'
+      }}>
+        <Notes 
+          maxHeight="100%" 
+          context={props.context} 
+          conversationId={props.privateMessage.conversationId} 
+          noDisplayBox={true} 
+          refreshKey={props.refreshKey} 
+        />
+      </Box>
+    </Paper>
+  );
+};
+