src/components/AudiosList/AudiosList.js

/* eslint-disable */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Preview from './Preview'
import SortPanel from 'src/components/SortPanel'
import { formatMessage } from 'src/translations'
import MissingContent from 'src/components/MissingContent'
import styles from './AudiosList.module.scss'

class AudiosList extends Component {
  state = {
    audios: null,
  }

  componentDidMount() {
    this.setState({ audios: this.props.audios.filter((item) => item.title !== '_') }, () => {
      this.state.audios.map((item) => {
        let secondsDuration = item.node.duration.split(':').map((item, index) => (index === 0 ? item * 60 : +item)).reduce((a, b) => a + b, 0)
        item.secondsDuration = secondsDuration
      })
    })
  }

  handleSortByDuration = () => {
    this.setState({
      audios: []
        .concat(this.state.audios)
        .sort((a, b) => (a.secondsDuration < b.secondsDuration ? 1 : b.secondsDuration < a.secondsDuration ? -1 : 0)),
    })
  }

  handleSortByDate = () => {
    this.setState({
      audios: []
        .concat(this.state.audios)
        .sort((a, b) => (a.publishdate > b.publishdate ? 1 : b.publishdate > a.publishdate ? -1 : 0)),
    })
  }

  handleSort = (ev) => {
    this.setState({ activeOption: ev.target.value }, () => {
      if (this.state.activeOption === 'duration') {
        this.handleSortByDuration()
      } else if (this.state.activeOption === 'date') {
        this.handleSortByDate()
      }
    })
  }

  render() {
    console.log(this.state.audios)
    const { style, locale } = this.props
    const options = [
      { type: 'duration', text: formatMessage(locale, 'duration') },
      { type: 'date', text: formatMessage(locale, 'date') },
    ]

    const content = (
      <>
        <SortPanel
          title={formatMessage(locale, 'Allpodcasts')}
          options={options}
          sortTitle={formatMessage(locale, 'Sortby')}
          onGetOption={(ev) => this.handleSort(ev)}
        />
        <section className={styles.root} style={style}>
          <div className={styles.inner}>
            <div className={styles.wrap}>
              {this.state.audios &&
                this.state.audios.map((item) => <Preview key={item.node.title} {...item} locale={locale} />)}
            </div>
          </div>
        </section>
      </>
    )

    return this.state.audios && locale !== 'en' ? content : <MissingContent locale={locale} title={'missingPodcasts'} />
  }
}

AudiosList.propTypes = {
  className: PropTypes.string,
  locale: PropTypes.string.isRequired,
}

export default AudiosList