diff --git a/examples/geo/App.jsx b/examples/geo/App.jsx
index 7f4bd86..6fb5a4c 100644
--- a/examples/geo/App.jsx
+++ b/examples/geo/App.jsx
@@ -38,12 +38,12 @@ const listbox = [
]
const App = () => {
- const [selected, setSelected] = useState({item: undef, displayField: undef})
+ const [selectedItem, setSelectedItem] = useState(undef)
const onSelect = useCallback(
(item, displayField) => {
- setSelected({item, displayField})
- }, []
+ setSelectedItem((item && displayField) ? item[displayField] : undef)
+ }, [setSelectedItem]
)
const onEnter = useCallback(
@@ -81,7 +81,7 @@ const App = () => {
onEnter={onEnter}
onTab={onTab}
placeholder={placeholder}
- plugins={[[recentSearchesPlugin, {ratio: 2, name: 'Recent'}]]}
+ plugins={[[recentSearchesPlugin, {ratio: 2, name: 'Recent', limit: maxItems}]]}
styles={autocompleteStyles}
typeahead={false}
Cancel={CancelButton}
@@ -91,11 +91,10 @@ const App = () => {
/>
- {!!selected.item && (
+ {!!selectedItem && (
Selected Result
- {selected.item[selected.displayField]}
- Coords: {selected.item.coords}
+ {selectedItem}
)}
diff --git a/plugins/turnstone-recent-searches/index.jsx b/plugins/turnstone-recent-searches/index.jsx
index db3398d..d749839 100644
--- a/plugins/turnstone-recent-searches/index.jsx
+++ b/plugins/turnstone-recent-searches/index.jsx
@@ -1,47 +1,54 @@
-import { useCallback } from 'react'
-import { useLocalStorage } from 'react-use'
-
-// TODO: Do we need to pass in Container? Plugins could just act upon props.
-
-const recentSearchesPlugin = (Container, containerProps = {}, pluginProps = {}) => {
+const recentSearchesPlugin = (Component, componentProps = {}, pluginProps = {}) => {
const {
ratio = 1,
id,
- name = 'Recent Searches'
+ name = 'Recent Searches',
+ storageKey = 'recentSearches',
+ limit = 10
} = pluginProps
- const [recentSearches, setRecentSearches] = useLocalStorage('recentSearches', [])
+
+ const {
+ defaultListbox = []
+ } = componentProps
+
+ const recentSearches = () => {
+ return JSON.parse(localStorage.getItem(storageKey)) || []
+ }
+
+ const addToRecentSearches = itemToAdd => {
+ const searches = [
+ itemToAdd,
+ ...recentSearches().filter(
+ item => item._displayField !== itemToAdd._displayField
+ )
+ ]
+ localStorage.setItem(storageKey, JSON.stringify(searches.slice(0, limit)))
+ }
const buildDefaultListBox = (recentSearches) => {
return [
{id, name, displayField: '_displayField', data: recentSearches, ratio},
- ...containerProps.defaultListbox
+ ...defaultListbox
]
}
- const onSelect = useCallback(
- (selectedResult, displayField) => {
- if(selectedResult) {
- selectedResult._displayField = selectedResult[displayField]
- const searches = [
- selectedResult,
- ...recentSearches.filter(
- item => item._displayField !== selectedResult._displayField
- )
- ]
- setRecentSearches(searches)
- }
+ const onSelect = (selectedResult, displayField) => {
+ if(selectedResult) {
+ selectedResult._displayField = selectedResult[displayField]
+ console.log({selectedResult})
+ addToRecentSearches(selectedResult)
+ }
- if (typeof containerProps.onSelect === 'function')
- containerProps.onSelect(selectedResult, displayField)
- }, []
- )
+ if(typeof componentProps.onSelect === 'function')
+ componentProps.onSelect(selectedResult, displayField)
+ }
- const newContainerProps = {
- ...containerProps,
+ const newComponentProps = {
+ ...componentProps,
...{defaultListbox: buildDefaultListBox(recentSearches), onSelect}
}
- return [Container, newContainerProps]
+ return [Component, newComponentProps]
}
export default recentSearchesPlugin
\ No newline at end of file