<commit_before>// @flow
import React, { Component } from 'react';
import cx from 'classnames';
import Dropdown from '../Dropdown';
import Icon from '../Icon';
import { activityRenderers } from '../Feed';
import Time from 'app/components/Time';
import styles from './HeaderNotifications.css';

type Props = {
  notificationsData: Object,
  fetchNotifications: () => void,
  notifications: Array<Object>,
  markAllNotifications: () => Promise<void>,
  fetchNotificationData: () => Promise<void>
};

type State = {
  notificationsOpen: boolean
};

const NotificationElement = ({ notification }: { notification: Object }) => {
  const renders = activityRenderers[notification.verb];

  if (renders) {
    return (
      <div
        className={cx(
          styles.notification,
          !notification.read ? styles.unRead : null
        )}
      >
        <div className={styles.innerNotification}>
          <div className={styles.icon}>{renders.icon(notification)}</div>
          <div>
            {renders.activityHeader(notification)}
            <Time
              time={notification.updatedAt}
              wordsAgo
              style={{ margin: '0', display: 'block' }}
            />
          </div>
        </div>
      </div>
    );
  }
  return null;
};

export default class NotificationsDropdown extends Component<Props, State> {
  state: State = {
    notificationsOpen: false
  };

  fetch = () => {
    this.props.fetchNotifications();
    this.props.fetchNotificationData();
  };

  renderNotifications = (notifications: Array<Object>) => {
    return (
      <div>
        {notifications.map((notification, i) => (
          <NotificationElement key={i} notification={notification} />
        ))}
      </div>
    );
  };

  render() {
    const { notificationsData, fetchNotifications, notifications } = this.props;
    const { unreadCount } = notificationsData;<commit_msg>Fix key for NotificationElement<commit_after>// @flow
import React, { Component } from 'react';
import cx from 'classnames';
import Dropdown from '../Dropdown';
import Icon from '../Icon';
import { activityRenderers } from '../Feed';
import Time from 'app/components/Time';
import styles from './HeaderNotifications.css';

type Props = {
  notificationsData: Object,
  fetchNotifications: () => void,
  notifications: Array<Object>,
  markAllNotifications: () => Promise<void>,
  fetchNotificationData: () => Promise<void>
};

type State = {
  notificationsOpen: boolean
};

const NotificationElement = ({ notification }: { notification: Object }) => {
  const renders = activityRenderers[notification.verb];

  if (renders) {
    return (
      <div
        className={cx(
          styles.notification,
          !notification.read ? styles.unRead : null
        )}
      >
        <div className={styles.innerNotification}>
          <div className={styles.icon}>{renders.icon(notification)}</div>
          <div>
            {renders.activityHeader(notification)}
            <Time
              time={notification.updatedAt}
              wordsAgo
              style={{ margin: '0', display: 'block' }}
            />
          </div>
        </div>
      </div>
    );
  }
  return null;
};

export default class NotificationsDropdown extends Component<Props, State> {
  state: State = {
    notificationsOpen: false
  };

  fetch = () => {
    this.props.fetchNotifications();
    this.props.fetchNotificationData();
  };

  renderNotifications = (notifications: Array<Object>) => {
    return (
      <div>
        {notifications.map(notification => (
          <NotificationElement
            key={notification.id}
            notification={notification}
          />
        ))}
      </div>
    );
  };

  render() {
    const { notificationsData, fetchNotifications, notifications } = this.props;
    const { unreadCount } = notificationsData;
{'fraction_non_alphanumeric': 0.13444069556189983, 'fraction_numerical': 0.0005190760446405398, 'mean_word_length': 2.649621212121212, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 51, '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': '3620128', 'n_tokens_mistral': 1053, 'n_tokens_neox': 1036, 'n_words': 235}