Skip to content
OverviewSolutions
16
Comments
2
JibbyCodes
@Kijimai

All comments

  • JibbyCodes•290
    @KijimaiPosted about 1 year ago

    Overall the rating component works wonderfully. If you do want to center the component on the page, you can set a parent container as the flex parent with

    .flex_parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

    in this case, you could set the body element as the flex parent since this is an isolated project that only houses one component. On the other hand, you could set a dedicated parent container like a <div> as the flex parent and set it to this:

    .some_flex_parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

    setting the min-height of this parent element to 100vh ensures that it takes up the entire vertical width of the page to center the component properly.

    As for your script, it's best practice to use const rather than let to store variables that you do not want changed.

    Overall, nice work!

    Marked as helpful
    1
  • Yuko Horita•645
    @Sloth247Submitted almost 3 years ago

    I spend a lot of time to look into the details and make sure app works correct. I added extra features;

    • loading message while fetching data
    • error message when user is not found or input field is empty

    I have a few questions / issues;

    • I wanted to use react-router and useParams to get username from query and consume it in the result so that the url will be shown as http://domain/username, but I could not figure out how to do that on the same single page.

    • I have error in my vs code terminal that Line 21:6: React Hook useEffect has a missing dependency: 'getUser'. Either include it or remove the dependency array, regarding UserResult.jsx file. I am not sure I am using useEffect correctlt with context files. I put "octocat" in getUser() function as argument to set it as default (initial value), but is it correct thing to do?

    • error handling. I am not sure I am doing right for error shown when fetching data set in Github Context.jsx file.

    I appreciate for any feedbacks, and help in those issues that I have.

    GitHub User Search App with GitHub API, React & react-router-dom

    1
    JibbyCodes•290
    @KijimaiPosted almost 3 years ago

    Hello again Sloth!

    I really like the idea of adding the loading message as the user waits for fetch API to grab the user information so that slower internet speeds know at least that their input was being received and handled.

    I chose to store the theme in the user's local storage in the case that they decide to return to the app in the future, it saves their original preference.

    As far as the error handler issue that you have, I personally used state management to store and initialize an object containing a boolean and an empty placeholder String message.

    const [error, setError] = useState({show: false, message: ""})

    The main difference is that I can change the message to fit the necessary error type instead of hardcoding "No Result" to the page and showing it based on if the error state was set to true or not.

    Some minor things on the app and its styling: Of course the main dashboard element is missing the box-shadow present in the design but of course, that can be left up to designer preference :D React Router may be unnecessary for this particular challenge since it isn't really sending the user to a different route other than the main page for displaying the user they search for.

    Excellent work on this project! I hope you can make use of some of my suggestions and make even better projects in the future too, I sure learned a lot from looking over your submission!

    Marked as helpful
    0