From d59b2982a11f35ed11c80e2dadce0dd54a8320b9 Mon Sep 17 00:00:00 2001
From: Dylan <36567925+Airyzz@users.noreply.github.com>
Date: Sun, 4 Sep 2022 18:54:39 +0930
Subject: [PATCH] Made display time update every 20 seconds

---
 src/app/organisms/room/RoomBanner.jsx | 49 +++++++++++++++------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/app/organisms/room/RoomBanner.jsx b/src/app/organisms/room/RoomBanner.jsx
index 8c2f72f0..32e10443 100644
--- a/src/app/organisms/room/RoomBanner.jsx
+++ b/src/app/organisms/room/RoomBanner.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
@@ -17,36 +17,43 @@ function RoomBanner({ roomId }) {
   const isDM = initMatrix.roomList.directs.has(roomId);
   const room = mx.getRoom(roomId);
 
-  let partnerLocalTime = null;
+  const [time, setTime] = useState(null);
+
   let partner = null;
 
-  if (isDM) {
-    partner = room.getAvatarFallbackMember();
-    const timezone = room.currentState.getStateEvents('in.cinny.share_timezone', partner.userId)?.event?.content?.user_timezone;
-    const date = new Date();
+  const updateTime = () => {
+    if (isDM) {
+      partner = room.getAvatarFallbackMember();
+      const timezone = room.currentState.getStateEvents('in.cinny.share_timezone', partner.userId)?.event?.content?.user_timezone;
+      const date = new Date();
 
-    try {
-      partnerLocalTime = date.toLocaleTimeString([], { timeZone: timezone, hour: '2-digit', minute: '2-digit' });
-      const userTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-
-      // if the partner time and user time are the same, its not worth showing
-      if (userTime === partnerLocalTime) { partnerLocalTime = null; }
-    } catch {
-      partnerLocalTime = null;
+      try {
+        const partnerLocalTime = date.toLocaleTimeString([], { timeZone: timezone, hour: '2-digit', minute: '2-digit' });
+        const userTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        // if the partner time and user time are the same, we wont show the time
+        if (userTime !== partnerLocalTime) { setTime(`${getUsernameOfRoomMember(partner)}'s local time is: ${partnerLocalTime}`); }
+      } catch {
+        setTime(null);
+      }
     }
-  }
+  };
+
+  useEffect(() => {
+    updateTime();
+    const interval = setInterval(() => updateTime(), 20000);
+    return () => {
+      setTime(null);
+      clearInterval(interval);
+    };
+  }, [room]);
 
   return (
     <div>
-      { isDM && partnerLocalTime ? (
+      { time ? (
         <div className="room-view__banner">
           <RawIcon src={RecentClockIC} size="small" />
           <Text>
-            <b>{ twemojify(getUsernameOfRoomMember(partner)) }</b>
-            {'\'s local time is: '}
-            <b>
-              {partnerLocalTime}
-            </b>
+            { twemojify(time) }
           </Text>
         </div>
       )