mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions 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 isOutbound = message.direction === Direction.Outbound;
const nextMessage = conversation![index + 1]; const nextMessage = conversation![index + 1];
const previousMessage = conversation![index - 1]; const previousMessage = conversation![index - 1];
const isSameNext = message.from === nextMessage?.from; const isNextMessageFromSameSender = message.from === nextMessage?.from;
const isSamePrevious = message.from === previousMessage?.from; const isPreviousMessageFromSameSender = message.from === previousMessage?.from;
const differenceInMinutes = previousMessage
? (new Date(message.sentAt).getTime() - new Date(previousMessage.sentAt).getTime()) / const messageSentAt = new Date(message.sentAt);
1000 / const previousMessageSentAt = previousMessage ? new Date(previousMessage.sentAt) : null;
60 const quarter = Math.floor(messageSentAt.getMinutes() / 15);
: 0; const sameQuarter =
const isTooLate = differenceInMinutes > 15; previousMessage &&
messageSentAt.getTime() - previousMessageSentAt!.getTime() < 15 * 60 * 1000 &&
quarter === Math.floor(previousMessageSentAt!.getMinutes() / 15);
const shouldGroupMessages = previousMessageSentAt && sameQuarter;
return ( return (
<li key={message.id}> <li key={message.id}>
{(!isSamePrevious || isTooLate) && ( {(!isPreviousMessageFromSameSender || !shouldGroupMessages) && (
<div className="flex py-2 space-x-1 text-xs justify-center"> <div className="flex py-2 space-x-1 text-xs justify-center">
<strong> <strong>
{new Date(message.sentAt).toLocaleDateString("fr-FR", { {new Date(message.sentAt).toLocaleDateString("fr-FR", {
@ -55,7 +58,7 @@ export default function Conversation() {
<div <div
className={clsx( className={clsx(
isSameNext ? "pb-1" : "pb-2", isNextMessageFromSameSender ? "pb-1" : "pb-2",
isOutbound ? "text-right" : "text-left", 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}> <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} /> <FontAwesomeIcon size="lg" className="h-8 w-8" icon={faLongArrowLeft} />
</span> </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"> <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={faPhone} />
<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faInfoCircle} /> <FontAwesomeIcon size="lg" className="h-8 w-8" icon={faInfoCircle} />