update search component

src/components/Search/SearchBar/index.tsx

@@ -1,5 +1,5 @@
 import { SearchButton } from './searchButton';
-import React from 'react';
+import React, { useState } from 'react';
 import { Collection } from 'types/collection';
 
 import { EnteFile } from 'types/file';
@@ -8,22 +8,22 @@ import SearchInput from './searchInput';
 import { UpdateSearch } from 'types/search';
 
 interface Props {
-    isOpen: boolean;
     isFirstFetch: boolean;
-    setOpen: (value: boolean) => void;
     updateSearch: UpdateSearch;
     collections: Collection[];
     setActiveCollection: (id: number) => void;
     files: EnteFile[];
 }
 export default function SearchBar({ isFirstFetch, ...props }: Props) {
-    const showSearchInput = () => props.setOpen(true);
+    const [isOpen, setIsOpen] = useState(false);
+    const showSearchInput = () => setIsOpen(true);
+
     return (
         <SearchBarWrapper>
-            <SearchInput {...props} />
+            <SearchInput {...props} isOpen={isOpen} setOpen={setIsOpen} />
             <SearchButton
                 isFirstFetch={isFirstFetch}
-                show={!props.isOpen}
+                show={!isOpen}
                 openSearchInput={showSearchInput}
             />
         </SearchBarWrapper>

src/components/pages/gallery/Navbar.tsx

@@ -15,7 +15,6 @@ interface Iprops {
     isFirstFetch: boolean;
     openUploader: () => void;
     isInSearchMode: boolean;
-    setIsInSearchMode: (value: boolean) => void;
     collections: Collection[];
     files: EnteFile[];
     setActiveCollection: (id: number) => void;
@@ -26,7 +25,6 @@ export function GalleryNavbar({
     isFirstFetch,
     openUploader,
     isInSearchMode,
-    setIsInSearchMode,
     collections,
     files,
     setActiveCollection,
@@ -42,8 +40,6 @@ export function GalleryNavbar({
                 </FluidContainer>
             ) : (
                 <SearchBar
-                    isOpen={isInSearchMode}
-                    setOpen={setIsInSearchMode}
                     isFirstFetch={isFirstFetch}
                     collections={collections}
                     files={getNonTrashedUniqueUserFiles(files)}

src/pages/gallery/index.tsx

@@ -524,6 +524,7 @@ export default function Gallery() {
         setActiveCollection(ALL_SECTION);
         setSearch(newSearch);
         setSetSearchResultSummary(summary);
+        setIsInSearchMode(!!newSearch);
     };
 
     const closeCollectionSelector = (closeBtnClick?: boolean) => {
@@ -652,7 +653,6 @@ export default function Gallery() {
                     isFirstFetch={isFirstFetch}
                     openUploader={openUploader}
                     isInSearchMode={isInSearchMode}
-                    setIsInSearchMode={setIsInSearchMode}
                     collections={collections}
                     files={getNonTrashedUniqueUserFiles(files)}
                     setActiveCollection={setActiveCollection}