fix(NodesOfflineDialog): display only once

src/components/NodesOfflineDialog.vue

@@ -16,6 +16,7 @@
 
       <v-col cols="12" :class="[`${className}__btn-block`, 'text-center']">
         <v-btn
+          @click="showDialog = false"
           :class="[`${className}__btn-free-tokens`, 'a-btn-primary']"
           to="/options/nodes"
           variant="text"
@@ -31,11 +32,10 @@
 </template>
 
 <script lang="ts">
-import { NodeStatusResult } from '@/lib/nodes/abstract.node'
-import { computed, PropType, ref, watch } from 'vue'
-import { NodeType } from '@/lib/nodes/types'
+import { computed, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
+import { NodeType } from '@/lib/nodes/types'
 
 const className = 'all-nodes-disabled-dialog'
 const classes = {
@@ -54,44 +54,18 @@ export default {
     const { t } = useI18n()
     const store = useStore()
 
-    const showDialog = ref(false)
-
-    const nodes = computed<NodeStatusResult[]>(() => store.getters['nodes/adm'])
-    const isOnline = computed<boolean>(() => store.getters['isOnline'])
-    const className = 'nodes-offline-dialog'
-
-    const offlineNodesStatus = computed(() => {
-      return {
-        allOffline: nodes.value.every(
-          (node) =>
-            !(
-              node.online &&
-              node.active &&
-              !node.outOfSync &&
-              node.hasMinNodeVersion &&
-              node.hasSupportedProtocol
-            )
-        ),
-        hasDisabled: nodes.value.some((node) => !node.active)
-      }
-    })
-
-    watch(
-      offlineNodesStatus,
-      (value) => {
-        showDialog.value = value.allOffline && value.hasDisabled && isOnline.value
+    const showDialog = computed({
+      get() {
+        return store.state.chat.noActiveNodesDialog
       },
-      {
-        deep: true,
-        immediate: true
+      set() {
+        store.commit('chat/setNoActiveNodesDialog', false)
       }
-    )
+    })
 
     return {
       t,
-      nodes,
       classes,
-      offlineNodesStatus,
       showDialog,
       className
     }

src/store/modules/chat/index.js

@@ -22,6 +22,7 @@ import { replyMessageAsset } from '@/lib/adamant-api/asset'
 import { vibrate } from '@/lib/vibrate'
 
 import { generateAdamantChats } from './utils/generateAdamantChats'
+import { isAllNodesDisabledError, isAllNodesOfflineError } from '@/lib/nodes/utils/errors'
 
 export let interval
 
@@ -55,7 +56,8 @@ const state = () => ({
   isFulfilled: false, // false - getChats did not start or in progress, true - getChats finished
   offset: 0, // for loading chat list with pagination. -1 if all of chats loaded
   animateIncomingReaction: false, // `true` - animate incoming last reaction
-  animateOutgoingReaction: false // `true` - animate outgoing last reaction
+  animateOutgoingReaction: false, // `true` - animate outgoing last reaction
+  noActiveNodesDialog: undefined // true - visible dialog, false - hidden dialog, but shown before, undefined - not shown
 })
 
 const getters = {
@@ -511,6 +513,14 @@ const mutations = {
     state.animateIncomingReaction = value
   },
 
+  setNoActiveNodesDialog(state, value) {
+    if (state.noActiveNodesDialog === false) {
+      return // do not show dialog again
+    }
+
+    state.noActiveNodesDialog = value
+  },
+
   reset(state) {
     state.chats = {}
     state.lastMessageHeight = 0
@@ -530,18 +540,26 @@ const actions = {
   loadChats({ commit, dispatch, rootState }, { perPage = 25 } = {}) {
     commit('setFulfilled', false)
 
-    return admApi.getChatRooms(rootState.address).then((result) => {
-      const { messages, lastMessageHeight } = result
+    return admApi
+      .getChatRooms(rootState.address)
+      .then((result) => {
+        const { messages, lastMessageHeight } = result
 
-      dispatch('pushMessages', messages)
+        dispatch('pushMessages', messages)
 
-      if (lastMessageHeight > 0) {
-        commit('setHeight', lastMessageHeight)
-        commit('setOffset', perPage)
-      }
+        if (lastMessageHeight > 0) {
+          commit('setHeight', lastMessageHeight)
+          commit('setOffset', perPage)
+        }
 
-      commit('setFulfilled', true)
-    })
+        commit('setFulfilled', true)
+      })
+      .catch((err) => {
+        if (isAllNodesDisabledError(err) || isAllNodesOfflineError(err)) {
+          commit('setNoActiveNodesDialog', true)
+          setTimeout(() => dispatch('loadChats'), 5000) // retry in 5 seconds
+        }
+      })
   },
 
   loadChatsPaged({ commit, dispatch, rootState, state }, { perPage = 25 } = {}) {
@@ -593,6 +611,12 @@ const actions = {
           commit('setChatPage', { contactId, page: ++page })
         }
       })
+      .catch((err) => {
+        if (isAllNodesDisabledError(err) || isAllNodesOfflineError(err)) {
+          commit('setNoActiveNodesDialog', true)
+        }
+        throw err
+      })
   },
 
   /**

src/views/Chats.vue

@@ -59,13 +59,16 @@
       @error="onError"
       @start-chat="openChat"
     />
+
+    <NodesOfflineDialog node-type="adm" />
   </v-row>
 </template>
 
 <script>
 import ChatPreview from '@/components/ChatPreview.vue'
 import ChatStartDialog from '@/components/ChatStartDialog.vue'
 import ChatSpinner from '@/components/ChatSpinner.vue'
+import NodesOfflineDialog from '@/components/NodesOfflineDialog.vue'
 import scrollPosition from '@/mixins/scrollPosition'
 import { getAdamantChatMeta, isAdamantChat, isStaticChat } from '@/lib/chat/meta/utils'
 
@@ -75,7 +78,8 @@ export default {
   components: {
     ChatPreview,
     ChatStartDialog,
-    ChatSpinner
+    ChatSpinner,
+    NodesOfflineDialog
   },
   mixins: [scrollPosition],
   props: {