From ac66678b4d5114f8cdaeaf96cb998e165cbc066e Mon Sep 17 00:00:00 2001
From: "zokutyou2@gmail.com" <zokutyou2@gmail.com>
Date: Sat, 17 Jul 2021 15:59:56 +0900
Subject: [PATCH] fix bug of not dispatching when type in the field in
 FilterInput component

---
 web/src/js/__tests__/ducks/optionsSpec.js    |  4 +++-
 web/src/js/components/Header/FilterInput.tsx |  2 +-
 web/src/js/components/Header/MainMenu.tsx    | 10 ++++++----
 web/src/js/ducks/options.ts                  | 10 +++++-----
 web/src/js/utils.ts                          |  2 +-
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/src/js/__tests__/ducks/optionsSpec.js b/web/src/js/__tests__/ducks/optionsSpec.js
index 63b69cde7..b6a8ca619 100644
--- a/web/src/js/__tests__/ducks/optionsSpec.js
+++ b/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")
diff --git a/web/src/js/components/Header/FilterInput.tsx b/web/src/js/components/Header/FilterInput.tsx
index 726db52ba..93d227978 100644
--- a/web/src/js/components/Header/FilterInput.tsx
+++ b/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 = {
diff --git a/web/src/js/components/Header/MainMenu.tsx b/web/src/js/components/Header/MainMenu.tsx
index 084139999..82e099626 100644
--- a/web/src/js/components/Header/MainMenu.tsx
+++ b/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))}
     />
 }
 
diff --git a/web/src/js/ducks/options.ts b/web/src/js/ducks/options.ts
index 069289947..a0d3de758 100644
--- a/web/src/js/ducks/options.ts
+++ b/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();
     }
 }
 
diff --git a/web/src/js/utils.ts b/web/src/js/utils.ts
index 244eb27cf..0b2ae75b4 100644
--- a/web/src/js/utils.ts
+++ b/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",