<commit_before>import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import { setRenderPopup } from 'js/store/appState/actions';

import { RootState } from 'js/store';

import 'css/popup.scss';

const UserPointPopup = (): JSX.Element | null => {
  const dispatch = useDispatch();
  const [coordinates, setCoordinates] = useState<any | null>(null);

  const userCoordinates = useSelector(
    (state: RootState) => state.mapviewState.userCoordinates
  );
  const renderPopup = useSelector(
    (state: RootState) => state.appState.renderPopup
  );

  useEffect(() => {
    if (renderPopup && userCoordinates) {
      const latitude = (userCoordinates as any).latitude
        .toString()
        .match(/^-?\d+(?:\.\d{0,2})?/)[0];

      const longitude = (userCoordinates as any).longitude
        .toString()
        .match(/^-?\d+(?:\.\d{0,2})?/)[0];
      setCoordinates({
        latitude,
        longitude
      });
    } else {
      setCoordinates(null);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [renderPopup, userCoordinates]);

  return renderPopup ? (
    <div className="user-point-popup-wrapper">
      <button onClick={(): any => dispatch(setRenderPopup(!renderPopup))}>
        X
      </button>
      <div className="content-wrapper">
        <p className="header">Coordinate Values</p>
        <p>(Decimal degrees)</p>
        {coordinates && coordinates.latitude && (
          <p>Latitude: {coordinates.latitude}</p>
        )}
        {coordinates && coordinates.longitude && (
          <p>Longitude: {coordinates.longitude}</p>
        )}
      </div>
    </div>
  ) : null;
};

export default UserPointPopup;<commit_msg>refactored to leverage .toFixed(). Uses interface to type state.<commit_after>import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import { setRenderPopup } from 'js/store/appState/actions';

import { RootState } from 'js/store';

import 'css/popup.scss';

interface Coordinates {
  latitude: string;
  longitude: string;
}

const UserPointPopup = (): JSX.Element | null => {
  const dispatch = useDispatch();
  const [coordinates, setCoordinates] = useState<Coordinates | null>(null);

  const userCoordinates = useSelector(
    (state: RootState) => state.mapviewState.userCoordinates
  );
  const renderPopup = useSelector(
    (state: RootState) => state.appState.renderPopup
  );

  useEffect(() => {
    if (renderPopup && userCoordinates) {
      const latitude = userCoordinates.latitude.toFixed(2);
      const longitude = userCoordinates.longitude.toFixed(2);

      setCoordinates({
        latitude,
        longitude
      });
    } else {
      setCoordinates(null);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [renderPopup, userCoordinates]);

  return renderPopup ? (
    <div className="user-point-popup-wrapper">
      <button onClick={(): any => dispatch(setRenderPopup(!renderPopup))}>
        X
      </button>
      <div className="content-wrapper">
        <p className="header">Coordinate Values</p>
        <p>(Decimal degrees)</p>
        {coordinates && coordinates.latitude && (
          <p>Latitude: {coordinates.latitude}</p>
        )}
        {coordinates && coordinates.longitude && (
          <p>Longitude: {coordinates.longitude}</p>
        )}
      </div>
    </div>
  ) : null;
};

export default UserPointPopup;
{'fraction_non_alphanumeric': 0.14929252093560497, 'fraction_numerical': 0.002310135720473578, 'mean_word_length': 3.042007001166861, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 43, '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': '7479631', 'n_tokens_mistral': 1058, 'n_tokens_neox': 1064, 'n_words': 211}