From 2b7c4a6c04eb9cfa50bd02937672839b926f1aee Mon Sep 17 00:00:00 2001
From: wryk <wryk@wryk.moe>
Date: Mon, 17 Feb 2020 01:23:35 +0100
Subject: [PATCH] add distance date

---
 src/components/DistanceDate.svelte | 24 ++++++++++++++++++++++++
 src/components/Queue.svelte        |  5 +++--
 src/services/mastodon.js           |  2 +-
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DistanceDate.svelte

diff --git a/src/components/DistanceDate.svelte b/src/components/DistanceDate.svelte
new file mode 100644
index 0000000..0c48afe
--- /dev/null
+++ b/src/components/DistanceDate.svelte
@@ -0,0 +1,24 @@
+<script context="module">
+    import { formatDistance } from 'date-fns'
+    import { readable } from 'svelte/store'
+
+    const format = (date, baseDate) => formatDistance(date, baseDate, { addSuffix: true })
+
+    const now = readable(new Date(), set => {
+        const interval = setInterval(() => {
+            set(new Date())
+        }, 1000)
+
+        return () => clearInterval(interval)
+    })
+</script>
+
+<script>
+    export let date
+
+    $: iso = date.toISOString()
+    $: text = format(date, $now)
+</script>
+
+<time datetime={iso}>{text}</time>
+
diff --git a/src/components/Queue.svelte b/src/components/Queue.svelte
index d432a0e..d98b358 100644
--- a/src/components/Queue.svelte
+++ b/src/components/Queue.svelte
@@ -4,7 +4,7 @@
     {#if $next}
         <div class="entry" on:click={() => select($next)}>
             <div class="title">{$next.title}</div>
-            <div class="user">by {$next.referer.username}</div>
+            <div class="user">shared by {$next.referer.username} <DistanceDate date={$next.date} /></div>
         </div>
     {/if}
 
@@ -18,13 +18,14 @@
     {#each history as track}
         <div class="entry" class:active={track === $current} on:click={() => select(track)}>
             <div class>{track.title}</div>
-            <div class>shared by {track.referer.username}</div>
+            <div class>shared by {track.referer.username} <DistanceDate date={track.date} /></div>
         </div>
     {/each}
 </div>
 
 <script>
     import { queue, next, current, enqueueing, select } from '/store.js'
+    import DistanceDate from '/components/DistanceDate.svelte'
 
     $: history = $queue.filter(x => x !== $next).reverse()
 </script>
diff --git a/src/services/mastodon.js b/src/services/mastodon.js
index b4f5ae2..d72311b 100644
--- a/src/services/mastodon.js
+++ b/src/services/mastodon.js
@@ -97,7 +97,7 @@ export async function* hashtagsIterator (domain, hashtags) {
 
 const processStatus = (domain, status) => ({
     title: '',
-    date: new Date(status.createdAt),
+    date: new Date(status.created_at),
     referer: {
         username: status.account.username,
         url: status.url,