The SUSI Skill CMS is a central dashboard where the developers can add skills to make SUSI more intelligent. One of the major thing that was missing there was a search bar. So I recently added one that can search a skill based on:
- Skill name
- Skill description
- Author name
- Examples of the skill
How to add the search bar?
- Install the Material Search Bar component from the terminal.
- Import this component in the BrowseSkill.js file.
- Create a state variables for the search query and initialize it to an empty string.
- Add the search bar (UI Part) below the filters on CMS. Add a listener function to it that is called when the value of the search query changes.
- The search handler : Create a handler (handleSearch) to that listens to onChange events on the SearchBar. This function sets the value of searhQuery state variable and loads the card again based on the search filter.
How the filter works?
- First check if there’s something to search for. If the searchQuery.length is equal to zero then that means that there is nothing to search for.
- Then filter the related results based on
- Skill name : The filter() function adds the skill card to the filtered data if the match function returns true (i.e., the skill is relevant to the search query). The match() function retuns true if the skill name matches the search query.
Similarly, filter the cards on the basis of skill description and skill author’s name.
- Skill examples: Loop over all the skill examples and check if any example matches the search query.
Here the search query is “country”. The word “country” appears the skill description of the filtered cards.
Material Search Bar: https://www.npmjs.com/package/material-ui-search-bar