Fix mobile drawer on home page

TheAlgorithms · Mar 2, 2021 · 6ee1b16 · 6ee1b16 · vercel · Mar 2, 2021
1 parent 87579a0
commit 6ee1b16
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 16 deletions.
diff --git a/components/jumbo/index.tsx b/components/jumbo/index.tsx
@@ -2,9 +2,16 @@ import React from "react";
 import { Paper, Typography, useTheme } from "@material-ui/core";
 import { JumboThemeProvider } from "hooks/themes";
 import Image from "next/image";
+import SearchBar from "components/searchBar";
 import classes from "./style.module.css";
 
-export default function Jumbo({ search }) {
+export default function Jumbo({
+  query,
+  setQuery,
+}: {
+  query: string;
+  setQuery: React.Dispatch<React.SetStateAction<string>>;
+}) {
   const theme = useTheme();
 
   return (
@@ -31,7 +38,9 @@ export default function Jumbo({ search }) {
             <Typography className={classes.h2}>
               Welcome to GitHub's largest open-source algorithm library
             </Typography>
-            <div className={classes.input}>{search}</div>
+            <div className={classes.input}>
+              <SearchBar query={query} setQuery={setQuery} />
+            </div>
           </div>
         </div>
       </JumboThemeProvider>

diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import {
   AppBar,
   Toolbar,
@@ -14,6 +14,8 @@ import {
 import NextLink from "next/link";
 import { JumboThemeProvider } from "hooks/themes";
 import Link from "components/link";
+import { useRouter } from "next/router";
+import SearchBar from "components/searchBar";
 import classes from "./style.module.css";
 
 const menu = [
@@ -35,10 +37,22 @@ const menu = [
   },
 ];
 
-export default function Navbar({ search, darkTheme, setDarkTheme }) {
+export default function Navbar({
+  darkTheme,
+  setDarkTheme,
+  query,
+  setQuery,
+}: {
+  darkTheme: boolean;
+  setDarkTheme: React.Dispatch<React.SetStateAction<boolean>>;
+  query: string;
+  setQuery: React.Dispatch<React.SetStateAction<string>>;
+}) {
   const [atTop, setAtTop] = useState(false);
   const smallScreen = useMediaQuery("(max-width:800px)");
   const [menuOpen, setMenuOpen] = useState(false);
+  const router = useRouter();
+  const isHome = router.route === "/";
 
   useEffect(() => {
     setAtTop(window.scrollY < 1);
@@ -57,7 +71,9 @@ export default function Navbar({ search, darkTheme, setDarkTheme }) {
   return (
     <AppBar
       className={
-        atTop && !search ? classes.root : `${classes.root} ${classes.scrolled}`
+        !menuOpen && atTop && isHome
+          ? classes.root
+          : `${classes.root} ${classes.scrolled}`
       }
       position="fixed"
     >
@@ -69,7 +85,9 @@ export default function Navbar({ search, darkTheme, setDarkTheme }) {
               TheAlgorithms
             </Typography>
           </Link>
-          {search && !smallScreen && search}
+          {!isHome && !smallScreen && (
+            <SearchBar query={query} setQuery={setQuery} small />
+          )}
           {smallScreen ? (
             <>
               <IconButton
@@ -100,7 +118,9 @@ export default function Navbar({ search, darkTheme, setDarkTheme }) {
             paper: darkTheme ? classes.drawerDark : classes.drawer,
           }}
         >
-          <ListItem className={classes.drawerSearch}>{search}</ListItem>
+          <ListItem className={classes.drawerSearch}>
+            <SearchBar query={query} setQuery={setQuery} small />
+          </ListItem>
           {menu.map((item) => (
             <NextLink key={item.name} href={item.href}>
               <MenuItem>{item.name}</MenuItem>

diff --git a/components/searchBar/index.tsx b/components/searchBar/index.tsx
@@ -1,4 +1,4 @@
-import React, { FormEvent } from "react";
+import React, { FormEvent, useEffect, useRef } from "react";
 import {
   FormControl,
   FilledInput,
@@ -29,6 +29,7 @@ export default function SearchBar({
 }) {
   const router = useRouter();
   const smallScreen = useMediaQuery("(max-width: 800px)");
+  const inputRef = useRef<HTMLDivElement>();
 
   function handleInput(event: FormEvent) {
     setQuery((event.target as HTMLInputElement).value);
@@ -51,6 +52,12 @@ export default function SearchBar({
     </InputAdornment>
   );
 
+  useEffect(() => {
+    if (router.route.startsWith("/search")) {
+      inputRef.current.getElementsByTagName("input")[0].focus();
+    }
+  }, [router.route]);
+
   return (
     <form
       noValidate
@@ -76,7 +83,7 @@ export default function SearchBar({
             value={query}
             placeholder="Search any algorithm"
             endAdornment={searchAdornment}
-            autoFocus
+            ref={inputRef}
           />
         </FormControl>
       ) : (

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -9,7 +9,6 @@ import { AppProps } from "next/app";
 import { lightTheme, darkTheme } from "hooks/themes";
 import Jumbo from "components/jumbo";
 import Navbar from "components/navbar";
-import SearchBar from "components/searchBar";
 import Footer from "components/footer";
 import Head from "components/head";
 
@@ -22,10 +21,6 @@ function MyApp({ Component, pageProps }: AppProps) {
     setIsDarkTheme((localStorage.getItem("theme") || "light") === "dark");
   }, []);
 
-  const searchBar = (
-    <SearchBar small={router.route !== "/"} query={query} setQuery={setQuery} />
-  );
-
   return (
     <div style={{ height: "100%" }} className={isDarkTheme ? "dark" : ""}>
       <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
@@ -37,11 +32,12 @@ function MyApp({ Component, pageProps }: AppProps) {
           options={{ showSpinner: false }}
         />
         <Navbar
-          search={router.route !== "/" && searchBar}
           darkTheme={isDarkTheme}
           setDarkTheme={setIsDarkTheme}
+          query={query}
+          setQuery={setQuery}
         />
-        {router.route === "/" && <Jumbo search={searchBar} />}
+        {router.route === "/" && <Jumbo query={query} setQuery={setQuery} />}
         <Component {...pageProps} />
         <Footer />
       </ThemeProvider>