apps/mobile/app/dashboard/(tabs)/search.tsx


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

import { useState } from "react";
import { View } from "react-native";
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 PageTitle from "@/components/ui/PageTitle";
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 } =
    api.bookmarks.searchBookmarks.useQuery(
      { text: query },
      { placeholderData: keepPreviousData },
    );

  if (error) {
    return <FullPageError error={error.message} onRetry={() => refetch()} />;
  }

  if (!data) {
    return <FullPageSpinner />;
  }

  return (
    <CustomSafeAreaView>
      <BookmarkList
        bookmarks={data.bookmarks}
        header={
          <View>
            <PageTitle title="Search" />
            <Input
              placeholder="Search"
              className="mx-1"
              value={search}
              onChangeText={setSearch}
              autoFocus
              autoCapitalize="none"
            />
          </View>
        }
        onRefresh={onRefresh}
        isRefreshing={isPending}
      />
    </CustomSafeAreaView>
  );
}