<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, View, TouchableHighlight, Text } from 'react-native';
import Popover from 'react-native-popover-view';
import Badge from './Badge';
import { SUSSOL_ORANGE } from '../globalStyles';
import { generalStrings } from '../localization';
import { routeList } from '../navigation/selectors';
import { UIDatabase } from '../database';

export class InfoBadge extends React.PureComponent {
  state = {
    isPopOverVisible: false,
    rect: {},
  };

  getMyInfo() {
    const { routeName } = this.props;
    const dataType = routeName in routeList ? routeList[routeName] : '';

    return [
      {
        count:
          dataType !== ''
            ? UIDatabase.objects(dataType).filtered('status != "finalised"').length
            : 0,
        title: `${generalStrings.unfinalised} ${generalStrings[routeName]}`,
      },
    ];
  }

  showPopover() {
    // Open popover and determine where to open it on canvas
    this.touchableContainer.measure((ox, oy, width, height, px, py) => {
      this.setState({
        isPopOverVisible: true,
        rect: { x: px, y: py, width, height },
      });
    });
  }

  closePopover() {
    this.setState({ isPopOverVisible: false });
  }

  // eslint-disable-next-line class-methods-use-this
  renderInfo(info) {
    // Create a list of text components' fragment with info array row data
    return info.map((item, key) => {
      if (item.count <= 0 || item.text === '') return null;

      return (
        <Text style={{ color: '#FFF', fontSize: 12 }}>
          {key === 0 ? '' : '\n'}
          {item.title} : {item.count || item.text}
        </Text>
      );
    });
  }

  render() {
    const { children, mainWrapperStyle, popoverPosition } = this.props;
    const { isPopOverVisible, rect } = this.state;
    const info = this.getMyInfo();

    // Get total of all the count variables in the info array. We want to show it on the badge
    const pendingCount = info.reduce((total, item) => total + (item.count || 0), 0);

    // Since having multiple digit text can break the badge, we are showing 99+
    // if the number is greater then 99.
    const unfinalisedCountText = pendingCount > 99 ? '99+' : pendingCount;

    return (
      <View style={{ position: 'relative' }}>
        {children}
        {pendingCount !== 0 && (
          <View style={[localStyles.mainWrapperStyle, mainWrapperStyle]}>
            <TouchableHighlight
              ref={ref => {
                this.touchableContainer = ref;
              }}
              style={localStyles.touchableContainerStyle}
              onPress={() => this.showPopover()}
            >
              <Badge
                value={unfinalisedCountText}
                badgeStyle={localStyles.badgeStyle}
                textStyle={localStyles.badgeFontStyle}
              />
            </TouchableHighlight>
            <Popover
              isVisible={isPopOverVisible}
              fromRect={rect}
              onRequestClose={() => this.closePopover()}
              popoverStyle={{ padding: 10, backgroundColor: SUSSOL_ORANGE }}
              arrowStyle={{ backgroundColor: SUSSOL_ORANGE }}
              backgroundStyle={{ backgroundColor: 'transparent' }}
              placement={popoverPosition}
            >
              <Text>{this.renderInfo(info)}</Text>
            </Popover>
          </View>
        )}
      </View>
    );
  }
}

export default InfoBadge;

InfoBadge.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  routeName: PropTypes.object.isRequired,
  children: PropTypes.element.isRequired,
  mainWrapperStyle: PropTypes.element,
  popoverPosition: PropTypes.string,
};

InfoBadge.defaultProps = {
  mainWrapperStyle: {},
  popoverPosition: 'auto',
};

