1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
import { useState } from "react";
import { Pressable, Text, View } from "react-native";
import { router } from "expo-router";
import BookmarkList from "@/components/bookmarks/BookmarkList";
import FullPageError from "@/components/FullPageError";
import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
import FullPageSpinner from "@/components/ui/FullPageSpinner";
import { Input } from "@/components/ui/Input";
import { api } from "@/lib/trpc";
import { keepPreviousData } from "@tanstack/react-query";
import { useDebounce } from "use-debounce";
export default function Search() {
const [search, setSearch] = useState("");
const [query] = useDebounce(search, 10);
const onRefresh = api.useUtils().bookmarks.searchBookmarks.invalidate;
const { data, error, refetch, isPending, fetchNextPage, isFetchingNextPage } =
api.bookmarks.searchBookmarks.useInfiniteQuery(
{ text: query },
{
placeholderData: keepPreviousData,
gcTime: 0,
initialCursor: null,
getNextPageParam: (lastPage) => lastPage.nextCursor,
},
);
if (error) {
return <FullPageError error={error.message} onRetry={() => refetch()} />;
}
return (
<CustomSafeAreaView>
<View className="flex flex-row items-center gap-3 p-3">
<Input
placeholder="Search"
className="flex-1"
value={search}
onChangeText={setSearch}
autoFocus
autoCapitalize="none"
/>
<Pressable onPress={() => router.back()}>
<Text className="text-foreground">Cancel</Text>
</Pressable>
</View>
{!data && <FullPageSpinner />}
{data && (
<BookmarkList
bookmarks={data.pages.flatMap((p) => p.bookmarks)}
fetchNextPage={fetchNextPage}
isFetchingNextPage={isFetchingNextPage}
onRefresh={onRefresh}
isRefreshing={isPending}
/>
)}
</CustomSafeAreaView>
);
}
|
