Переглянути джерело

refactor(snackbar): замена использования snackbar на $snackbar в компонентах и API

horanchikk 4 місяців тому
батько
коміт
e477d99c57
4 змінених файлів з 33 додано та 13 видалено
  1. 2 3
      pages/about.vue
  2. 7 3
      pages/components.vue
  3. 15 0
      plugins/snackbar.client.ts
  4. 9 7
      repository/api.ts

+ 2 - 3
pages/about.vue

@@ -50,17 +50,16 @@ import { useOTAStore } from '~/store/useOTAStore'
 import { ref } from 'vue'
 import { useOTA } from '~/composables/useOTA'
 
-const { $config: { public: { APP_VERSION } } } = useNuxtApp()
+const { $config: { public: { APP_VERSION } }, $snackbar } = useNuxtApp()
 const otaStore = useOTAStore()
 const isLoading = ref(false)
-const snackbar = useSnackbar()
 
 async function checkUpdates() {
     isLoading.value = true
     const { needsUpdate } = await useOTA()
     const updateInfo = needsUpdate()
     if (updateInfo && !updateInfo[0]) {
-        snackbar.add({
+        $snackbar.add({
             type: 'success',
             text: 'У вас установлена последняя версия приложения'
         })

+ 7 - 3
pages/components.vue

@@ -12,12 +12,16 @@
 </template>
 
 <script setup lang="ts">
-const snackbar = useSnackbar();
+const { $snackbar } = useNuxtApp()
+
+definePageMeta({
+  layout: 'none'
+})
 
 function testSnackBar() {
-  snackbar.add({
+  $snackbar.add({
     type: 'success',
     text: 'This is a snackbar message'
-})
+  })
 }
 </script>

+ 15 - 0
plugins/snackbar.client.ts

@@ -0,0 +1,15 @@
+import { useSnackbar } from "#imports"
+
+export default defineNuxtPlugin(() => {
+    const log = useLogger('snackbarPlugin')
+    try {
+        const snackbar = useSnackbar()
+        return {
+            provide: {
+                snackbar: snackbar
+            }
+        }
+    } catch (e) {
+        log.error(e)
+    }
+})

+ 9 - 7
repository/api.ts

@@ -24,7 +24,6 @@ export class API {
   private module: string = 'API'
   private API_URL: string = useRuntimeConfig().public.API_URL
   private user = useUser()
-  private snackbar = useSnackbar()
 
   constructor(module: string) {
     this.module = module
@@ -32,6 +31,7 @@ export class API {
   }
 
   private throwError(request: string, data: TException, body?: unknown) {
+    const { $snackbar } = useNuxtApp()
     const err = {
       info: '',
       request,
@@ -51,12 +51,10 @@ export class API {
 
     this.log.error(err)
     
-    setTimeout(() => {
-      this.snackbar.add({
-        type: 'error',
-        text: 'Возникла ошибка на сервере. Не переживайте, мы уже знаем о проблеме 👌'
-      })
-    }, 1000);
+    $snackbar.add({
+      type: 'error',
+      text: 'Возникла ошибка на сервере. Не переживайте, мы уже знаем о проблеме 👌'
+    })
   }
 
   private instance = $fetch.create({
@@ -91,6 +89,10 @@ export class API {
       }
       else if (statusCode === 400 && ctx.request !== `${this.API_URL}/user/login`) {
         this.user.logout()
+        $snackbar.add({
+          type: 'error',
+          text: 'Ваша сессия устарела. Войдите заново.'
+        })
       }
       else if (statusCode !== 400) {
         this.throwError(ctx.request.toString(), ctx.response._data, ctx.options.body)