const localStyles = StyleSheet.create({
  mainWrapperStyle: {
    position: 'absolute',
    top: 0,
    right: 8,
  },<commit_msg>Refactor infoBadge<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, View, TouchableHighlight, Text } from 'react-native';
import Popover from 'react-native-popover-view';
import Badge from './Badge';
import { SUSSOL_ORANGE } from '../globalStyles';
import { generalStrings } from '../localization';
import { routeList } from '../navigation/selectors';
import { UIDatabase } from '../database';

export class InfoBadge extends React.PureComponent {
  state = {
    isPopOverVisible: false,
    rect: {},
  };

  getMyInfo() {
    const { routeName } = this.props;
    const dataType = routeName in routeList ? routeList[routeName] : '';

    return [
      {
        count:
          dataType !== ''
            ? UIDatabase.objects(dataType).filtered('status != "finalised"').length
            : 0,
        title: `${generalStrings.unfinalised} ${generalStrings[routeName]}`,
      },
    ];
  }

  showPopover() {
    // Open popover and determine where to open it on canvas
    this.touchableContainer.measure((ox, oy, width, height, px, py) => {
      this.setState({
        isPopOverVisible: true,
        rect: { x: px, y: py, width, height },
      });
    });
  }

  closePopover() {
    this.setState({ isPopOverVisible: false });
  }

  render() {
    const { children, mainWrapperStyle, popoverPosition } = this.props;
    const { isPopOverVisible, rect } = this.state;
    const info = this.getMyInfo();

    // Get total of all the count variables in the info array. We want to show it on the badge
    const pendingCount = info.reduce((total, item) => total + (item.count || 0), 0);

    // Since having multiple digit text can break the badge, we are showing 99+
    // if the number is greater then 99.
    const unfinalisedCountText = pendingCount > 99 ? '99+' : pendingCount;

    return (
      <View style={{ position: 'relative' }}>
        {children}
        {pendingCount !== 0 && (
          <View style={[localStyles.mainWrapperStyle, mainWrapperStyle]}>
            <TouchableHighlight
              ref={ref => {
                this.touchableContainer = ref;
              }}
              style={localStyles.touchableContainerStyle}
              onPress={() => this.showPopover()}
            >
              <Badge
                value={unfinalisedCountText}
                badgeStyle={localStyles.badgeStyle}
                textStyle={localStyles.badgeFontStyle}
              />
            </TouchableHighlight>
            <Popover
              isVisible={isPopOverVisible}
              fromRect={rect}
              onRequestClose={() => this.closePopover()}
              popoverStyle={{ padding: 10, backgroundColor: SUSSOL_ORANGE }}
              arrowStyle={{ backgroundColor: SUSSOL_ORANGE }}
              backgroundStyle={{ backgroundColor: 'transparent' }}
              placement={popoverPosition}
            >
              <Text>
                {info.map(
                  (item, key) =>
                    item.count > 0 &&
                    item.text !== '' && (
                      // eslint-disable-next-line react/no-array-index-key
                      <Text key={key} style={{ color: '#FFF', fontSize: 12 }}>
                        {key === 0 ? '' : '\n'}
                        {item.title} : {item.count || item.text}
                      </Text>
                    )
                )}
              </Text>
            </Popover>
          </View>
        )}
      </View>
    );
  }
}

export default InfoBadge;

InfoBadge.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  routeName: PropTypes.string.isRequired,
  children: PropTypes.element.isRequired,
  // eslint-disable-next-line react/forbid-prop-types
  mainWrapperStyle: PropTypes.object,
  popoverPosition: PropTypes.string,
};

InfoBadge.defaultProps = {
  mainWrapperStyle: {},
  popoverPosition: 'auto',
};

const localStyles = StyleSheet.create({
  mainWrapperStyle: {
    position: 'absolute',
    top: 0,
    right: 8,
  },
{'fraction_non_alphanumeric': 0.12907268170426064, 'fraction_numerical': 0.005012531328320802, 'mean_word_length': 2.1733598409542743, 'pattern_counts': {'":': 0, '<': 30, '<?xml version=': 0, '>': 44, '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': '1275149', 'n_tokens_mistral': 2301, 'n_tokens_neox': 2254, 'n_words': 536}