export function NotificationCard()

in frontend/src/components/notifications/notificationCard.js [58:158]
97 lines of code
5 McCabe index (conditional complexity)

export function NotificationCard({
  messageId,
  messageType,
  fromUsername,
  subject,
  read,
  sentDate,
  retryFn,
  selected,
  setSelected,
}: Object) {
  const token = useSelector((state) => state.auth.get('token'));
  const location = useLocation();
  const setMessageAsRead = (messageId) => {
    fetchLocalJSONAPI(`notifications/${messageId}/`, token).then(() => retryFn());
  };
  const deleteNotification = (id) => {
    fetchLocalJSONAPI(`notifications/${id}/`, token, 'DELETE')
      .then((success) => {
        setSelected(selected.filter((i) => i !== id));
        retryFn();
      })
      .catch((e) => {
        console.log(e.message);
      });
  };

  const replacedSubject = subject.replace('task=', 'search=');
  const openMessage = () => navigate(`/inbox/message/${messageId}/${location.search}`);

  return (
    <article
      onClick={openMessage}
      className="pointer db base-font w-100 mb1 mw8 bg-white blue-dark ba br1 b--grey-light"
    >
      <div className={`pv3 pr3 bl bw2 br2 ${read ? 'b--white' : 'b--primary'}`}>
        <div className="ph2 pt1 fl">
          <CheckBox activeItems={selected} toggleFn={setSelected} itemId={messageId} />
        </div>
        <div className={`fl dib w2 h3 mr3`}>
          <MessageAvatar messageType={messageType} fromUsername={fromUsername} size={'medium'} />
        </div>

        <strong
          onClick={(e) => {
            e.stopPropagation();
            e.preventDefault();
            if (e.target.href === undefined) {
              openMessage();
            } else {
              window.open(e.target.href);
            }
          }}
          className={`messageSubjectLinks`}
          dangerouslySetInnerHTML={rawHtmlNotification(replacedSubject)}
        ></strong>

        <div
          className={`dib fr w3`}
          onClick={(e) => {
            e.persist();
            e.preventDefault();
            e.stopPropagation();
          }}
        >
          {!read && (
            <>
              <FormattedMessage {...messages.markAsRead}>
                {(msg) => (
                  <EyeIcon
                    onClick={() => setMessageAsRead(messageId)}
                    style={{ width: '20px', height: '20px' }}
                    className={`fl dn dib-ns h1 w1 pr1 nr4 mv1 pv1 hover-red blue-grey`}
                    data-tip={msg}
                  />
                )}
              </FormattedMessage>
              <ReactTooltip />
            </>
          )}
          <DeleteButton
            className={`fr bg-transparent bw0 w2 h2 lh-copy overflow-hidden`}
            showText={false}
            onClick={() => deleteNotification(messageId)}
          />
        </div>
        {messageType !== null ? (
          <div className={`fr-l di-l dn f7 truncate w4 pa1 ma1`} title={messageType}>
            <FormattedMessage {...messages[messageType]} />
          </div>
        ) : null}
        {messageType === 'MENTION_NOTIFICATION' && (
          <div className="dn dib-ns fr ma1 ttu b--red ba red f7 pa1">1 mention</div>
        )}
        <div className={`pl5 pt2 blue-grey f6`}>
          <RelativeTimeWithUnit date={sentDate} />
        </div>
      </div>
    </article>
  );
}