Home
Home component is the main user interaction component that contains many other important components such as the search bar and the assets.
The Home component utilizes the UseSearch hook that we have defined, which is the key to managing the complex stateful logic of all the components that Home contains. In this article when the term asset is mentioned, it means datasets/models uploaded by users.
components/Home.js
components/Hooks/UseSearch.js
This hook manages many important states and is responsible for retrieving assets from the backend based on the search term and search type (model/dataset) that user has selected. It also exports several useful state hooks for changing the state of the Home page.
The retrieved assets are filtered based on the search term that user has entered and then sets the pageState to the filtered results. The number of results to be displayed on each screen is limited to 4 assets for each page. To view assets on other pages, user would be required to interact with the HomeNavButtons component which modifies the value of pageNumber state to navigate through pages of assets.
pageState also stores information about whether there are more assets that hasn't yet been shown (there is next page) or there is previous page. This information is needed by the HomeNavButton component to correctly render the right navigation buttons.
components/Button/HomeNavButtons
In addition, pageState stores a results list which in turn stores objects of filtered assets, each having the name of the asset, the description and many other specifications of the asset. This information along with the searchType state and other props are then used to create MiniBlock components that the user would interact with on the Home page using a map function (See Snippet of Home.js).
components/Block/MiniBlock.js
setSearchTerm and setSearchType functions are used by the search bar to update the states of searchTerm and searchType, which in turn triggers the useEffect hook and re-fetch the new state of the page. The timeout is a useful feature to have to given user some time to type out the search term rather than requesting the new page state every single time when user types a letter.
Also setPageNumber function is used so that whenever the user changes the searchType, then the home state would be resetted to the first page.
components/SearchBar/SearchBar.js
