@churchapps/apphelper 0.4.17 → 0.4.19

package/src/components/wrapper/Notifications.tsx

@@ -1,8 +1,30 @@
 "use client";
 
 import React, { useState } from "react";
-import { ApiHelper } from "../../helpers/ApiHelper";
-import { Box, Icon, Stack } from "@mui/material";
+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";
 import { Navigate } from "react-router-dom";
@@ -16,10 +38,14 @@ interface Props {
 
 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();
   }
 
@@ -47,42 +73,152 @@ export const Notifications: React.FC<Props> = (props) => {
       props.onNavigate(path);
     }
     else {
-      console.log("REDIRECTING TO", appUrl + path)
       window.open(appUrl + path, "_blank");
     }
   }
 
-  const getMainLinks = () => {
-    let result: React.ReactElement[] = [];
-    notifications.forEach(notification => {
-      let datePosted = new Date(notification.timeSent);
-      const displayDuration = DateHelper.getDisplayDuration(datePosted);
+  const getNotificationIcon = (contentType: string) => {
+    switch (contentType) {
+      case "task": return <TaskIcon />;
+      case "assignment": return <AssignmentIcon />;
+      default: return <NotificationsIcon />;
+    }
+  }
 
-      result.push(
-        <div className="note" style={{ cursor: "pointer" }} onClick={(e) => { e.preventDefault(); }} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(notification); } }}>
-          <Box sx={{ width: "100%" }} className="note-contents">
-            <Stack direction="row" justifyContent="space-between">
-              <div style={{width:"100%"}} onClick={(e) => { e.preventDefault(); handleClick(notification); }} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(notification); } }} aria-label={`View notification: ${notification.message}`}>
-                <span className="text-grey" style={{float:"right"}}>{displayDuration}</span>
-                <p>
-                  <Icon>notifications</Icon> 
-                  {notification.message} 
-                  <span>{notification?.link ? <a href={notification.link} onClick={(e) => { e.stopPropagation() }} target="_blank">View Details</a> : null}</span>
-                </p>
-              </div>
-            </Stack>
-          </Box>
-        </div>
+  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 result;
+    }
+
+    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>
+    );
   }
 
-  React.useEffect(() => { console.log("RELOADED NOTIFICATIONS") }, []);
 
   return (
-    <>
-      {getMainLinks()}
-    </>
+    <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,27 +1,114 @@
 "use client";
 
 import React from "react";
-import { SmallButton } from "../SmallButton";
+import { 
+  Paper, 
+  Box, 
+  Typography, 
+  Stack, 
+  IconButton, 
+  Avatar,
+  Divider,
+  useTheme 
+} from "@mui/material";
+import { ArrowBack as ArrowBackIcon } from "@mui/icons-material";
 import { PrivateMessageInterface, UserContextInterface } from "@churchapps/helpers";
 import { Notes } from "../notes/Notes";
-import { Locale } from "../../helpers";
+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) => (
-  <>
-    <div style={{ paddingLeft: 10, paddingRight: 10, paddingBottom: 10 }}>
-      <span style={{ float: "right" }}>
-        <SmallButton icon="chevron_left" text="Back" onClick={props.onBack} />
-      </span>
-      {Locale.label("wrapper.chatWith")} {props.privateMessage.person.name.display}
-    </div>
-    <Notes maxHeight={"50vh"} context={props.context} conversationId={props.privateMessage.conversationId} noDisplayBox={true} refreshKey={props.refreshKey} />
-  </>
-);
+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>
+  );
+};