diff --git a/app/messages/components/conversations-list.tsx b/app/messages/components/conversations-list.tsx
index d4b20ca..b705e45 100644
--- a/app/messages/components/conversations-list.tsx
+++ b/app/messages/components/conversations-list.tsx
@@ -1,4 +1,7 @@
import { Link, useQuery, Routes } from "blitz";
+import { DateTime } from "luxon";
+import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import getConversationsQuery from "../queries/get-conversations";
@@ -14,7 +17,7 @@ export default function ConversationsList() {
{Object.entries(conversations).map(([recipient, messages]) => {
const lastMessage = messages[messages.length - 1]!;
return (
-
+
{recipient}
-
{new Date(lastMessage.sentAt).toLocaleString("fr-FR")}
+
+ {formatMessageDate(lastMessage.sentAt)}
+
+
- {lastMessage.content}
+ {lastMessage.content}
@@ -34,3 +40,20 @@ export default function ConversationsList() {
);
}
+
+function formatMessageDate(date: Date): string {
+ const messageDate = DateTime.fromJSDate(date);
+ const diff = messageDate.diffNow("days");
+
+ const isToday = diff.days > -1;
+ if (isToday) {
+ return messageDate.toFormat("HH:mm", { locale: "fr-FR" });
+ }
+
+ const isDuringLastWeek = diff.days > -8;
+ if (isDuringLastWeek) {
+ return messageDate.weekdayLong;
+ }
+
+ return messageDate.toFormat("dd/MM/yyyy", { locale: "fr-FR" });
+}
diff --git a/app/messages/queries/get-conversations.ts b/app/messages/queries/get-conversations.ts
index cafa577..300eaa8 100644
--- a/app/messages/queries/get-conversations.ts
+++ b/app/messages/queries/get-conversations.ts
@@ -1,5 +1,6 @@
import { resolver, NotFoundError } from "blitz";
import { z } from "zod";
+import PhoneNumber from "awesome-phonenumber";
import db, { Direction, Message, Prisma } from "../../../db";
import { decrypt } from "../../../db/_encryption";
@@ -33,6 +34,8 @@ export default resolver.pipe(
} else {
recipient = message.from;
}
+ const parsedPhoneNumber = new PhoneNumber(recipient);
+ recipient = parsedPhoneNumber.getNumber("international");
if (!conversations[recipient]) {
conversations[recipient] = [];
diff --git a/package-lock.json b/package-lock.json
index 6230e94..c8dbbc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3955,6 +3955,11 @@
"mini-svg-data-uri": "^1.2.3"
}
},
+ "@tailwindcss/line-clamp": {
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.2.1.tgz",
+ "integrity": "sha512-Hq2KJY1+T2v7jw/mnT3mnC7CKbp5kj1XTqzSb2xbEt1j+JkxIR6N3ijsN/WevZtsKJfVE1KOejA/3IRKuhZEsQ=="
+ },
"@tailwindcss/typography": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.4.1.tgz",
@@ -4340,6 +4345,12 @@
"resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
"integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
},
+ "@types/luxon": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-2.0.1.tgz",
+ "integrity": "sha512-EqwKd+cuzQ6Jz/zsFYOofHzSfZSh1x3eBBj9+2IYk5vF3I1JnysPFK/I0YnkJ0artgvVY3jJYf2fGdIzoK0UIA==",
+ "dev": true
+ },
"@types/mdast": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.8.tgz",
@@ -5227,6 +5238,11 @@
"queue-microtask": "^1.1.2"
}
},
+ "awesome-phonenumber": {
+ "version": "2.57.0",
+ "resolved": "https://registry.npmjs.org/awesome-phonenumber/-/awesome-phonenumber-2.57.0.tgz",
+ "integrity": "sha512-RWrCCQpnmkYeL3AGFdlUOpWkpkTauZm7FE9kgDz6xJG6PNUiiIm+rKI95wnre0TSV01PHvgFFwQZhDixPCM9ZA=="
+ },
"axe-core": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.2.tgz",
@@ -7241,6 +7257,13 @@
"requires": {
"is-nan": "^1.3.2",
"luxon": "^1.26.0"
+ },
+ "dependencies": {
+ "luxon": {
+ "version": "1.28.0",
+ "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
+ "integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ=="
+ }
}
},
"cross-fetch": {
@@ -13424,9 +13447,9 @@
"integrity": "sha1-tcg1G5Rky9dQM1p5ZQoOwOVhGN0="
},
"luxon": {
- "version": "1.28.0",
- "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
- "integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ=="
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.0.2.tgz",
+ "integrity": "sha512-ZRioYLCgRHrtTORaZX1mx+jtxKtKuI5ZDvHNAmqpUzGqSrR+tL4FVLn/CUGMA3h0+AKD1MAxGI5GnCqR5txNqg=="
},
"lz-string": {
"version": "1.4.4",
diff --git a/package.json b/package.json
index 3340d87..de3ff8d 100644
--- a/package.json
+++ b/package.json
@@ -49,12 +49,15 @@
"@prisma/client": "2.29.1",
"@react-aria/interactions": "3.5.1",
"@tailwindcss/forms": "0.3.3",
+ "@tailwindcss/line-clamp": "0.2.1",
"@tailwindcss/typography": "0.4.1",
"@twilio/voice-sdk": "2.0.1",
+ "awesome-phonenumber": "2.57.0",
"blitz": "0.38.6",
"clsx": "1.1.1",
"got": "11.8.2",
"jotai": "1.3.0",
+ "luxon": "2.0.2",
"next-pwa": "5.3.1",
"pino": "6.13.0",
"pino-pretty": "5.1.3",
@@ -73,6 +76,7 @@
"zod": "3.7.3"
},
"devDependencies": {
+ "@types/luxon": "2.0.1",
"@types/pino": "6.3.11",
"@types/preview-email": "2.0.1",
"@types/react": "17.0.19",
diff --git a/tailwind.config.js b/tailwind.config.js
index 5665ccc..4ba4652 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -146,6 +146,6 @@ module.exports = {
translate: ["group-hover"],
},
},
- plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
+ plugins: [require("@tailwindcss/line-clamp"), require("@tailwindcss/forms"), require("@tailwindcss/typography")],
purge: ["{pages,app}/**/*.{js,ts,jsx,tsx}"],
};