Submitted over 2 years ago

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

next, react, tailwind-css, graphql

Eileen dangelo•1,600

@Eileenpk

A solution to the Job listings with filtering challenge

Preview Code

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!

Code

Please log in to post a comment

Community feedback

P
aaronrubinstein•480
@aaronrubinstein
Posted over 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

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