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';
 

yarn.lock

@@ -7409,8 +7409,8 @@ __metadata:
     "@testing-library/user-event": ^14.0.0
     "@types/react": ^16.13.1 || ^17.0.0
     "@types/react-grid-layout": ^1.3.2
-    date-fns: ^2.30.0
     lodash: ^4.17.21
+    luxon: ^3.4.3
     msw: ^1.0.0
     react-grid-layout: ^1.3.4
     react-resizable: ^3.0.4
@@ -31784,7 +31784,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"luxon@npm:^3.0.0, luxon@npm:^3.3.0":
+"luxon@npm:^3.0.0, luxon@npm:^3.3.0, luxon@npm:^3.4.3":
   version: 3.4.3
   resolution: "luxon@npm:3.4.3"
   checksum: 3eade81506224d038ed24035a0cd0dd4887848d7eba9361dce9ad8ef81380596a68153240be3988721f9690c624fb449fcf8fd8c3fc0681a6a8496faf48e92a3