Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Static Job Listings built with React and TypeScript

#react#styled-components#typescript

@Senatrius

Desktop design screenshot for the Job listings with filtering coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


First actual project using TypeScript. About time I got around to learning that one. Overall not complicated, but I did run into some issues regarding the types and interfaces at first. I feel like I did a fairly decent job this time, though. Of course, if anyone got any other tips and suggestions, any feedback is always appreciated :)

Community feedback

@fazzaamiarso

Posted

Hi Gediminas! Great work!

I have an improvement for you. You can remove the need for useEffect when filtering. You can do that by deriving the filtered state from jobs state. Here is my improvement.

  const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
  const [jobs, setJobs] = useState<IJob[]>([]);

 // will always be re-calculated everytime selectedFilters change. No need useEffect.
  const filteredJobsSet = new Set(jobs.filter(job => {
    const tags = [...job.tools, ...job.languages, job.role, job.level, job.location]

    if (selectedFilters.every(tags.includes)) return job;
  }));

  const filteredJobs = Array.from(filteredJobsSet);

Here is a great blog post about deriving state! https://kentcdodds.com/blog/dont-sync-state-derive-it

I hope it helps! Cheers!

Marked as helpful

1

@Senatrius

Posted

@fazzaamiarso That does sound much better, thank you :) Will be sure to check out that blog post as well

0

Please log in to post a comment

Log in with GitHub
Discord logo

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