fix(notifications): fix page reload that caused missing notificatons (#…

…317)

Co-authored-by: Overzunov <overzunov@lohika.com>

astro_2.0/components/AppHeader/components/SearchBar/SearchBar.tsx

@@ -11,7 +11,12 @@ import ReactDOM from 'react-dom';
 import isEmpty from 'lodash/isEmpty';
 import { useRouter } from 'next/router';
 import { usePopper } from 'react-popper';
-import { useClickAway, useDebounce, useMount } from 'react-use';
+import {
+  useClickAway,
+  useDebounce,
+  useMount,
+  useMountedState,
+} from 'react-use';
 
 import { SEARCH_PAGE_URL } from 'constants/routing';
 
@@ -38,11 +43,10 @@ export const SearchBar: FC<SearchBarProps> = ({
 }) => {
   const POPUP_LEFT_MARGIN = 20;
   const POPUP_RIGHT_MARGIN = 20;
+  const isMounted = useMountedState();
 
   const [focused, setFocused] = useState(false);
   const [expanded, setExpanded] = useState(false);
-
-  const [mounted, setMounted] = useState(false);
   const [searchWidth, setSearchWidth] = useState<number | string>(40);
 
   const router = useRouter();
@@ -58,30 +62,6 @@ export const SearchBar: FC<SearchBarProps> = ({
     }
   }
 
-  useMount(() => {
-    setMounted(true);
-
-    // The code is needed to add "search" query param on app initialisation.
-    // Otherwise page is reloaded when "search" param is added for the first
-    // time. It makes "search results" popup disappear which is not something
-    // we want. Update of the query param doesn't cause reload.
-    if (!router.query.search) {
-      router.push(
-        {
-          query: {
-            ...router.query,
-            search: '',
-          },
-        },
-        undefined,
-        {
-          scroll: false,
-          shallow: true,
-        }
-      );
-    }
-  });
-
   const calculateWidth = useCallback(() => {
     if (withSideBar) {
       setSearchWidth(isDesktopResolution() ? 420 : '');
@@ -255,7 +235,7 @@ export const SearchBar: FC<SearchBarProps> = ({
   }
 
   function renderCloseButton() {
-    if (mounted && (!isEmpty(value) || !isDesktopResolution())) {
+    if (isMounted() && (!isEmpty(value) || !isDesktopResolution())) {
       return (
         <div className={styles.closeIconHolder}>
           <IconButton

features/search/search-results/SearchResults.tsx

@@ -5,7 +5,6 @@ import React, {
   useContext,
   useState,
 } from 'react';
-import { useRouter } from 'next/router';
 
 import { SputnikHttpService } from 'services/sputnik';
 
@@ -32,34 +31,15 @@ export const useSearchResults = (): SearchResultsContextProps =>
   useContext(SearchResultsContext);
 
 export const SearchResults: FC = ({ children }) => {
-  const router = useRouter();
-
   const [searchResults, setSearchResults] = useState<null | SearchResultsData>(
     null
   );
 
-  const handleSearch = useCallback(
-    query => {
-      router.replace(
-        {
-          query: {
-            ...router.query,
-            search: query,
-          },
-        },
-        undefined,
-        {
-          scroll: false,
-          shallow: true,
-        }
-      );
-
-      SputnikHttpService.search({ query }).then(result => {
-        setSearchResults(result);
-      });
-    },
-    [router]
-  );
+  const handleSearch = useCallback(query => {
+    SputnikHttpService.search({ query }).then(result => {
+      setSearchResults(result);
+    });
+  }, []);
 
   const handleClose = useCallback(() => {
     setSearchResults(null);

features/search/search-results/components/search-results-renderer/SearchResultsRenderer.tsx

@@ -42,6 +42,7 @@ export const SearchResultsRenderer: FC = () => {
       </div>
       <div className={styles.content}>
         <Tabs
+          skipShallow
           tabs={TABS}
           tabsWrapperClassName={styles.tabsRoot}
           tabsListRootClassName={styles.tabsListRoot}