import React, { VFC } from 'react'; import clsx from 'clsx'; import { useAlert } from 'hooks'; import { Link } from 'react-router-dom'; import { copyToClipboard, fileNameHandler, formatDate } from 'helpers'; import copyIcon from 'assets/images/copy.svg'; import codeIcon from 'assets/images/code_icon.svg'; import idIcon from 'assets/images/id_icon.svg'; import timestampIcon from 'assets/images/timestamp_icon.svg'; import { MessageModel } from 'types/message'; import './MessagesList.scss'; type Props = { messages?: MessageModel[] | null; }; export const MessagesList: VFC<Props> = ({ messages }) => { const alert = useAlert(); return ( <div className="messages__list"> <div className={clsx('messages__list-block', 'messages__list-block__header')}> <div className="messages__list-item"> <img className="messages__list-icon" src={codeIcon} alt="program name" /> <p className="messages__list-caption">Program name</p> </div> <div className="messages__list-item"> <img className="messages__list-icon" src={idIcon} alt="program id" /> <p>Message Id</p> </div> <div className="messages__list-item"> <img className="messages__list-icon" src={timestampIcon} alt="program date" /> <p>Timestamp</p> </div> </div> {messages && messages.length > 0 && messages.map((message: MessageModel) => ( <div key={message.id} className={clsx( 'messages__list-block', message.replyError === '0' || message.replyError === null ? 'messages__list-block_success' : 'messages__list-block_error' )} > <div className="messages__list-item"> <span className="messages__list-status" /> <p className="messages__list-caption">{message.destination && fileNameHandler(message.destination)}</p> </div> <div className="messages__list-item"> <Link className="messages__list-link" to={`/message/${message.id}`}> {message.id} </Link> <div className="programsCopyId"> <button type="button" onClick={() => copyToClipboard(message.id, alert, 'Message ID copied')}> <img src={copyIcon} alt="copy message ID" /> </button> </div> </div> <div className="messages__list-item"> <p>{message.timestamp && formatDate(message.timestamp)}</p> </div> </div> ))} </div> ); };