src/components/Jobs/Jobs.js

import React, { Component } from 'react'
import classNames from 'classnames'
import { Link } from 'gatsby'
import posed, { PoseGroup } from 'react-pose'
import shuffle from 'src/shuffle'
import styles from './Jobs.module.scss'
import { width } from 'window-size'
// import vector from 'src/img/Vector.png'

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

class Jobs extends Component {
  state = {
    preparedOffers: this.props.offers.filter(({ node: slug }) => slug !== '_').slice(0, 4),
  }

  handleTagClick = (tagTitle) => {
    this.setState(
      {
        preparedOffers: this.props.offers
          .filter(
            ({
              node: {
                tag: { title },
              },
            }) => title === tagTitle,
          )
          .slice(0, 4),
      },
      () =>
        this.setState({
          preparedOffers: shuffle(
            this.props.offers
              .filter(
                ({
                  node: {
                    tag: { title },
                  },
                }) => title === tagTitle,
              )
              .slice(0, 4),
          ),
        }),
    )
  }

  render() {
    const { preparedOffers } = this.state
    const { className, jobTags } = this.props
    return (
      <div className={classNames(className, styles.root)}>
        <section className={styles.container}>
          <header className={styles.header}>
            <h1>JOBS</h1>
          </header>
          <div className={styles.blocksContainer}>
            <div className={styles.tagsContainer}>
              <div className={styles.jobsTitle}>
                <h2>Tags:</h2>
              </div>
              <div className={styles.buttonsContainer}>
                {jobTags.map(({ node }) => (
                  <button className={styles.button} key={node.id} onClick={() => this.handleTagClick(node.title)}>
                    {node.title}
                  </button>
                ))}
              </div>
              <div className={styles.gemsContainer}>
                <div className={styles.innerContainer}>
                  <p className={styles.gems}>
                    Like these<br /> gems?
                  </p>
                  <Link to="/jobs" className={styles.allJobs}>
                    View all jobs
                  </Link>
                </div>
              </div>
            </div>
            <div className={styles.vacanciesContainer}>
              <PoseGroup>
                {preparedOffers.map(({ node: { id, slug, description, tag: { title }, companyLogo: { url } } }) => (
                  <Item key={id} className={styles.ololo}>
                    <Link to={`/job/${slug}`} className={styles.jobOffer} key={id}>
                      <div className={styles.headerVacancy}>
                        <p>{title}</p>
                        <div className={styles.box}>
                          <img src={url} alt="" />
                        </div>
                        <div className={styles.description}>
                          <p>{description.length >= 70 ? `${description.substring(0, 70)}...` : description}</p>
                        </div>
                        <div className={styles.bottomLine}>
                          <p>BOX</p>
                          {/* <img src={vector} className={styles.vector} alt="" ></img> */}
                        </div>
                      </div>
                    </Link>
                  </Item>
                ))}
              </PoseGroup>
            </div>
          </div>
        </section>
      </div>
    )
  }
}

export default Jobs