https://github.com/hapramp/alpha-web
In a recent blog post, I introduced the alpha web application for the platform.
In this blog post, I will be sharing how I added user search feature to the web app.
The user search feature would enable users on HapRamp to look for other users using their username.
The search is triggered using Steem JS SDK with value in the search bar as a parameter. When the action completes, a redux state is updated and the component which displays result is updated with new user search results.
The SearchBar component takes onSearch as an optional prop and calls it with the search text when clicking on the search button or pressing Enter key. It gets focussed automatically when the user navigates to the search page and uses state to store search query.
The SearchResults component takes an array of usernames as input and renders the list of users with their profile picture and username. On clicking the user card, one can navigate to the user's blog.
The action creator uses steem JS SDK to search for users based on the input text and dispatches an action accordingly. This action is utilized by the search reducer to determine the next state.
SearchBar and SearchResults togetherThe index.js for search declares a component which binds the two components with Redux so they work smoothly. It also renders errors and ensures that two searches are not triggered concurrently.
Pull Request - https://github.com/hapramp/alpha-web/pull/33.
Commit - https://github.com/hapramp/alpha-web/pull/33/commits/26bc201c7bdeb8f76625cfdac47c08b777c362b0
Github Account - https://github.com/singhpratyush