Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-06 00:04:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: "realtime" search

Browse source
This commit is contained in:
Kentai Radiquum 2024-11-20 01:43:01 +05:00
parent 7a95a3e126
commit 7952e5eecb
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/api/search/route.ts
View file

@ -5,7 +5,7 @@ import { ENDPOINTS } from "../config";
export async function GET(request: NextRequest) { export async function GET(request: NextRequest) {
const page = parseInt(request.nextUrl.searchParams.get("page")) || 0; const page = parseInt(request.nextUrl.searchParams.get("page")) || 0;
const query = request.nextUrl.searchParams.get("q") || null; const query = decodeURI(request.nextUrl.searchParams.get("q")) || null;
const token = request.nextUrl.searchParams.get("token") || null; const token = request.nextUrl.searchParams.get("token") || null;
const where = request.nextUrl.searchParams.get("where") || "releases" const where = request.nextUrl.searchParams.get("where") || "releases"

24
app/pages/Search.tsx
View file

@ -28,6 +28,7 @@ export function SearchPage() {
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [query, setQuery] = useState(searchParams.get("q") || null); const [query, setQuery] = useState(searchParams.get("q") || null);
const [searchVal, setSearchVal] = useState(searchParams.get("q") || "")
const where = searchParams.get("where") || null; const where = searchParams.get("where") || null;
const searchBy = searchParams.get("searchBy") || null; const searchBy = searchParams.get("searchBy") || null;
const list = searchParams.get("list") || null; const list = searchParams.get("list") || null;
@ -88,7 +89,22 @@ export function SearchPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [scrollPosition]); }, [scrollPosition]);
if (error) return <div>failed to load</div>; function _executeSearch(query) {
const Params = new URLSearchParams(window.location.search);
Params.set("q", query);
const url = new URL(`/search?${Params.toString()}`, window.location.origin);
setContent(null);
setQuery(searchVal.trim());
router.push(url.toString());
}
useEffect(() => {
if (searchVal.length % 4 == 1) {
_executeSearch(searchVal)
}
}, [searchVal]);
if (error) return <div>failed to load: {error.message}</div>;
return ( return (
<> <>
@ -97,9 +113,7 @@ export function SearchPage() {
className="max-w-full mx-auto" className="max-w-full mx-auto"
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault(); e.preventDefault();
setContent(null); _executeSearch(searchVal)
setQuery(e.target[0].value.trim());
router.push(`/search?q=${e.target[0].value.trim()}`);
}} }}
> >
<label <label
@ -132,6 +146,8 @@ export function SearchPage() {
className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Поиск аниме..." placeholder="Поиск аниме..."
required required
value={searchVal}
onChange={(e) => setSearchVal(e.target.value)}
defaultValue={query || ""} defaultValue={query || ""}
/> />
<button <button