72 lines
2.5 KiB
JavaScript
72 lines
2.5 KiB
JavaScript
import React, { useCallback } from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
import { useIntl } from '@edx/frontend-platform/i18n';
|
|
import PropTypes from 'prop-types';
|
|
import { Icon } from '@edx/paragon';
|
|
import { Link } from 'react-router-dom';
|
|
import * as timeago from 'timeago.js';
|
|
import { getIconByType } from './utils';
|
|
import { markNotificationsAsRead } from './data/thunks';
|
|
import messages from './messages';
|
|
import timeLocale from '../common/time-locale';
|
|
|
|
const NotificationRowItem = ({
|
|
id, type, contentUrl, content, courseName, createdAt, lastRead,
|
|
}) => {
|
|
timeago.register('time-locale', timeLocale);
|
|
const intl = useIntl();
|
|
const dispatch = useDispatch();
|
|
|
|
const handleMarkAsRead = useCallback(() => {
|
|
dispatch(markNotificationsAsRead(id));
|
|
}, [dispatch, id]);
|
|
|
|
const { icon: iconComponent, class: iconClass } = getIconByType(type);
|
|
|
|
return (
|
|
<Link
|
|
target="_blank"
|
|
className="d-flex mb-2 align-items-center text-decoration-none"
|
|
to={contentUrl}
|
|
onClick={handleMarkAsRead}
|
|
>
|
|
<Icon src={iconComponent} className={`${iconClass} mr-4 notification-icon`} />
|
|
<div className="d-flex w-100">
|
|
<div className="d-flex align-items-center w-100">
|
|
<div className="py-10px w-100 px-0 cursor-pointer">
|
|
<span
|
|
className="line-height-24 text-gray-700 mb-2 notification-item-content overflow-hidden content"
|
|
// eslint-disable-next-line react/no-danger
|
|
dangerouslySetInnerHTML={{ __html: content }}
|
|
/>
|
|
<div className="py-0 d-flex">
|
|
<span className="font-size-12 text-gray-500 line-height-20">
|
|
<span>{courseName}</span>
|
|
<span className="text-light-700 px-1.5">{intl.formatMessage(messages.fullStop)}</span>
|
|
<span>{timeago.format(createdAt, 'time-locale')}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{!lastRead && (
|
|
<div className="d-flex py-1.5 px-1.5 ml-2 cursor-pointer">
|
|
<span className="bg-brand-500 rounded unread" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
NotificationRowItem.propTypes = {
|
|
id: PropTypes.string.isRequired,
|
|
type: PropTypes.string.isRequired,
|
|
contentUrl: PropTypes.string.isRequired,
|
|
content: PropTypes.node.isRequired,
|
|
courseName: PropTypes.string.isRequired,
|
|
createdAt: PropTypes.string.isRequired,
|
|
lastRead: PropTypes.string.isRequired,
|
|
};
|
|
|
|
export default React.memo(NotificationRowItem);
|