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 { stripLeadingSlash } from 'history/PathUtils'
import search from 'src/img/search.png'

const categories = [
  // { id: 1, title: 'Experience level' },
  // { id: 2, title: 'Experience level' },
  { id: 3, title: 'Experience level' },
]

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 {
  state = {
    searchQuery: '',
    preparedJobs: this.props.jobs.filter(({ node: slug }) => slug !== '_'),
  }

  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 },
        },
      }) => selectedExperience === experience,
    )
    this.setState({ preparedJobs: filteredJobs })
  }

  handleClearFiltersClick = () => {
    this.setState({ preparedJobs: this.props.jobs })
  }

  handleSearchKeyWordChange = (event) => {
    this.setState({ searchQuery: event.target.value }, () => {
      if (this.state.searchQuery.length >= 3) {
        this.searchByKeyWord(this.state.searchQuery)
      }
    })
  }

  handleSubmit = (event) => {
    event.preventDefault()
    this.searchByKeyWord(this.state.searchQuery)
  }

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

  render() {
    const { preparedJobs, searchQuery } = this.state
    const { jobTags, experienceLevels } = this.props
    return (
      <>
        <div className={styles.cover} />
        <div className={styles.root}>
          <div className={styles.inner}>
            <div className={styles.categoriesInnerContainer}>
              <h1>Select job categories: </h1>
              <div className={styles.tags}>
                {jobTags.map(({ node: { id, title } }) => (
                  <button className={styles.tag} key={id} onClick={() => this.handleTagClick(title)}>
                    {title}
                  </button>
                ))}
              </div>
              <form className={styles.filtersForm} onSubmit={this.handleSubmit}>
                <select className={styles.level} onChange={this.handleExperienceChange}>
                  {experienceLevels.map(({ node: { id, title } }) => (
                    <option key={id} value={title}>
                      {title}
                    </option>
                  ))}
                </select>
                {categories.map((item) => (
                  <select className={styles.level} key={item.id}>
                    <option value="0">{item.title}</option>
                  </select>
                ))}
                <input
                  className={styles.search}
                  value={searchQuery}
                  onChange={this.handleSearchKeyWordChange}
                  placeholder={'Search..'}
                />
                <img src={search} alt="" className={styles.loopa} />
                <button className={styles.clear} onClick={this.handleClearFiltersClick}>
                  Clear filters
                </button>
              </form>
            </div>
          </div>
          <div className={styles.jobsContainer}>
            <div className={styles.listContainer}>
              <div className={styles.total}>
                <h3>NYC TECH JOBS AND STARTUP JOBS</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={`/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