From 01eecfd8d942ddf40951911c4c898a60a363e3ae Mon Sep 17 00:00:00 2001
From: Matthew Aaron Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 16 Jan 2023 17:24:48 +0800
Subject: [PATCH] Time since

---
 package-lock.json             |  9 +++++++++
 package.json                  |  1 +
 src/views/ProjectViewView.vue | 14 +++++++++++---
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 793ed305e..06b8ae2f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "localstorage-slim": "^2.3.0",
         "luxon": "^3.1.1",
         "merkletreejs": "^0.3.9",
+        "moment": "^2.29.4",
         "papaparse": "^5.3.2",
         "pina": "^0.20.2204228",
         "pinia-plugin-persistedstate": "^3.0.1",
@@ -19278,6 +19279,14 @@
       "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==",
       "dev": true
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",
diff --git a/package.json b/package.json
index e6a9fb702..e880fd5b8 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "localstorage-slim": "^2.3.0",
     "luxon": "^3.1.1",
     "merkletreejs": "^0.3.9",
+    "moment": "^2.29.4",
     "papaparse": "^5.3.2",
     "pina": "^0.20.2204228",
     "pinia-plugin-persistedstate": "^3.0.1",
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 82b449e8f..f2dbf0856 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -71,9 +71,9 @@
         <div class="flex justify-between gap-4 text-sm mb-3">
           <span><fa icon="user" class="fa-fw text-slate-400"></fa> Rotary</span>
           <span
-            ><fa icon="calendar" class="fa-fw text-slate-400"></fa> 8 days
-            ago</span
-          >
+            ><fa icon="calendar" class="fa-fw text-slate-400"></fa
+            >{{ timeSince }}
+          </span>
         </div>
 
         <div class="text-sm text-slate-500">
@@ -138,6 +138,7 @@ import { accessToken } from "@/libs/crypto";
 import { db } from "../db";
 import { IIdentifier } from "@veramo/core";
 import { AppString } from "@/constants/app";
+import * as moment from "moment";
 
 @Options({
   components: {},
@@ -148,6 +149,7 @@ export default class ProjectViewView extends Vue {
   description = "";
   truncatedDesc = "";
   truncateLength = 40;
+  timeSince = "";
   projectId =
     localStorage.getItem("projectId") === null
       ? ""
@@ -175,6 +177,12 @@ export default class ProjectViewView extends Vue {
       console.log(resp.status, resp.data);
       if (resp.status === 200) {
         const claim = resp.data.claim;
+        const issuedAt = resp.data.issuedAt;
+        const eventDate = new Date(issuedAt);
+        const now = moment.now();
+        this.timeSince = moment.utc(now).to(eventDate);
+
+        console.log(this.timeSince);
         this.name = claim.name;
         this.description = claim.description;
         this.truncatedDesc = this.description.slice(0, this.truncateLength);