From d889a9f9c0cf7bf10ec504be44d9a5a08f4a2d08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20Akg=C3=BCl?= <s86116@bht-berlin.de>
Date: Tue, 11 Jul 2023 03:16:44 +0200
Subject: [PATCH] search
---
app/(content)/(search)/search/page.tsx | 3 +-
app/api/gweets/route.ts | 2 +-
components/search/components/no-results.tsx | 33 +++-----------
components/search/components/search-input.tsx | 23 +++++-----
.../search/components/search-results.tsx | 44 +++++++++++--------
lib/react-query/provider.tsx | 2 +-
6 files changed, 48 insertions(+), 59 deletions(-)
diff --git a/app/(content)/(search)/search/page.tsx b/app/(content)/(search)/search/page.tsx
index cb8d68e..be853fc 100644
--- a/app/(content)/(search)/search/page.tsx
+++ b/app/(content)/(search)/search/page.tsx
@@ -1,11 +1,12 @@
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 />
</>
}
diff --git a/app/api/gweets/route.ts b/app/api/gweets/route.ts
index fd57494..308e27a 100644
--- a/app/api/gweets/route.ts
+++ b/app/api/gweets/route.ts
@@ -80,7 +80,7 @@ export async function GET(request: Request) {
}),
...(type === "search" && {
- text: {
+ content: {
contains: id,
mode: "insensitive",
},
diff --git a/components/search/components/no-results.tsx b/components/search/components/no-results.tsx
index d6d93ba..e667b2d 100644
--- a/components/search/components/no-results.tsx
+++ b/components/search/components/no-results.tsx
@@ -1,29 +1,8 @@
-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't find anything with "{query}"</h1>
+ <p className="text-tertiary text-center">Try searching for something else.</p>
</div>
- <h1>No results for "{query}"</h1>
- <p>
- Try searching for something else, or check your{" "}
- <Link href="/settings">Search settings</Link> to see if they’re
- protecting you from potentially sensitive content.
- </p>
- </div>
- </div>
- );
-};
+ )
+}
\ No newline at end of file
diff --git a/components/search/components/search-input.tsx b/components/search/components/search-input.tsx
index 5834226..0a25f25 100644
--- a/components/search/components/search-input.tsx
+++ b/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>
)
diff --git a/components/search/components/search-results.tsx b/components/search/components/search-results.tsx
index dc07b44..1ddae33 100644
--- a/components/search/components/search-results.tsx
+++ b/components/search/components/search-results.tsx
@@ -1,10 +1,13 @@
-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
diff --git a/lib/react-query/provider.tsx b/lib/react-query/provider.tsx
index d7754a0..857de4a 100644
--- a/lib/react-query/provider.tsx
+++ b/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>
--
GitLab