fix: prevent water counter to be increased on empty search submission (…

…#15)

* Only increase number of searches if search input is not empty

* Refactor search function to require search input argument for better
  code readability (clearer composition of concerns)

* Explicitly deal with types of the query params

components/SearchBar/SearchBar.tsx

@@ -19,12 +19,19 @@ const SUGGESTED_WORDS_URL = 'https://suggest.finditnowonline.com/SuggestionFeed/
 const SearchBar = ({ big }: SearchProps) => {
   const { t } = useTranslation()
   const router = useRouter()
-  const { query, type, method } = router.query
+
+  // Query params can be of type `string[]` in case a name is used multiple times in the URL.
+  // See https://nodejs.org/api/querystring.html#querystring_querystring_parse_str_sep_eq_options
+  // We assume here that each name exists only once in the query and thus is `string`.
+  const query = router.query.query as string
+  const type = router.query.type as string
+  const method = router.query.method as string
+
   const { userState, setNextUserState } = useContext(UserContext)
 
   const initType = typeof type === 'undefined' ? 'web' : type
   const initSearchValue = typeof query === 'undefined' ? '' : query
-  const [searchValue, setSearchValue] = useState<string | string[]>(initSearchValue)
+  const [searchValue, setSearchValue] = useState<string>(initSearchValue)
   const [typeValue, setTypeValue] = useState<string | string[]>(initType)
   const [highlightIndex, setHighlightIndex] = useState<number>(null)
   const [isSuggestionOpen, setIsSuggestionOpen] = useState<boolean>(false)
@@ -119,7 +126,7 @@ const SearchBar = ({ big }: SearchProps) => {
   }, [searchValue])
 
   function onSubmit() {
-    search()
+    search(searchValue)
   }
 
   function resetDropdown(event) {
@@ -130,14 +137,16 @@ const SearchBar = ({ big }: SearchProps) => {
     event && event.target.blur()
   }
 
-  function search(word?: string, event?) {
+  function search(searchString: string, event?) {
+    if (!searchString) {
+      return
+    }
+
     setNextUserState({ numOfSearches: Number(userState.numOfSearches) + 1 })
 
-    if ((word && word !== '') || searchValue !== '') {
-      const queryNoSpace = queryNoWitheSpace(word || searchValue)
-      router.push(`search?query=${queryNoSpace}&type=${typeValue}`)
-      resetDropdown(event)
-    }
+    const queryNoSpace = queryNoWitheSpace(searchString)
+    router.push(`search?query=${queryNoSpace}&type=${typeValue}`)
+    resetDropdown(event)
   }
 
   function handleOnMouseDown(word: string) {

helpers/_utils.tsx

@@ -5,6 +5,6 @@ export function formatNumber(num) {
 /* Checks if in browser environment and not in SSR */
 export const isBrowser = () => !!(typeof window !== 'undefined' && window.document && window.document.createElement)
 
-export function queryNoWitheSpace(query) {
+export function queryNoWitheSpace(query: string) {
   return query.replace(/\s/g, '+')
 }