From 0476befdb98f1a993522a1ff2b5e21e8c63eb17c Mon Sep 17 00:00:00 2001
From: ben-brooker <ben.brooker@datacamp.com>
Date: Mon, 11 Jul 2022 18:16:42 +0100
Subject: [PATCH 1/2] fix: fix function redirect

---
 components/Autocomplete.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/Autocomplete.tsx b/components/Autocomplete.tsx
index f0e076c..d09e10b 100644
--- a/components/Autocomplete.tsx
+++ b/components/Autocomplete.tsx
@@ -12,8 +12,12 @@ export default function AutoComplete({ searchInput }: Props) {
   const [packageSuggestions, setPackageSuggestions] = useState([]);
   const [topicSuggestions, setTopicSuggestions] = useState([]);
 
-    function onClick(query) {
-      router.push(`/search?q=${encodeURIComponent(query)}`);
+    function onClick(query, type) {
+      if (type==="topic") {
+        router.push(`/packages/${encodeURIComponent(query?.fields?.package_name)}/versions/${encodeURIComponent(query?.fields?.version)}/topics/${encodeURIComponent(query?.fields?.name)}`);
+      } else {
+        router.push(`/search?q=${encodeURIComponent(query)}`);
+      }
     };
 
     async function autoComplete(query) {
@@ -61,7 +65,7 @@ export default function AutoComplete({ searchInput }: Props) {
             searchInput
             &&
             <div
-            onClick={()=>onClick(searchInput)}
+            onClick={()=>onClick(searchInput, "search")}
             className="flex items-center px-4 py-4 cursor-pointer hover:bg-dc-beige200 hover:opacity-0.5"
             >
               <Paragraph className="pl-2 py-2">{`View results for "${searchInput}"`}</Paragraph>
@@ -82,7 +86,7 @@ export default function AutoComplete({ searchInput }: Props) {
                     return (
                       <li
                       key={p?.fields?.package_name}
-                      onClick={()=>onClick(p?.fields?.package_name)}
+                      onClick={()=>onClick(p?.fields?.package_name, "package")}
                       className="flex items-center px-4 py-2 cursor-pointer hover:bg-dc-beige200 hover:opacity-0.5"
                       >
                         <Paragraph className="pl-2 text-lg">{p?.fields?.package_name}</Paragraph>
@@ -107,7 +111,7 @@ export default function AutoComplete({ searchInput }: Props) {
                     return (
                       <li
                       key={t?.fields?.package_name+t?.fields?.name}
-                      onClick={()=>onClick(t?.fields?.name)}
+                      onClick={()=>onClick(t, "topic")}
                       className="flex items-center px-4 py-2 cursor-pointer hover:bg-dc-beige200 hover:opacity-0.5"
                       >
                         <div>

From 6b8476fe5092e4cb64355538fba73cd07d96e2ad Mon Sep 17 00:00:00 2001
From: ben-brooker <ben.brooker@datacamp.com>
Date: Tue, 12 Jul 2022 16:10:28 +0100
Subject: [PATCH 2/2] refactor: add autocomplete to nav search and adjust
 styling

---
 components/Autocomplete.tsx | 33 ++++++++++++++++++---------
 components/Navbar.tsx       | 45 ++++++++++++++++++++++++-------------
 pages/index.tsx             |  9 ++++++--
 3 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/components/Autocomplete.tsx b/components/Autocomplete.tsx
index d09e10b..29a386c 100644
--- a/components/Autocomplete.tsx
+++ b/components/Autocomplete.tsx
@@ -4,19 +4,30 @@ import { useEffect, useState } from "react";
 import { API_URL } from "../lib/utils";
 
 type Props = {
-    searchInput: string
+    searchInput: string,
+    onSearch: () => void,
 };
 
-export default function AutoComplete({ searchInput }: Props) {
-
+export default function AutoComplete({ searchInput, onSearch }: Props) {
   const [packageSuggestions, setPackageSuggestions] = useState([]);
   const [topicSuggestions, setTopicSuggestions] = useState([]);
 
     function onClick(query, type) {
-      if (type==="topic") {
-        router.push(`/packages/${encodeURIComponent(query?.fields?.package_name)}/versions/${encodeURIComponent(query?.fields?.version)}/topics/${encodeURIComponent(query?.fields?.name)}`);
-      } else {
-        router.push(`/search?q=${encodeURIComponent(query)}`);
+      switch (type) {
+        case "topic":
+          router.push(`/packages/${encodeURIComponent(query?.fields?.package_name)}/versions/${encodeURIComponent(query?.fields?.version)}/topics/${encodeURIComponent(query?.fields?.name)}`);
+          onSearch();
+          break
+        case "package":
+          router.push(`/search?q=${encodeURIComponent(query)}`);
+          onSearch();
+          break
+        case "search":
+          router.push(`/search?q=${encodeURIComponent(query)}`);
+          onSearch();
+          break
+        default:
+          break
       }
     };
 
@@ -89,7 +100,7 @@ export default function AutoComplete({ searchInput }: Props) {
                       onClick={()=>onClick(p?.fields?.package_name, "package")}
                       className="flex items-center px-4 py-2 cursor-pointer hover:bg-dc-beige200 hover:opacity-0.5"
                       >
-                        <Paragraph className="pl-2 text-lg">{p?.fields?.package_name}</Paragraph>
+                        <Paragraph className="pl-2 sm:text-lg">{p?.fields?.package_name}</Paragraph>
                       </li>
                     )
                 })}
@@ -112,13 +123,13 @@ export default function AutoComplete({ searchInput }: Props) {
                       <li
                       key={t?.fields?.package_name+t?.fields?.name}
                       onClick={()=>onClick(t, "topic")}
-                      className="flex items-center px-4 py-2 cursor-pointer hover:bg-dc-beige200 hover:opacity-0.5"
+                      className="flex flex-wrap items-center px-4 py-2 cursor-pointer hover:bg-dc-beige200 hover:opacity-0.5"
                       >
                         <div>
-                          <Paragraph className="px-2 text-lg">{`${t?.fields?.name}`}</Paragraph>
+                          <Paragraph className="pl-2 pr-1 sm:pr-2 sm:text-lg">{`${t?.fields?.name}`}</Paragraph>
                         </div>
                         <div>
-                          <Paragraph className="text-lg text-dc-red">{`(${t?.fields?.package_name})`}</Paragraph>
+                          <Paragraph className="sm:text-lg">{`(${t?.fields?.package_name})`}</Paragraph>
                         </div>
                       </li>
                     )
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 61d45d2..62d16d2 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -6,6 +6,7 @@ import { useContext, useState } from 'react';
 import { FaGithub } from 'react-icons/fa';
 
 import { ThemeContext } from '../pages/_app';
+import AutoComplete from './Autocomplete';
 
 export default function Navbar() {
   const [searchInput, setSearchInput] = useState('');
@@ -58,23 +59,35 @@ export default function Navbar() {
 
       {/* show search bar if relevant */}
       {showSearch && (
-        <form onSubmit={onSubmitSearch}>
-          <div className="dc-input">
-            <label className="sr-only" htmlFor="searchBarNav">
-              Search all packages and functions
-            </label>
-            <Input
-              className="w-full md:w-80 lg:w-96"
-              id="searchBarNav"
-              name="searchBarNav"
-              onChange={setSearchInput}
-              placeholder="Search all packages and functions"
-              size="small"
-              type="search"
-              value={searchInput}
-            />
+        <div className="flex flex-col max-h-4 max-w-4xl">
+          <form onSubmit={onSubmitSearch}>
+            <div className="dc-input">
+              <label className="sr-only" htmlFor="searchBarNav">
+                Search all packages and functions
+              </label>
+              <Input
+                className="w-full"
+                id="searchBarNav"
+                name="searchBarNav"
+                onChange={setSearchInput}
+                placeholder="Search all packages and functions"
+                size="small"
+                type="search"
+                value={searchInput}
+              />
+            </div>
+          </form>
+          <div className="md:w-80 lg:w-96">
+            {
+              searchInput 
+              &&
+              <AutoComplete
+              onSearch={()=>setSearchInput("")}
+              searchInput={searchInput}
+              />
+            }
           </div>
-        </form>
+        </div>
       )}
     </header>
   );
diff --git a/pages/index.tsx b/pages/index.tsx
index cd32915..f8ac0fc 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -38,9 +38,14 @@ export default function HomePage({ packageCount }: { packageCount?: number }) {
             value={searchInput}
           />
         </form>
-        <AutoComplete
+        {
+          searchInput 
+          &&
+          <AutoComplete
+          onSearch={()=>setSearchInput("")}
           searchInput={searchInput}
-        />
+          />
+        }
       </div>
     </Layout>
   );