<commit_before>import React, { Component } from 'react';
import {Link, Page, Layout, DisplayText} from '@shopify/polaris';
import {format, isPast, compareAsc, compareDesc} from 'date-fns'

import ConferenceList from '../ConferenceList';
import ConferenceFilter from '../ConferenceFilter';

export default class App extends Component {
  state =  {
    filters: {
      year: '2017',
      type: 'javascript'
    },
    showPast: false,
    loading: true,
    conferences: []
  }

  componentDidMount() {
    this.loadConference();
  }

  loadConference = () => {
    const {filters} = this.state;

    fetch(getConferenceLink(filters))
      .then((result) => result.json())
      .then((conferences) => {
        this.setState({loading: false, conferences: sortByDate(conferences, 'asc')});
      })
      .catch((error) => {
        console.error(error);
      })
  }

  handleYearChange = (year) => {
    const {filters} = this.state;

    this.setState({
      filters: {...filters, year}
    }, this.loadConference);
  }

  handleTypeChange = (type) => {
    const {filters} = this.state;

    this.setState({
      filters: {...filters, type}
    }, this.loadConference);
  }

  togglePast = () => {
    const {showPast} = this.state;
    this.setState({showPast: !showPast});
  }

  pastConferenceToggler = () => {
    const {showPast, filters: {year}} = this.state;
    const activeYear = (new Date()).getFullYear().toString() === year;

    if (!activeYear) { return null; }

    return (
      <p>
        <Link onClick={this.togglePast}>
          {showPast ? 'Hide past conferences' : 'Show past conferences' }
        </Link>
      </p>
    )
  }

  showDuplicates = (conferences) => {
    if (process.env.NODE_ENV !== 'development') { return null; }
    return (
      <ul>
        <li><strong>DUPLICATES</strong></li>
        {getDuplicates(conferences).map((conf) =>
          <li>{conf.name}: {conf.url}</li>
        )}
      </ul>
    );
  }

  sortByDate = (direction) => {
    const {conferences} = this.state;

    this.setState({
      conferences: sortByDate(conferences, direction)
    })
  }

  filterConferences = (conferences) => {
    const {showPast} = this.state;

    if (showPast) { return conferences; }

    return conferences.filter((conference) => {
      return !isPast(format(conference.startDate))
    })
  }

  render() {
    const {loading, conferences, filters: {year, type}} = this.state;

    return (
      <Page>
        <Layout>
          <Layout.Section>
            <DisplayText size="extraLarge">The conference list</DisplayText>
            <DisplayText size="small">An exaustive list</DisplayText>
          </Layout.Section>
          <Layout.Section>
            <ConferenceFilter
              year={year}
              type={type}
              onYearChange={this.handleYearChange}
              onTypeChange={this.handleTypeChange}
            />
          </Layout.Section>
          <Layout.Section>
            <Link
              url="https://github.com/nimzco/the-conference-list/issues/new"
              external
            >
              Add a conference
            </Link>
          </Layout.Section>
          <Layout.Section>
            {this.showDuplicates(conferences)}
            {this.pastConferenceToggler()}
            {loading ? '...' :
              <ConferenceList conferences={this.filterConferences(conferences)} sortByDate={this.sortByDate}/>
            }
          </Layout.Section>
          <Layout.Section>
            <p>
              Maintained by&nbsp;<commit_msg>Hide duplicates conf<commit_after>import React, { Component } from 'react';
import {Link, Page, Layout, DisplayText} from '@shopify/polaris';
import {format, isPast, compareAsc, compareDesc} from 'date-fns'

import ConferenceList from '../ConferenceList';
import ConferenceFilter from '../ConferenceFilter';

export default class App extends Component {
  state =  {
    filters: {
      year: '2017',
      type: 'javascript'
    },
    showPast: false,
    loading: true,
    conferences: []
  }

  componentDidMount() {
    this.loadConference();
  }

  loadConference = () => {
    const {filters} = this.state;

    fetch(getConferenceLink(filters))
      .then((result) => result.json())
      .then((conferences) => {
        this.setState({loading: false, conferences: sortByDate(conferences, 'asc')});
      })
      .catch((error) => {
        console.error(error);
      })
  }

  handleYearChange = (year) => {
    const {filters} = this.state;

    this.setState({
      filters: {...filters, year}
    }, this.loadConference);
  }

  handleTypeChange = (type) => {
    const {filters} = this.state;

    this.setState({
      filters: {...filters, type}
    }, this.loadConference);
  }

  togglePast = () => {
    const {showPast} = this.state;
    this.setState({showPast: !showPast});
  }

  pastConferenceToggler = () => {
    const {showPast, filters: {year}} = this.state;
    const activeYear = (new Date()).getFullYear().toString() === year;

    if (!activeYear) { return null; }

    return (
      <p>
        <Link onClick={this.togglePast}>
          {showPast ? 'Hide past conferences' : 'Show past conferences' }
        </Link>
      </p>
    )
  }

  showDuplicates = (conferences) => {
    if (process.env.NODE_ENV !== 'development') { return null; }
    return (
      <ul>
        <li><strong>DUPLICATES</strong></li>
        {getDuplicates(conferences).map((conf) =>
          <li>{conf.name}: {conf.url}</li>
        )}
      </ul>
    );
  }

  sortByDate = (direction) => {
    const {conferences} = this.state;

    this.setState({
      conferences: sortByDate(conferences, direction)
    })
  }

  filterConferences = (conferences) => {
    const {showPast} = this.state;

    if (showPast) { return conferences; }

    return conferences.filter((conference) => {
      return !isPast(format(conference.startDate))
    })
  }

  render() {
    const {loading, conferences, filters: {year, type}} = this.state;

    return (
      <Page>
        <Layout>
          <Layout.Section>
            <DisplayText size="extraLarge">The conference list</DisplayText>
            <DisplayText size="small">An exaustive list</DisplayText>
          </Layout.Section>
          <Layout.Section>
            <ConferenceFilter
              year={year}
              type={type}
              onYearChange={this.handleYearChange}
              onTypeChange={this.handleTypeChange}
            />
          </Layout.Section>
          <Layout.Section>
            <Link
              url="https://github.com/nimzco/the-conference-list/issues/new"
              external
            >
              Add a conference
            </Link>
          </Layout.Section>
          <Layout.Section>
            {this.pastConferenceToggler()}
            {loading ? '...' :
              <ConferenceList conferences={this.filterConferences(conferences)} sortByDate={this.sortByDate}/>
            }
          </Layout.Section>
          <Layout.Section>
            <p>
              Maintained by&nbsp;
{'fraction_non_alphanumeric': 0.14509748516530094, 'fraction_numerical': 0.0011302627860977678, 'mean_word_length': 2.1901757548445246, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 93, 'https://': 2, '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': '3679792', 'n_tokens_mistral': 2158, 'n_tokens_neox': 2078, 'n_words': 400}