From df6b21875575069310eccdb81d08406425d77982 Mon Sep 17 00:00:00 2001 From: chotacabras <102478601+chotacabras@users.noreply.github.com> Date: Tue, 24 May 2022 22:46:54 +0200 Subject: [PATCH 1/3] feat: search bar feedback now it tells you if it's loading or if there are no results closes #224 --- src/components/light-search-bar.js | 125 ++++++++++++++++++++++++----- src/components/search-bar.js | 85 +++++++++++++++++++- 2 files changed, 185 insertions(+), 25 deletions(-) diff --git a/src/components/light-search-bar.js b/src/components/light-search-bar.js index e6e0f82e..35503b7d 100644 --- a/src/components/light-search-bar.js +++ b/src/components/light-search-bar.js @@ -157,6 +157,8 @@ OptionItem.propTypes = { const LightSearchBar = () => { const [value, setValue] = useState() const [data, setData] = useState([]) + const [empty, setEmpty] = useState(true) + const [writing, setWriting] = useState(true) const { tcrAddress } = useContext(LightTCRViewContext) const [makeItemSearchQuery, itemSearchQuery] = useLazyQuery(ITEM_SEARCH_QUERY) @@ -171,6 +173,7 @@ const LightSearchBar = () => { first: MAX_ITEM_COUNT } }) + setWriting(false) }, 700) useEffect(() => { @@ -197,30 +200,108 @@ const LightSearchBar = () => { ) }) - const onSearch = value => debouncedCallback(value) + const onSearch = value => { + debouncedCallback(value) + setWriting(true) + if (value === '') setEmpty(true) + else setEmpty(false) + } const onChange = itemID => setValue(itemID) - return ( - - Search... - - } - > - {options} - - ) + if ((writing || itemSearchQuery.loading) && !empty) + return ( + + Search... + + } + > + + Loading... + + + ) + + if (!writing && options.length === 0 && !empty) + return ( + + Search... + + } + > + + No results + + + ) + + if (!writing && options.length > 0) + return ( + + Search... + + } + > + {options} + + ) + else + return ( + + Search... + + } + > + {options} + + ) } export default LightSearchBar diff --git a/src/components/search-bar.js b/src/components/search-bar.js index 8340c8bc..3b96a04e 100644 --- a/src/components/search-bar.js +++ b/src/components/search-bar.js @@ -165,6 +165,8 @@ OptionItem.propTypes = { const SearchBar = () => { const [value, setValue] = useState() const [data, setData] = useState([]) + const [empty, setEmpty] = useState(true) + const [writing, setWriting] = useState(true) const [enhancedDataSource, setEnhancedDataSource] = useState([]) const { itemSubmissionLogs: dataSource, @@ -264,10 +266,14 @@ const SearchBar = () => { : [] setData(results) + setWriting(false) }, 700) - const onSearch = useCallback(value => debouncedCallback(value), [ - debouncedCallback - ]) + const onSearch = value => { + debouncedCallback(value) + setWriting(true) + if (value === '') setEmpty(true) + else setEmpty(false) + } const options = data.map(d => { // Iterate through the item fields and find the first text field @@ -294,6 +300,79 @@ const SearchBar = () => { const onChange = useCallback(itemID => setValue(itemID), []) + if (writing && !empty) + return ( + + Search... + + } + > + + Loading... + + + ) + + if (!writing && options.length === 0 && !empty) + return ( + + Search... + + } + > + + No results + + + ) + + if (!writing && options.length > 0) + return ( + + Search... + + } + > + {options} + + ) + return ( Date: Wed, 25 May 2022 00:27:15 +0200 Subject: [PATCH 2/3] chore: remove useless extra code --- src/components/light-search-bar.js | 122 +++++++---------------------- src/components/search-bar.js | 82 +++---------------- 2 files changed, 38 insertions(+), 166 deletions(-) diff --git a/src/components/light-search-bar.js b/src/components/light-search-bar.js index 35503b7d..0129bd37 100644 --- a/src/components/light-search-bar.js +++ b/src/components/light-search-bar.js @@ -208,100 +208,36 @@ const LightSearchBar = () => { } const onChange = itemID => setValue(itemID) - if ((writing || itemSearchQuery.loading) && !empty) - return ( - - Search... - - } - > - - Loading... - - - ) - - if (!writing && options.length === 0 && !empty) - return ( - - Search... - - } - > - - No results - - - ) + const shownOptions = () => { + if ((writing || itemSearchQuery.loading) && !empty) + return Loading... + if (!writing && options.length === 0 && !empty) + return No results + if (empty) return [] + else return options + } - if (!writing && options.length > 0) - return ( - - Search... - - } - > - {options} - - ) - else - return ( - - Search... - - } - > - {options} - - ) + return ( + + Search... + + } + > + {shownOptions()} + + ) } export default LightSearchBar diff --git a/src/components/search-bar.js b/src/components/search-bar.js index 3b96a04e..91c9694a 100644 --- a/src/components/search-bar.js +++ b/src/components/search-bar.js @@ -300,78 +300,14 @@ const SearchBar = () => { const onChange = useCallback(itemID => setValue(itemID), []) - if (writing && !empty) - return ( - - Search... - - } - > - - Loading... - - - ) - - if (!writing && options.length === 0 && !empty) - return ( - - Search... - - } - > - - No results - - - ) - - if (!writing && options.length > 0) - return ( - - Search... - - } - > - {options} - - ) + const shownOptions = () => { + if (writing && !empty) + return Loading... + if (!writing && options.length === 0 && !empty) + return No results + if (empty) return [] + else return options + } return ( { } > - {options} + {shownOptions()} ) } From 3286c3e31b8c856b13ed9d097d865de14fdbbfd3 Mon Sep 17 00:00:00 2001 From: Green <40367733+greenlucid@users.noreply.github.com> Date: Tue, 24 May 2022 23:58:57 +0100 Subject: [PATCH 3/3] refactor: simplify shownOptions --- src/components/light-search-bar.js | 6 +++--- src/components/search-bar.js | 7 +++---- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/light-search-bar.js b/src/components/light-search-bar.js index 0129bd37..1bf74393 100644 --- a/src/components/light-search-bar.js +++ b/src/components/light-search-bar.js @@ -209,11 +209,11 @@ const LightSearchBar = () => { const onChange = itemID => setValue(itemID) const shownOptions = () => { - if ((writing || itemSearchQuery.loading) && !empty) + if (empty) return [] + if (writing || itemSearchQuery.loading) return Loading... - if (!writing && options.length === 0 && !empty) + if (!writing && options.length === 0) return No results - if (empty) return [] else return options } diff --git a/src/components/search-bar.js b/src/components/search-bar.js index 91c9694a..177f6cde 100644 --- a/src/components/search-bar.js +++ b/src/components/search-bar.js @@ -301,11 +301,10 @@ const SearchBar = () => { const onChange = useCallback(itemID => setValue(itemID), []) const shownOptions = () => { - if (writing && !empty) - return Loading... - if (!writing && options.length === 0 && !empty) - return No results if (empty) return [] + if (writing) return Loading... + if (!writing && options.length === 0) + return No results else return options }