mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

group messages by every 15 minutes

Browse Source
This commit is contained in:
m5r 2021-08-15 11:09:09 +08:00
parent 30d186d37d
commit b83a64d862
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/messages/components/conversation.tsx
View File

@ -25,17 +25,20 @@ export default function Conversation() {
const isOutbound = message.direction === Direction.Outbound;
const nextMessage = conversation![index + 1];
const previousMessage = conversation![index - 1];
const isSameNext = message.from === nextMessage?.from;
const isSamePrevious = message.from === previousMessage?.from;
const differenceInMinutes = previousMessage
? (new Date(message.sentAt).getTime() - new Date(previousMessage.sentAt).getTime()) /
1000 /
60
: 0;
const isTooLate = differenceInMinutes > 15;
const isNextMessageFromSameSender = message.from === nextMessage?.from;
const isPreviousMessageFromSameSender = message.from === previousMessage?.from;
const messageSentAt = new Date(message.sentAt);
const previousMessageSentAt = previousMessage ? new Date(previousMessage.sentAt) : null;
const quarter = Math.floor(messageSentAt.getMinutes() / 15);
const sameQuarter =
previousMessage &&
messageSentAt.getTime() - previousMessageSentAt!.getTime() < 15 * 60 * 1000 &&
quarter === Math.floor(previousMessageSentAt!.getMinutes() / 15);
const shouldGroupMessages = previousMessageSentAt && sameQuarter;
return (
<li key={message.id}>
{(!isSamePrevious || isTooLate) && (
{(!isPreviousMessageFromSameSender || !shouldGroupMessages) && (
<div className="flex py-2 space-x-1 text-xs justify-center">
<strong>
{new Date(message.sentAt).toLocaleDateString("fr-FR", {
@ -55,7 +58,7 @@ export default function Conversation() {
<div
className={clsx(
isSameNext ? "pb-1" : "pb-2",
isNextMessageFromSameSender ? "pb-1" : "pb-2",
isOutbound ? "text-right" : "text-left",
)}
>

2
app/messages/pages/messages/[recipient].tsx
View File

@ -20,7 +20,7 @@ const ConversationPage: BlitzPage = () => {
<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={router.back}>
<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faLongArrowLeft} />
</span>
<strong className="col-span-1">{recipient}</strong>
<strong className="col-span-1 text-center">{recipient}</strong>
<span className="col-span-1 flex justify-end space-x-4 pr-2">
<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faPhone} />
<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faInfoCircle} />