tweak transition logic

yyx990803 · yyx990803 · commit 5a123910ec5e · 2016-08-05T02:40:18.000-04:00
diff --git a/build/webpack.server.config.js b/build/webpack.server.config.js
@@ -9,10 +9,7 @@ module.exports = Object.assign({}, base, {
     filename: 'server-bundle.js',
     libraryTarget: 'commonjs2'
   }),
-  externals: {
-    firebase: true,
-    'lru-cache': true
-  },
+  externals: ['firebase', 'lru-cache', 'es6-promise'],
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
diff --git a/index.html b/index.html
diff --git a/server.js b/server.js
@@ -67,6 +67,7 @@ app.get('*', (req, res) => {
   <head>
     <meta charset="utf-8">
     <title>vue-hackernews-2.0</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
     ${process.env.NODE_ENV === 'production'
       ? `<link rel="stylesheet" href="/dist/styles.css">`
       : ``}
diff --git a/src/store/index.js b/src/store/index.js
@@ -53,6 +53,7 @@ const store = new Vuex.Store({
 if (inBrowser) {
   watchTopIds(ids => {
     store.commit('RECEIVE_TOP_IDS', { ids })
+    store.dispatch('FETCH_NEWS')
   })
 }
 
diff --git a/src/views/News.vue b/src/views/News.vue
@@ -12,9 +12,9 @@
       </li>
     </ul>
     <transition :name="transition">
-      <div class="news-list" v-if="!loading" :key="$route.params.page">
+      <div class="news-list" :key="displayPage">
         <transition-group tag="ul" name="item">
-          <news-item v-for="item in news" :key="item.id" :item="item">
+          <news-item v-for="item in displayItems" :key="item.id" :item="item">
           </news-item>
         </transition-group>
       </div>
@@ -41,13 +41,13 @@ export default {
   },
   data () {
     return {
+      loading: false,
+      displayPage: this.$route.params.page,
+      displayItems: this.$store.getters.news,
       transition: 'slide-left'
     }
   },
   computed: {
-    news () {
-      return this.$store.getters.news
-    },
     page () {
       return Number(this.$route.params.page)
     },
@@ -57,9 +57,6 @@ export default {
     },
     hasMore () {
       return this.page < this.maxPage
-    },
-    loading () {
-      return this.news.length < this.$store.state.storiesPerPage
     }
   },
   mounted () {
@@ -70,10 +67,15 @@ export default {
   },
   watch: {
     '$route' (to, from) {
-      this.$store.dispatch(`FETCH_NEWS`)
-      this.transition = Number(to.params.page) > Number(from.params.page)
-        ? 'slide-left'
-        : 'slide-right'
+      this.loading = true
+      this.$store.dispatch(`FETCH_NEWS`).then(() => {
+        const toPage = Number(to.params.page)
+        const fromPage = Number(from.params.page)
+        this.transition = toPage > fromPage ? 'slide-left' : 'slide-right'
+        this.displayPage = toPage
+        this.displayItems = this.$store.getters.news.slice()
+        this.loading = false
+      })
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,7 @@ const store = new Vuex.Store({`
`53`	`53`	`if (inBrowser) {`
`54`	`54`	`watchTopIds(ids => {`
`55`	`55`	`store.commit('RECEIVE_TOP_IDS', { ids })`
	`56`	`+ store.dispatch('FETCH_NEWS')`
`56`	`57`	`})`
`57`	`58`	`}`
`58`	`59`