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 messageVerboseTitles = new Map()
messageVerboseTitles.set(
'PSCDMSA',
localizedStrings.inbox.messageVerboseTitles.accounts,
)
messageVerboseTitles.set(
'PSCDNOD',
localizedStrings.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="w-full border-collapse">
<tbody>
{messageEntities.map((message: MessageEntity) => {
const trimmedMessageName = message.messageName.trim()
let frenchLetterName =
messageVerboseTitles.get(trimmedMessageName)
frenchLetterName = frenchLetterName ?? trimmedMessageName
let englishLetterName =
messageVerboseTitles.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 border-gray-300 px-4 py-4 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-deep-blue-dark 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 md:pl-[100px]">{formattedDate}</td>
</tr>
)
})}
</tbody>
</table>
</>
)}
</>
)
}
export default MessageList
|