Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | import { MessageEntity } from '../entities/entities/message.entity'
import Link from 'next/link'
import NotificationBox from './NotificationBox'
import EN from '../locales/en'
import FR from '../locales/fr'
interface MessageListProps {
messageEntities: MessageEntity[]
locale: string
}
const MessageList = ({ messageEntities, locale }: MessageListProps) => {
const localizedStrings = locale === 'en' ? EN : FR
const engMessageVerboseTitles = new Map()
engMessageVerboseTitles.set('PSCDMSA', EN.inbox.messageVerboseTitles.accounts)
engMessageVerboseTitles.set('PSCDNOD', EN.inbox.messageVerboseTitles.debts)
const frMessageVerboseTitles = new Map()
frMessageVerboseTitles.set('PSCDMSA', FR.inbox.messageVerboseTitles.accounts)
frMessageVerboseTitles.set('PSCDNOD', FR.inbox.messageVerboseTitles.debts)
return (
<>
{messageEntities.length === 0 ? (
<>
<div className="space-y-4">
<NotificationBox
value={localizedStrings.inbox.noMessagesText}
className="flex justify-center bg-[rgba(248,248,249,1)] text-2xl"
/>
</div>
</>
) : (
<>
<table className="mb-8 mt-8 w-full border-collapse">
<tbody>
{messageEntities.map((message: MessageEntity) => {
const trimmedMessageName = message.messageName.trim()
let frenchLetterName =
frMessageVerboseTitles.get(trimmedMessageName)
frenchLetterName = frenchLetterName ?? trimmedMessageName
let englishLetterName =
engMessageVerboseTitles.get(trimmedMessageName)
englishLetterName = englishLetterName ?? trimmedMessageName
const letterName: string =
locale === 'en' ? englishLetterName : frenchLetterName
const gcAnalyticsCustomClickValue = `ESDC-EDSC_MSCA-MDSC-SCH:DARS-SMCD Letters Click:${englishLetterName}`
const date = new Date(message.messageDate)
const dateLanguage = locale + '-CA'
const formattedDate = date.toLocaleString(dateLanguage, {
dateStyle: 'long',
})
return (
<tr
key={message.messageId}
className="flex flex-col border-b-2 border-gray-300 px-4 py-4 first:border-t-2 sm:py-6 md:flex-row"
>
<td className="w-full md:w-[500px]">
<Link
href={`/api/download?id=${message.messageId}`}
className="flex items-center rounded-sm py-1 text-2xl text-blue-default underline hover:text-blue-hover focus:outline-1 focus:outline-blue-hover"
target="_blank"
data-gc-analytics-customclick={
gcAnalyticsCustomClickValue
}
>
{letterName} (PDF)
</Link>
<p className="py-1">{message.messageType}</p>
</td>
<td className="align-top text-[#43474e] md:pl-[100px]">
{formattedDate}
</td>
</tr>
)
})}
</tbody>
</table>
</>
)}
</>
)
}
export default MessageList
|