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/pages/CallInterface.tsx

diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index b535b25..2425b52 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -16,6 +16,8 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { Box, Card, Grid, Stack, Typography } from '@mui/material';
+import dayjs from 'dayjs';
+import { Duration } from 'dayjs/plugin/duration';
 import {
   ComponentType,
   Fragment,
@@ -49,6 +51,7 @@
 import { CallStatus, useCallContext, VideoStatus } from '../contexts/CallProvider';
 import { useConversationContext } from '../contexts/ConversationProvider';
 import { useWebRtcContext } from '../contexts/WebRtcProvider';
+import { formatCallDuration } from '../utils/dates&times';
 import { VideoElementWithSinkId } from '../utils/utils';
 import { CallPending } from './CallPending';
 import CallPermissionDenied from './CallPermissionDenied';
@@ -151,38 +154,23 @@
   );
 };
 
-const formatElapsedSeconds = (elapsedSeconds: number): string => {
-  const seconds = Math.floor(elapsedSeconds % 60);
-  elapsedSeconds = Math.floor(elapsedSeconds / 60);
-  const minutes = elapsedSeconds % 60;
-  elapsedSeconds = Math.floor(elapsedSeconds / 60);
-  const hours = elapsedSeconds % 24;
-
-  const times: string[] = [];
-  if (hours > 0) {
-    times.push(hours.toString().padStart(2, '0'));
-  }
-  times.push(minutes.toString().padStart(2, '0'));
-  times.push(seconds.toString().padStart(2, '0'));
-
-  return times.join(':');
-};
-
 const CallInterfaceInformation = () => {
   const { callStartTime } = useCallContext();
   const { conversationDisplayName } = useConversationContext();
-  const [elapsedTime, setElapsedTime] = useState(callStartTime ? (Date.now() - callStartTime) / 1000 : 0);
+  const [elapsedTime, setElapsedTime] = useState<Duration>(
+    dayjs.duration(callStartTime ? Date.now() - callStartTime : 0)
+  );
 
   useEffect(() => {
     if (callStartTime) {
       const interval = setInterval(() => {
-        setElapsedTime((Date.now() - callStartTime) / 1000);
+        setElapsedTime(dayjs.duration(Date.now() - callStartTime));
       }, 1000);
       return () => clearInterval(interval);
     }
   }, [callStartTime]);
 
-  const elapsedTimerString = formatElapsedSeconds(elapsedTime);
+  const elapsedTimerString = formatCallDuration(elapsedTime);
 
   return (
     <Stack direction="row" justifyContent="space-between" alignItems="center">