fix(home): Use luxon instead of date-fns

Signed-off-by: Renan Mendes Carvalho <aitherios@gmail.com>

plugins/home/package.json

@@ -50,8 +50,8 @@
     "@rjsf/utils": "5.13.0",
     "@rjsf/validator-ajv8": "5.13.0",
     "@types/react": "^16.13.1 || ^17.0.0",
-    "date-fns": "^2.30.0",
     "lodash": "^4.17.21",
+    "luxon": "^3.4.3",
     "react-grid-layout": "^1.3.4",
     "react-resizable": "^3.0.4",
     "react-use": "^17.2.4",

plugins/home/src/components/VisitList/ItemDetail.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { Typography } from '@material-ui/core';
 import { Visit } from '../../api/VisitsApi';
-import { format, formatDistance, formatISO, isToday } from 'date-fns';
+import { DateTime } from 'luxon';
 
 const ItemDetailHits = ({ visit }: { visit: Visit }) => (
   <Typography component="span" variant="caption" color="textSecondary">
@@ -25,20 +25,22 @@ const ItemDetailHits = ({ visit }: { visit: Visit }) => (
   </Typography>
 );
 
-const ItemDetailTimeAgo = ({ visit }: { visit: Visit }) => (
-  <Typography
-    component="time"
-    variant="caption"
-    color="textSecondary"
-    dateTime={formatISO(visit.timestamp)}
-  >
-    {isToday(visit.timestamp)
-      ? format(visit.timestamp, 'HH:mm')
-      : formatDistance(visit.timestamp, Date.now(), {
-          addSuffix: true,
-        })}
-  </Typography>
-);
+const ItemDetailTimeAgo = ({ visit }: { visit: Visit }) => {
+  const visitDate = DateTime.fromMillis(visit.timestamp);
+
+  return (
+    <Typography
+      component="time"
+      variant="caption"
+      color="textSecondary"
+      dateTime={visitDate.toISO() ?? undefined}
+    >
+      {visitDate >= DateTime.now().startOf('day')
+        ? visitDate.toFormat('HH:mm')
+        : visitDate.toRelative()}
+    </Typography>
+  );
+};
 
 export type ItemDetailType = 'time-ago' | 'hits';