refactor: code and style modifications

src/Notifications/NotificationRowItem.jsx

@@ -1,36 +1,30 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable react/forbid-prop-types */
 import React, { useCallback } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon } from '@edx/paragon';
 import * as timeago from 'timeago.js';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { messages } from './messages';
 import timeLocale from '../common/time-locale';
 import { markNotificationsAsRead } from './data/thunks';
 import { getIconByType } from './utils';
 
-const NotificationRowItem = ({ notification }) => {
-  const intl = useIntl();
+const NotificationRowItem = ({
+  id, type, contentUrl, content, courseName, createdAt, lastRead,
+}) => {
   timeago.register('time-locale', timeLocale);
+  const intl = useIntl();
   const dispatch = useDispatch();
 
-  const handleRedirectToURL = useCallback(() => {
-    dispatch(markNotificationsAsRead(notification.id));
-    window.open(notification.contentUrl, '_blank');
-  }, [notification]);
+  const handleMarkAsRead = useCallback(() => {
+    dispatch(markNotificationsAsRead(id));
+  }, [dispatch, id]);
 
-  const handleMarkAllAsRead = useCallback(() => {
-    dispatch(markNotificationsAsRead(notification.id));
-  }, [notification.id]);
-
-  const iconComponent = getIconByType(notification.type);
+  const iconComponent = getIconByType(type);
 
   return (
-    <div className="d-flex mb-2 align-items-center">
+    <Link className="d-flex mb-2 align-items-center text-decoration-none" to={contentUrl} onClick={handleMarkAsRead}>
       <Icon
         src={iconComponent && iconComponent.icon}
         style={{ height: '23.33px', width: '23.33px' }}
@@ -38,33 +32,39 @@ const NotificationRowItem = ({ notification }) => {
       />
       <div className="d-flex w-100">
         <div className="d-flex align-items-center w-100">
-          <div className="py-2 w-100 px-0 cursor-pointer" onClick={handleRedirectToURL}>
+          <div className="py-2 w-100 px-0 cursor-pointer">
             <span
               className="line-height-24 text-gray-700 mb-2 notification-item-content overflow-hidden"
               // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html: notification.content }}
+              dangerouslySetInnerHTML={{ __html: content }}
             />
             <div className="py-0 d-flex flex-row align-items-center">
               <span className="font-size-12 text-gray-500 line-height-20">
-                <span>{notification?.courseName}</span>
+                <span>{courseName}</span>
                 <span className="text-light-700 px-1.5">{intl.formatMessage(messages.fullStop)}</span>
-                <span>{timeago.format(notification?.createdAt, 'time-locale')}</span>
+                <span>{timeago.format(createdAt, 'time-locale')}</span>
               </span>
             </div>
           </div>
-          {!notification.lastRead && (
-            <div className="d-flex py-1.5 px-1.5 ml-2 cursor-pointer" onClick={handleMarkAllAsRead}>
+          {!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>
-    </div>
+    </Link>
   );
 };
 
 NotificationRowItem.propTypes = {
-  notification: PropTypes.object.isRequired,
+  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);