From cff4c19835104dc8cb169bc29e0630a40915437f Mon Sep 17 00:00:00 2001
From: Chris Boyce <chris@spatial-integrity.ca>
Date: Tue, 23 Mar 2021 15:04:39 -0230
Subject: [PATCH] Commit for staged testing

---
 src/components/ItemKeywords.js            | 38 +++++++++++++----------
 src/containers/ReactiveSearchContainer.js | 22 ++++++++++---
 src/redux/filterSelector.js               |  1 +
 src/redux/keywordDuck.js                  | 24 ++++++++++++++
 src/redux/store.js                        |  2 ++
 5 files changed, 65 insertions(+), 22 deletions(-)
 create mode 100644 src/redux/keywordDuck.js

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 (
-      <Box></Box>
-    )
-  } else {
-    return (
-      <Box component="ul" className={classes.root}>
-      {props.data.map((keyword, index) => {
-        return (
-          <li key={index}>
+  return (
+    props.data &&
+    <Box component="ul" className={classes.root}>
+    {props.data.map((keyword, index) => {
+      return (
+        <li key={index}>
           <Chip
             className={classes.chip}
             label={keyword}
-            clickable
+            size='small'
+            clickable={true}
+            onClick={() => handleSelect(keyword)}
           />
-          </li>
-        )}
+        </li>
       )}
-      </Box>
-    )
-  }
-
+    )}
+    </Box>
+  )
 }
 
 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 (
-      <DataSearch
+    <DataSearch
       customQuery={geoQuery}
       dataField={[
         'properties.title',
@@ -96,8 +106,10 @@ function ReactiveSearchContainer () {
       innerClass={{
         input: 'form-search',
       }}
+      value={qValue}
+      onChange={handleChange}
+      // onKeyPress={handleKey}
     />
-
   )
 }
 
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({