fix bug of not dispatching when type in the field in FilterInput component

web/src/js/__tests__/ducks/optionsSpec.js

@@ -42,7 +42,9 @@ describe('option actions', () => {
 describe('sendUpdate', () => {
 
     it('should handle error', async () => {
-        global.fetch = () => Promise.reject("fooerror");
+        let mockResponse = { status: 404, text: "fooerror" },
+            promise = Promise.resolve(mockResponse)
+        global.fetch = r => { return promise }
         await store.dispatch(OptionsActions.pureSendUpdate("bar", "error"))
         expect(store.getActions()).toEqual([
             OptionsEditorActions.updateError("bar", "fooerror")

web/src/js/components/Header/FilterInput.tsx

@@ -10,7 +10,7 @@ type FilterInputProps = {
     color: any
     placeholder: string
     value: string
-    onChange: (value) => void
+    onChange: (value) => { type: string, filter?: string, highlight?: string } | void
 }
 
 type FilterInputState = {

web/src/js/components/Header/MainMenu.tsx

@@ -43,24 +43,26 @@ function InterceptInput() {
 }
 
 function FlowFilterInput() {
-    const value = useAppSelector(state => state.flows.filter)
+    const dispatch = useAppDispatch(),
+        value = useAppSelector(state => state.flows.filter)
     return <FilterInput
         value={value || ""}
         placeholder="Search"
         type="search"
         color='black'
-        onChange={setFilter}
+        onChange={value => dispatch(setFilter(value))}
     />
 }
 
 function HighlightInput() {
-    const value = useAppSelector(state => state.flows.highlight)
+    const dispatch = useAppDispatch(),
+        value = useAppSelector(state => state.flows.highlight)
     return <FilterInput
         value={value || ""}
         placeholder="Highlight"
         type="tag"
         color='hsl(48, 100%, 50%)'
-        onChange={setHighlight}
+        onChange={value => dispatch(setHighlight(value))}
     />
 }
 

web/src/js/ducks/options.ts

@@ -36,14 +36,14 @@ const reducer: Reducer<OptionsState> = (state = defaultState, action) => {
 }
 export default reducer
 
-export function pureSendUpdate(option: Option, value, dispatch) {
+export function pureSendUpdate(option: Option, value) {
     return async dispatch => {
         try {
             const response = await fetchApi.put('/options', {[option]: value});
             if (response.status === 200) {
                 dispatch(optionsEditorActions.updateSuccess(option))
             } else {
-                throw await response.text()
+                throw await response.text
             }
         } catch (error) {
             return dispatch(optionsEditorActions.updateError(option, error))
@@ -51,12 +51,12 @@ export function pureSendUpdate(option: Option, value, dispatch) {
     }
 }
 
-let sendUpdate = _.throttle(pureSendUpdate, 500, {leading: true, trailing: true})
-
 export function update(name: Option, value: any): AppThunk {
+    let sendUpdate = _.throttle(pureSendUpdate(name, value), 500, {leading: true, trailing: true})
+
     return dispatch => {
         dispatch(optionsEditorActions.startUpdate(name, value))
-        sendUpdate(name, value, dispatch);
+        sendUpdate();
     }
 }
 

web/src/js/utils.ts

@@ -106,7 +106,7 @@ export function fetchApi(url: string, options: RequestInit = {}): Promise<Respon
     });
 }
 
-fetchApi.put = (url: string, json: any, options: RequestInit) => fetchApi(
+fetchApi.put = (url: string, json: any, options: RequestInit = {}) => fetchApi(
     url,
     {
         method: "PUT",