<commit_before>import React, { useState, useEffect, useRef } from 'react';
import { createSliderWithTooltip, Range } from 'rc-slider';

import { mapController } from 'js/controllers/mapController';

const SliderWithTooltip = createSliderWithTooltip(Range);

interface TimeSliderProps {
  layerID: string;
}

const TimeSlider = (props: TimeSliderProps): JSX.Element => {
  const timeSliderRef = useRef();
  const { layerID } = props;
  const [range, setRange] = useState([2000, 2018]);
  const [prevRange, setPrevRange] = useState([2000, 2018]);
  const [playButton, setPlayButton] = useState(true);
  const [startTimeSlider, setStartTimeSlider] = useState(false);

  const marks = [
    { label: '2000', style: {} },
    { label: '2001', style: {} },
    { label: '2002', style: {} },
    { label: '2003', style: {} },
    { label: '2004', style: {} },
    { label: '2005', style: {} },
    { label: '2006', style: {} },
    { label: '2007', style: {} },
    { label: '2008', style: {} },
    { label: '2009', style: {} },
    { label: '2010', style: {} },
    { label: '2011', style: {} },
    { label: '2012', style: {} },
    { label: '2013', style: {} },
    { label: '2014', style: {} },
    { label: '2015', style: {} },
    { label: '2016', style: {} },
    { label: '2017', style: {} },
    { label: '2018', style: {} }
  ];

  useEffect(() => {
    const playSequence = (): void => {
      if (range[1] === prevRange[1]) {
        return;
      }
      const newMaxYear = (range[1] += 1);
      setRange([range[0], newMaxYear]);
      mapController.updateBaseTile(layerID, [range[0], newMaxYear]);
      clearInterval(timeSliderRef.current);
    };

    if (startTimeSlider && range[1] !== prevRange[1]) {
      (timeSliderRef as any).current = setInterval(playSequence, 1000);
    }
  }, [startTimeSlider, range[1], prevRange[1]]);

  const setSelectedRange = (selectedRange: Array<number>): void => {
    setRange(selectedRange);
    setPrevRange(selectedRange);
    mapController.updateBaseTile(layerID, selectedRange);
  };

  const setTimeSlider = (startPlaying: boolean): any => {
    if (startPlaying) {
      setRange([range[0], range[0]]);
      mapController.updateBaseTile(layerID, [range[0], range[0]]);
      setPlayButton(false);
      setStartTimeSlider(true);
    } else {
      setRange([2000, 2018]);
      setPrevRange([2000, 2018]);
      mapController.updateBaseTile(layerID, [2000, 2018]);
      setStartTimeSlider(false);<commit_msg>refactored to return clearInterval() to prevent side effects<commit_after>import React, { useState, useEffect, useRef } from 'react';
import { createSliderWithTooltip, Range } from 'rc-slider';

import { mapController } from 'js/controllers/mapController';

const SliderWithTooltip = createSliderWithTooltip(Range);

interface TimeSliderProps {
  layerID: string;
}

const TimeSlider = (props: TimeSliderProps): JSX.Element => {
  const timeSliderRef = useRef();
  const { layerID } = props;
  const [range, setRange] = useState([2000, 2018]);
  const [prevRange, setPrevRange] = useState([2000, 2018]);
  const [playButton, setPlayButton] = useState(true);
  const [startTimeSlider, setStartTimeSlider] = useState(false);

  const marks = [
    { label: '2000', style: {} },
    { label: '2001', style: {} },
    { label: '2002', style: {} },
    { label: '2003', style: {} },
    { label: '2004', style: {} },
    { label: '2005', style: {} },
    { label: '2006', style: {} },
    { label: '2007', style: {} },
    { label: '2008', style: {} },
    { label: '2009', style: {} },
    { label: '2010', style: {} },
    { label: '2011', style: {} },
    { label: '2012', style: {} },
    { label: '2013', style: {} },
    { label: '2014', style: {} },
    { label: '2015', style: {} },
    { label: '2016', style: {} },
    { label: '2017', style: {} },
    { label: '2018', style: {} }
  ];

  useEffect(() => {
    const playSequence = (): void => {
      if (range[1] === prevRange[1]) {
        return;
      }
      const newMaxYear = (range[1] += 1);
      setRange([range[0], newMaxYear]);
      mapController.updateBaseTile(layerID, [range[0], newMaxYear]);
    };

    if (startTimeSlider && range[1] !== prevRange[1]) {
      (timeSliderRef as any).current = setInterval(playSequence, 1000);
    }

    return (): any => {
      clearInterval(timeSliderRef.current);
    };
  }, [startTimeSlider, range[1], prevRange[1]]);

  const setSelectedRange = (selectedRange: Array<number>): void => {
    setRange(selectedRange);
    setPrevRange(selectedRange);
    mapController.updateBaseTile(layerID, selectedRange);
  };

  const setTimeSlider = (startPlaying: boolean): any => {
    if (startPlaying) {
      // * NOTE: plays time slider
      setRange([range[0], range[0]]);
      mapController.updateBaseTile(layerID, [range[0], range[0]]);
      setPlayButton(false);
      setStartTimeSlider(true);
    } else {
      // * NOTE: stops & resets time slider
      setRange([2000, 2018]);
      setPrevRange([2000, 2018]);
      mapController.updateBaseTile(layerID, [2000, 2018]);
      setStartTimeSlider(false);
{'fraction_non_alphanumeric': 0.1821933962264151, 'fraction_numerical': 0.05267295597484277, 'mean_word_length': 3.515527950310559, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 16, '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': '1783869', 'n_tokens_mistral': 1805, 'n_tokens_neox': 1639, 'n_words': 363}