I am trying to build out a project to remake the jobs.github.com page. I have the home page & the individual job page done but what I can't do is git the app to reroute to the correct pathway when I put it search parameters.
Here is my useHomeFetch page:
import React, { useEffect, useState } from 'react';
export const useHomeFetch = () => {
const [state, setState] = useState({ jobs: [] });
const [loading, setLoading] = useState(false);
const BASE_URL = 'https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions';
const fetchJobs = async url => {
setLoading(true);
let loadMore = url.search('page');
try {
let result = await (await fetch(url)).json();
setState(prev => ({
...prev,
jobs: loadMore !== -1
? [...prev.jobs, ...result]
: [...result]
}))
} catch(error) {
console.log(error)
}
setLoading(false)
}
useEffect(() => {
fetchJobs(`${BASE_URL}.json`)
}, [])
return [{ state, loading, BASE_URL }, fetchJobs];
}
Here is the search bar:
const SearchBar = () => {
const [{ BASE_URL }, fetchJobs] = useHomeFetch();;
const runThis = (e) => {
e.preventDefault()
let search = descriptionEl.current.value.trim() !== ''
? `description=${descriptionEl.current.value}`.replace(/ /g, '+')
: '';
let location = locationEl.current.value.trim() !== ''
? `location=${locationEl.current.value}`.replace(/ /g, '+')
: '';
let full = fullTime ? `full_time=true` : ''
fetchJobs(`${BASE_URL}.json?${search}${location}${full}`)
}
return (
<form className="search__bar" onClick={runThis}> ...
Whenever I enter search params it just goes back to the original page. I believe the reason for this is because of the useEffect in the useHomeFetch page. How can I get the same function to run but just with the right URL based on the params?
Thanks you!