Submitted over 1 year ago

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

#next#react#tailwind-css#graphql

Eileen dangelo• 1,600

@Eileenpk

Preview site View code

This is a solution for...

Job listings with filtering

HTML
CSS
JS

3intermediate

View challenge

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

@aaronrubinstein

Posted over 1 year 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

Eileen dangelo• 1,600

@Eileenpk

Posted over 1 year ago

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

Please log in to post a comment

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