<commit_before>import { LocalizationProps, Localized, withLocalization } from 'fluent-react';
import * as React from 'react';
import { connect } from 'react-redux';
import API from '../../../services/api';
import {
  InProgressLanguage,
  LaunchedLanguage,
} from '../../../../../common/language-stats';
import { NATIVE_NAMES } from '../../../services/localization';
import StateTree from '../../../stores/tree';
import RequestLanguageModal from '../../request-language-modal/request-language-modal';
import { CloseIcon, SearchIcon } from '../../ui/icons';
import { Button, Hr, TextButton } from '../../ui/ui';
import LocalizationBox, { LoadingLocalizationBox } from './localization-box';

interface PropsFromState {
  api: API;
}

interface Props extends PropsFromState, LocalizationProps {}

type LanguageSection = 'in-progress' | 'launched';

interface State {
  inProgress: InProgressLanguage[];
  filteredInProgress: InProgressLanguage[];
  launched: LaunchedLanguage[];
  filteredLaunched: LaunchedLanguage[];
  localeMessages: string[][];
  selectedSection: LanguageSection;
  showAllInProgress: boolean;
  showAllLaunched: boolean;
  showLanguageRequestModal: boolean;
  query: string;
}

class LanguagesPage extends React.PureComponent<Props, State> {
  state: State = {
    inProgress: [],
    filteredInProgress: [],
    launched: [],
    filteredLaunched: [],
    localeMessages: null,
    selectedSection: 'launched',
    showAllInProgress: false,
    showAllLaunched: false,
    showLanguageRequestModal: false,
    query: '',
  };

  smallSearchInputRef = React.createRef<HTMLInputElement>();
  largeSearchInputRef = React.createRef<HTMLInputElement>();

  async componentDidMount() {
    const { api } = this.props;

    const [localeMessages, { launched, inProgress }] = await Promise.all([
      api.fetchCrossLocaleMessages(),
      api.fetchLanguageStats(),
    ]);

    inProgress.sort(
      (l1, l2) =>
        l1.sentencesCount < l2.sentencesCount ||
        l1.localizedPercentage < l2.localizedPercentage
          ? 1
          : -1
    );
    launched.sort(
      (l1, l2) => (l1.locale === 'en' || l1.seconds < l2.seconds ? 1 : -1)
    );

    this.setState({
      inProgress,
      filteredInProgress: inProgress,
      launched,
      filteredLaunched: launched,
      localeMessages,
    });
  }

  toggleShowAllInProgress = () =>
    this.setState(state => ({ showAllInProgress: !state.showAllInProgress }));

  toggleShowAllLaunched = () =>
    this.setState(state => ({ showAllLaunched: !state.showAllLaunched }));

  toggleSearch = () =>
    this.setState(({ inProgress, launched }) => ({
      filteredInProgress: inProgress,
      filteredLaunched: launched,
      query: '',
    }));

  changeSection = (section: LanguageSection) => {
    this.setState({
      selectedSection: section,
      showAllInProgress: false,
      showAllLaunched: false,
    });
  };

  handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { inProgress, launched, selectedSection } = this.state;
    const query = event.target.value;

    function filterLanguages<T>(languages: T[]): T[] {
      return query
        ? languages.filter(({ locale: { code, name } }: any) => {
            const q = query.toLowerCase();
            return (
              name.toLowerCase().includes(q) ||
              NATIVE_NAMES[code].toLowerCase().includes(q)<commit_msg>fix language search<commit_after>import { LocalizationProps, Localized, withLocalization } from 'fluent-react';
import * as React from 'react';
import { connect } from 'react-redux';
import API from '../../../services/api';
import {
  InProgressLanguage,
  LaunchedLanguage,
} from '../../../../../common/language-stats';
import { NATIVE_NAMES } from '../../../services/localization';
import StateTree from '../../../stores/tree';
import RequestLanguageModal from '../../request-language-modal/request-language-modal';
import { CloseIcon, SearchIcon } from '../../ui/icons';
import { Button, Hr, TextButton } from '../../ui/ui';
import LocalizationBox, { LoadingLocalizationBox } from './localization-box';

interface PropsFromState {
  api: API;
}

interface Props extends PropsFromState, LocalizationProps {}

type LanguageSection = 'in-progress' | 'launched';

interface State {
  inProgress: InProgressLanguage[];
  filteredInProgress: InProgressLanguage[];
  launched: LaunchedLanguage[];
  filteredLaunched: LaunchedLanguage[];
  localeMessages: string[][];
  selectedSection: LanguageSection;
  showAllInProgress: boolean;
  showAllLaunched: boolean;
  showLanguageRequestModal: boolean;
  query: string;
}

class LanguagesPage extends React.PureComponent<Props, State> {
  state: State = {
    inProgress: [],
    filteredInProgress: [],
    launched: [],
    filteredLaunched: [],
    localeMessages: null,
    selectedSection: 'launched',
    showAllInProgress: false,
    showAllLaunched: false,
    showLanguageRequestModal: false,
    query: '',
  };

  smallSearchInputRef = React.createRef<HTMLInputElement>();
  largeSearchInputRef = React.createRef<HTMLInputElement>();

  async componentDidMount() {
    const { api } = this.props;

    const [localeMessages, { launched, inProgress }] = await Promise.all([
      api.fetchCrossLocaleMessages(),
      api.fetchLanguageStats(),
    ]);

    inProgress.sort(
      (l1, l2) =>
        l1.sentencesCount < l2.sentencesCount ||
        l1.localizedPercentage < l2.localizedPercentage
          ? 1
          : -1
    );
    launched.sort(
      (l1, l2) => (l1.locale === 'en' || l1.seconds < l2.seconds ? 1 : -1)
    );

    this.setState({
      inProgress,
      filteredInProgress: inProgress,
      launched,
      filteredLaunched: launched,
      localeMessages,
    });
  }

  toggleShowAllInProgress = () =>
    this.setState(state => ({ showAllInProgress: !state.showAllInProgress }));

  toggleShowAllLaunched = () =>
    this.setState(state => ({ showAllLaunched: !state.showAllLaunched }));

  toggleSearch = () =>
    this.setState(({ inProgress, launched }) => ({
      filteredInProgress: inProgress,
      filteredLaunched: launched,
      query: '',
    }));

  changeSection = (section: LanguageSection) => {
    this.setState({
      selectedSection: section,
      showAllInProgress: false,
      showAllLaunched: false,
    });
  };

  handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { inProgress, launched, selectedSection } = this.state;
    const query = event.target.value;

    function filterLanguages<T>(languages: T[]): T[] {
      return query
        ? languages.filter(({ locale }: any) => {
            const q = query.toLowerCase();
            return (
              locale.toLowerCase().includes(q) ||
              (NATIVE_NAMES[locale] || '').toLowerCase().includes(q)
{'fraction_non_alphanumeric': 0.14222744637084925, 'fraction_numerical': 0.004407875404055245, 'mean_word_length': 3.316423589093215, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 35, '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': '7652856', 'n_tokens_mistral': 1944, 'n_tokens_neox': 1973, 'n_words': 414}