🐛 bug(examples): fix ssr demo

Closes #151
kazupon · Apr 24, 2017 · 059034f · 059034f
1 parent 2283075
commit 059034f
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 5 deletions.
diff --git a/examples/ssr/src/components/Comment.vue b/examples/ssr/src/components/Comment.vue
@@ -2,7 +2,7 @@
   <li v-if="comment" class="comment">
     <div class="by">
       <router-link :to="'/user/' + comment.by">{{ comment.by }}</router-link>
-      {{ comment.time | timeAgo($tc) }} {{ $t('time.ago') }}
+      {{ time }}
     </div>
     <div class="text" v-html="comment.text"></div>
     <div class="toggle" :class="{ open }" v-if="comment.kids && comment.kids.length">
@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import { timeAgo } from '../util'
+
 export default {
   name: 'comment',
   props: ['id'],
@@ -30,6 +32,10 @@ export default {
   computed: {
     comment () {
       return this.$store.state.items[this.id]
+    },
+    time () {
+      const { value, unit } = timeAgo(this.comment.time)
+      return `${value} ${this.$tc('time.units.' + unit, value)} ${this.$t('time.ago')}`
     }
   },
   methods: {

diff --git a/examples/ssr/src/components/Item.vue b/examples/ssr/src/components/Item.vue
@@ -16,7 +16,7 @@
         by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
       </span>
       <span class="time">
-        {{ item.time | timeAgo($tc) }} {{ $t('time.ago') }}
+        {{ time }}
       </span>
       <span v-if="item.type !== 'job'" class="comments-link">
         | <router-link :to="'/item/' + item.id">{{ item.descendants }} {{ $t('item.comments') }}</router-link>
@@ -27,11 +27,17 @@
 </template>
 
 <script>
-import { timeAgo } from '../filters'
+import { timeAgo } from '../util'
 
 export default {
   name: 'news-item',
   props: ['item'],
+  computed: {
+    time () {
+      const { value, unit } = timeAgo(this.item.time)
+      return `${value} ${this.$tc('time.units.' + unit, value)} ${this.$t('time.ago')}`
+    }
+  },
   // https://github.com/vuejs/vue/blob/next/packages/vue-server-renderer/README.md#component-caching
   serverCacheKey: ({ item: { id, __lastUpdated, time }}) => {
     return `${id}::${__lastUpdated}::${time}`

diff --git a/examples/ssr/src/util.js b/examples/ssr/src/util.js
@@ -0,0 +1,10 @@
+export function timeAgo (time) {
+  const between = Date.now() / 1000 - Number(time)
+  if (between < 3600) {
+    return { value: ~~(between / 60), unit: 'minute' }
+  } else if (between < 86400) {
+    return { value: ~~(between / 3600), unit: 'hour' }
+  } else {
+    return { value: ~~(between / 86400), unit: 'day' }
+  }
+}
diff --git a/examples/ssr/src/views/ItemView.vue b/examples/ssr/src/views/ItemView.vue
@@ -11,7 +11,7 @@
         <p class="meta">
           {{ item.score }} points
           | by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
-          {{ item.time | timeAgo($tc) }} {{ $t('time.ago') }}
+          {{ time }}
         </p>
       </div>
       <div class="item-view-comments">
@@ -30,6 +30,7 @@
 <script>
 import Spinner from '../components/Spinner.vue'
 import Comment from '../components/Comment.vue'
+import { timeAgo } from '../util'
 
 function fetchItem (store) {
   return store.dispatch('FETCH_ITEMS', {
@@ -66,6 +67,10 @@ export default {
   computed: {
     item () {
       return this.$store.state.items[this.$route.params.id]
+    },
+    time () {
+      const { value, unit } = timeAgo(this.item.time)
+      return `${value} ${this.$tc('time.units.' + unit, value)} ${this.$t('time.ago')}`
     }
   },
   // on the server, only fetch the item itself

diff --git a/examples/ssr/src/views/UserView.vue b/examples/ssr/src/views/UserView.vue
@@ -4,7 +4,7 @@
     <template v-if="user">
       <h1>{{ $t('user.id') }} : {{ user.id }}</h1>
       <ul class="meta">
-        <li><span class="label">{{ $t('user.created') }}:</span> {{ user.created | timeAgo($tc) }} {{ $t('time.ago') }}</li>
+        <li><span class="label">{{ $t('user.created') }}:</span> {{ time }}</li>
         <li><span class="label">{{ $t('user.karma') }}:</span> {{user.karma}}</li>
         <li v-if="user.about" v-html="user.about" class="about"></li>
       </ul>
@@ -18,6 +18,7 @@
 
 <script>
 import Spinner from '../components/Spinner.vue'
+import { timeAgo } from '../util'
 
 function fetchUser (store) {
   return store.dispatch('FETCH_USER', {
@@ -31,6 +32,10 @@ export default {
   computed: {
     user () {
       return this.$store.state.users[this.$route.params.id]
+    },
+    time () {
+      const { value, unit } = timeAgo(this.user.created)
+      return `${value} ${this.$tc('time.units.' + unit, value)} ${this.$t('time.ago')}`
     }
   },
   preFetch: fetchUser,