import React, { useState, useEffect } from 'react' import { Match } from 'react-router-dom' import _isEmpty from 'lodash/isEmpty' import { useSelector } from 'react-redux' import { apiSelector } from 'selectors' import { ExploreApiLink, ExploreApiSearch } from 'components' import * as S from './styled' type Props = { match: Match } const Search = ({ match }: Props) => { const api = useSelector(apiSelector) const { searchQuery } = match.params const [foundItems, setFoundItems] = useState<[string, string][]>([]) const handleSearch = () => { const regex = new RegExp( '^(?=.*' + decodeURIComponent(searchQuery) .trim() .split(' ') .join(')(?=.*') + ').*$', 'gi' ) const foundItems = api.current.search.filter(([path, description]) => { return regex.test(path + description) }) setFoundItems(foundItems) } useEffect(handleSearch, [searchQuery]) return ( <S.Wrapper> <S.Title> <S.CategoryName>Search API</S.CategoryName> <S.Search> <ExploreApiSearch focusOnMount query={searchQuery} /> </S.Search> </S.Title> {_isEmpty(foundItems) ? ( <S.Empty>Nothing was found 🤔</S.Empty> ) : ( foundItems.sort().map((item, idx) => { const link = item[0].split('.') return ( <ExploreApiLink key={`searchResult-${idx}`} to={{ pathname: `/explore-api/${link[1]}/${link[2]}/${link[3]}`, state: { routeName: 'Search', search: searchQuery } }} name={item[0]} description={item[1]} /> ) }) )} </S.Wrapper> ) } export default Search