feat: remade error functionality

Rule-34 · Jul 12, 2020 · a2a991b · a2a991b
1 parent 45dc388
commit a2a991b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 67 deletions.
diff --git a/components/pages/dashboard/navigation/search/SearchResults.vue b/components/pages/dashboard/navigation/search/SearchResults.vue
@@ -5,9 +5,6 @@
     <div
       class="flex flex-col flex-1 max-h-full min-h-full p-2 pb-0 overflow-y-hidden"
     >
-      <!-- If theres errors -->
-      <Errors />
-
       <!-- If nothing searched -->
       <h1
         v-if="!search.searchedTags.length && !search.addedTags.length"
@@ -72,16 +69,13 @@
 
 <script>
 import { mapState, mapMutations, mapActions } from 'vuex'
-import Errors from '~/components/utils/Errors.vue'
 
 // JS
 import { scrollToTop } from '~/assets/js/scrollUtils.js'
 
 export default {
   name: 'SearchResults',
 
-  components: { Errors },
-
   computed: {
     ...mapState('booru', ['search']),
   },

diff --git a/components/utils/Errors.vue b/components/utils/Errors.vue
@@ -1,78 +1,41 @@
 <template>
   <!-- If theres request got errors -->
   <div
-    v-if="
-      generalData.error ||
-      (!dashBoardData.data.length && !isSinglePost) ||
-      $nuxt.isOffline
-    "
-    class="material-container text-center text-default-text m-6 p-2"
+    v-if="errors"
+    class="p-2 m-6 text-center material-container text-default-text"
   >
     <!-- Header -->
     <h1
-      class="text-2xl font-bold tracking-wide border w-max-content mx-auto mb-1 px-2"
+      class="px-2 mx-auto mb-1 text-2xl font-bold tracking-wide border w-max-content"
     >
       Error
     </h1>
 
-    <!-- If browser is offline -->
-    <template v-if="$nuxt.isOffline">
-      <p>
-        You are offline, please connect to the internet
-      </p>
-    </template>
-
-    <!-- If ANY error -->
-    <template v-else-if="generalData.error">
-      <p>
-        {{ generalData.error.message }}
-      </p>
-      <!-- TODO: This should be "Retry to load?" or something similar -->
-      <button type="button" class="color-util" @click="resetTags()">
-        Remove tags?
-      </button>
-    </template>
-
-    <!-- If no posts loaded -->
-    <template v-else-if="!dashBoardData.data.length && !isSinglePost">
-      <h1 class="font-bold" v-text="'There are no more posts to load!'" />
-      <button type="button" class="color-util" @click="resetTags()">
-        Remove tags?
-      </button>
-    </template>
+    <!-- Body -->
+    <p>
+      {{ errors }}
+    </p>
+    <button type="button" class="color-util" @click="reload()">
+      Reload the page?
+    </button>
   </div>
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState } from 'vuex'
 
 export default {
   name: 'Errors',
 
-  props: {
-    // For separating text
-    isSinglePost: { type: Boolean, required: false, default: false },
-  },
-
   computed: {
-    ...mapState(['generalData', 'dashBoardData']),
-    ...mapState('navigation', ['search']),
+    ...mapState(['errors']),
   },
 
-  methods: {
-    ...mapMutations(['tagManager']),
-    ...mapMutations('navigation', ['setSearchActive']),
-
-    resetTags() {
-      // console.log('Resetted tags')
+  // TODO: Add listeners to throw errors when offline, no post data, etc.
 
-      // First reset tags
-      this.tagManager({ operation: 'reset' })
-
-      // Then show page if not active
-      if (!this.search.isActive) {
-        this.setSearchActive(true)
-      }
+  methods: {
+    reload() {
+      location.reload()
     },
   },
 }

diff --git a/pages/single-post.vue b/pages/single-post.vue
@@ -4,8 +4,8 @@
     <Errors :is-single-post="true" />
 
     <!-- First time / Empty query info -->
-    <div v-if="!id || !domain" class="material-container text-center p-2">
-      <h1 class="text-default-text text-lg">You should add a query!</h1>
+    <div v-if="!id || !domain" class="p-2 text-center material-container">
+      <h1 class="text-lg text-default-text">You should add a query!</h1>
 
       <h2 class="text-default-text-muted">
         For example
@@ -82,7 +82,7 @@ export default {
     if (!booruData) {
       this.errorManager({
         operation: 'set',
-        data: new Error(`The current domain "${this.domain}" couldnt be found`),
+        value: `The current domain "${this.domain}" couldnt be found`,
       })
       return
     }
@@ -99,9 +99,7 @@ export default {
     if (!this.type.singlePost) {
       this.errorManager({
         operation: 'set',
-        data: new Error(
-          `The current domain type "${this.type}" doesnt support getting posts from ID`
-        ),
+        value: `The current domain type "${this.type}" doesnt support getting posts from ID`,
       })
       return
     }

diff --git a/store/actions.js b/store/actions.js
@@ -37,12 +37,20 @@ export default {
     return data
   },
 
+  errorManager({ commit }, { operation, value }) {
+    switch (operation) {
+      case 'set':
+        commit('setErrors', value)
         break
 
+      case 'reset':
+        commit('setErrors', undefined)
         break
 
       default:
+        throw new Error('No operation specified')
     }
+  },
 
   loadingAnimationHandler(_, mode) {
     if (!window.$nuxt.$root.$loading.start) {

diff --git a/store/state.js b/store/state.js
@@ -1,7 +1,7 @@
 export default () => ({
   general: {
     CORSProxyURL: 'https://cors-proxy.r34.app/',
-
-    error: undefined,
   },
+
+  errors: undefined,
 })