sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add day markers between articles

Browse source
This commit is contained in:
N-Pex 2024-10-09 15:09:24 +02:00
parent 275b323765
commit 8286c18020
2 changed files with 37 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx
View file

@ -113,7 +113,12 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
).toLocaleDateString()})`}</Typography>
</ChatHeader>
<MessageList ticketId={id}>
{ticketArticles.edges.map(({ node: article }: any) => (
{ticketArticles.edges.map(({ node: article }: any, index: number) => {
const thisDate = new Date(ticketArticles.edges[index].node.updatedAt).toLocaleDateString();
const lastDate = index > 0 ? new Date(ticketArticles.edges[index - 1].node.updatedAt).toLocaleDateString() : ""
return (
<>
{thisDate !== lastDate ? (<Box className="cs-day-marker"><Box className="cs-day-marker__line"></Box><Box className="cs-day-marker__text" sx={{background: veryLightGray}}>{thisDate}</Box></Box>) : (null)}
<Message
key={article.id}
className={
@ -130,7 +135,8 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
article.sender === "Agent" ? "outgoing" : "incoming"
}
/>
))}
</>
)})}
</MessageList>
<Box
sx={{