Redraw ago datetime every minute

front/src/App.vue

@@ -44,6 +44,10 @@ export default {
   },
   created () {
     this.$store.dispatch('instance/fetchSettings')
+    setInterval(() => {
+      // used to redraw ago dates every minute
+      self.$store.commit('ui/computeLastDate')
+    }, 1000 * 60)
   }
 }
 </script>

front/src/components/common/HumanDate.vue

@@ -1,8 +1,20 @@
 <template>
-  <time :datetime="date" :title="date | moment">{{ date | ago }}</time>
+  <time :datetime="date" :title="date | moment">{{ realDate | ago }}</time>
 </template>
 <script>
+import {mapState} from 'vuex'
 export default {
-  props: ['date']
+  props: ['date'],
+  computed: {
+    ...mapState({
+      lastDate: state => state.ui.lastDate
+    }),
+    realDate () {
+      if (this.lastDate) {
+        // dummy code to trigger a recompute to update the ago render
+      }
+      return this.date
+    }
+  }
 }
 </script>

front/src/store/index.js

@@ -8,11 +8,13 @@ import instance from './instance'
 import queue from './queue'
 import radios from './radios'
 import player from './player'
+import ui from './ui'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
+    ui,
     auth,
     favorites,
     instance,

front/src/store/ui.js

@@ -0,0 +1,12 @@
+
+export default {
+  namespaced: true,
+  state: {
+    lastDate: new Date()
+  },
+  mutations: {
+    computeLastDate: (state) => {
+      state.lastDate = new Date()
+    }
+  }
+}