From bc1038b03e56b60fe5ffca349cef4f593f3e58e3 Mon Sep 17 00:00:00 2001 From: Rachasak Ragkamnerd Date: Mon, 25 Mar 2019 14:05:30 +0700 Subject: [PATCH 1/7] Show alert when enter non-exist province name. --- src/components/ZoneFilterPanel.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/ZoneFilterPanel.js b/src/components/ZoneFilterPanel.js index 8371c98..3406c72 100644 --- a/src/components/ZoneFilterPanel.js +++ b/src/components/ZoneFilterPanel.js @@ -74,6 +74,7 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { marginLeft: 10, }} onChange={e => { + // @todo #223 show dropdown or "autocomplete" for province name? const { value } = e.target setState({ ...state, value: value }) }} @@ -81,12 +82,21 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { setState({ ...state, value: state.query }) }} onKeyPress={e => { - if (e.key == "Enter" && isProvinceExist(state.value)) { - trackEvent("Search for province") - setState( - { ...state, query: state.value }, - navigate(filterPath(state.value)) - ) + const { value } = state + if (e.key == "Enter") { + if (isProvinceExist(state.value)) { + trackEvent("Search for province") + setState( + { ...state, query: state.value }, + navigate(filterPath(state.value)) + ) + } else { + // @todo #223 clear input box + alert( + "ไม่พบจังหวัดที่ท่านระบุ กรุณาตรวจสอบชื่อจังหวัดทีท่านกรอกอีกครั้ง" + ) + setState({ ...state, value: "" }) + } } }} value={state.value} From e84181a096de255e5af8eea84341d6c8c970471c Mon Sep 17 00:00:00 2001 From: Rachasak Ragkamnerd Date: Mon, 25 Mar 2019 14:50:38 +0700 Subject: [PATCH 2/7] Remove setState command --- src/components/ZoneFilterPanel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ZoneFilterPanel.js b/src/components/ZoneFilterPanel.js index 3406c72..02aaa5f 100644 --- a/src/components/ZoneFilterPanel.js +++ b/src/components/ZoneFilterPanel.js @@ -95,7 +95,6 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { alert( "ไม่พบจังหวัดที่ท่านระบุ กรุณาตรวจสอบชื่อจังหวัดทีท่านกรอกอีกครั้ง" ) - setState({ ...state, value: "" }) } } }} From d9dcb895f5d21e97309c40b24ae99cd5ceb68831 Mon Sep 17 00:00:00 2001 From: Rachasak Ragkamnerd Date: Mon, 25 Mar 2019 20:42:13 +0700 Subject: [PATCH 3/7] Avoid app crash when set incorrect value on filter search --- src/components/ZoneFilterPanel.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/ZoneFilterPanel.js b/src/components/ZoneFilterPanel.js index 02aaa5f..dfa62a1 100644 --- a/src/components/ZoneFilterPanel.js +++ b/src/components/ZoneFilterPanel.js @@ -79,7 +79,8 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { setState({ ...state, value: value }) }} onBlur={e => { - setState({ ...state, value: state.query }) + if (!state.noOnBlur) + setState({ ...state, value: state.query, noOnBlur: false }) }} onKeyPress={e => { const { value } = state @@ -95,6 +96,7 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { alert( "ไม่พบจังหวัดที่ท่านระบุ กรุณาตรวจสอบชื่อจังหวัดทีท่านกรอกอีกครั้ง" ) + setState({ ...state, value: value, noOnBlur: true }) } } }} From 631bf35e71efed384793ca2d6331c67a0348ff07 Mon Sep 17 00:00:00 2001 From: Rachasak Ragkamnerd Date: Mon, 25 Mar 2019 20:46:22 +0700 Subject: [PATCH 4/7] filter search: reset noOnBlur state added --- src/components/ZoneFilterPanel.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ZoneFilterPanel.js b/src/components/ZoneFilterPanel.js index dfa62a1..8fd50e8 100644 --- a/src/components/ZoneFilterPanel.js +++ b/src/components/ZoneFilterPanel.js @@ -80,7 +80,8 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { }} onBlur={e => { if (!state.noOnBlur) - setState({ ...state, value: state.query, noOnBlur: false }) + setState({ ...state, value: state.query }) + else setState({ ...state, noOnBlur: false }) }} onKeyPress={e => { const { value } = state From 931bc57ae2032aa7414f40cb353b46232eb55ad0 Mon Sep 17 00:00:00 2001 From: Rachasak Ragkamnerd Date: Tue, 26 Mar 2019 17:16:12 +0700 Subject: [PATCH 5/7] Change error display from alert to tag --- src/components/ZoneFilterPanel.js | 36 +++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 9 deletions(-) diff --git a/src/components/ZoneFilterPanel.js b/src/components/ZoneFilterPanel.js index 8fd50e8..9f38d4a 100644 --- a/src/components/ZoneFilterPanel.js +++ b/src/components/ZoneFilterPanel.js @@ -56,7 +56,7 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { } }, [autoFocus]) return ( -
+
{renderFilter(state.query, "จังหวัด")} {currentFilterName => { @@ -66,7 +66,8 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { disabled={!current} ref={inputRef} css={{ - border: `1px solid "#999999"`, + border: `1px solid`, + borderColor: state.provinceError ? "#FF0000" : "#999999", width: "200px", boxSizing: "border-box", padding: 10, @@ -76,12 +77,17 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { onChange={e => { // @todo #223 show dropdown or "autocomplete" for province name? const { value } = e.target - setState({ ...state, value: value }) + setState({ ...state, value: value, provinceError: false }) }} onBlur={e => { if (!state.noOnBlur) setState({ ...state, value: state.query }) - else setState({ ...state, noOnBlur: false }) + else + setState({ + ...state, + noOnBlur: false, + provinceError: false, + }) }} onKeyPress={e => { const { value } = state @@ -93,11 +99,12 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { navigate(filterPath(state.value)) ) } else { - // @todo #223 clear input box - alert( - "ไม่พบจังหวัดที่ท่านระบุ กรุณาตรวจสอบชื่อจังหวัดทีท่านกรอกอีกครั้ง" - ) - setState({ ...state, value: value, noOnBlur: true }) + setState({ + ...state, + value: value, + noOnBlur: true, + provinceError: true, + }) } } }} @@ -106,6 +113,17 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { ) }} + + ไม่พบจังหวัดที่ท่านระบุ กรุณาตรวจสอบชื่อจังหวัดที่ท่านกรอกอีกครั้ง +
) } From 4ebab2be5f3971b9afa21d8741912b3caff30322 Mon Sep 17 00:00:00 2001 From: Rachasak Ragkamnerd Date: Tue, 26 Mar 2019 18:17:03 +0700 Subject: [PATCH 6/7] Fix display issue on mobile --- src/components/ZoneFilterPanel.js | 109 ++++++++++++++++-------------- 1 file changed, 57 insertions(+), 52 deletions(-) diff --git a/src/components/ZoneFilterPanel.js b/src/components/ZoneFilterPanel.js index 9f38d4a..c71a3c5 100644 --- a/src/components/ZoneFilterPanel.js +++ b/src/components/ZoneFilterPanel.js @@ -56,74 +56,79 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { } }, [autoFocus]) return ( -
+
{renderFilter(state.query, "จังหวัด")} {currentFilterName => { const current = currentFilterName === state.query return ( - { - // @todo #223 show dropdown or "autocomplete" for province name? - const { value } = e.target - setState({ ...state, value: value, provinceError: false }) - }} - onBlur={e => { - if (!state.noOnBlur) - setState({ ...state, value: state.query }) - else - setState({ - ...state, - noOnBlur: false, - provinceError: false, - }) - }} - onKeyPress={e => { - const { value } = state - if (e.key == "Enter") { - if (isProvinceExist(state.value)) { - trackEvent("Search for province") - setState( - { ...state, query: state.value }, - navigate(filterPath(state.value)) - ) + > + { + // @todo #223 show dropdown or "autocomplete" for province name? + const { value } = e.target + setState({ ...state, value: value, provinceError: false }) + }} + onBlur={e => { + if (!state.noOnBlur) { + setState({ ...state, value: state.query }) } else { setState({ ...state, - value: value, - noOnBlur: true, - provinceError: true, + noOnBlur: false, + provinceError: false, }) } - } - }} - value={state.value} - /> + }} + onKeyPress={e => { + const { value } = state + if (e.key == "Enter") { + if (isProvinceExist(state.value)) { + trackEvent("Search for province") + setState( + { ...state, query: state.value }, + navigate(filterPath(state.value)) + ) + } else { + setState({ + ...state, + value: value, + noOnBlur: true, + provinceError: true, + }) + } + } + }} + value={state.value} + /> + + ไม่พบจังหวัดที่ท่านระบุ
{" "} + กรุณาตรวจสอบชื่อจังหวัดที่ท่านกรอกอีกครั้ง + +
) }} - - ไม่พบจังหวัดที่ท่านระบุ กรุณาตรวจสอบชื่อจังหวัดที่ท่านกรอกอีกครั้ง -
) } From f8b5ad42b104ec0b6454d3002356b5fb46beff92 Mon Sep 17 00:00:00 2001 From: Rachasak Ragkamnerd Date: Tue, 26 Mar 2019 18:17:46 +0700 Subject: [PATCH 7/7] Fix display issue on mobile --- src/components/ZoneFilterPanel.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ZoneFilterPanel.js b/src/components/ZoneFilterPanel.js index c71a3c5..e383e87 100644 --- a/src/components/ZoneFilterPanel.js +++ b/src/components/ZoneFilterPanel.js @@ -122,8 +122,7 @@ export function ZoneFilterPanel({ onFilterSelect, autoFocus }) { width: "100%", }} > - ไม่พบจังหวัดที่ท่านระบุ
{" "} - กรุณาตรวจสอบชื่อจังหวัดที่ท่านกรอกอีกครั้ง + ไม่พบจังหวัดที่ท่านระบุ
)