<commit_before>import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { Animated, Text } from 'react-native';
import PropTypes from 'prop-types';

import { FlexRow } from './FlexRow';
import { FlexView } from './FlexView';
import { HotBreachIcon } from './HotBreachIcon';
import { ColdBreachIcon } from './ColdBreachIcon';
import { LowBatteryIcon, TemperatureIcon } from './icons';

import { DARKER_GREY, APP_FONT_FAMILY, COLD_BREACH_BLUE, WHITE, DANGER_RED } from '../globalStyles';
import { MILLISECONDS } from '../utilities';
import { Rectangle } from './Rectangle';
import temperature from '../utilities/temperature';

import {
  selectCurrentTemperatureByMac,
  selectIsInColdBreachByMac,
  selectIsInHotBreachByMac,
  selectIsLowBatteryByMac,
} from '../selectors/Entities/sensor';

const BigText = ({ children, colour }) => (
  <Text style={{ ...styles.bigText, color: colour }}>{children}</Text>
);

BigText.defaultProps = { colour: WHITE };
BigText.propTypes = { children: PropTypes.node.isRequired, colour: PropTypes.string };

export const SensorStatusComponent = ({
  isInHotBreach,
  isInColdBreach,
  isLowBattery,
  currentTemperature,
}) => {
  const fadeAnim1 = React.useRef(new Animated.Value(0)).current;
  const fadeAnim2 = React.useRef(new Animated.Value(0)).current;
  const fadeAnim3 = React.useRef(new Animated.Value(0)).current;
  const animRef = React.useRef(null);

  const conditions = [isInHotBreach, isInColdBreach, isLowBattery];
  const animationValues = [fadeAnim1, fadeAnim2, fadeAnim3].filter((_, i) => conditions[i]);
  const isInDanger = isInHotBreach || isInColdBreach || isLowBattery;

  const stopAnimating = () => animRef?.current?.stop();

  const startAnimating = () => {
    // If there is a ref to an animation, stop it before starting
    // a new one.
    stopAnimating();

    // Start an infinite looping sequence of animations.
    animRef.current = Animated.loop(
      // Sequence is a a sequence of sequences - each sub sequence being
      // for a specific icon which should be shown. i.e. if the fridge is
      // low battery and has a hot breach, there is a sequence of sequences
      // for each icon.
      Animated.sequence(
        // Map each animation value (which can be thought of as an icon)
        // to a sequence which will increase the opacity of the icon to full
        // over one second, then reduce the opacity to zero over one second.
        animationValues.map(value =>
          Animated.sequence([
            Animated.delay(MILLISECONDS.ONE_SECOND / 4),
            Animated.timing(value, {
              toValue: 1,
              duration: MILLISECONDS.ONE_SECOND,
              useNativeDriver: true,
            }),
            Animated.timing(value, {
              toValue: 0,
              duration: MILLISECONDS.ONE_SECOND,
              useNativeDriver: true,
            }),
          ])
        )
      )
    );

    animRef.current.start();
  };

  useEffect(() => {
    if (isInDanger) startAnimating();
    if (!isInDanger) stopAnimating();
  }, [isInDanger, isInHotBreach, isInColdBreach, isLowBattery]);

  return !isInDanger ? (
    <Rectangle colour={WHITE}>
      <FlexRow alignItems="center">
        <BigText colour={DARKER_GREY}>{temperature(currentTemperature).format()}</BigText>
        <TemperatureIcon />
      </FlexRow>
    </Rectangle>
  ) : (
    <Rectangle colour={isInColdBreach ? COLD_BREACH_BLUE : DANGER_RED}>
      <FlexRow flex={1}>
        <FlexView flex={2} alignItems="center" justifyContent="center">
          <BigText>{temperature(currentTemperature).format()}</BigText>
        </FlexView>

        <FlexView alignItems="center" justifyContent="center">
          <Animated.View style={styles.icon} opacity={fadeAnim1}>
            <HotBreachIcon />
          </Animated.View>

          <Animated.View style={styles.icon} opacity={fadeAnim2}>
            <ColdBreachIcon />
          </Animated.View>

          <Animated.View style={{ ...styles.icon, paddingRight: 5 }} opacity={fadeAnim3}>
            <LowBatteryIcon size={20} />
          </Animated.View>
        </FlexView>
      </FlexRow>
    </Rectangle>
  );
};

const styles = {
  icon: { position: 'absolute', alignSelf: 'flex-end' },
  bigText: { fontSize: 24, fontFamily: APP_FONT_FAMILY },
};

