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}"], };