Fixed missing live update and wrong tooltip id

nethesis · Aug 30, 2023 · 5b134bd · 5b134bd
1 parent c617db5
commit 5b134bd
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/components/history/UserCallStatusIcon.tsx b/components/history/UserCallStatusIcon.tsx
@@ -23,7 +23,7 @@ export const UserCallStatusIcon: FC<UserCallStatusIconProps> = ({ call }) => {
               <>
                 <FontAwesomeIcon
                   icon={faArrowLeft}
-                  className='tooltip-switchboard-incoming-answered mr-2 -rotate-45 h-5 w-3.5 text-green-600 dark:text-green-500'
+                  className='tooltip-incoming-answered mr-2 -rotate-45 h-5 w-3.5 text-green-600 dark:text-green-500'
                   aria-hidden='true'
                 />
                 <Tooltip anchorSelect='.tooltip-incoming-answered' place='left'>
@@ -34,7 +34,7 @@ export const UserCallStatusIcon: FC<UserCallStatusIconProps> = ({ call }) => {
               <>
                 <FontAwesomeIcon
                   icon={faMissed}
-                  className='tooltip-switchboard-incoming-missed mr-2 h-5 w-4 text-red-400'
+                  className='tooltip-incoming-missed mr-2 h-5 w-4 text-red-400'
                   aria-hidden='true'
                 />
                 <Tooltip anchorSelect='.tooltip-incoming-missed' place='left'>
@@ -50,7 +50,7 @@ export const UserCallStatusIcon: FC<UserCallStatusIconProps> = ({ call }) => {
               <>
                 <FontAwesomeIcon
                   icon={faArrowLeft}
-                  className='tooltip-switchboard-outgoing-answered mr-2 h-5 w-3.5 rotate-[135deg] text-green-600 dark:text-green-500'
+                  className='tooltip-outgoing-answered mr-2 h-5 w-3.5 rotate-[135deg] text-green-600 dark:text-green-500'
                   aria-hidden='true'
                 />
                 <Tooltip anchorSelect='.tooltip-outgoing-answered' place='left'>
@@ -61,7 +61,7 @@ export const UserCallStatusIcon: FC<UserCallStatusIconProps> = ({ call }) => {
               <>
                 <FontAwesomeIcon
                   icon={faXmark}
-                  className='tooltip-switchboard-outgoing-missed mr-2 h-5 w-3.5 text-red-400'
+                  className='tooltip-outgoing-missed mr-2 h-5 w-3.5 text-red-400'
                   aria-hidden='true'
                 />
                 <Tooltip anchorSelect='.tooltip-outgoing-missed' place='left'>

diff --git a/components/layout/UserLastCalls.tsx b/components/layout/UserLastCalls.tsx
@@ -19,6 +19,8 @@ import { CallsDestination } from '../history/CallsDestination'
 import { CallsSource } from '../history/CallsSource'
 import { getJSONItem, setJSONItem } from '../../lib/storage'
 import { StatusTypes } from '../../theme/Types'
+import { useEventListener } from '../../lib/hooks/useEventListener'
+import { isEmpty } from 'lodash'
 
 interface LastCallTypes extends CallTypes {
   avatar?: string
@@ -29,6 +31,8 @@ type LastCallsTypes = LastCallTypes[]
 
 export const UserLastCalls = () => {
   const { t } = useTranslation()
+  const authStore = useSelector((state: RootState) => state.authentication)
+  const currentUsername = authStore.username
   const operators = useSelector((state: RootState) => state.operators.operators)
   const username = useSelector((state: RootState) => state.user.username)
   const [lastCalls, setLastCalls] = useState<LastCallsTypes>()
@@ -94,19 +98,21 @@ export const UserLastCalls = () => {
       firstLoadedRef.current = true
       setIsLoading(true)
       getLastCallsList(sort)
-
-      // Set the interval for update
-      updateIntervalId.current = setInterval(() => {
-        getLastCallsList(sort)
-      }, 1000 * 10)
     }
 
     return () => {
-      updateIntervalId.current && !firstLoadedRef.current && clearInterval(updateIntervalId.current)
+      !firstLoadedRef.current
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [username])
 
+  useEventListener('phone-island-conversations', (data) => {
+    if (isEmpty(data[currentUsername]?.conversations)) {
+      // setIsLoading(true)
+      getLastCallsList(sort)
+    }
+  })
+
   return (
     <>
       {/* Secondary column (hidden on smaller screens) */}

diff --git a/components/layout/UserNavBar.tsx b/components/layout/UserNavBar.tsx
@@ -104,15 +104,15 @@ export const UserNavBar: FC = () => {
                 ? 'bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-50'
                 : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50'
             } hover:bg-gray-100 hover:dark:bg-gray-700 w-8 h-8 rounded flex justify-center items-center relative cursor-pointer`}
-            data-tooltip-id={'tooltip'}
+            data-tooltip-id={'tooltip-side-menu'}
             data-tooltip-content={tab.label}
           >
             <FontAwesomeIcon size='lg' icon={tab.icon} />
             {tab.active && <div style={activeStyles} className='bg-primary' />}
           </div>
         ))}
       </div>
-      <Tooltip id='tooltip' place='left' />
+      <Tooltip id='tooltip-side-menu' place='left' />
     </>
   )
 }