mobile search (#1676)

Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
ChainSafe · Nov 2, 2021 · 4b6e437 · 4b6e437
1 parent bb4d719
commit 4b6e437
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 39 deletions.
diff --git a/packages/files-ui/src/Components/Layouts/AppHeader.tsx b/packages/files-ui/src/Components/Layouts/AppHeader.tsx
@@ -9,7 +9,8 @@ import {
   MenuDropdown,
   PowerDownSvg,
   useHistory,
-  Button
+  Button,
+  SearchIcon
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../FilesRoutes"
 import SearchModule from "../Modules/SearchModule"
@@ -47,9 +48,7 @@ const useStyles = makeStyles(
             opacity: 1,
             height: "auto",
             visibility: "visible",
-            padding: `${constants.headerTopPadding}px ${
-              constants.contentPadding
-            }px ${0}px ${constants.contentPadding}px`,
+            padding: `${constants.headerTopPadding}px ${constants.contentPadding}px ${0}px ${constants.contentPadding}px`,
             zIndex: zIndex?.layer1
           }
         },
@@ -74,6 +73,14 @@ const useStyles = makeStyles(
           backgroundColor: constants.header.hamburger
         }
       },
+      searchIcon: {
+        position: "absolute",
+        right: "10px",
+        cursor: "pointer",
+        "& > svg": {
+          fill: constants.header.hamburger
+        }
+      },
       logo: {
         textDecoration: "none",
         display: "flex",
@@ -111,8 +118,7 @@ const useStyles = makeStyles(
           height: constants.mobileHeaderHeight,
           position: "absolute",
           width: "100%",
-          zIndex: zIndex?.background,
-          "&.active": {}
+          zIndex: zIndex?.background
         }
       },
       options: {
@@ -274,7 +280,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                   <HamburgerMenu
                     onClick={() => setNavOpen(!navOpen)}
                     variant={navOpen ? "active" : "default"}
-                    className={clsx(classes.hamburgerMenu)}
+                    className={classes.hamburgerMenu}
                     testId="hamburger-menu"
                   />
                   <Link
@@ -291,13 +297,19 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                     &nbsp;
                     <Typography variant="caption">beta</Typography>
                   </Link>
+                  <SearchIcon
+                    className={classes.searchIcon}
+                    onClick={() => setSearchActive(true)}
+                  />
                 </>
               )}
-              <SearchModule
-                className={clsx(classes.searchModule, searchActive && "active")}
-                searchActive={searchActive}
-                setSearchActive={setSearchActive}
-              />
+              {searchActive && (
+                <SearchModule
+                  className={clsx(classes.searchModule)}
+                  searchActive={searchActive}
+                  setSearchActive={setSearchActive}
+                />
+              )}
             </>
           )}
         </>

diff --git a/packages/files-ui/src/Components/Modules/SearchModule.tsx b/packages/files-ui/src/Components/Modules/SearchModule.tsx
@@ -143,7 +143,7 @@ const useStyles = makeStyles(
 interface ISearchModule {
   className?: string
   searchActive: boolean
-  setSearchActive(searchActive: boolean): void
+  setSearchActive: (searchActive: boolean) => void
 }
 
 const SearchModule: React.FC<ISearchModule> = ({
@@ -186,8 +186,8 @@ const SearchModule: React.FC<ISearchModule> = ({
     try {
       const results = await getSearchResults(searchString)
       setSearchResults({ results, query: searchString })
-    } catch (err) {
-      //
+    } catch (e) {
+      console.error(e)
     }
   }
 
@@ -236,9 +236,7 @@ const SearchModule: React.FC<ISearchModule> = ({
 
   return (
     <section
-      onClick={() => {
-        if (!searchActive) setSearchActive(true)
-      }}
+      onClick={() => { !searchActive && setSearchActive(true)}}
       ref={ref}
       className={clsx(classes.root, className, {
         active: searchActive
@@ -267,17 +265,15 @@ const SearchModule: React.FC<ISearchModule> = ({
           testId = "input-search-bar"
         />
       </form>
-      {searchQuery && searchResults?.query ? (
-        <div
-          className={clsx(classes.resultsContainer, searchActive && "active")}
-        >
+      {searchQuery && searchResults?.query && (
+        <div className={clsx(classes.resultsContainer, searchActive && "active")}>
           <div className={classes.resultsBox}>
-            {searchResults?.query && !searchResults.results.length ? (
+            {searchResults?.query && !searchResults.results.length && (
               <Typography className={classes.noResultsFound}>
                 <Trans>No search results for </Trans>{` ${searchResults.query}`}
               </Typography>
-            ) : null}
-            {searchResultsFiles && searchResultsFiles.length ? (
+            )}
+            {searchResultsFiles && searchResultsFiles.length && (
               <div>
                 <div className={classes.resultHead}>
                   <Typography
@@ -303,8 +299,8 @@ const SearchModule: React.FC<ISearchModule> = ({
                   </div>
                 ))}
               </div>
-            ) : null}
-            {searchResultsFolders && searchResultsFolders.length ? (
+            )}
+            {searchResultsFolders && searchResultsFolders.length && (
               <div>
                 <div className={classes.resultHeadFolder}>
                   <Typography
@@ -330,16 +326,16 @@ const SearchModule: React.FC<ISearchModule> = ({
                   </div>
                 ))}
               </div>
-            ) : null}
+            )}
           </div>
-          {!desktop ? (
+          {!desktop && (
             <div
               className={classes.resultBackDrop}
               onClick={() => setSearchActive(false)}
             />
-          ) : null}
+          )}
         </div>
-      ) : null}
+      )}
     </section>
   )
 }

diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
@@ -5,8 +5,7 @@ msgstr ""
 "POT-Creation-Date: 2021-04-23 11:05+0200\n"
 "PO-Revision-Date: 2021-10-30 12:33+0000\n"
 "Last-Translator: J. Lavoie <j.lavoie@net-c.ca>\n"
-"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/"
-"chainsafe-files-user-interface/fr/>\n"
+"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/chainsafe-files-user-interface/fr/>\n"
 "Language: fr\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -709,9 +708,7 @@ msgid "Stored by miner"
 msgstr "Sauvegardé par le mineur"
 
 msgid "System maintenance is scheduled to start at {0}. The system will be unavailable."
-msgstr ""
-"Une maintenance du système est prévue pour démarrer à {0}. Le système sera "
-"indisponible."
+msgstr "Une maintenance du système est prévue pour démarrer à {0}. Le système sera indisponible."
 
 msgid "Teams"
 msgstr "Équipes"
@@ -834,9 +831,7 @@ msgid "Want to help shape this product?"
 msgstr "Vous voulez participer à l'élaboration de ce produit ?"
 
 msgid "We are performing routine maintenance of the system. Service status updates will be posted on the <0>Files Support Channel</0> on Discord"
-msgstr ""
-"Nous effectuons une maintenance de routine du système. Les mises à jour de "
-"l'état du service seront postées sur le canal <0>Files Support<0> sur Discord"
+msgstr "Nous effectuons une maintenance de routine du système. Les mises à jour de l'état du service seront postées sur le canal <0>Files Support<0> sur Discord"
 
 msgid "We can't encrypt files larger than 2GB. Some items will not be uploaded"
 msgstr "Nous ne pouvons pas chiffrer les fichiers de plus de 2 Go. Certains éléments ne pourront pas être téléversés"