From 5d4a7ae552a342ad9947f6937f549773c515f294 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Wed, 22 Nov 2023 12:59:45 +0100
Subject: [PATCH] fix: improved searchbar

---
 src/app/page.tsx             | 23 +++++++++++++++++++----
 src/components/SearchBar.tsx |  9 +--------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5792d71..d141f6f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,22 @@
+import {redirect} from "next/navigation"
+import { headers } from 'next/headers'
 import Feed from "@/components/Feed"
 import SearchBar from "@/components/SearchBar"
 
-export default function Home() {
+type Props = {
+    searchParams?: { 
+      q?: string | undefined
+     };
+}
+
+export default function Home({searchParams}: Props) {
+  const headerList = headers()
+  const referer = headerList.get("referer")
+
+  if(!referer && searchParams?.q) {
+    redirect(`/search?q=${searchParams.q}`)
+  }
+  
   return (
     <>
       <SearchBar />
@@ -10,17 +25,17 @@ export default function Home() {
           <Feed
             title="Latest from the community"
             icon={'paper-icon'}
-            className="w-[calc(33%-16px)] max-w-md"
+            className="w-[calc(33%-20px)] max-w-md"
           />
           <Feed
             title="Rising Posts"
             icon={'trend-up-icon'}
-            className="w-[calc(33%-16px)] max-w-md"
+            className="w-[calc(33%-20px)] max-w-md"
           />
           <Feed
             title="Top Posts"
             icon={'top-arrow-icon'}
-            className="w-[calc(33%-16px)] max-w-md"
+            className="w-[calc(33%-20px)] max-w-md"
           />
         </div>
         <Feed
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 4d01e40..1072dac 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -64,13 +64,6 @@ const SearchBar = ({ }: Props) => {
 
   const isActive = results.length > 0 || dirtyInput
 
-  useEffect(() => {
-    if (!dirtyInput && searchParams.get("q") && searchParams.get("q") !== "") {
-      handleSearch()
-    }
-  }, [])
-
-
   return (
     <div
       className={`w-full mt-8  p-4 border-2 ${
@@ -104,7 +97,7 @@ const SearchBar = ({ }: Props) => {
                   : "w-full p-2"
               }`}
               placeholder={
-                isActive
+                !isActive
                   ? "Search for web3 news from the community"
                   : undefined
               }