fix(textile): catch textile errors during registration and show error…

… popup
Satellite-im · May 10, 2022 · 271827e · 271827e
1 parent 29f80ab
commit 271827e
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 45 deletions.
diff --git a/components/ui/Popups/ErrorNetwork/ErrorNetwork.html b/components/ui/Popups/ErrorNetwork/ErrorNetwork.html
@@ -8,7 +8,7 @@
         :size="6"
         class="subtitle"
       />
-      <InteractablesButton type="primary" class="action" :action="action">
+      <InteractablesButton type="primary" class="action" :action="tryAgain">
         <refresh-cw-icon size="1.5x" />
         <TypographyText
           :text="$t('popups.error_network.action')"

diff --git a/components/ui/Popups/ErrorNetwork/ErrorNetwork.vue b/components/ui/Popups/ErrorNetwork/ErrorNetwork.vue
@@ -17,11 +17,26 @@ export default Vue.extend({
   components: {
     RefreshCwIcon,
   },
-  props: {
-    action: {
-      type: Function,
-      default: () => {},
-      required: true,
+  methods: {
+    /**
+     * @method toggleNetworkErrorPopup
+     * @description
+     * @example
+     */
+    closeNetworkErrorPopup() {
+      this.$store.commit('ui/toggleErrorNetworkModal', {
+        state: false,
+        action: null,
+      })
+    },
+    /**
+     * @method tryAgain
+     * @description
+     * @example
+     */
+    tryAgain() {
+      this.$store.state.ui.modals.errorNetwork.action()
+      this.closeNetworkErrorPopup()
     },
   },
 })

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,5 +1,8 @@
 <template>
   <div id="app" :class="$store.state.ui.theme.base.class">
+    <UiModal v-if="$store.state.ui.modals.errorNetwork.isOpen" nopad>
+      <UiPopupsErrorNetwork />
+    </UiModal>
     <Nuxt />
     <!-- Sets the global css variable for the theme flair color -->
     <v-style>

diff --git a/pages/auth/register/index.vue b/pages/auth/register/index.vue
@@ -48,11 +48,18 @@ export default Vue.extend({
   },
   methods: {
     async confirm(userData: UserRegistrationData) {
-      this.$store.dispatch('accounts/registerUser', {
-        name: userData.username,
-        image: userData.photoHash,
-        status: userData.status,
-      })
+      try {
+        await this.$store.dispatch('accounts/registerUser', {
+          name: userData.username,
+          image: userData.photoHash,
+          status: userData.status,
+        })
+      } catch (error: any) {
+        this.$store.commit('ui/toggleErrorNetworkModal', {
+          state: true,
+          action: () => this.confirm(userData),
+        })
+      }
     },
   },
 })

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,12 +1,5 @@
 <template>
   <div class="container">
-    <UiModal
-      v-if="$store.state.ui.modals.errorNetwork"
-      v-click-outside="() => toggleNetworkErrorPopup()"
-      nopad
-    >
-      <UiPopupsErrorNetwork :action="tryAgain" />
-    </UiModal>
     <UiLoadersPageLoader
       :is-loading="true"
       :title="$t('pages.loading.loading')"
@@ -86,34 +79,12 @@ export default Vue.extend({
           return
         }
 
-        this.$store.commit('ui/toggleModal', {
-          name: 'errorNetwork',
+        this.$store.commit('ui/toggleErrorNetworkModal', {
           state: true,
+          action: this.loadAccount,
         })
       }
     },
-    /**
-     * @method toggleNetworkErrorPopup
-     * @description
-     * @example
-     */
-    toggleNetworkErrorPopup() {
-      const modalName = 'errorNetwork'
-
-      this.$store.commit('ui/toggleModal', {
-        name: modalName,
-        state: !this.$store.state.ui.modals[modalName],
-      })
-    },
-    /**
-     * @method tryAgain
-     * @description
-     * @example
-     */
-    tryAgain() {
-      this.toggleNetworkErrorPopup()
-      this.loadAccount()
-    },
   },
 })
 </script>

diff --git a/store/ui/__snapshots__/state.test.ts.snap b/store/ui/__snapshots__/state.test.ts.snap
@@ -54,7 +54,10 @@ Object {
     "creategroup": false,
     "crop": false,
     "error": false,
-    "errorNetwork": false,
+    "errorNetwork": Object {
+      "action": null,
+      "isOpen": false,
+    },
     "glyph": false,
     "groupInvite": Object {
       "isOpen": false,

diff --git a/store/ui/mutations.ts b/store/ui/mutations.ts
@@ -103,6 +103,13 @@ export default {
     // @ts-ignore
     state.modals[modal.name] = modal.state
   },
+  toggleErrorNetworkModal(
+    state: UIState,
+    modal: { state: boolean; action: Function | null },
+  ) {
+    // @ts-ignore
+    state.modals.errorNetwork = { isOpen: modal.state, action: modal.action }
+  },
   setGlyphModalPack(state: UIState, pack: string) {
     state.glyphModalPack = pack
   },

diff --git a/store/ui/state.ts b/store/ui/state.ts
@@ -37,7 +37,7 @@ const InitialUIState = (): UIState => ({
     callToAction: false,
     renameFile: false,
     crop: false,
-    errorNetwork: false,
+    errorNetwork: { isOpen: false, action: null },
   },
   glyphModalPack: '',
   chatbarContent: '',

diff --git a/store/ui/types.ts b/store/ui/types.ts
@@ -170,7 +170,7 @@ export interface UIState {
   showSearchResult: boolean
   showSidebar: boolean
   modals: {
-    [key: string]: boolean
+    [key: string]: boolean | object
   }
   glyphModalPack: string
   chatbarContent: string