1. Introduction

Hapramp is a Steem powered social media that rewards you for sharing value with the community.

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.

2. The Feature - User Search

The user search feature would enable users on HapRamp to look for other users using their username.

3. Implementation Details

3.1. Data Flow

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.

3.2. The Search Bar

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.

3.3. Search Results

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.

Screenshot from 2018-07-14 11-02-35.png

3.4. Getting the search working

3.4.1. The action and reducer

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.

3.4.2. Putting the `SearchBar` and `SearchResults` together

The 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