feat: search bar feedback

now it tells you if it's loading or if there are no results

closes #224

Author: kemuru

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 (
-    <StyledSelect
-      id="items-search-bar"
-      showSearch
-      value={value}
-      defaultActiveFirstOption={false}
-      showArrow={false}
-      filterOption={false}
-      onSearch={onSearch}
-      onChange={onChange}
-      optionLabelProp="label"
-      notFoundContent={null}
-      placeholder={
-        <>
-          <FontAwesomeIcon icon="search" /> Search...
-        </>
-      }
-    >
-      {options}
-    </StyledSelect>
-  )
+  if ((writing || itemSearchQuery.loading) && !empty)
+    return (
+      <StyledSelect
+        id="items-search-bar"
+        showSearch
+        value={value}
+        defaultActiveFirstOption={false}
+        showArrow={false}
+        filterOption={false}
+        onSearch={onSearch}
+        onChange={onChange}
+        optionLabelProp="label"
+        notFoundContent={null}
+        placeholder={
+          <>
+            <FontAwesomeIcon icon="search" /> Search...
+          </>
+        }
+      >
+        <Select.Option key="1" label="Loading...">
+          Loading...
+        </Select.Option>
+      </StyledSelect>
+    )
+
+  if (!writing && options.length === 0 && !empty)
+    return (
+      <StyledSelect
+        id="items-search-bar"
+        showSearch
+        value={value}
+        defaultActiveFirstOption={false}
+        showArrow={false}
+        filterOption={false}
+        onSearch={onSearch}
+        onChange={onChange}
+        optionLabelProp="label"
+        notFoundContent={null}
+        placeholder={
+          <>
+            <FontAwesomeIcon icon="search" /> Search...
+          </>
+        }
+      >
+        <Select.Option key="2" label="No results">
+          No results
+        </Select.Option>
+      </StyledSelect>
+    )
+
+  if (!writing && options.length > 0)
+    return (
+      <StyledSelect
+        id="items-search-bar"
+        showSearch
+        value={value}
+        defaultActiveFirstOption={false}
+        showArrow={false}
+        filterOption={false}
+        onSearch={onSearch}
+        onChange={onChange}
+        optionLabelProp="label"
+        notFoundContent={null}
+        placeholder={
+          <>
+            <FontAwesomeIcon icon="search" /> Search...
+          </>
+        }
+      >
+        {options}
+      </StyledSelect>
+    )
+  else
+    return (
+      <StyledSelect
+        id="items-search-bar"
+        showSearch
+        value={value}
+        defaultActiveFirstOption={false}
+        showArrow={false}
+        filterOption={false}
+        onSearch={onSearch}
+        onChange={onChange}
+        optionLabelProp="label"
+        notFoundContent={null}
+        placeholder={
+          <>
+            <FontAwesomeIcon icon="search" /> Search...
+          </>
+        }
+      >
+        {options}
+      </StyledSelect>
+    )
 }
 
 export default LightSearchBar

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 (
+      <StyledSelect
+        id="items-search-bar"
+        showSearch
+        value={value}
+        defaultActiveFirstOption={false}
+        showArrow={false}
+        filterOption={false}
+        onSearch={onSearch}
+        onChange={onChange}
+        optionLabelProp="label"
+        notFoundContent={null}
+        placeholder={
+          <>
+            <FontAwesomeIcon icon="search" /> Search...
+          </>
+        }
+      >
+        <Select.Option key="1" label="Loading...">
+          Loading...
+        </Select.Option>
+      </StyledSelect>
+    )
+
+  if (!writing && options.length === 0 && !empty)
+    return (
+      <StyledSelect
+        id="items-search-bar"
+        showSearch
+        value={value}
+        defaultActiveFirstOption={false}
+        showArrow={false}
+        filterOption={false}
+        onSearch={onSearch}
+        onChange={onChange}
+        optionLabelProp="label"
+        notFoundContent={null}
+        placeholder={
+          <>
+            <FontAwesomeIcon icon="search" /> Search...
+          </>
+        }
+      >
+        <Select.Option key="2" label="No results">
+          No results
+        </Select.Option>
+      </StyledSelect>
+    )
+
+  if (!writing && options.length > 0)
+    return (
+      <StyledSelect
+        id="items-search-bar"
+        showSearch
+        value={value}
+        defaultActiveFirstOption={false}
+        showArrow={false}
+        filterOption={false}
+        onSearch={onSearch}
+        onChange={onChange}
+        optionLabelProp="label"
+        notFoundContent={null}
+        placeholder={
+          <>
+            <FontAwesomeIcon icon="search" /> Search...
+          </>
+        }
+      >
+        {options}
+      </StyledSelect>
+    )
+
   return (
     <StyledSelect
       id="items-search-bar"