Skip to content
OverviewSolutions
8
Comments
2
Dario Rodrigues
@Unidade

All comments

  • Better5afe•850
    @better5afeSubmitted about 1 year ago

    Summary:

    a) Upon submit, the form is checked by a custom hook which vefifies value provided in the input.

    b) If an email is successfully submitted, it's saved within the Local Storage.

    c) Users will receive an appropriate error message in the following scenarios:

    • The input is empty.
    • Provided value is not a valid email address.
    • The email has already been provided and it's present in the Local Storage.

    d) The validity check is slighly delayed using a setTimeout() method which imitates sending a request to an external server and allows users to see a loading modal.

    e) Loading modal is rendered in a separate div using React Portal.

    f) Application state is managed by React Context.

    g) Users can view the optimal layout for the interface depending on their device's screen size as well as see hover and focus states for all interactive elements on the page.

    No questions from my side, however I will be grateful for any feedback.

    Happy coding! 🎃

    React.js + TypeScript + Custom Hook + SCSS Newsletter Sign-up Form

    1
    Dario Rodrigues•160
    @UnidadePosted about 1 year ago

    I loved your animations; they were such a great addition to the challenge. Overall, I think it's a pretty solid implementation, and in terms of code, it's well-written and easy to navigate.

    I'm curious about how much time you spent on this challenge

    0
  • Dario Rodrigues•160
    @UnidadePosted almost 2 years ago

    I looked your javascript code and I found that you a are making more fetch calls than the necessary, I inspected this with the network section on devTools. This is an example that are present in your components:

    {fetchLocation(ip).city}, {fetchLocation(ip).country}

    The response of this fetch call is a data object that have all the properties that you are accessing, you can be more efficient if you store the fetch data in a variable and access them as need. For example, this only make a fetch call.

    const data = fetchLocation(ip)
{data.city}, {data.country}
...

    This is important because you don't want to make unnecessary call to the server, they can bottleneck your app, you are using more of your api call quotes and isn't efficient at all.

    Marked as helpful
    1