format phone number and clamp message preview to 2 lines in conversations list

This commit is contained in:
m5r 2021-08-27 04:12:11 +08:00
parent 1c93ac00ef
commit 5e9aa2e5a4
5 changed files with 60 additions and 7 deletions

View File

@ -1,4 +1,7 @@
import { Link, useQuery, Routes } from "blitz"; 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"; import getConversationsQuery from "../queries/get-conversations";
@ -14,7 +17,7 @@ export default function ConversationsList() {
{Object.entries(conversations).map(([recipient, messages]) => { {Object.entries(conversations).map(([recipient, messages]) => {
const lastMessage = messages[messages.length - 1]!; const lastMessage = messages[messages.length - 1]!;
return ( return (
<li key={recipient} className="py-2"> <li key={recipient} className="py-2 p-4">
<Link <Link
href={Routes.ConversationPage({ href={Routes.ConversationPage({
recipient: encodeURIComponent(recipient), recipient: encodeURIComponent(recipient),
@ -23,9 +26,12 @@ export default function ConversationsList() {
<a className="flex flex-col"> <a className="flex flex-col">
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
<strong>{recipient}</strong> <strong>{recipient}</strong>
<div>{new Date(lastMessage.sentAt).toLocaleString("fr-FR")}</div> <div className="text-gray-700 flex flex-row gap-x-1">
{formatMessageDate(lastMessage.sentAt)}
<FontAwesomeIcon className="w-4 h-4 my-auto" icon={faChevronRight} />
</div> </div>
<div>{lastMessage.content}</div> </div>
<div className="line-clamp-2 text-gray-700">{lastMessage.content}</div>
</a> </a>
</Link> </Link>
</li> </li>
@ -34,3 +40,20 @@ export default function ConversationsList() {
</ul> </ul>
); );
} }
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" });
}

View File

@ -1,5 +1,6 @@
import { resolver, NotFoundError } from "blitz"; import { resolver, NotFoundError } from "blitz";
import { z } from "zod"; import { z } from "zod";
import PhoneNumber from "awesome-phonenumber";
import db, { Direction, Message, Prisma } from "../../../db"; import db, { Direction, Message, Prisma } from "../../../db";
import { decrypt } from "../../../db/_encryption"; import { decrypt } from "../../../db/_encryption";
@ -33,6 +34,8 @@ export default resolver.pipe(
} else { } else {
recipient = message.from; recipient = message.from;
} }
const parsedPhoneNumber = new PhoneNumber(recipient);
recipient = parsedPhoneNumber.getNumber("international");
if (!conversations[recipient]) { if (!conversations[recipient]) {
conversations[recipient] = []; conversations[recipient] = [];

29
package-lock.json generated
View File

@ -3955,6 +3955,11 @@
"mini-svg-data-uri": "^1.2.3" "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": { "@tailwindcss/typography": {
"version": "0.4.1", "version": "0.4.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.4.1.tgz", "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", "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
"integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w==" "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": { "@types/mdast": {
"version": "3.0.8", "version": "3.0.8",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.8.tgz", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.8.tgz",
@ -5227,6 +5238,11 @@
"queue-microtask": "^1.1.2" "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": { "axe-core": {
"version": "4.3.2", "version": "4.3.2",
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.2.tgz", "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.2.tgz",
@ -7241,6 +7257,13 @@
"requires": { "requires": {
"is-nan": "^1.3.2", "is-nan": "^1.3.2",
"luxon": "^1.26.0" "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": { "cross-fetch": {
@ -13424,9 +13447,9 @@
"integrity": "sha1-tcg1G5Rky9dQM1p5ZQoOwOVhGN0=" "integrity": "sha1-tcg1G5Rky9dQM1p5ZQoOwOVhGN0="
}, },
"luxon": { "luxon": {
"version": "1.28.0", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz", "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.0.2.tgz",
"integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ==" "integrity": "sha512-ZRioYLCgRHrtTORaZX1mx+jtxKtKuI5ZDvHNAmqpUzGqSrR+tL4FVLn/CUGMA3h0+AKD1MAxGI5GnCqR5txNqg=="
}, },
"lz-string": { "lz-string": {
"version": "1.4.4", "version": "1.4.4",

View File

@ -49,12 +49,15 @@
"@prisma/client": "2.29.1", "@prisma/client": "2.29.1",
"@react-aria/interactions": "3.5.1", "@react-aria/interactions": "3.5.1",
"@tailwindcss/forms": "0.3.3", "@tailwindcss/forms": "0.3.3",
"@tailwindcss/line-clamp": "0.2.1",
"@tailwindcss/typography": "0.4.1", "@tailwindcss/typography": "0.4.1",
"@twilio/voice-sdk": "2.0.1", "@twilio/voice-sdk": "2.0.1",
"awesome-phonenumber": "2.57.0",
"blitz": "0.38.6", "blitz": "0.38.6",
"clsx": "1.1.1", "clsx": "1.1.1",
"got": "11.8.2", "got": "11.8.2",
"jotai": "1.3.0", "jotai": "1.3.0",
"luxon": "2.0.2",
"next-pwa": "5.3.1", "next-pwa": "5.3.1",
"pino": "6.13.0", "pino": "6.13.0",
"pino-pretty": "5.1.3", "pino-pretty": "5.1.3",
@ -73,6 +76,7 @@
"zod": "3.7.3" "zod": "3.7.3"
}, },
"devDependencies": { "devDependencies": {
"@types/luxon": "2.0.1",
"@types/pino": "6.3.11", "@types/pino": "6.3.11",
"@types/preview-email": "2.0.1", "@types/preview-email": "2.0.1",
"@types/react": "17.0.19", "@types/react": "17.0.19",

View File

@ -146,6 +146,6 @@ module.exports = {
translate: ["group-hover"], 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}"], purge: ["{pages,app}/**/*.{js,ts,jsx,tsx}"],
}; };