From 7a52ff4fdbee9c54504e6edbf79881607cfe47d8 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Thu, 13 May 2021 21:30:27 +1000
Subject: [PATCH] Display people created in title

---
 crabfit-backend/routes/getPeople.js                            | 1 +
 crabfit-backend/routes/login.js                                | 1 +
 crabfit-backend/swagger.yaml                                   | 2 ++
 .../src/components/AvailabilityViewer/AvailabilityViewer.tsx   | 3 +++
 4 files changed, 7 insertions(+)

diff --git a/crabfit-backend/routes/getPeople.js b/crabfit-backend/routes/getPeople.js
index e157a55..716f446 100644
--- a/crabfit-backend/routes/getPeople.js
+++ b/crabfit-backend/routes/getPeople.js
@@ -7,6 +7,7 @@ module.exports = async (req, res) => {
 		people = people.map(person => ({
 			name: person.name,
 			availability: person.availability,
+			created: person.created,
 		}));
 
 		res.send({
diff --git a/crabfit-backend/routes/login.js b/crabfit-backend/routes/login.js
index d8d15e8..4b6dd29 100644
--- a/crabfit-backend/routes/login.js
+++ b/crabfit-backend/routes/login.js
@@ -21,6 +21,7 @@ module.exports = async (req, res) => {
 			res.send({
 				name: personName,
 				availability: personResult.availability,
+				created: personResult.created,
 			});
 		} else {
 			res.sendStatus(404);
diff --git a/crabfit-backend/swagger.yaml b/crabfit-backend/swagger.yaml
index f9656a6..e64c0c9 100644
--- a/crabfit-backend/swagger.yaml
+++ b/crabfit-backend/swagger.yaml
@@ -36,6 +36,8 @@ definitions:
         type: "array"
         items:
           type: "string"
+      created:
+        type: "integer"
 paths:
   "/stats":
     get:
diff --git a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
index 9567aad..1d7cbf4 100644
--- a/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
+++ b/crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, Fragment } from 'react';
 import dayjs from 'dayjs';
 import localeData from 'dayjs/plugin/localeData';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { useSettingsStore } from 'stores';
 
@@ -31,6 +32,7 @@ import {
 
 dayjs.extend(localeData);
 dayjs.extend(customParseFormat);
+dayjs.extend(relativeTime);
 
 const AvailabilityViewer = ({
 	times,
@@ -89,6 +91,7 @@ const AvailabilityViewer = ({
                   }}
                   onMouseOver={() => setTempFocus(person.name)}
                   onMouseOut={() => setTempFocus(null)}
+                  title={person.created && dayjs.unix(person.created).fromNow()}
                 >{person.name}</Person>
               )}
             </People>