Can't get API URL to reroute to right address: React Hooks

Viewed 34

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!

1 Answers

Looks as though you are not computing a valid URL query string. You concatenate them to generate an URL like https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions?description=kdskj+dslkjlocation=lksd+kljdsfkljfull_time=true where they aren't separated by an ampersand (&).

I believe your intended query string should be https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions?description=kdskj+dslkj&location=lksd+kljdsfklj&full_time=true

Update by dumping all query parameters into an array and join them with &.

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].join('&'}`)        
}
Related