search

app/(content)/(search)/search/page.tsx

 import { GlobalLayout } from "@/components/global-layout"
+import { SearchResults } from "@/components/search/components/search-results"
 
 export default async function SearchPage() {
     return (
         <GlobalLayout
             mainContent={
                 <>
-                    Search Page
+                    <SearchResults />
                 </>
             }
 

app/api/gweets/route.ts

@@ -80,7 +80,7 @@ export async function GET(request: Request) {
                 }),
 
                 ...(type === "search" && {
-                    text: {
+                    content: {
                         contains: id,
                         mode: "insensitive",
                     },

components/search/components/no-results.tsx

-import Image from "next/image";
-import Link from "next/link";
-
-import styles from "./styles/no-results.module.scss";
-
 export const NoResults = ({ query }: { query: string | undefined }) => {
-  return (
-    <div className={styles.container}>
-      <div className={styles.content}>
-        <div className={styles.image}>
-          <Image
-            src={`/no-results.png`}
-            alt="no results"
-            width={320}
-            height={160}
-            quality={100}
-            loading="lazy"
-          />
+    return (
+        <div className="flex flex-col items-center p-6 space-y-3">
+            <h1 className="text-tertiary text-center">Couldn&apos;t find anything with &quot;{query}&quot;</h1>
+            <p className="text-tertiary text-center">Try searching for something else.</p>
         </div>
-        <h1>No results for &quot;{query}&quot;</h1>
-        <p>
-          Try searching for something else, or check your{" "}
+    )
+}
\ No newline at end of file
-          <Link href="/settings">Search settings</Link> to see if they’re
-          protecting you from potentially sensitive content.
-        </p>
-      </div>
-    </div>
-  );
-};

components/search/components/search-input.tsx

@@ -4,25 +4,21 @@ import { Icons } from '@/components/icons'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
-import { zodResolver } from '@hookform/resolvers/zod'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
 
 interface DocsSearchProps extends React.HTMLAttributes<HTMLFormElement> { }
 
 export default function SearchInput({ className, ...props }: DocsSearchProps) {
-    const [searchQuery, setSearchQuery] = useState("")
     const router = useRouter()
     const pathname = usePathname()
     const searchParams = useSearchParams()
 
-    const search = searchParams?.get("query")?.toLowerCase() || ""
+    const search = searchParams?.get("query")?.trim().toLowerCase() || ""
 
-    const [query, setQuery] = useState(
-        pathname?.split("/")[1] === "search"
-            ? decodeURIComponent(search)
+    const [searchQuery, setSearchQuery] = useState(
+        pathname?.split("/")[1] === "search" ?
+            decodeURIComponent(search)
             : "",
     )
 
@@ -38,9 +34,10 @@ export default function SearchInput({ className, ...props }: DocsSearchProps) {
             const encoededQuery = encodeURIComponent(searchQuery)
             router.push(`${pathname}?search=${encoededQuery}`)
         } else {
+            if (!searchQuery.trim()) return
             router.push(`/search?query=${searchQuery}`)
         }
-    };
+    }
 
     return (
         <form
@@ -55,8 +52,12 @@ export default function SearchInput({ className, ...props }: DocsSearchProps) {
                 value={searchQuery}
                 onChange={(event) => setSearchQuery(event.target.value)}
             />
-            <Button size="lg" className="absolute align-middle h-8 px-2.5 mr-1">
-                <Icons.arrowRight className="h-3 w-3" />
+
+            <Button
+                type="submit"
+                size="option"
+                className="absolute align-middle h-8 px-2.5 mr-1">
+                <Icons.arrowRight />
             </Button>
         </form>
     )

components/search/components/search-results.tsx

-import { useSearchParams } from "next/navigation"
+"use client"
 
 import { InfiniteGweets } from "@/components/gweets/components/infinite-gweets"
 import { useGweets } from "@/components/gweets/hooks/use-gweets"
 import LoadingItem from "@/components/loading-item"
 import { UserItem } from "@/components/profile/components/user-item"
 import { TryAgain } from "@/components/try-again"
+import { Card } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import { useSearchParams } from "next/navigation"
 import { useSearchPeople } from "../hooks/use-search-people"
 import { NoResults } from "./no-results"
 
@@ -25,34 +28,39 @@ export const SearchResults = () => {
     if (gweets.isError) return <TryAgain />
 
     return (
-        <div className="">
+        <Card className="p-6 h-full w-full">
             {gweets?.data?.pages &&
                 gweets?.data?.pages[0]?.gweets?.length === 0 &&
                 people?.data?.length === 0 ? (
                 <NoResults query={query} />
             ) : (
-                <div className="">
+                <>
                     {people?.isSuccess && people?.data?.length > 0 && (
-                        <div className="">
-                            <h1>People</h1>
+                        <>
+                            <h1 className="font-bold pb-3">People</h1>
                             {people?.data?.map((person) => {
                                 return <UserItem key={person?.id} user={person} sessionId={undefined} />
                             })}
-                            <button className="">View All</button>
-                        </div>
+                            {gweets?.data?.pages[0]?.gweets?.length !== 0 &&
+                                <Separator className="my-6 p-0.5" />
+                            }
+                        </>
                     )}
 
-                    <div className="">
-                        <InfiniteGweets
-                            gweets={gweets?.data}
-                            hasNextPage={gweets?.hasNextPage}
-                            fetchNextPage={gweets?.fetchNextPage}
-                            isSuccess={gweets?.isSuccess}
-                            isFetchingNextPage={gweets?.isFetchingNextPage}
-                        />
-                    </div>
-                </div>
+                    {gweets?.data?.pages[0]?.gweets?.length !== 0 &&
+                        <>
+                            <h1 className="font-bold pb-3">Gweets</h1>
+                            <InfiniteGweets
+                                gweets={gweets.data}
+                                hasNextPage={gweets.hasNextPage}
+                                fetchNextPage={gweets.fetchNextPage}
+                                isSuccess={gweets.isSuccess}
+                                isFetchingNextPage={gweets.isFetchingNextPage}
+                            />
+                        </>
+                    }
+                </>
             )}
-        </div>
+        </Card>
     )
 }
\ No newline at end of file

lib/react-query/provider.tsx

@@ -11,7 +11,7 @@ export default function Providers({ children }: React.PropsWithChildren) {
 
     return (
         <QueryClientProvider client={client}>
-            <SessionProvider>
+            <SessionProvider refetchOnWindowFocus={false}>
                 {children}
             </SessionProvider>
         </QueryClientProvider>