From 3a0ac7ce9766af517da1c3ce2e205a865cd2bd97 Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel.summers.2415@gmail.com>
Date: Mon, 25 Sep 2017 22:34:25 -0500
Subject: [PATCH] Added "date from now" component (#4)

Also moved page title component to new "common" component directory
---
 src/app/src/components/Home.vue               |  4 +-
 src/app/src/components/Journal.vue            |  2 +-
 src/app/src/components/common/DateFromNow.vue | 45 +++++++++++++++++++
 .../src/components/{ => common}/PageTitle.vue | 13 +++++-
 .../components/request/RequestListItem.vue    |  7 ++-
 src/app/src/components/user/LogOn.vue         |  8 +++-
 6 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 src/app/src/components/common/DateFromNow.vue
 rename src/app/src/components/{ => common}/PageTitle.vue (57%)

diff --git a/src/app/src/components/Home.vue b/src/app/src/components/Home.vue
index 4fcf95e..58d7ee4 100644
--- a/src/app/src/components/Home.vue
+++ b/src/app/src/components/Home.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 article
-  page-title(title="Welcome!" hideOnPage="true")
+  page-title(title='Welcome!' hideOnPage='true')
   p &nbsp;
   p.
     myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,
@@ -15,7 +15,7 @@ article
 <script>
 'use strict'
 
-import PageTitle from './PageTitle.vue'
+import PageTitle from './common/PageTitle.vue'
 
 export default {
   name: 'home',
diff --git a/src/app/src/components/Journal.vue b/src/app/src/components/Journal.vue
index ce2aa1e..c438fc6 100644
--- a/src/app/src/components/Journal.vue
+++ b/src/app/src/components/Journal.vue
@@ -17,7 +17,7 @@ article
 
 import { mapState } from 'vuex'
 
-import PageTitle from './PageTitle'
+import PageTitle from './common/PageTitle'
 import NewRequest from './request/NewRequest'
 import RequestListItem from './request/RequestListItem'
 
diff --git a/src/app/src/components/common/DateFromNow.vue b/src/app/src/components/common/DateFromNow.vue
new file mode 100644
index 0000000..aaf5907
--- /dev/null
+++ b/src/app/src/components/common/DateFromNow.vue
@@ -0,0 +1,45 @@
+<script>
+'use strict'
+
+import moment from 'moment'
+
+export default {
+  name: 'date-from-now',
+  props: {
+    tag: {
+      type: String,
+      default: 'span'
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    interval: {
+      type: Number,
+      default: 10000
+    }
+  },
+  data () {
+    return {
+      fromNow: moment(this.value).fromNow(),
+      intervalId: null
+    }
+  },
+  mounted () {
+    this.intervalId = setInterval(this.updateFromNow, this.interval)
+    this.$watch('value', this.updateFromNow)
+  },
+  beforeDestroy () {
+    clearInterval(this.intervalId)
+  },
+  methods: {
+    updateFromNow () {
+      let newFromNow = moment(this.value).fromNow()
+      if (newFromNow !== this.fromNow) this.fromNow = newFromNow
+    }
+  },
+  render (createElement) {
+    return createElement(this.tag, this.fromNow)
+  }
+}
+</script>
diff --git a/src/app/src/components/PageTitle.vue b/src/app/src/components/common/PageTitle.vue
similarity index 57%
rename from src/app/src/components/PageTitle.vue
rename to src/app/src/components/common/PageTitle.vue
index 2bd641a..ddcaf1d 100644
--- a/src/app/src/components/PageTitle.vue
+++ b/src/app/src/components/common/PageTitle.vue
@@ -1,11 +1,20 @@
 <template lang="pug">
-h2.mpj-page-title(v-if="!hideOnPage" v-html="title")
+h2.mpj-page-title(v-if='!hideOnPage' v-html='title')
 </template>
 
 <script>
 export default {
   name: 'page-title',
-  props: [ 'title', 'hideOnPage' ],
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    hideOnPage: {
+      type: Boolean,
+      default: false
+    }
+  },
   created () {
     document.title = `${this.title} « myPrayerJournal`
   },
diff --git a/src/app/src/components/request/RequestListItem.vue b/src/app/src/components/request/RequestListItem.vue
index 140ade1..df63fa0 100644
--- a/src/app/src/components/request/RequestListItem.vue
+++ b/src/app/src/components/request/RequestListItem.vue
@@ -5,7 +5,7 @@ el-row.journal-request
     edit-request(:request='request')
     full-request(:request='request')
   el-col(:span='16'): p {{ text }}
-  el-col(:span='4'): p {{ asOf }}
+  el-col(:span='4'): p: date-from-now(:value='request.asOf')
 </template>
 
 <script>
@@ -13,6 +13,7 @@ el-row.journal-request
 
 import moment from 'moment'
 
+import DateFromNow from '../common/DateFromNow'
 import EditRequest from './EditRequest'
 import FullRequest from './FullRequest'
 
@@ -21,7 +22,11 @@ import actions from '@/store/action-types'
 export default {
   name: 'request-list-item',
   props: [ 'request' ],
+  data () {
+    return { interval: null }
+  },
   components: {
+    DateFromNow,
     EditRequest,
     FullRequest
   },
diff --git a/src/app/src/components/user/LogOn.vue b/src/app/src/components/user/LogOn.vue
index e98b44a..eea3b21 100644
--- a/src/app/src/components/user/LogOn.vue
+++ b/src/app/src/components/user/LogOn.vue
@@ -1,14 +1,20 @@
 <template lang="pug">
-p Logging you on...
+article
+  pageTitle(title='Logging On')
+  p Logging you on...
 </template>
 
 <script>
 'use strict'
 
+import PageTitle from '../common/PageTitle'
 import AuthService from '@/auth/AuthService'
 
 export default {
   name: 'log-on',
+  components: {
+    PageTitle
+  },
   created () {
     this.$Progress.start()
     new AuthService().handleAuthentication(this.$store, this.$router)