@@ -5,44 +5,51 @@ const SearchBar = ({marketplaceProjects, updateDisplayProjects }):JSX.Element =>
55 //passing down all marketplaceProjects
66 const [ searchText , setSearchText ] = useState ( '' ) ;
77
8-
98 const handleChange = ( e ) => {
109 const newText = e . target . value
11- setSearchText ( newText )
10+
11+ setSearchText ( newText )
1212
1313 }
1414
15-
1615 useEffect ( ( ) => {
1716 if ( searchText === '' ) {
1817
1918 updateDisplayProjects ( marketplaceProjects )
19+ return ;
20+ }
21+ function searching ( ) {
2022
21- } else {
22-
23- //more strict pattern not currently used
24- //const patternString = '(?:^|[^a-zA-Z])' + searchText.toLowerCase() + '(?:$|[^a-zA-Z])';
25- //(?: [non-capturing group] means to ignore the items inside the parens in terms of looking for that string order in the target
26- //^ refers to the literal beginning of a start of a line or string
27- //| pipe operator is an OR statement
28- //[^a-zA-Z] [] is grouping characters, the ^ at the beginning means to look for things that are not letters (lowercase or uppercase)
29- //a-zA-Z letters (lowercase and uppercase) and underscore symbol
30- //All together: match either the start/end of a line/string or any character that is not a letter.
31- //Looks for anything that has the searchText in between non-letter characters
32- const patternString2 = '(?:^|.)' + searchText . toLowerCase ( ) + '(?:$|.)' ;
33- //Only difference is that (?:^|.) (?:$|.) look for anything that matches the string in between any other characters for the username search
34- //test3 and 1test) would both match for string 'test'
35-
36- const searchResults = marketplaceProjects . reduce ( ( results , curr ) => {
37- const lowName = curr . name . toLowerCase ( )
38- const lowUsername = curr . username . toLowerCase ( )
39- if ( lowName . match ( patternString2 ) || lowUsername . match ( patternString2 ) )
40- results . push ( curr )
41- return results ;
42- } , [ ] )
43- updateDisplayProjects ( searchResults )
23+ //more strict pattern not currently used
24+ //const patternString = '(?:^|[^a-zA-Z])' + searchText.toLowerCase() + '(?:$|[^a-zA-Z])';
25+ //(?: [non-capturing group] means to ignore the items inside the parens in terms of looking for that string order in the target
26+ //^ refers to the literal beginning of a start of a line or string
27+ //| pipe operator is an OR statement
28+ //[^a-zA-Z] [] is grouping characters, the ^ at the beginning means to look for things that are not letters (lowercase or uppercase)
29+ //a-zA-Z letters (lowercase and uppercase) and underscore symbol
30+ //All together: match either the start/end of a line/string or any character that is not a letter.
31+ //Looks for anything that has the searchText in between non-letter characters
32+ const patternString2 = '(?:^|.)' + searchText . toLowerCase ( ) + '(?:$|.)' ;
33+ //Only difference is that (?:^|.) (?:$|.) look for anything that matches the string in between any other characters for the username search
34+ //test3 and 1test) would both match for string 'test'
35+
36+ const searchResults = marketplaceProjects . reduce ( ( results , curr ) => {
37+ const lowName = curr . name . toLowerCase ( )
38+ const lowUsername = curr . username . toLowerCase ( )
39+ if ( lowName . match ( patternString2 ) || lowUsername . match ( patternString2 ) )
40+ results . push ( curr )
41+ return results ;
42+ } , [ ] )
43+ updateDisplayProjects ( searchResults )
4444 }
4545
46+ // simple debounce
47+ const debounceTimer = setTimeout ( ( ) => {
48+ searching ( ) ;
49+ } , 800 ) ;
50+ // clears the timer if searchText is changed before the setTimeout duration is reached
51+ return ( ) => clearTimeout ( debounceTimer ) ;
52+
4653 } , [ searchText ] )
4754
4855
0 commit comments