CustomizeControls
2 months ago
Steps
2 weeks ago
App.js
2 years ago
CategoryButtons.js
3 weeks ago
CustomTooltip.js
2 years ago
EditorSelector.js
2 years ago
FeaturesList.js
1 day ago
Filters.js
3 weeks ago
Header.js
3 weeks ago
ImportError.js
2 years ago
ImportForm.js
1 year ago
ImportMock.js
2 years ago
ImportProgress.js
1 year ago
Onboarding.js
3 weeks ago
ProgressBar.js
2 years ago
Search.js
3 weeks ago
SitePreview.js
2 years ago
SiteSettings.js
2 months ago
Sites.js
2 weeks ago
StarterSiteCard.js
1 day ago
Toast.js
2 weeks ago
WelcomeMock.js
2 years ago
Search.js
103 lines
| 1 | /* global tiobDash */ |
| 2 | import { Icon } from '@wordpress/components'; |
| 3 | import { compose } from '@wordpress/compose'; |
| 4 | import { withDispatch, withSelect } from '@wordpress/data'; |
| 5 | import classnames from 'classnames'; |
| 6 | import SVG from '../utils/svg'; |
| 7 | import { track } from '../utils/rest'; |
| 8 | |
| 9 | const Search = ( { |
| 10 | onSearch, |
| 11 | query, |
| 12 | handleSubmit, |
| 13 | step, |
| 14 | deleteQuery, |
| 15 | label, |
| 16 | placeholder, |
| 17 | } ) => { |
| 18 | return ( |
| 19 | <form onSubmit={ handleSubmit } className="ob-search-form"> |
| 20 | { label && <label htmlFor="ob-search-ss">{ label }</label> } |
| 21 | <div className="ob-search-wrap"> |
| 22 | <Icon className="search-icon" icon={ SVG.search } /> |
| 23 | <input |
| 24 | id="ob-search-ss" |
| 25 | type="text" |
| 26 | value={ query } |
| 27 | placeholder={ placeholder } |
| 28 | onChange={ ( e ) => { |
| 29 | onSearch( e.target.value ); |
| 30 | } } |
| 31 | className="search-input" |
| 32 | /> |
| 33 | { step === 1 ? ( |
| 34 | <button |
| 35 | type="submit" |
| 36 | className={ classnames( |
| 37 | 'search-button', |
| 38 | query ? 'active' : '' |
| 39 | ) } |
| 40 | > |
| 41 | <Icon icon={ SVG.arrow } width={ 17 } height={ 12 } /> |
| 42 | </button> |
| 43 | ) : ( |
| 44 | <Icon |
| 45 | className={ classnames( |
| 46 | 'remove-button', |
| 47 | query ? 'active' : '' |
| 48 | ) } |
| 49 | onClick={ deleteQuery } |
| 50 | icon={ SVG.delete } |
| 51 | width={ 16 } |
| 52 | height={ 16 } |
| 53 | /> |
| 54 | ) } |
| 55 | </div> |
| 56 | </form> |
| 57 | ); |
| 58 | }; |
| 59 | |
| 60 | export default compose( |
| 61 | withSelect( ( select ) => { |
| 62 | const { |
| 63 | getSearchQuery, |
| 64 | getCurrentStep, |
| 65 | getCurrentCategory, |
| 66 | getTrackingId, |
| 67 | } = select( 'ti-onboarding' ); |
| 68 | return { |
| 69 | category: getCurrentCategory(), |
| 70 | query: getSearchQuery(), |
| 71 | step: getCurrentStep(), |
| 72 | trackingId: getTrackingId(), |
| 73 | }; |
| 74 | } ), |
| 75 | withDispatch( ( dispatch, { step, query, trackingId } ) => { |
| 76 | const { setSearchQuery, setCategory, setOnboardingStep } = |
| 77 | dispatch( 'ti-onboarding' ); |
| 78 | return { |
| 79 | onSearch: ( searchQuery ) => setSearchQuery( searchQuery ), |
| 80 | deleteQuery: () => setSearchQuery( '' ), |
| 81 | handleSubmit: ( e ) => { |
| 82 | e.preventDefault(); |
| 83 | if ( step === 1 ) { |
| 84 | setOnboardingStep( 2 ); |
| 85 | const data = { |
| 86 | slug: 'neve', |
| 87 | license_id: tiobDash.license, |
| 88 | site: tiobDash.onboarding.homeUrl || '', |
| 89 | search: query, |
| 90 | cat: 'all', |
| 91 | step_id: 1, |
| 92 | step_status: 'completed', |
| 93 | }; |
| 94 | track( trackingId, data ).catch( ( error ) => { |
| 95 | // eslint-disable-next-line no-console |
| 96 | console.error( error ); |
| 97 | } ); |
| 98 | } |
| 99 | }, |
| 100 | }; |
| 101 | } ) |
| 102 | )( Search ); |
| 103 |