diff --git a/src/components/ItemKeywords.js b/src/components/ItemKeywords.js
index c3071a6..a8f571b 100644
--- a/src/components/ItemKeywords.js
+++ b/src/components/ItemKeywords.js
@@ -1,6 +1,8 @@
import { Box, makeStyles } from '@material-ui/core';
import Chip from '@material-ui/core/Chip'
import { secondary, themeVariables } from '../theme'
+import keywordDuck from '../redux/keywordDuck'
+import { useDispatch } from 'react-redux'
const useStyles = makeStyles((theme) => ({
root: {
@@ -18,29 +20,31 @@ const useStyles = makeStyles((theme) => ({
}));
const ItemKeywords = (props) => {
+ const dispatch = useDispatch()
+
+ const handleSelect = (keyword) => {
+ dispatch(keywordDuck.actions.setKeyword(keyword))
+ }
+
const classes = useStyles()
- if (!props.data) {
- return (
-
- )
- } else {
- return (
-
- {props.data.map((keyword, index) => {
- return (
-
+ return (
+ props.data &&
+
+ {props.data.map((keyword, index) => {
+ return (
+
handleSelect(keyword)}
/>
-
- )}
+
)}
-
- )
- }
-
+ )}
+
+ )
}
export default ItemKeywords
diff --git a/src/containers/ReactiveSearchContainer.js b/src/containers/ReactiveSearchContainer.js
index 5c09119..0b04c2b 100644
--- a/src/containers/ReactiveSearchContainer.js
+++ b/src/containers/ReactiveSearchContainer.js
@@ -3,7 +3,7 @@ import { DataSearch } from '@appbaseio/reactivesearch';
import { useSelector } from 'react-redux'
import { getMapBoundsDebounced } from '../redux/mapSelector'
-import { getActiveFilters, getDataType } from '../redux/filterSelector'
+import { getActiveFilters, getDataType, keywords } from '../redux/filterSelector'
import useDebounce from '../hooks/useDebounce'
@@ -12,9 +12,20 @@ function ReactiveSearchContainer () {
const bbox = useSelector(getMapBoundsDebounced)
const dataFilter = useSelector(getDataType)
const dbbox = useDebounce(bbox, 800)
-
+ const keyword = useSelector(keywords)
const extensions = useSelector(getActiveFilters)
+ const [qValue, setqValue] = React.useState('')
+
+ React.useEffect(()=>{
+ setqValue(keyword)
+ }, [keyword])
+
+ const handleChange = (value, triggerQuery) => {
+ setqValue(value)
+ triggerQuery()
+ }
+
const geoQuery = (value) => {
let query = {
query: {
@@ -71,12 +82,11 @@ function ReactiveSearchContainer () {
}
}
}
-
return query
}
return (
-
-
)
}
diff --git a/src/redux/filterSelector.js b/src/redux/filterSelector.js
index c85e8a7..bc517e2 100644
--- a/src/redux/filterSelector.js
+++ b/src/redux/filterSelector.js
@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit'
export const filters = state => state.filters
export const formatFilter = state => state.dataType
+export const keywords = state => state.keywords.keywords
export const getFilters = createSelector([filters], filter => {
return filter
diff --git a/src/redux/keywordDuck.js b/src/redux/keywordDuck.js
new file mode 100644
index 0000000..900e637
--- /dev/null
+++ b/src/redux/keywordDuck.js
@@ -0,0 +1,24 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+ keywords: ''
+}
+
+function setKeyword(state, action) {
+ const { payload } = action
+
+ return {
+ ...state,
+ keywords: payload
+ }
+}
+
+const keywords = createSlice({
+ name: 'keywords',
+ initialState,
+ reducers: {
+ setKeyword
+ }
+ })
+
+export default keywords
diff --git a/src/redux/store.js b/src/redux/store.js
index 4136394..16e26cb 100644
--- a/src/redux/store.js
+++ b/src/redux/store.js
@@ -4,11 +4,13 @@ import { combineReducers } from 'redux'
import mapDuck from './mapDuck'
import filterDuck from './filterDuck'
import dataTypeDuck from './dataTypeDuck'
+import keywordDuck from './keywordDuck'
const reducer = combineReducers({
map: mapDuck.reducer,
filters: filterDuck.reducer,
dataType: dataTypeDuck.reducer,
+ keywords: keywordDuck.reducer
})
const store = configureStore({