SensorStatusComponent.defaultProps = {<commit_msg>Add toned down text size<commit_after>import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { Animated, Text } from 'react-native';
import PropTypes from 'prop-types';

import { FlexRow } from './FlexRow';
import { FlexView } from './FlexView';
import { HotBreachIcon } from './HotBreachIcon';
import { ColdBreachIcon } from './ColdBreachIcon';
import { LowBatteryIcon, TemperatureIcon } from './icons';

import { DARKER_GREY, APP_FONT_FAMILY, COLD_BREACH_BLUE, WHITE, DANGER_RED } from '../globalStyles';
import { MILLISECONDS } from '../utilities';
import { Rectangle } from './Rectangle';
import temperature from '../utilities/temperature';

import {
  selectCurrentTemperatureByMac,
  selectIsInColdBreachByMac,
  selectIsInHotBreachByMac,
  selectIsLowBatteryByMac,
} from '../selectors/Entities/sensor';

const BigText = ({ children, colour }) => (
  <Text style={{ ...styles.bigText, color: colour }}>{children}</Text>
);

BigText.defaultProps = { colour: WHITE };
BigText.propTypes = { children: PropTypes.node.isRequired, colour: PropTypes.string };

export const SensorStatusComponent = ({
  isInHotBreach,
  isInColdBreach,
  isLowBattery,
  currentTemperature,
}) => {
  const fadeAnim1 = React.useRef(new Animated.Value(0)).current;
  const fadeAnim2 = React.useRef(new Animated.Value(0)).current;
  const fadeAnim3 = React.useRef(new Animated.Value(0)).current;
  const animRef = React.useRef(null);

  const conditions = [isInHotBreach, isInColdBreach, isLowBattery];
  const animationValues = [fadeAnim1, fadeAnim2, fadeAnim3].filter((_, i) => conditions[i]);
  const isInDanger = isInHotBreach || isInColdBreach || isLowBattery;

  const stopAnimating = () => animRef?.current?.stop();

  const startAnimating = () => {
    // If there is a ref to an animation, stop it before starting
    // a new one.
    stopAnimating();

    // Start an infinite looping sequence of animations.
    animRef.current = Animated.loop(
      // Sequence is a a sequence of sequences - each sub sequence being
      // for a specific icon which should be shown. i.e. if the fridge is
      // low battery and has a hot breach, there is a sequence of sequences
      // for each icon.
      Animated.sequence(
        // Map each animation value (which can be thought of as an icon)
        // to a sequence which will increase the opacity of the icon to full
        // over one second, then reduce the opacity to zero over one second.
        animationValues.map(value =>
          Animated.sequence([
            Animated.delay(MILLISECONDS.ONE_SECOND / 4),
            Animated.timing(value, {
              toValue: 1,
              duration: MILLISECONDS.ONE_SECOND,
              useNativeDriver: true,
            }),
            Animated.timing(value, {
              toValue: 0,
              duration: MILLISECONDS.ONE_SECOND,
              useNativeDriver: true,
            }),
          ])
        )
      )
    );

    animRef.current.start();
  };

  useEffect(() => {
    if (isInDanger) startAnimating();
    if (!isInDanger) stopAnimating();
  }, [isInDanger, isInHotBreach, isInColdBreach, isLowBattery]);

  return !isInDanger ? (
    <Rectangle colour={WHITE}>
      <FlexRow alignItems="center">
        <BigText colour={DARKER_GREY}>{temperature(currentTemperature).format()}</BigText>
        <TemperatureIcon />
      </FlexRow>
    </Rectangle>
  ) : (
    <Rectangle colour={isInColdBreach ? COLD_BREACH_BLUE : DANGER_RED}>
      <FlexRow flex={1}>
        <FlexView flex={2} alignItems="center" justifyContent="center">
          <BigText>{temperature(currentTemperature).format()}</BigText>
        </FlexView>

        <FlexView alignItems="center" justifyContent="center">
          <Animated.View style={styles.icon} opacity={fadeAnim1}>
            <HotBreachIcon />
          </Animated.View>

          <Animated.View style={styles.icon} opacity={fadeAnim2}>
            <ColdBreachIcon />
          </Animated.View>

          <Animated.View style={{ ...styles.icon, paddingRight: 5 }} opacity={fadeAnim3}>
            <LowBatteryIcon size={20} />
          </Animated.View>
        </FlexView>
      </FlexRow>
    </Rectangle>
  );
};

const styles = {
  icon: { position: 'absolute', alignSelf: 'flex-end' },
  bigText: { fontSize: 20, fontFamily: APP_FONT_FAMILY },
};

SensorStatusComponent.defaultProps = {
{'fraction_non_alphanumeric': 0.12658517079858334, 'fraction_numerical': 0.00502684793784988, 'mean_word_length': 2.991792065663475, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 73, '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': '4199101', 'n_tokens_mistral': 2740, 'n_tokens_neox': 2639, 'n_words': 648}