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

All comments

  • Salym Akhmedov• 170

    @salymk

    Submitted

    I had a lot of fun building this project. I tried some new technologies in this project, like styled-components and Material-UI. I loved using styled-components; the most significant benefit I got from using it was maintaining my styles. It was a breeze finding the CSS that was affecting my components, and also, I could delete styles from one component, and it would not affect other components. Another benefit I got was automatic vendor prefixing, meaning I didn't have to worry about what my project would look like on other browsers.

    Please give me feedback on:

    • Accessibility
    • HTML structure
    • Loading state I'm using for react-query. Using it in these components:
      • Job: https://github.com/salymk/devjobs-web-app/blob/develop/src/components/Job/Job.js
      • Jobs: https://github.com/salymk/devjobs-web-app/blob/develop/src/components/Jobs/Jobs.js

    Need help with:

    • I'm using react-query to fetch data from data.json. One big challenge I have is showing 'No Jobs for [user input]' when users search for a job that does not exist.
      • I have a useJobs hook that I'm using to fetch the jobs, you can find it here: https://github.com/salymk/devjobs-web-app/blob/develop/src/hooks/useJobs.js
        • I need help with showing that message in this component: Jobs: https://github.com/salymk/devjobs-web-app/blob/develop/src/components/Jobs/Jobs.js

    Devjobs web app built with reactjs and styled-components

    1

    José Manuel Díaz• 50

    @jmarellanes

    Posted

    Hiya Salym and good job with this challenge! Replying your question: I think you can use a variable to store the result of the filter method and then use an if statement or a ternary operator to display the <NotFound /> component (or whatever you called) or use the map method with the result of the filter, example:

    const formattedJobs = data.filter(// rest of the code);
formattedJobs.length === 0 ? <Not Found /> : formattedJobs.map(// rest of the code);
    0