fix: fix bug with no refreshing date in chat on visibillity event

release-notes.md

@@ -5,11 +5,13 @@ All notable changes in this release are listed below.
 ## [Unreleased]
 
 ### New Features
+
 - Test screen for developers is now available [#815](https://github.com/Adamant-im/adamant-im/pull/815) — [@Linhead](https://github.com/Linhead)
 - Universal macOS build added [#840](https://github.com/Adamant-im/adamant-im/pull/840) — [@S-FrontendDev](https://github.com/S-FrontendDev)
 - Release notes file added [#853](https://github.com/Adamant-im/adamant-im/pull/853) — [@S-FrontendDev](https://github.com/S-FrontendDev)
 
 ### Improvements
+
 - APK name changed in GitHub workflow [#839](https://github.com/Adamant-im/adamant-im/pull/839) — [@S-FrontendDev](https://github.com/S-FrontendDev)
 - Wallets UI updated for better usability [#846](https://github.com/Adamant-im/adamant-im/pull/846) — [@Linhead](https://github.com/Linhead), [@adamant-al](https://github.com/adamant-al)
 - ESLint updated to improve code quality [#849](https://github.com/Adamant-im/adamant-im/pull/849) — [@graycraft](https://github.com/graycraft)
@@ -19,7 +21,9 @@ All notable changes in this release are listed below.
 - Updated wallets generating script [#864](https://github.com/Adamant-im/adamant-im/pull/864) — [@Linhead](https://github.com/Linhead)
 
 ### Bug Fixes
+
 - Transaction fee calculation for ETH & ERC20 fixed [#805](https://github.com/Adamant-im/adamant-im/pull/805) — [@Linhead](https://github.com/Linhead)
 - Layout issue on "Export keys" page fixed [#841](https://github.com/Adamant-im/adamant-im/pull/841) — [@kalpovskii](https://github.com/kalpovskii), [@adamant-al](https://github.com/adamant-al)
 - Add disabled input field in the Welcome to ADAMANT chat, impoved paddings [#842](https://github.com/Adamant-im/adamant-im/pull/842) — [@kalpovskii](https://github.com/kalpovskii)
 - Resolve source code issues with ESLint 9 [#852](https://github.com/Adamant-im/adamant-im/pull/852) — [@graycraft](https://github.com/graycraft)
+- Fix dates in chats not refreshing when day changes while app is in background [#863](https://github.com/Adamant-im/adamant-im/pull/863) — [@Linhead](https://github.com/Linhead)

src/components/Chat/Chat.vue

@@ -3,6 +3,7 @@
     <free-tokens-dialog v-model="isShowFreeTokensDialog" />
     <a-chat
       ref="chatRef"
+      :key="dateRefreshKey"
       :messages="groupedMessages"
       :show-new-chat-placeholder="showNewChatPlaceholder"
       :partners="partners"
@@ -339,6 +340,9 @@ const showSpinner = useChatsSpinner()
 
 const isMenuOpen = ref(false)
 
+const dateRefreshKey = ref(0)
+const lastVisibleDate = ref(new Date().toDateString())
+
 const attachments = useAttachments(props.partnerId)()
 const handleAttachments = (files: FileData[]) => {
   const maxFileSizeExceeded = files.some(({ file }) => file.size >= UPLOAD_MAX_FILE_SIZE)
@@ -561,7 +565,20 @@ onMounted(async () => {
     isScrolledToBottom.value = chatRef.value.isScrolledToBottom()
   })
   visibilityId.value = Visibility.change((event, state) => {
-    if (state === 'visible' && isScrolledToBottom.value) markAsRead()
+    if (state === 'visible') {
+      const currentDate = new Date().toDateString()
+
+      if (currentDate !== lastVisibleDate.value) {
+        dateRefreshKey.value = Date.now()
+        lastVisibleDate.value = currentDate
+      }
+
+      nextTick(() => {
+        chatRef.value?.maintainScrollPosition()
+      })
+
+      if (isScrolledToBottom.value) markAsRead()
+    }
   })
 
   const draftMessage = store.getters['draftMessage/draftReplyTold'](props.partnerId)

src/components/Chat/Chats.vue

@@ -39,6 +39,7 @@
         <template v-for="(transaction, index) in lastMessages" :key="transaction.contactId">
           <chat-preview
             v-if="displayChat(transaction.contactId)"
+            :key="dateRefreshKey"
             :ref="transaction.contactId"
             :is-loading-separator="index === separatorIndex"
             :is-loading-separator-active="loading && areAdmNodesOnline"
@@ -89,6 +90,7 @@ import { useChatsSpinner } from '@/hooks/useChatsSpinner'
 import { computedEager } from '@vueuse/core'
 import { NodeStatusResult } from '@/lib/nodes/abstract.node'
 import { isAllNodesOfflineError } from '@/lib/nodes/utils/errors'
+import Visibility from 'visibilityjs'
 
 const scrollOffset = 64
 
@@ -125,6 +127,10 @@ const loading = ref(false)
 const loadingSeparator = ref<InstanceType<typeof ChatPreview>[]>([])
 const allowRetry = ref(false)
 
+const dateRefreshKey = ref(0)
+const lastVisibleDate = ref(new Date().toDateString())
+const visibilityId = ref<number | boolean | null>(null)
+
 const noMoreChats = computedEager(() => store.getters['chat/chatListOffset'] === -1)
 const chatPagePartnerId = computed(() => {
   // We assume partnerId to always be a string
@@ -163,10 +169,12 @@ onDeactivated(() => {
 onMounted(() => {
   setShowChatStartDialog(props.showNewContact)
   attachScrollListener()
+  checkDate()
 })
 
 onBeforeUnmount(() => {
   destroyScrollListener()
+  Visibility.unbind(Number(visibilityId.value))
 })
 
 watch(chatPagePartnerId, (value) => {
@@ -285,6 +293,19 @@ const displayChat = (partnerId: string) => {
 const markAllAsRead = () => {
   store.commit('chat/markAllAsRead')
 }
+
+const checkDate = () => {
+  visibilityId.value = Visibility.change((event, state) => {
+    if (state === 'visible') {
+      const currentDate = new Date().toDateString()
+
+      if (currentDate !== lastVisibleDate.value) {
+        dateRefreshKey.value = Date.now()
+        lastVisibleDate.value = currentDate
+      }
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -334,7 +355,10 @@ const markAllAsRead = () => {
   &__messages {
     &.chats-view__messages--chat {
       @media (max-width: map.get(variables.$breakpoints, 'mobile')) {
-        max-height: calc(100vh - 56px - var(--v-layout-bottom) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
+        max-height: calc(
+          100vh -
+            56px - var(--v-layout-bottom) - env(safe-area-inset-bottom) - env(safe-area-inset-top)
+        );
       }
 
       max-height: calc(100vh - 56px - var(--v-layout-bottom));