Caleb/React-and-RxJS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix Markdown Styling

Browse Source
This commit is contained in:
Caleb Braaten 2024-04-11 19:52:03 -07:00
parent 6d89fb8657
commit 656bb9afce
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -18,8 +18,13 @@ This was a coding challenge. To see the original prompt, scroll down to the "Ori
### Just Cool Stuff
1. `LocationInput` is more like a Solid component in that once React renders it, there is no reason it needs to be rendered agin (YAY Performance!) and it relies on 'signals'. This is because the data is fetched from the API on mount and populated initially. Alongside this action, a listener is mounted so that whenever there is a change on the select element, it is dispatched straight to the `Subject` which makes the selection available to any other component outside of Reacts rendering cycle.
2. `NameInput` is a little more complex. Similar to `LocationInput`, it pushes its state changes through a `Subject` making it available anywhere. Before we can do this though, we need to validate the input. Name validation is an async operation though and if we just validate every keystroke, we won't know if the response we get back is for the most recent keystroke. To solve this, I used an RxJS Operator to ignore all validation responses except the most recent. This eliminated the risk of the user seeing a false positive or negative caused by an older request coming back after a newer one.
#### LocationInput
`LocationInput` is more like a Solid component in that once React renders it, there is no reason it needs to be rendered agin (YAY Performance!) and it relies on 'signals'. This is because the data is fetched from the API on mount and populated initially. Alongside this action, a listener is mounted so that whenever there is a change on the select element, it is dispatched straight to the `Subject` which makes the selection available to any other component outside of Reacts rendering cycle.
#### NameInput
`NameInput` is a little more complex. Similar to `LocationInput`, it pushes its state changes through a `Subject` making it available anywhere. Before we can do this though, we need to validate the input. Name validation is an async operation though and if we just validate every keystroke, we won't know if the response we get back is for the most recent keystroke. To solve this, I used an RxJS Operator to ignore all validation responses except the most recent. This eliminated the risk of the user seeing a false positive or negative caused by an older request coming back after a newer one.
This still has a massive problem though because the response to the most recent request could come back after the user has changed the input again. This is because the user could have typed in a new character and we are still waiting for that response to be received. There is no way to verify that the response is for the current string in the input box. The API is not available for us to make changes to as well so I solved this by wrapping every request in a new promise that includes the name we asked to validate. This way, we can save the name in a ref that is kept in sync with the input box and compare that with the validation response. If they are the same, we know the user has stopped typing and we can dispatch the valid name to the subject.