<commit_before>import React, { Fragment, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import Icon from 'components/icon';
import bellIcon from 'assets/icons/bell.svg';
import NotificationModal from 'components/notification-modal';
import cx from 'classnames';
import ReactTooltip from 'react-tooltip';
import styles from './notification-bell-styles.scss';

const NotificationBell = ({
  notifications,
  isModalOpen,
  setModalOpen,
  handleOnModalClose,
  handleTooltipHasShown,
  tooltipHasShown
}) => {
  const bellRef = useRef();
  useEffect(() => {
    if (!tooltipHasShown && bellRef.current) {
      ReactTooltip.show(bellRef.current);
    }
  }, [tooltipHasShown, bellRef]);
  const number = notifications ? notifications.length : 0;
  const hasNotifications = number > 0;
  return (
    <Fragment>
      <button
        onClick={hasNotifications ? () => setModalOpen(true) : undefined}
        className={cx(styles.notificationBellButton, {
          [styles.active]: hasNotifications
        })}
      >
        <div data-tip data-for="notification-bell" ref={bellRef}>
          <Icon
            icon={bellIcon}
            className={styles.bellIcon}
            ariaLabel="notification button"
          />
        </div>
        {number !== 0 && (
          <span
            className={cx(styles.badge, { [styles.moreThan99]: number > 99 })}
          >
            {number}
          </span>
        )}
      </button>
      <NotificationModal
        isOpen={isModalOpen}
        notifications={notifications}
        handleOnRequestClose={handleOnModalClose}
      />
      <ReactTooltip
        id="notification-bell"
        className={styles.tooltip}
        effect="solid"
        place="bottom"
        data-event="fakeEvent"
        disable={tooltipHasShown}
        afterShow={handleTooltipHasShown}
      >
        <h5 className={styles.tooltipTitle}>NEW!</h5>
        <p>
          Get notified of the latest NDCs and LTS submissions as when they
          become available
        </p>
      </ReactTooltip>
    </Fragment>
  );
};

NotificationBell.propTypes = {
  notifications: PropTypes.array,
  isModalOpen: PropTypes.bool,
  setModalOpen: PropTypes.func,
  handleTooltipHasShown: PropTypes.func,
  tooltipHasShown: PropTypes.bool.isRequired,
  handleOnModalClose: PropTypes.func.isRequired
};

NotificationBell.defaultProps = {
  notifications: [],
  tooltipHasShown: true // so it doesn't show by default
};<commit_msg>Handle tooltip has shown on hover<commit_after>import React, { Fragment, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import Icon from 'components/icon';
import bellIcon from 'assets/icons/bell.svg';
import NotificationModal from 'components/notification-modal';
import cx from 'classnames';
import ReactTooltip from 'react-tooltip';
import styles from './notification-bell-styles.scss';

const NotificationBell = ({
  notifications,
  isModalOpen,
  setModalOpen,
  handleOnModalClose,
  handleTooltipHasShown,
  tooltipHasShown
}) => {
  const bellRef = useRef();
  useEffect(() => {
    if (!tooltipHasShown && bellRef.current) {
      ReactTooltip.show(bellRef.current);
    }
  }, [tooltipHasShown, bellRef]);
  const number = notifications ? notifications.length : 0;
  const hasNotifications = number > 0;
  return (
    <Fragment>
      <button
        onMouseEnter={handleTooltipHasShown}
        onClick={hasNotifications ? () => setModalOpen(true) : undefined}
        className={cx(styles.notificationBellButton, {
          [styles.active]: hasNotifications
        })}
      >
        <div data-tip data-for="notification-bell" ref={bellRef}>
          <Icon
            icon={bellIcon}
            className={styles.bellIcon}
            ariaLabel="notification button"
          />
        </div>
        {number !== 0 && (
          <span
            className={cx(styles.badge, { [styles.moreThan99]: number > 99 })}
          >
            {number}
          </span>
        )}
      </button>
      <NotificationModal
        isOpen={isModalOpen}
        notifications={notifications}
        handleOnRequestClose={handleOnModalClose}
      />
      <ReactTooltip
        id="notification-bell"
        className={styles.tooltip}
        effect="solid"
        place="bottom"
        data-event="fakeEvent"
        disable={tooltipHasShown}
      >
        <h5 className={styles.tooltipTitle}>NEW!</h5>
        <p>
          Get notified of the latest NDCs and LTS submissions as when they
          become available
        </p>
      </ReactTooltip>
    </Fragment>
  );
};

NotificationBell.propTypes = {
  notifications: PropTypes.array,
  isModalOpen: PropTypes.bool,
  setModalOpen: PropTypes.func,
  handleTooltipHasShown: PropTypes.func,
  tooltipHasShown: PropTypes.bool.isRequired,
  handleOnModalClose: PropTypes.func.isRequired
};

NotificationBell.defaultProps = {
  notifications: [],
  tooltipHasShown: true // so it doesn't show by default
};
{'fraction_non_alphanumeric': 0.11438892233594221, 'fraction_numerical': 0.003612281757977122, 'mean_word_length': 2.7700453857791225, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1568684', 'n_tokens_mistral': 1422, 'n_tokens_neox': 1411, 'n_words': 297}