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 vector from 'src/img/Vector.png'
import { formatMessage } from 'src/translations'
import { getLink } from 'src/utils'

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, locale } = this.props

    return (
      <div className={classNames(className, styles.root)}>
        <section className={styles.container}>
          <header className={styles.header}>
            <h1>{formatMessage(locale, 'jobs')}</h1>
          </header>
          <div className={styles.blocksContainer}>
            <div className={styles.tagsContainer}>
              <div className={styles.jobsTitle}>
                <h2>{formatMessage(locale, '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}>{formatMessage(locale, 'gems')}</p>
                  <Link to={getLink(locale, 'jobs')} className={styles.allJobs}>
                    {formatMessage(locale, 'viewAllJobs')}
                  </Link>
                </div>
              </div>
            </div>
            <div className={styles.vacanciesContainer}>
              <PoseGroup>
                {preparedOffers.map(
                  ({
                    node: {
                      id,
                      slug,
                      description,
                      tag: { title },
                      companyLogo: { url },
                      companyName,
                    },
                  }) => (
                    <Item className={styles.vacanciesItem} key={id}>
                      <Link to={getLink(locale, `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>{companyName}</p>
                            {/* <img src={vector} className={styles.vector} alt="" ></img> */}
                          </div>
                        </div>
                      </Link>
                    </Item>
                  ),
                )}
              </PoseGroup>
            </div>
          </div>
        </section>
      </div>
    )
  }
}

export default Jobs