refactor(Anime and Manga): extract getCache function

Jabster28 · Sep 11, 2020 · b0b9759 · b0b9759
1 parent 333a5bf
commit b0b9759
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 59 deletions.
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -0,0 +1,37 @@
+export const getCache = (
+  name: string,
+  local: any,
+  checka: any,
+  checkb: () => any,
+  notify: (arg0: string) => void,
+  finish: () => void,
+  cache = 'cache'
+) => {
+  console.log('checking for cached ' + name);
+  let x = local.getItem(cache);
+  if (!x) {
+    local.set(cache, {});
+    x = {};
+  }
+  /* @ts-ignore */
+  if (!x[name]) x[name] = {};
+  /* @ts-ignore */
+  if (x[name][checkb()]) {
+    if (checka != checkb()) return;
+
+    /* @ts-ignore */
+    console.log('found some');
+    /* @ts-ignore */
+    finish();
+    return;
+  } else {
+    console.log('none found');
+    if (checka != checkb()) return;
+
+    notify(
+      `This ${name} hasn't been cached, so we can't show you anything. Connect to the internet and try again.`
+    );
+    finish();
+    return;
+  }
+};
diff --git a/src/pages/Anime.vue b/src/pages/Anime.vue
@@ -78,7 +78,12 @@
 
                 | # {{ norm(anime.rank) || '-' }}
               </h5>
-              <div v-if="$q.cookies.get('mal_auth')">
+              <div
+                v-if="
+                  $q.cookies.get('mal_auth') &&
+                    this.$parent.$parent.$parent.online
+                "
+              >
                 <q-select
                   v-model="status"
                   :options="options"
@@ -144,6 +149,7 @@
 import axios from 'axios';
 import AnimeCard from 'components/AnimeCard.vue';
 import qs from 'qs';
+import { getCache } from '../helpers';
 import Vue from 'vue';
 import * as Plyr from 'plyr';
 
@@ -317,35 +323,22 @@ export default Vue.extend({
       });
       const currentAnime = this.$route.params.id;
       if (!navigator.onLine) {
-        console.log('checking for cached anime');
-        let cache = this.$q.localStorage.getItem('cache');
-        if (!cache) {
-          this.$q.localStorage.set('cache', {});
-          cache = this.$q.localStorage.getItem('cache');
-        }
-        /* @ts-ignore */
-        if (!cache.anime) cache.anime = {};
-        /* @ts-ignore */
-        if (cache.anime[this.$route.params.id]) {
-          if (currentAnime != this.$route.params.id) return;
-
-          /* @ts-ignore */
-          console.log('found some');
-          /* @ts-ignore */
-
-          this.anime = cache.anime[this.$route.params.id];
-          this.$q.loading.hide();
-          return;
-        } else {
-          console.log('none found');
-          if (currentAnime != this.$route.params.id) return;
-
-          this.$q.notify(
-            "This anime hasn't been cached, so we can't show you anything. Connect to the internet and try again."
-          );
-          this.$q.loading.hide();
-          return;
-        }
+        getCache(
+          'anime',
+          this.$q.localStorage,
+          currentAnime,
+          () => this.$route.params.id,
+          (x: string) => {
+            this.$q.notify(x);
+          },
+          () => {
+            this.$q.loading.hide();
+          }
+        );
+        // @ts-ignore
+        this.anime = this.$q.localStorage.getItem('cache').anime[
+          this.$route.params.id
+        ];
       }
       // replace `getPost` with your data fetching util / API wrapper
       axios

diff --git a/src/pages/Manga.vue b/src/pages/Manga.vue
@@ -88,6 +88,7 @@
 
 import axios from 'axios';
 import qs from 'qs';
+import { getCache } from '../helpers';
 import Vue from 'vue';
 
 export default Vue.extend({
@@ -224,35 +225,22 @@ export default Vue.extend({
       });
       const currentManga = this.$route.params.id;
       if (!navigator.onLine) {
-        console.log('checking for cached manga');
-        let cache = this.$q.localStorage.getItem('cache');
-        if (!cache) {
-          this.$q.localStorage.set('cache', {});
-          cache = this.$q.localStorage.getItem('cache');
-        }
-        /* @ts-ignore */
-        if (!cache.manga) cache.manga = {};
-        /* @ts-ignore */
-        if (cache.manga[this.$route.params.id]) {
-          if (currentManga != this.$route.params.id) return;
-
-          /* @ts-ignore */
-          console.log('found some');
-          /* @ts-ignore */
-
-          this.manga = cache.manga[this.$route.params.id];
-          this.$q.loading.hide();
-          return;
-        } else {
-          console.log('none found');
-          if (currentManga != this.$route.params.id) return;
-
-          this.$q.notify(
-            "This manga hasn't been cached, so we can't show you anything. Connect to the internet and try again."
-          );
-          this.$q.loading.hide();
-          return;
-        }
+        getCache(
+          'manga',
+          this.$q.localStorage,
+          currentManga,
+          () => this.$route.params.id,
+          (x: string) => {
+            this.$q.notify(x);
+          },
+          () => {
+            this.$q.loading.hide();
+          }
+        );
+        // @ts-ignore
+        this.manga = this.$q.localStorage.getItem('cache').manga[
+          this.$route.params.id
+        ];
       }
       // replace `getPost` with your data fetching util / API wrapper
       axios