page.tsx•1.36 kB
"use client";
import { Suspense, useEffect } from "react";
import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
import BookmarksGridSkeleton from "@/components/dashboard/bookmarks/BookmarksGridSkeleton";
import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
import { useInSearchPageStore } from "@/lib/store/useInSearchPageStore";
import { useSortOrderStore } from "@/lib/store/useSortOrderStore";
function SearchComp() {
const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
useBookmarkSearch();
const { setInSearchPage } = useInSearchPageStore();
const { setSortOrder } = useSortOrderStore();
useEffect(() => {
// also see related cleanup code in SortOrderToggle.tsx
setSortOrder("relevance");
}, []);
useEffect(() => {
setInSearchPage(true);
return () => setInSearchPage(false);
}, [setInSearchPage]);
return (
<div className="flex flex-col gap-3">
{data ? (
<BookmarksGrid
hasNextPage={hasNextPage}
fetchNextPage={fetchNextPage}
isFetchingNextPage={isFetchingNextPage}
bookmarks={data.pages.flatMap((b) => b.bookmarks)}
/>
) : (
<BookmarksGridSkeleton />
)}
</div>
);
}
export default function SearchPage() {
return (
<Suspense>
<SearchComp />
</Suspense>
);
}