This repository has been archived by the owner on Dec 30, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 386
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(refreshcache): add prop refresh to InstantSearch instance (#619)
* feat(refreshcache): add prop refresh to InstantSearch instance * feat(refreshcache): minor updates
- Loading branch information
1 parent
b8f205f
commit 19f6de0
Showing
7 changed files
with
215 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,130 @@ | ||
import React, { Component } from 'react'; | ||
import { storiesOf } from '@storybook/react'; | ||
import { InstantSearch, SearchBox } from '../packages/react-instantsearch/dom'; | ||
import { CustomHits } from './util'; | ||
|
||
const stories = storiesOf('RefreshCache', module); | ||
|
||
class AppWithRefresh extends Component { | ||
constructor(props) { | ||
super(props); | ||
this.state = { | ||
refresh: false, | ||
}; | ||
} | ||
|
||
refresh = () => { | ||
this.setState(prevState => ({ | ||
refresh: !prevState.refresh, | ||
})); | ||
}; | ||
|
||
onSearchStateChange = () => { | ||
this.setState({ refresh: false }); | ||
}; | ||
|
||
render() { | ||
const displayRefresh = `${this.state.refresh}`; | ||
return ( | ||
<InstantSearch | ||
appId="latency" | ||
apiKey="6be0576ff61c053d5f9a3225e2a90f76" | ||
indexName="ikea" | ||
refresh={this.state.refresh} | ||
onSearchStateChange={this.onSearchStateChange} | ||
> | ||
<div> | ||
<h2 | ||
style={{ | ||
color: '#182359', | ||
font: 'Raleway', | ||
size: '30px', | ||
lineHeight: '1', | ||
fontWeight: '200', | ||
}} | ||
> | ||
Feature: Refresh cache | ||
</h2> | ||
<p style={{ color: '#182359', font: 'open sans' }}> | ||
Adding the refresh prop to your InstantSearch component gives you | ||
the possibility to refresh the cache. | ||
</p> | ||
|
||
<h3 | ||
style={{ | ||
color: '#182359', | ||
font: 'Raleway', | ||
size: '18px', | ||
lineHeight: '1', | ||
fontWeight: 'bold', | ||
}} | ||
> | ||
How to test it? | ||
</h3> | ||
<div style={{ color: '#182359', font: 'open sans' }}> | ||
By default, the 'refresh' prop is disabled. You will need | ||
to open your network tab in the developer tools. | ||
<ol> | ||
<li> | ||
Type a query in the SearchBox (for instance 'clock'). | ||
You should see 5 requests to Algolia (one per letter) | ||
</li> | ||
<li> | ||
Type 'clock' again, you will see that no additional | ||
query is made since the results are retrieved from the cache | ||
</li> | ||
<li> | ||
Make sure the SearchBox is empty, click on the 'Refresh | ||
cache' button (you should see that Refresh set to true in | ||
the info box below the SearchBox) | ||
</li> | ||
<li> | ||
Type your previous query again: the cache has been cleared and | ||
you will see new requests made to Algolia | ||
</li> | ||
</ol> | ||
</div> | ||
</div> | ||
<hr /> | ||
<SearchBox | ||
translations={{ | ||
placeholder: 'Search our furnitures: chairs, tables etc.', | ||
}} | ||
/> | ||
<button | ||
onClick={this.refresh} | ||
style={{ | ||
borderRadius: '4px', | ||
padding: '10px', | ||
border: 'none', | ||
fontSize: '12px', | ||
cursor: 'pointer', | ||
color: '#fff', | ||
background: '#3369e7', | ||
}} | ||
> | ||
Refresh cache | ||
</button> | ||
<button | ||
style={{ | ||
borderRadius: '2px', | ||
padding: '10px', | ||
marginTop: '15px', | ||
border: 'none', | ||
fontSize: '12px', | ||
color: '#999999', | ||
background: '#F3F3F3', | ||
display: 'block', | ||
}} | ||
disabled | ||
> | ||
Refresh is set to: <em>{displayRefresh}</em> | ||
</button> | ||
|
||
<CustomHits /> | ||
</InstantSearch> | ||
); | ||
} | ||
} | ||
|
||
stories.add('with a refresh button', () => <AppWithRefresh />); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters