From 07f2934e45efb273d628de4e41eef1840f7a51ce Mon Sep 17 00:00:00 2001
From: Kieran Farr <kieran.farr@gmail.com>
Date: Thu, 21 Sep 2023 12:00:23 -0700
Subject: [PATCH] add last modified timeago to scene cards

---
 package-lock.json                             | 52 ++++++++++++++-----
 package.json                                  |  1 +
 .../SceneCard/SceneCard.component.jsx         | 17 ++++--
 3 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cfd1cc3a..5b50b9b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@types/uuid": "^9.0.0",
         "classnames": "^2.3.2",
         "clipboard": "^2.0.11",
+        "date-fns": "^2.30.0",
         "dotenv-webpack": "^8.0.1",
         "file-loader": "^6.2.0",
         "firebase": "^9.23.0",
@@ -1736,11 +1737,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-      "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
+      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -5647,6 +5648,21 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -12788,9 +12804,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.1",
@@ -16662,11 +16678,11 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-      "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
+      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
       "requires": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       }
     },
     "@babel/template": {
@@ -19816,6 +19832,14 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
     },
+    "date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "requires": {
+        "@babel/runtime": "^7.21.0"
+      }
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -25117,9 +25141,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "regenerator-transform": {
       "version": "0.15.1",
diff --git a/package.json b/package.json
index bcb0a49c..74c0bbe9 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@types/uuid": "^9.0.0",
     "classnames": "^2.3.2",
     "clipboard": "^2.0.11",
+    "date-fns": "^2.30.0",
     "dotenv-webpack": "^8.0.1",
     "file-loader": "^6.2.0",
     "firebase": "^9.23.0",
diff --git a/src/components/components/SceneCard/SceneCard.component.jsx b/src/components/components/SceneCard/SceneCard.component.jsx
index 8f8370b1..ac63a973 100644
--- a/src/components/components/SceneCard/SceneCard.component.jsx
+++ b/src/components/components/SceneCard/SceneCard.component.jsx
@@ -1,6 +1,17 @@
 import React from 'react';
 import ScenePlaceholder from '../../../../assets/scene.png';
 import styles from './SceneCard.module.scss';
+import { formatDistanceToNow } from 'date-fns';
+
+function LastModified({ timestamp }) {
+  // Convert Firestore Timestamp to JavaScript Date object
+  const date = timestamp.toDate();
+
+  // Use date-fns to get "time ago" format
+  const timeAgo = formatDistanceToNow(date, { addSuffix: true });
+
+  return <p className={styles.date}>Last modified {timeAgo}</p>;
+}
 
 const SceneCard = ({ scenesData, handleSceneClick }) => (
   <div className={styles.wrapper}>
@@ -13,9 +24,9 @@ const SceneCard = ({ scenesData, handleSceneClick }) => (
       >
         <img src={ScenePlaceholder} alt="scene" className={styles.img} />
         <p className={styles.title}>{scene.data().title}</p>
-        {/* <p className={styles.date}>
-          Last modified 2 hours ago
-        </p> */}
+        <p className={styles.date}>
+          <LastModified timestamp={scene.data().updateTimestamp} />
+        </p>
       </div>
     ))}
   </div>