fix(search): reset search bar when clicking a result

jwplayer · Jun 23, 2021 · d5ad5b8 · d5ad5b8
1 parent c754f95
commit d5ad5b8
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 9 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import React, { ReactFragment, useState } from 'react';
+import React, { ReactFragment } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
@@ -20,6 +20,8 @@ type Props = {
   logoSrc?: string;
   searchBarProps: SearchBarProps;
   searchEnabled: boolean;
+  searchActive: boolean;
+  onSearchButtonClick?: () => void;
   onCloseSearchButtonClick?: () => void;
   children?: ReactFragment;
 };
@@ -30,27 +32,26 @@ const Header: React.FC<Props> = ({
   onMenuButtonClick,
   logoSrc,
   searchBarProps,
+  searchActive,
+  onSearchButtonClick,
   searchEnabled,
   onCloseSearchButtonClick,
 }) => {
   const { t } = useTranslation('menu');
-  const [mobileSearchActive, setMobileSearchActive] = useState(false);
   const breakpoint = useBreakpoint();
   const headerClassName = classNames(styles.header, styles[headerType], {
-    [styles.mobileSearchActive]: mobileSearchActive && breakpoint <= Breakpoint.sm,
+    [styles.mobileSearchActive]: searchActive && breakpoint <= Breakpoint.sm,
   });
 
   const search =
     breakpoint <= Breakpoint.sm ? (
-      mobileSearchActive ? (
+      searchActive ? (
         <div className={styles.mobileSearch}>
           <SearchBar {...searchBarProps} />
           <IconButton
             className={styles.iconButton}
             aria-label="Close search"
             onClick={() => {
-              setMobileSearchActive(false);
-
               if (onCloseSearchButtonClick) {
                 onCloseSearchButtonClick();
               }
@@ -60,7 +61,15 @@ const Header: React.FC<Props> = ({
           </IconButton>
         </div>
       ) : (
-        <IconButton className={styles.iconButton} aria-label="Open search" onClick={() => setMobileSearchActive(true)}>
+        <IconButton
+          className={styles.iconButton}
+          aria-label="Open search"
+          onClick={() => {
+            if (onSearchButtonClick) {
+              onSearchButtonClick();
+            }
+          }}
+        >
           <SearchIcon />
         </IconButton>
       )

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -23,12 +23,26 @@ const Layout: FC<LayoutProps> = ({ children }) => {
   const { menu, assets, options, siteName, description, footerText, searchPlaylist } = useContext(ConfigContext);
   const blurImage = UIStore.useState((s) => s.blurImage);
   const searchQuery = UIStore.useState((s) => s.searchQuery);
+  const searchActive = UIStore.useState((s) => s.searchActive);
   const { updateSearchQuery, resetSearchQuery } = useSearchQueryUpdater();
 
   const [sideBarOpen, setSideBarOpen] = useState(false);
   const hasDynamicBlur = options.dynamicBlur === true;
   const banner = assets.banner;
 
+  const searchButtonClickHandler = () =>
+    UIStore.update((s) => {
+      s.searchActive = true;
+    });
+
+  const closeSearchButtonClickHandler = () => {
+    resetSearchQuery();
+
+    UIStore.update((s) => {
+      s.searchActive = false;
+    });
+  };
+
   return (
     <div className={styles.layout}>
       <Helmet>
@@ -50,7 +64,9 @@ const Layout: FC<LayoutProps> = ({ children }) => {
             onQueryChange: (event) => updateSearchQuery(event.target.value),
             onClearButtonClick: () => updateSearchQuery(''),
           }}
-          onCloseSearchButtonClick={() => resetSearchQuery()}
+          searchActive={searchActive}
+          onSearchButtonClick={searchButtonClickHandler}
+          onCloseSearchButtonClick={closeSearchButtonClickHandler}
         >
           <Button label={t('home')} to="/" variant="text" />
           {menu.map((item) => (

diff --git a/src/screens/Search/Search.tsx b/src/screens/Search/Search.tsx
@@ -47,7 +47,14 @@ const Search: React.FC<RouteComponentProps<SearchRouteParams>> = ({
     }
   }, [firstRender, query, searchQuery, updateSearchQuery]);
 
-  const onCardClick = (playlistItem: PlaylistItem) => history.push(cardUrl(playlistItem, searchPlaylist));
+  const onCardClick = (playlistItem: PlaylistItem) => {
+    UIStore.update((s) => {
+      s.searchQuery = '';
+      s.searchActive = false;
+    });
+
+    history.push(cardUrl(playlistItem, searchPlaylist));
+  };
   const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
 
   if ((error || !playlist) && !isFetching) {

diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
@@ -3,9 +3,11 @@ import { Store } from 'pullstate';
 type UIStore = {
   blurImage: string;
   searchQuery: string;
+  searchActive: boolean;
 };
 
 export const UIStore = new Store<UIStore>({
   blurImage: '',
   searchQuery: '',
+  searchActive: false,
 });