Fix search input bug that caused an incorrect message to be shown

Author: ValentaTomas

src/Home/SearchHeaderPanel/SearchInput.tsx

@@ -102,32 +102,34 @@ function SearchInput({
 }: SearchInputProps) {
   const [value, setValue] = useState('');
   const [lastValue, setLastValue] = useState('');
-
-  const debouncedValue = useDebounce(value, 280);
-
   const [lastDocSource, setLastDocSource] = useState<DocSource>();
   const [isEmptyQuery, setIsEmptyQuery] = useState(true);
-
   const [lastHistoryValue, setLastHistoryValue] = useState('');
 
+  const debouncedValue = useDebounce(value, 280);
+
+  const search = useCallback((query: string) => {
+    invokeSearch(query);
+    setLastValue(query);
+  }, [invokeSearch]);
+
   useEffect(() => {
     if (!historyValue) return;
-    if (historyValue !== lastHistoryValue && historyValue !== value) {
-      if (historyValue !== lastValue) {
-        onDidQueryChanged();
-      }
-      setValue(historyValue);
-      setLastHistoryValue(historyValue);
-      invokeSearch(historyValue);
-      setLastValue(historyValue);
-    }
+    if (historyValue === lastHistoryValue) return;
+    if (historyValue === value) return;
+
+    onDidQueryChanged();
+    setValue(historyValue);
+    setLastHistoryValue(historyValue);
+
+    search(historyValue);
   }, [
     historyValue,
-    onDidQueryChanged,
-    lastValue,
     lastHistoryValue,
     value,
-    invokeSearch,
+    lastValue,
+    onDidQueryChanged,
+    search,
   ]);
 
   function handleChangeValue(e: any) {
@@ -147,14 +149,15 @@ function SearchInput({
   }
 
   useEffect(() => {
-    if (activeDocSource !== lastDocSource) {
-      setLastDocSource(activeDocSource);
-      invokeSearch(value);
-    }
+    if (activeDocSource === lastDocSource) return;
+
+    setLastDocSource(activeDocSource);
+    search(value);
   }, [
-    value,
-    lastDocSource,
     activeDocSource,
+    lastDocSource,
+    search,
+    value,
   ]);
 
   function handleInputKeyDown(e: any) {
@@ -172,32 +175,27 @@ function SearchInput({
   useHotkeys('enter', (event) => {
     if (isSignInModalOpened) return;
     if (isDocsFilterModalOpened) return;
-
     if (isSearchHistoryPreviewVisible) return onEnterInSearchHistory();
-
-    if (searchMode !== SearchMode.OnEnterPress) return;
-    invokeSearch(value);
-    setLastValue(value);
+    if (searchMode === SearchMode.OnEnterPress) search(value);
   }, { filter: () => true }, [
-    invokeSearch,
     isSignInModalOpened,
     isDocsFilterModalOpened,
-    value,
-    searchMode,
+    isSearchHistoryPreviewVisible,
     onEnterInSearchHistory,
+    searchMode,
+    search,
+    value,
   ]);
 
   useEffect(() => {
-    if (searchMode !== SearchMode.Automatic) return;
-
-    if (lastValue === debouncedValue) return;
-    invokeSearch(debouncedValue);
-    setLastValue(debouncedValue);
+    if (searchMode === SearchMode.Automatic && lastValue !== debouncedValue) {
+      search(debouncedValue);
+    }
   }, [
-    invokeSearch,
-    debouncedValue,
     searchMode,
     lastValue,
+    debouncedValue,
+    search,
   ]);
 
   useIPCRenderer('did-show-main-window', () => {
@@ -237,7 +235,7 @@ function SearchInput({
 
       {searchMode === SearchMode.OnEnterPress &&
         <HotkeyWrapper
-          onClick={() => invokeSearch(value)}
+          onClick={() => search(value)}
         >
           <Hotkey
             hotkey={['Enter']}

src/Home/index.tsx

@@ -904,6 +904,9 @@ function Home() {
   const [queryFromHistoryValue, setQueryFromHistoryValue] = useState('');
   const [hasQueryChanged, setHasQueryChanged] = useState(true);
 
+
+  console.log('QUERY', hasQueryChanged);
+
   const activeFilter = useMemo(() => state.search.filter, [state.search.filter]);
 
   const activeFocusedIdx = useMemo(() => {
@@ -918,13 +921,6 @@ function Home() {
     return state.results[activeFilter].items.length === 0;
   }, [state.results, activeFilter]);
 
-  const hasCurrentQueryNoResults = useMemo(() => {
-    return hasQueryChanged && hasActiveFilterEmptyResults;
-  }, [
-    hasActiveFilterEmptyResults,
-    hasQueryChanged,
-  ]);
-
   const isActiveFilterLoading = useMemo(() => {
     return state.results[activeFilter].isLoading;
   }, [state.results, activeFilter]);
@@ -1830,10 +1826,9 @@ function Home() {
                 {!isActiveFilterLoading &&
                   <>
                     {state.search.isQueryPresent
+                      && state.searchMode !== SearchMode.Automatic
                       && hasActiveFilterEmptyResults
-                      && hasCurrentQueryNoResults
                       && !hasQueryChanged
-                      && state.searchMode !== SearchMode.Automatic
                       &&
                       <InfoWrapper>
                         <InfoMessageLeft>
@@ -1847,15 +1842,14 @@ function Home() {
                     }
 
                     {state.search.isQueryPresent
+                      && state.searchMode !== SearchMode.Automatic
                       && hasActiveFilterEmptyResults
-                      && !hasCurrentQueryNoResults
                       && hasQueryChanged
-                      && state.searchMode !== SearchMode.Automatic
                       &&
                       <InfoWrapper>
                         <InfoMessageLeft>
                           Type your search query and press
-                        </InfoMessageLeft>
+                          </InfoMessageLeft>
                         <TextHotkey hotkey={['Enter']} />
                         <InfoMessageRight>
                           to search
@@ -1865,7 +1859,7 @@ function Home() {
 
                     {!state.search.isQueryPresent
                       && state.searchMode !== SearchMode.Automatic
-                      && hasQueryChanged
+                      && hasActiveFilterEmptyResults
                       &&
                       <InfoWrapper>
                         <InfoMessageLeft>
@@ -1880,8 +1874,7 @@ function Home() {
 
                     {state.search.isQueryPresent
                       && state.searchMode === SearchMode.Automatic
-                      && hasCurrentQueryNoResults
-                      && !hasQueryChanged
+                      && hasActiveFilterEmptyResults
                       &&
                       <InfoMessage>
                         Nothing found. Try a different query.
@@ -1890,7 +1883,7 @@ function Home() {
 
                     {!state.search.isQueryPresent
                       && state.searchMode === SearchMode.Automatic
-                      && hasQueryChanged
+                      && hasActiveFilterEmptyResults
                       &&
                       <InfoMessage>
                         Type your search query