Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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 { 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
- }
- })
- 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 (
- <>
- <div className={styles.cover} />
- <div className={styles.root}>
- <div className={styles.inner}>
- <div className={styles.categoriesInnerContainer}>
- <h1>{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>
- <hr />
- <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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement