@@ -18,39 +18,7 @@ const fetcher = (url, query, limit) =>
1818 . then ( ( res ) => res . data )
1919 . catch ( ( e ) => console . error ( e ) ) ;
2020
21- const Search = ( props ) => {
22- const router = useRouter ( ) ;
23- const [ input , setInput ] = useReducer (
24- ( prev , next ) => {
25- return { ...prev , ...next } ;
26- } ,
27- {
28- search : "" ,
29- results : [ ] ,
30- focus : false ,
31- }
32- ) ;
33- const inputRef = useRef ( null ) ;
34- // const input = props.state;
35- // const setInput = props.dispatch;
36-
37- const limit = 5 ;
38- const { data } = useSWR (
39- input . search ? [ server + "/filers/search" , input . search , limit ] : null ,
40- ( [ url , query , limit ] ) => fetcher ( url , query , limit ) ,
41- {
42- revalidateOnFocus : false ,
43- revalidateOnReconnect : false ,
44- }
45- ) ;
46-
47- const handleSearch = ( data ) => {
48- if ( data ) {
49- setInput ( { results : data . results } ) ;
50- } else {
51- setInput ( { results : [ ] } ) ;
52- }
53- } ;
21+ const Input = ( { input, setInput, inputRef, className } ) => {
5422 const handleChange = ( e ) => {
5523 setInput ( { search : e . target . value } ) ;
5624 } ;
@@ -95,6 +63,24 @@ const Search = (props) => {
9563 break ;
9664 }
9765 } ;
66+ return (
67+ < div className = { cn ( styles [ "search-box" ] , className ) } >
68+ < input
69+ type = "text"
70+ ref = { inputRef }
71+ className = { [ styles [ "search-input" ] ] . join ( " " ) }
72+ value = { input . search }
73+ placeholder = { input . focus ? "" : "Search..." }
74+ onChange = { handleChange }
75+ onFocus = { handleFocus }
76+ onBlur = { handleBlur }
77+ onKeyDown = { handleKey }
78+ />
79+ </ div >
80+ ) ;
81+ } ;
82+
83+ const Results = ( { input, setInput, className } ) => {
9884 const handleMouseEnter = ( cik ) => {
9985 setInput ( {
10086 results : input . results . map ( ( result ) =>
@@ -113,6 +99,81 @@ const Search = (props) => {
11399 ) ,
114100 } ) ;
115101 } ;
102+ return (
103+ < div
104+ className = { [
105+ styles [ "results" ] ,
106+ input . focus && input . search . length ? styles [ "results-expand" ] : "" ,
107+ className ,
108+ ] . join ( " " ) }
109+ >
110+ {
111+ < ul className = { styles [ "result-list" ] } >
112+ { input . results . map ( ( result ) => {
113+ return (
114+ < li key = { result . cik } >
115+ < Link href = { `/filers/${ result . cik } } >
116+ < div
117+ className = { cn (
118+ styles [ "result" ] ,
119+ "hover:bg-white-two" ,
120+ result . hover && "bg-white-two"
121+ ) }
122+ onMouseEnter = { ( ) => handleMouseEnter ( result . cik ) }
123+ onMouseLeave = { ( ) => handleMouseLeave ( result . cik ) }
124+ >
125+ < span className = "font-semibold" >
126+ { result . name . toUpperCase ( ) } { " " }
127+ { result . tickers . length == 0
128+ ? ""
129+ : `(${ result . tickers . join ( ", " ) } }
130+ </ span >
131+ < span className = "font-semibold " >
132+ CIK{ result . cik . padStart ( 10 , "0" ) }
133+ </ span >
134+ </ div >
135+ </ Link >
136+ </ li >
137+ ) ;
138+ } ) }
139+ </ ul >
140+ }
141+ </ div >
142+ ) ;
143+ } ;
144+
145+ const Search = ( props ) => {
146+ const [ input , setInput ] = useReducer (
147+ ( prev , next ) => {
148+ return { ...prev , ...next } ;
149+ } ,
150+ {
151+ search : "" ,
152+ results : [ ] ,
153+ focus : false ,
154+ }
155+ ) ;
156+ const inputRef = useRef ( null ) ;
157+ // const input = props.state;
158+ // const setInput = props.dispatch;
159+
160+ const limit = 5 ;
161+ const { data } = useSWR (
162+ input . search ? [ server + "/filers/search" , input . search , limit ] : null ,
163+ ( [ url , query , limit ] ) => fetcher ( url , query , limit ) ,
164+ {
165+ revalidateOnFocus : false ,
166+ revalidateOnReconnect : false ,
167+ }
168+ ) ;
169+
170+ const handleSearch = ( data ) => {
171+ if ( data ) {
172+ setInput ( { results : data . results } ) ;
173+ } else {
174+ setInput ( { results : [ ] } ) ;
175+ }
176+ } ;
116177
117178 useEffect ( ( ) => {
118179 handleSearch ( data ) ;
@@ -126,57 +187,12 @@ const Search = (props) => {
126187 props . className ,
127188 ] . join ( " " ) }
128189 >
129- < div className = { styles [ "search-box" ] } >
130- < input
131- type = "text"
132- ref = { inputRef }
133- className = { [ styles [ "search-input" ] ] . join ( " " ) }
134- value = { input . search }
135- placeholder = { input . focus ? "" : "Search..." }
136- onChange = { handleChange }
137- onFocus = { handleFocus }
138- onBlur = { handleBlur }
139- onKeyDown = { handleKey }
140- />
141- </ div >
142- < div
143- className = { [
144- styles [ "results" ] ,
145- input . focus && input . search . length ? styles [ "results-expand" ] : "" ,
146- ] . join ( " " ) }
147- >
148- {
149- < ul className = { styles [ "result-list" ] } >
150- { input . results . map ( ( result ) => {
151- return (
152- < li key = { result . cik } >
153- < Link href = { `/filers/${ result . cik } } >
154- < div
155- className = { cn (
156- styles [ "result" ] ,
157- "hover:bg-white-two" ,
158- result . hover && "bg-white-two"
159- ) }
160- onMouseEnter = { ( ) => handleMouseEnter ( result . cik ) }
161- onMouseLeave = { ( ) => handleMouseLeave ( result . cik ) }
162- >
163- < span className = "font-semibold" >
164- { result . name . toUpperCase ( ) } { " " }
165- { result . tickers . length == 0
166- ? ""
167- : `(${ result . tickers . join ( ", " ) } }
168- </ span >
169- < span className = "font-semibold " >
170- CIK{ result . cik . padStart ( 10 , "0" ) }
171- </ span >
172- </ div >
173- </ Link >
174- </ li >
175- ) ;
176- } ) }
177- </ ul >
178- }
179- </ div >
190+ < Input
191+ input = { input }
192+ setInput = { ( ...args ) => setInput ( ...args ) }
193+ inputRef = { inputRef }
194+ />
195+ < Results input = { input } setInput = { ( ...args ) => setInput ( ...args ) } />
180196 </ div >
181197 ) ;
182198} ;
0 commit comments