Skip to content
Submitted almost 2 years ago

Job listings with filtering- React, Next JS, Tailwind, GraphQL, CMS

Eileen dangelo•1,600
@Eileenpk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Job listings with filtering
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

This was a fun project, I used Hygraph to make a CMS for the listings and then queried it with GraphQL. I was going to make a filter function to filter through the listings based on the selected tag but in the end, I found that a much better solution was

const match = tagsArray.some((i) => itemsArray.includes(i));

if (itemsArray.length === 0 || match) {
return (
    //show cards that match selected tags, or show all cards if no tags are selected...
)
}

This is a great way to compare two arrays to see if any of the items match to one another!

Please feel free to leave comments or suggestions!

Community feedback

  • aaronrubinstein•460
    @aaronrubinsteinPosted almost 2 years ago

    Nice work Eileen! I was playing with your live app and noticed the filters aren't quite working as intended. According to the the readme: For each filter added, only listings containing all selected filters should be returned. When I was clicking multiple filters it looked like it was returning listings that included any of the filter terms rather than all of them.

    Here's a snippet from my code (jobListings is the source data and userFilters is an array of the selected filters). I'm doing something very similar to you except using the every() method instead of some(). So probably an easy fix!

    let filteredJobListings = [];
jobListings.forEach(job => {
    let listingFilterTerms = [job.role, job.level, ...job.languages, ...job.tools];
    if (userFilters.every(term => listingFilterTerms.includes(term))) {
        filteredJobListings.push(job);
    }
});
return filteredJobListings;

    Hope that's helpful!

    Aaron

    Marked as helpful
    0
    Eileen dangelo•1,600
    @EileenpkPosted almost 2 years ago

    Aaron thank you for catching that, I'm making that change now!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord