<commit_before>import React, { Component } from 'react';
import MainPage from '../components/MainPage';
import Sidebar from '../components/Sidebar';
import Menu from '../components/Menu';
import Header from '../components/Header';
import Search from '../components/Search';
import Mode from '../components/Mode';
import CountyListContainer from './CountyListContainer';
import CountyDetailContainer from './CountyDetailContainer';

class App extends Component {
  constructor(props) {
    super(props);
    this.handleCountyClick = this.handleCountyClick.bind(this);
    this.handleSearchChange = this.handleSearchChange.bind(this);
    this.handleFavoriteClick = this.handleFavoriteClick.bind(this);
    this.handleMode = this.handleMode.bind(this);
    this.state = {
      selectedCounty: '',
      searchTerm: '',
      favoriteCountiesIds: [],
      mode: 'all'
    };
  }

  handleCountyClick(countyId) {
    this.setState({ selectedCounty: countyId });
  }

  handleSearchChange(term) {
    this.setState({ searchTerm: term })
  }

  handleFavoriteClick(countyId) {
    const shouldAddFavorite = this.state.favoriteCountiesIds.indexOf(countyId) === -1;

    if (shouldAddFavorite) {
      this.setState((prevState) => ({ favoriteCountiesIds: prevState.favoriteCountiesIds.concat(countyId) }));
    } else {
      this.setState((prevState) => ({
        favoriteCountiesIds: prevState.favoriteCountiesIds.filter((id) => id !== countyId)
      }));
    }
  }

  handleMode(mode) {
    this.setState({ mode: mode });
  }

  render() {
    return (
      <MainPage>
        <Sidebar>
          <Menu>
            <Header title="US Health Indicators" />
            <Search onSearchChange={ this.handleSearchChange }/>
            <Mode mode={ this.state.mode } onModeChange={ this.handleMode }/>
          </Menu>
          <CountyListContainer
            countyId={ this.state.selectedCounty }
            onCountyClick={ this.handleCountyClick }
            searchTerm={ this.state.searchTerm }
            favoriteCountiesIds={ this.state.favoriteCountiesIds }
            onFavoriteClick={ this.handleFavoriteClick }
            mode={ this.state.mode } /><commit_msg>Update App to save favoriteCountiesIds in localStorage and retrieve them when component mounts<commit_after>import React, { Component } from 'react';
import MainPage from '../components/MainPage';
import Sidebar from '../components/Sidebar';
import Menu from '../components/Menu';
import Header from '../components/Header';
import Search from '../components/Search';
import Mode from '../components/Mode';
import CountyListContainer from './CountyListContainer';
import CountyDetailContainer from './CountyDetailContainer';

class App extends Component {
  constructor(props) {
    super(props);
    this.handleCountyClick = this.handleCountyClick.bind(this);
    this.handleSearchChange = this.handleSearchChange.bind(this);
    this.handleFavoriteClick = this.handleFavoriteClick.bind(this);
    this.handleMode = this.handleMode.bind(this);
    this.state = {
      selectedCounty: '',
      searchTerm: '',
      favoriteCountiesIds: [],
      mode: 'all'
    };
  }

  handleCountyClick(countyId) {
    this.setState({ selectedCounty: countyId });
  }

  handleSearchChange(term) {
    this.setState({ searchTerm: term })
  }

  handleFavoriteClick(countyId) {
    const shouldAddFavorite = this.state.favoriteCountiesIds.indexOf(countyId) === -1;

    if (shouldAddFavorite) {
      this.setState((prevState) => {
        const favoriteCountiesIds = prevState.favoriteCountiesIds.concat(countyId);
        this.save("favoriteCountiesIds", favoriteCountiesIds);
        return { favoriteCountiesIds: favoriteCountiesIds }
      });
    } else {
      this.setState((prevState) => {
        const favoriteCountiesIds = prevState.favoriteCountiesIds.filter((id) => id !== countyId) ;
        this.save("favoriteCountiesIds", favoriteCountiesIds);
        return { favoriteCountiesIds: favoriteCountiesIds };
      });
    }
  }

  handleMode(mode) {
    this.setState({ mode: mode });
  }

  save(key, value) {
    if (window.localStorage) {
      localStorage.setItem(key, JSON.stringify(value));
    }
  }

  retrieveLocalData(key) {
    if (window.localStorage) {
      return localStorage.getItem(key);
    }
  }

  componentDidMount() {
    const favoriteCountiesIds = this.retrieveLocalData("favoriteCountiesIds");
    if (favoriteCountiesIds === null) return;

    this.setState({ favoriteCountiesIds: JSON.parse(favoriteCountiesIds) });
  }

  render() {
    return (
      <MainPage>
        <Sidebar>
          <Menu>
            <Header title="US Health Indicators" />
            <Search onSearchChange={ this.handleSearchChange }/>
            <Mode mode={ this.state.mode } onModeChange={ this.handleMode }/>
          </Menu>
          <CountyListContainer
            countyId={ this.state.selectedCounty }
            onCountyClick={ this.handleCountyClick }
            searchTerm={ this.state.searchTerm }
            favoriteCountiesIds={ this.state.favoriteCountiesIds }
            onFavoriteClick={ this.handleFavoriteClick }
            mode={ this.state.mode } />
{'fraction_non_alphanumeric': 0.12328236887942713, 'fraction_numerical': 0.0003870718018192375, 'mean_word_length': 3.157683024939662, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 25, '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': '7215947', 'n_tokens_mistral': 1464, 'n_tokens_neox': 1445, 'n_words': 278}