#4085 : Notification items clickable

Author: luizrrodrigues

src/shared/components/Notifications/index.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import _ from 'lodash';
 import moment from 'moment';
+import { Link } from 'topcoder-react-utils';
 import IconArrow from 'assets/images/notifications/arrow.svg';
 import styles from './style.scss';
 import TabsPanel from './TabsPanel';
@@ -18,39 +19,68 @@ const eventTypes = {
   },
   BROADCAST: 'admin.notification.broadcast',
 };
+
+// Dynamic element, to select between Link and Div
+const ConditionalWrapper = ({
+  condition, renderLink, renderDiv, children,
+}) => (
+  condition ? renderLink(children) : renderDiv(children)
+);
+
 const Item = ({
-  item, auth, markNotificationAsRead, showPoint,
+  item, auth, markNotificationAsRead, showPoint, isLink,
 }) => (
-  <div className={styles['noti-item']}>
-    <div className={styles.left}>
-      <p className={styles.txt}>{item.contents}</p>
-      <span className={styles['time-txt']}>{moment(item.date).fromNow()}</span>
-    </div>
-    <div className={styles.right}>
-      {
-        !item.isRead
-        && showPoint
-        && (
-          <div
-            role="button"
-            className={cn([styles.point, item.isSeen && styles['point-grey'], !item.isSeen && styles['point-red']])}
-            onClick={() => {
-              markNotificationAsRead(item, auth.tokenV3);
-            }}
-            onKeyPress={() => {
-              markNotificationAsRead(item, auth.tokenV3);
-            }}
-            tabIndex="0"
-          />
-        )}
-    </div>
-  </div>
+  <ConditionalWrapper
+    condition={isLink}
+    renderLink={children => (
+      <Link
+        to={`/challenges/${item.sourceId}`}
+        className={styles['noti-item']}
+        onClick={() => !item.isRead && markNotificationAsRead(item, auth.tokenV3)}
+      >
+        {children}
+      </Link>
+    )}
+    renderDiv={children => (
+      <div className={styles['noti-item']}>
+        {children}
+      </div>
+    )}
+  >
+    <Fragment>
+      <div className={styles.left}>
+        <p className={styles.txt}>{item.contents}</p>
+        <span className={styles['time-txt']}>{moment(item.date).fromNow()}</span>
+      </div>
+      <div className={styles.right}>
+        {
+          !item.isRead
+          && showPoint
+          && (
+            <div
+              role="button"
+              className={cn([styles.point, item.isSeen && styles['point-grey'], !item.isSeen && styles['point-red']])}
+              onClick={() => {
+                if (!isLink) {
+                  markNotificationAsRead(item, auth.tokenV3);
+                }
+              }}
+              onKeyPress={() => {
+                markNotificationAsRead(item, auth.tokenV3);
+              }}
+              tabIndex="0"
+            />
+          )}
+      </div>
+    </Fragment>
+  </ConditionalWrapper>
 );
 Item.propTypes = {
   item: PropTypes.shape().isRequired,
   auth: PropTypes.shape().isRequired,
   markNotificationAsRead: PropTypes.func.isRequired,
   showPoint: PropTypes.bool.isRequired,
+  isLink: PropTypes.bool.isRequired,
 };
 
 const challenges = (listReceived) => {
@@ -102,6 +132,13 @@ export default class NotificationList extends React.Component {
     this.setState({ collapsedChallenges: collapsed });
   }
 
+  isLink = (item) => {
+    const ret = (eventTypes.PROJECT.ACTIVE.includes(item.eventType)
+      || eventTypes.PROJECT.COMPLETED.includes(item.eventType))
+      && item.sourceId;
+    return ret;
+  }
+
   render() {
     const {
       auth, notifications, loadNotifications, markNotificationAsRead,
@@ -180,6 +217,7 @@ export default class NotificationList extends React.Component {
                             markNotificationAsRead={markNotificationAsRead}
                             key={`noti-item-${item.id}`}
                             showPoint={activeTab !== 'completed'}
+                            isLink={this.isLink(item)}
                           />
                         ))}
                     </Fragment>