src/components/AllJobs.js

import React, { Component } from 'react'
import styles from './AllJobs.module.scss'
import { BrowserRouter as Router, Link } from 'react-router-dom'

const vacancies = [
  { id: 1, title: 'SEO' },
  { id: 2, title: 'Marketing' },
  { id: 3, title: 'Programming' },
  { id: 4, title: 'SEO' },
  { id: 5, title: 'Marketing' },
  { id: 6, title: 'Programming' },
  { id: 8, title: 'Marketing' },
  { id: 9, title: 'SEO' },
  { id: 10, title: 'SEO' },
  { id: 11, title: 'Marketing' },
  { id: 12, title: 'Programming' },
  { id: 13, title: 'Marketing' },
  { id: 14, title: 'SEO' },
  { id: 15, title: 'Marketing' },
  { id: 16, title: 'AOAOAOAOAOAO' },
]

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

class AllJobs extends Component {
  render() {
    const {
      jobs: { edges },
    } = this.props

    console.log(edges)
    return (
      <div className={styles.globalContainer}>
        <div className={styles.container} />
        <div className={styles.innerContainer}>
          <div className={styles.categoriesBlock}>
            <div className={styles.categoriesInnerContainer}>
              <h1>Select job categories: </h1>
              <div className={styles.tags}>
                {vacancies.map((item) => (
                  <button className={styles.button} key={item.id}>
                    {item.title}
                  </button>
                ))}
              </div>
              <div className={styles.bottomLine}>
                {categories.map((item) => (
                  <select className={styles.level} key={item.id}>
                    <option value="0">{item.title}</option>
                  </select>
                ))}
                <button className={styles.clear}>Clear filters</button>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.jobsContainer}>
          <div className={styles.listContainer}>
            <div className={styles.listJobs}>
              {edges.map(({ node: { title, description, locationDescription, photo } }) => (
                <Router>
                  <Link to="/">
                    <div className={styles.oneJob}>
                      <div className={styles.title}>{title}</div>
                      <div className={styles.location}>{locationDescription}</div>
                      <div className={styles.description}>
                        {description.length >= 245 ? `${description.substring(0, 245)}...` : description}
                      </div>
                    </div>
                  </Link>
                </Router>
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default AllJobs