index.js

import React, { useState } from "react"

import Layout from "../components/layout"
import SEO from "../components/seo"

import { fetchJobs } from "../api/jobs"

// TODO move this into onmount of the component (i.e. when the component loads)
const allJobs = fetchJobs()

let departmentOptions = []

allJobs.forEach(job => {
  const department = job.department.name
  if (!departmentOptions.includes(department)) {
    departmentOptions.push(department)
  }
})

console.log(departments)

const JobListing = ({ job }) => {
  return (
    <div>
      <h3>{job.title}</h3>
      <p>{job.offices[0].name}</p>
    </div>
  )
}

// TODOS
// Add dropdown inputs & update handle locgic based on the user's selection
//

const IndexPage = () => {
  const [state, setState] = useState({
    department: "",
    location: "",
  })

  // These ways of setting state are equivalent
  const handleFilterLocation = location => {
    setState({ department: state.department, location: location })
  }
  const handleFilterDepartment = department => {
    setState({ ...state, department })
  }

  let filteredJobs = allJobs
  // filter by department
  if (state.department) {
    filteredJobs = allJobs.filter(job => {
      return job.department.name === state.department
    })
  }
  // filter by location
  if (state.location) {
    filteredJobs = filteredJobs.filter(job => {
      for (const location of job.offices) {
        if (location.name === state.location) {
          return true
        }
      }
      return false
    })
  }

  return (
    <Layout>
      <SEO title="Home" />
      <h1>Hi people</h1>
      <button onClick={() => handleFilterLocation("San Francisco")}>
        FILTER LOCATION
      </button>
      <button onClick={() => handleFilterDepartment("Engineering")}>
        FILTER DEPARTMENT
      </button>
      <h2>JOBS:</h2>
      {/* TODO break out each department seperately */}
      <ul>
        {filteredJobs.map((job, idx) => {
          return <JobListing job={job} />
        })}
      </ul>
    </Layout>
  )
}

export default IndexPage