search

MoonHighway / learning-react

The code samples for Learning React by Alex Banks and Eve Porcello, published by O'Reilly Media
3.58k stars 1.25k forks source link

Ch8 - Parallel requests files #101

Open vidyabhandary opened 2 years ago

vidyabhandary commented 2 years ago

Where are the files for the "Parallel Requests" example ? The waterfall files are present in the repository.

HelpMe-Pls commented 2 years ago

I tried to follow the instructions from the book and created a version for the missing code samples of chapter 8. I made it to the end of "Cancelling Requests" session: https://codesandbox.io/s/zealous-jang-sryws. However, there's still a problem for the SearchUser component. If you tried to search, it only works for those usernames that are no more than 5 characters long. I don't really know if there's something wrong with my code or it's the API's issue. Please have a look and figure this out together

vidyabhandary commented 2 years ago

Thanks @HelpMe-Pls. I tried something similar and I found the same issue. Beyond 5 chars it fails. But cut and paste a longer name into the textbox and it is not a problem !

HelpMe-Pls commented 2 years ago

@MoonTahoe @eveporcello Please have a look at my sandbox https://codesandbox.io/s/zealous-jang-sryws for my addition to the missing code sample of chapter 8 (from "Parallel Requests" to "Cancelling Request"). We tried to follow your instructions and had some issues mentioned above. I'd be very appreciate if you can point out what's going wrong and hopefully update this missing sample to the repo.

HelpMe-Pls commented 2 years ago

@vidyabhandary I asked the Reactiflux community and one of them suggested to try "debounce": https://dev.to/gabe_ragland/debouncing-with-react-hooks-jci I haven't tried it yet, but if you have time, give it a shot. I will come back and try it later.

vidyabhandary commented 2 years ago

@HelpMe-Pls - In the first pass, I am running into problems trying to incorporate debounce. Repomenu gives an error with name undefined. May be timing issue ?

HelpMe-Pls commented 2 years ago

@vidyabhandary Use optional chaining to solve the name undefined. I get the solution from a supportive Reactiflux community, highly recommend it: https://discord.gg/t3VfPd3StQ. However, there's still a problem with the prev button. It seems to not working at the first render (you have to click on the next button first then prev will work after that). Have a look and try it out: https://codesandbox.io/s/zealous-jang-sryws

vidyabhandary commented 2 years ago

@HelpMe-Pls - Thank you so much for that discord link. I have joined ! :) It is just as you have mentioned. First time prev does not seem to work. I found next also does not work first time for some reason.

On my local environment it is very slow though - there is a discernible wait while typing and getting the results. I don't see it in your sandbox link so must be something to do with my environment.

HelpMe-Pls commented 2 years ago

@vidyabhandary to fix the prev and next buttons I think there should be some modifications being done on the useIterator hook, which may lead my sandbox straying too far away from the author's example, making harder to follow for fellow learners. I decided to leave my sandbox as the way it is now, and leave the freedom of choice for upcoming readers to tweak and play with it the way they desire.

vidyabhandary commented 2 years ago

@HelpMe-Pls - Yes that makes sense.