From 5e1798c41e0b4368c43cebd2d069aa900cd251b3 Mon Sep 17 00:00:00 2001
From: Randy <randymoralesg@gmail.com>
Date: Sun, 23 May 2021 23:19:51 -0600
Subject: [PATCH] Refactor Search Bar

Remove onFocus and onClick events

Signed-off-by: Randy <randymoralesg@gmail.com>
---
 components/Navbar.js   |  4 ----
 pages/blog/index.js    | 20 +++-----------------
 styles/blog.module.css |  2 +-
 3 files changed, 4 insertions(+), 22 deletions(-)

diff --git a/components/Navbar.js b/components/Navbar.js
index 5e128c0..da79cf3 100644
--- a/components/Navbar.js
+++ b/components/Navbar.js
@@ -1,10 +1,6 @@
 import Image from 'next/image'
 import Link from 'next/link'
 
-import { useState, useEffect } from 'react'
-
-import { CSSTransition } from 'react-transition-group'
-
 import useTranslation from '@/i18n/useTranslation'
 import Translator from '@/components/Translator'
 import ThemeSelector from '@/components/ThemeSelector'
diff --git a/pages/blog/index.js b/pages/blog/index.js
index 4e5c445..5f2caab 100644
--- a/pages/blog/index.js
+++ b/pages/blog/index.js
@@ -31,7 +31,6 @@ export default function BlogIndex({ allLocalePostsData }) {
 
   const searchRef = useRef(null)
   const [query, setQuery] = useState('')
-  const [active, setActive] = useState(false)
   const [results, setResults] = useState([])
 
   const searchEndpoint = query => `/api/search?q=${query}`
@@ -50,27 +49,14 @@ export default function BlogIndex({ allLocalePostsData }) {
     }
   }, [])
 
-  const onFocus = useCallback(() => {
-    setActive(true)
-    window.addEventListener('click', onClick)
-  }, [])
-
-  const onClick = useCallback(event => {
-    if (searchRef.current && !searchRef.current.contains(event.target)) {
-      setActive(false)
-      window.removeEventListener('click', onClick)
-    }
-  }, [])
-
   return (
     <Layout pageTitle={t('blog')}>
-      <div ref={searchRef}>
-        <div className={styles.container}>
+      <div>
+        <div ref={searchRef} className={styles.container}>
           {/* Search bar */}
           <input
             className={styles.search}
             onChange={onChange}
-            onFocus={onFocus}
             placeholder={t('search-posts')}
             type='text'
             value={query}
@@ -88,7 +74,7 @@ export default function BlogIndex({ allLocalePostsData }) {
 
         {/* Show blog posts list */}
         <section className={styles.cardsContainer}>
-          {results.length == 0 && query != '' && active ? (
+          {results.length == 0 && query != '' ? (
             <> </>
           ) : (
             <>
diff --git a/styles/blog.module.css b/styles/blog.module.css
index e639c16..7f7b2cb 100644
--- a/styles/blog.module.css
+++ b/styles/blog.module.css
@@ -1,4 +1,5 @@
 /* ******** Search Bar ******** */
+
 .container {
   display: flex;
   margin: 0 auto;
@@ -7,7 +8,6 @@
 
 .search {
   border: 1px solid #666;
-  box-sizing: border-box;
   cursor: 'pointer';
   font-size: 1.3rem;
   margin-bottom: 1rem;