src/components/InterviewsListt/InterviewsList.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import styles from './InterviewsList.module.scss'
import SortPanel from 'src/components/SortPanel'
import { formatMessage } from 'src/translations'
import ItemWithoutPreview from 'src/components/ReadMore/ItemWithoutPreview'

class InterviewsList extends Component {
  state = { interviews: this.props.interviews, activeOption: null }

  handleSortByOldDate = () => {
    this.setState({
      interviews: this.state.interviews.edges.sort(
        (a, b) => (a.node.publishDate > b.node.publishDate ? 1 : b.node.publishDate > a.node.publishDate ? -1 : 0),
      ),
    })
    this.setState({
      interviews: this.state.interviews
    })
  }

  handleSortByNewDate = () => {
    this.setState({
      interviews: this.state.interviews.edges.sort(
        (a, b) => (a.node.publishDate > b.node.publishDate ? -1 : b.node.publishDate > a.node.publishDate ? 1 : 0),
      ),
    })
    this.setState({
      interviews: this.state.interviews
    })
  }

  handleSort = (ev) => {
    this.setState({ activeOption: ev.target.value }, () => {
      if (this.state.activeOption === 'old') {
        this.handleSortByOldDate()
      } else if (this.state.activeOption === 'new') {
        this.handleSortByNewDate()
      }
    })
  }

  render() {
    console.log(this.state.interviews.edges)
    const {
      className,
      interviews: { edges },
      locale,
    } = this.props

    const sortOptions = [
      { type: 'new', text: formatMessage(locale, 'fromNewToOld') },
      { type: 'old', text: formatMessage(locale, 'fromOldToNew') },
    ]
    const articles = [...edges]

    return (
      <>
        <SortPanel
          title={formatMessage(locale, 'AllInterviews')}
          options={sortOptions}
          sortTitle={formatMessage(locale, 'Sort')}
          onGetOption={(ev) => this.handleSort(ev)}
        />

        <div>
          <section className={classNames(className, styles.root)}>
            <div className={styles.articles}>
              {articles.map((item) => <ItemWithoutPreview key={item.node.slug} {...item} />)}
            </div>
          </section>
        </div>
      </>
    )
  }
}

InterviewsList.propTypes = {
  className: PropTypes.string,
  edges: PropTypes.array,
  locale: PropTypes.string.isRequired,
}

export default InterviewsList