src/components/AllJobs/AllJobs.js

import React, { Component } from 'react'
import styles from './AllJobs.module.scss'
import posed, { PoseGroup } from 'react-pose'
import shuffle from 'src/shuffle'
import { Link } from 'gatsby'
import Img from 'gatsby-image'
import { getLink } from 'src/utils'
import { formatMessage } from 'src/translations'

const Item = posed.div({
  flip: {
    scale: 1,
    transition: {
      scale: {
        type: 'spring',
        velocity: 3,
      },
      default: {
        type: 'spring',
      },
    },
    //    transition: { type: 'spring', stiffness: 100 },
  },
})

class AllJobs extends Component {
  constructor(props) {
    super(props)
    this.defaultExperienceOption = this.props.locale === 'ru' ? 'Уровень опыта' : 'Experience level'
    this.searchInputRef = React.createRef()
  }

  state = {
    preparedJobs: this.props.jobs.filter(({ node: slug }) => slug !== '_'),
    selectedExperience: this.defaultExperienceOption,
  }

  handleTagClick = (tagTitle) => {
    this.setState(
      {
        preparedJobs: this.props.jobs.filter(
          ({
            node: {
              tag: { title },
            },
          }) => title === tagTitle,
        ),
      },
      () =>
        this.setState({
          preparedJobs: shuffle(
            this.props.jobs.filter(
              ({
                node: {
                  tag: { title },
                },
              }) => title === tagTitle,
            ),
          ),
        }),
    )
  }

  handleExperienceChange = (event) => {
    const selectedExperience = event.target.value
    const filteredJobs = this.props.jobs.filter(({ node: { experienceLevel: { title: experience } } }) => {
      if (selectedExperience === experience) {
        return true
      }
      if (selectedExperience === this.defaultExperienceOption) {
        return true
      }
      return false
    })
    this.setState({ preparedJobs: filteredJobs, selectedExperience: selectedExperience })
  }

  handleClearFiltersClick = () => {
    this.searchInputRef.current.value = ''
    this.setState({ preparedJobs: this.props.jobs, selectedExperience: this.defaultExperienceOption })
  }

  handleSubmit = (event) => {
    event.preventDefault()
    this.setState({ selectedExperience: this.defaultExperienceOption })
    this.searchByKeyWord(this.searchInputRef.current.value)
  }

  searchByKeyWord = (query) => {
    const result = this.props.jobs.filter(({ node: { title } }) => {
      if (title.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) >= 0) {
        return true
      }
      return false
    })
    this.setState({ preparedJobs: result })
  }

  render() {
    const { preparedJobs } = this.state
    const { jobTags, experienceLevels, locale } = this.props

    return (
      <>
        <Img className={styles.cover} fluid={this.props.background.childImageSharp.fluid} />
        <div className={styles.root}>
          <div className={styles.inner}>
            <div className={styles.categoriesInnerContainer}>
              <h1 className={styles.sectionTitle}>{formatMessage(locale, 'selectJobCategories')}</h1>
              <div className={styles.tags}>
                {jobTags.map(({ node: { id, title } }) => (
                  <button className={styles.tag} key={id} onClick={() => this.handleTagClick(title)}>
                    {title}
                  </button>
                ))}
              </div>
              <div className={styles.filters}>
                <form className={styles.filtersForm} onSubmit={this.handleSubmit}>
                  <div className={styles.filtersContainer}>
                    <select
                      className={styles.level}
                      value={this.state.selectedExperience}
                      onChange={this.handleExperienceChange}
                    >
                      <option key="default" value={this.defaultExperienceOption}>
                        {this.defaultExperienceOption}
                      </option>
                      {experienceLevels.map(({ node: { id, title } }) => (
                        <option key={id} value={title}>
                          {title}
                        </option>
                      ))}
                    </select>
                    <input
                      className={styles.search}
                      ref={this.searchInputRef}
                      placeholder={formatMessage(locale, 'searchByKeyword')}
                    />
                  </div>
                </form>
                <button className={styles.clear} onClick={this.handleClearFiltersClick}>
                  {formatMessage(locale, 'clearFilters')}
                </button>
              </div>
            </div>
          </div>
          <div className={styles.jobsContainer}>
            <div className={styles.listContainer}>
              <div className={styles.total}>
                <h3>{formatMessage(locale, 'searchResult')}</h3>
                <span>{preparedJobs.length}</span>
              </div>
              <div className={styles.listJobs}>
                <PoseGroup>
                  {preparedJobs.map(
                    ({
                      node: {
                        title,
                        description,
                        locationDescription,
                        companyLogo: { url: companyLogo },
                        slug,
                        id,
                      },
                    }) => (
                      <Item key={id}>
                        <Link to={getLink(locale, `job/${slug}`)} key={title} className={styles.jobLink}>
                          <div className={styles.oneJob}>
                            <div className={styles.companyLogo}>
                              <img src={companyLogo} alt="" />
                            </div>
                            <div className={styles.jobInfo}>
                              <div className={styles.title}>{title}</div>
                              <div>
                                <div className={styles.location}>{locationDescription}</div>
                                <div className={styles.description}>
                                  {description.length >= 245 ? `${description.substring(0, 245)}...` : description}
                                </div>
                              </div>
                            </div>
                          </div>
                        </Link>
                      </Item>
                    ),
                  )}
                </PoseGroup>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
}

export default AllJobs