chore: improvements

layouts/default.vue

@@ -21,9 +21,6 @@
 import { feeds } from '~/common/api'
 
 export default {
-  computed: {
-    feeds: () => feeds
-  },
   head () {
     const host = process.server
       ? this.$ssrContext.req.headers.host
@@ -35,6 +32,9 @@ export default {
         { rel: 'canonical', href: `https://${host}${this.$route.path}` }
       ]
     }
+  },
+  computed: {
+    feeds: () => feeds
   }
 }
 </script>

nuxt.config.js

@@ -40,7 +40,7 @@ export default {
   ],
 
   serverMiddleware: [
-    (req, res, next) => {
+    (_, res, next) => {
       res.setHeader('Cache-Control', 's-maxage=10, stale-while-revalidate')
       next()
     }

package.json

@@ -33,18 +33,18 @@
     "nuxt": "^2.14.12"
   },
   "devDependencies": {
-    "@nuxtjs/eslint-config": "^3.1.0",
+    "@nuxtjs/eslint-config": "^5.0.0",
     "@nuxtjs/pwa": "3.3.5",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.19.0",
-    "eslint-config-standard": "^14.1.1",
+    "eslint-config-standard": "^16.0.2",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^23.20.0",
+    "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.1.0",
     "eslint-plugin-vue": "^7.5.0",
     "stylus": "^0.54.8",
-    "stylus-loader": "^3.0.2"
+    "stylus-loader": "^4.3.3"
   }
 }

pages/_feed/_page.vue

@@ -5,9 +5,9 @@
     <lazy-wrapper :loading="loading">
       <transition :name="transition" mode="out-in">
         <div :key="displayedPage" class="news-list">
-          <transition-group tag="ul" name="item">
+          <ul>
             <item v-for="item in displayedItems" :key="item.id" :item="item" />
-          </transition-group>
+          </ul>
         </div>
       </transition>
       <item-list-nav :feed="feed" :page="page" :max-page="maxPage" />
@@ -32,16 +32,22 @@ export default {
     return validFeeds.includes(feed)
   },
 
+  data () {
+    return {
+      transition: 'slide-right',
+      displayedPage: Number(this.page) || 1
+    }
+  },
+
   fetch () {
     const { feed, page = 1 } = this.$route.params
 
     return this.$store.dispatch('FETCH_FEED', { page: Number(page) || 1, feed })
   },
 
-  data () {
+  head () {
     return {
-      transition: 'slide-right',
-      displayedPage: Number(this.page) || 1
+      title: feeds[this.$route.params.feed].title
     }
   },
 
@@ -56,7 +62,7 @@ export default {
       return feeds[this.feed].pages
     },
     pageData () {
-      return this.$store.state.feeds[this.feed][this.page]
+      return this.$store.state.feeds[this.feed][this.page] || []
     },
     displayedItems () {
       return this.pageData.map(id => this.$store.state.items[id])
@@ -67,6 +73,7 @@ export default {
   },
 
   watch: {
+    feed: '$fetch',
     page: 'pageChanged'
   },
 
@@ -95,12 +102,6 @@ export default {
 
       this.displayedPage = to
     }
-  },
-
-  head () {
-    return {
-      title: feeds[this.$route.params.feed].title
-    }
   }
 }
 </script>

plugins/swr.js

@@ -2,17 +2,20 @@ import Vue from 'vue'
 
 const currentTime = new Date().getTime()
 
-Vue.mixin({
-  mounted () {
-    if (
-      '$fetch' in this &&
-      (currentTime - this.$store.state.swr.time > 30000 ||
-        Object.keys(this.$route.query).includes('refresh'))
-    ) {
-      this.$fetch()
+if (!Vue.__SWR_MIXIN__) {
+  Vue.__SWR_MIXIN__ = true
+  Vue.mixin({
+    mounted () {
+      if (
+        '$fetch' in this &&
+        (currentTime - this.$store.state.swr.time > 30000 ||
+          Object.keys(this.$route.query).includes('refresh'))
+      ) {
+        this.$fetch()
+      }
     }
-  }
-})
+  })
+}
 
 export default function ({ store }) {
   store.registerModule('swr', {