Job listings with filtering built with Next

Community feedback

• 

  P

  markus•2,620

  @markuslewinPosted about 1 month ago

  How would the browser know you want the filters to be 40px, though? 🤔

  When the filters are on one line, the Clear button is the tallest child of the .skills container. The default behavior of flex is to stretch the flex items to fill the container. In this case, it stretches the filters until they're the same height as the button. When the filters wrap, the filters container is larger than the Clear button, and so the items no longer need to stretch to fill the .skills container. (Now the Clear button is stretched instead, to fill the space created by the filters).

  I think min-height sounds like a good solution! You could also use padding to set an "implicit" minimum height, like you did for the Clear button.

  1

  ---

  

  Jenny Eikens•250

  @Jenny-EikensPosted about 1 month ago

  @markuslewin Right, that makes perfect sense! Thanks :)

  0

  

  P

  markus•2,620

  @markuslewinPosted about 1 month ago

  @Jenny-Eikens Also! filteredJobs doesn't have to be state here, since its value can always be calculated from listings and filters. That way, you avoid having to synchronizing states in a useEffect:

  const JobList = ({ listings }: JobListProps) => {
    const [filters, setFilters] = useState<string[]>([]);
  
    // No effect
  
    let filteredJobs;
    if (filters.length === 0) {
      filteredJobs = listings;
    } else {
      const matchingJobs = listings.filter((job) => {
        const jobTags = [job.role, job.level, ...job.languages, ...job.tools];
        return filters.every((filter) => jobTags.includes(filter));
      });
  
      filteredJobs = matchingJobs;
    }
  
    return <></>;
  };
  

  Great job on this challenge!

  Marked as helpful

  0

  

  Jenny Eikens•250

  @Jenny-EikensPosted about 1 month ago

  @markuslewin Oh, right! I totally missed that. I didn't consider that the filters state variable changing would cause a re-render anyway. It's definitely more efficient this way. Thanks again!

  1