commit 9e542ca25c241570ebd36b15b2b4a56c08b512c3
author idillon <io.daza-dillon@savoirfairelinux.com> Thu Dec 15 17:54:07 2022 -0500
committer idillon <io.daza-dillon@savoirfairelinux.com> Mon Dec 19 17:27:07 2022 -0500
tree b1151613d961e343d5584e9c39575e9f3e1f94c1
parent b0ec86a76d08f631e33b5ec796fdf7e8c2953ae0

Improve styles for ConversationListItem

- Display last message
- Fix user talking to themself

Change-Id: Ia5bb3f9cd86a389f94bbfb3e279e7a82878f98ed

client/src/components/ConversationListItem.tsx

diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationListItem.tsx
index 710fe0b..985ee2c 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationListItem.tsx
@@ -15,7 +15,8 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import { Box, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
+import { Box, ListItemButton, Stack, Typography } from '@mui/material';
+import dayjs from 'dayjs';
 import { IConversationSummary } from 'jami-web-common';
 import { QRCodeCanvas } from 'qrcode.react';
 import { useCallback, useContext, useMemo, useState } from 'react';
@@ -29,6 +30,8 @@
 import { setRefreshFromSlice } from '../redux/appSlice';
 import { useAppDispatch } from '../redux/hooks';
 import { ConversationRouteParams } from '../router';
+import { getMessageCallText, getMessageMemberText } from '../utils/chatmessages';
+import { formatRelativeDate, formatTime } from '../utils/dates&times';
 import ContextMenu, { ContextMenuHandler, useContextMenuHandler } from './ContextMenu';
 import ConversationAvatar from './ConversationAvatar';
 import { ConfirmationDialog, DialogContentList, InfosDialog, useDialogHandler } from './Dialog';
@@ -40,13 +43,14 @@
 };
 
 export default function ConversationListItem({ conversationSummary }: ConversationListItemProps) {
+  const { account } = useAuthContext();
   const {
     urlParams: { conversationId: selectedConversationId },
   } = useUrlParams<ConversationRouteParams>();
   const contextMenuHandler = useContextMenuHandler();
   const callContext = useCallContext(true);
   const { callData } = useContext(CallManagerContext);
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const navigate = useNavigate();
 
   const conversationId = conversationSummary.id;
@@ -58,9 +62,41 @@
     }
   }, [navigate, conversationId]);
 
-  const secondaryText = useMemo(() => {
+  const timeIndicator = useMemo(() => {
+    const message = conversationSummary.lastMessage;
+    const time = dayjs.unix(Number(message.timestamp));
+    if (time.isToday()) {
+      return formatTime(time, i18n);
+    } else {
+      return formatRelativeDate(time, i18n);
+    }
+  }, [conversationSummary, i18n]);
+
+  const lastMessageText = useMemo(() => {
     if (!callContext || !callData || callData.conversationId !== conversationSummary.id) {
-      return conversationSummary.lastMessage.body;
+      const message = conversationSummary.lastMessage;
+      switch (message.type) {
+        case 'initial': {
+          return t('message_swarm_created');
+        }
+        case 'application/data-transfer+json': {
+          return message.fileId;
+        }
+        case 'application/call-history+json': {
+          const isAccountMessage = message.author === account.getUri();
+          return getMessageCallText(isAccountMessage, message, i18n);
+        }
+        case 'member': {
+          return getMessageMemberText(message, i18n);
+        }
+        case 'text/plain': {
+          return message.body;
+        }
+        default: {
+          console.error(`${ConversationListItem.name} received an unexpected lastMessage type: ${message.type}`);
+          return '';
+        }
+      }
     }
 
     if (callContext.callStatus === CallStatus.InCall) {
@@ -72,11 +108,11 @@
     }
 
     return callContext.callRole === 'caller' ? t('outgoing_call') : t('incoming_call');
-  }, [conversationSummary, callContext, callData, t]);
+  }, [account, conversationSummary, callContext, callData, t, i18n]);
 
   const conversationName = useMemo(
-    () => conversationSummary.title ?? conversationSummary.membersNames.join(', '),
-    [conversationSummary]
+    () => conversationSummary.title || conversationSummary.membersNames.join(', ') || account.getDisplayName(),
+    [account, conversationSummary]
   );
 
   return (
@@ -88,18 +124,20 @@
         isSelected={isSelected}
         contextMenuProps={contextMenuHandler.props}
       />
-      <ListItem
-        button
-        alignItems="flex-start"
-        selected={isSelected}
-        onClick={onClick}
-        onContextMenu={contextMenuHandler.handleAnchorPosition}
-      >
-        <ListItemAvatar>
+      <ListItemButton alignItems="flex-start" selected={isSelected} onClick={onClick}>
+        <Stack direction="row" spacing="10px">
           <ConversationAvatar displayName={conversationName} />
-        </ListItemAvatar>
-        <ListItemText primary={conversationName} secondary={secondaryText} />
-      </ListItem>
+          <Stack>
+            <Typography variant="body1">{conversationName}</Typography>
+            <Stack direction="row" spacing="5px">
+              <Typography variant="body2" fontWeight={isSelected ? 'bold' : 'normal'}>
+                {timeIndicator}
+              </Typography>
+              <Typography variant="body2">{lastMessageText}</Typography>
+            </Stack>
+          </Stack>
+        </Stack>
+      </ListItemButton>
     </Box>
   );
 }