diff options
| -rw-r--r-- | packages/mobile/app.json | 2 | ||||
| -rw-r--r-- | packages/mobile/app/dashboard/(tabs)/_layout.tsx | 9 | ||||
| -rw-r--r-- | packages/mobile/app/dashboard/(tabs)/search.tsx | 33 | ||||
| -rw-r--r-- | packages/mobile/package.json | 3 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 12 |
5 files changed, 56 insertions, 3 deletions
diff --git a/packages/mobile/app.json b/packages/mobile/app.json index a6785eea..56773b57 100644 --- a/packages/mobile/app.json +++ b/packages/mobile/app.json @@ -3,7 +3,7 @@ "name": "Hoarder App", "slug": "hoarder", "scheme": "hoarder", - "version": "1.0.0", + "version": "1.1.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", diff --git a/packages/mobile/app/dashboard/(tabs)/_layout.tsx b/packages/mobile/app/dashboard/(tabs)/_layout.tsx index 74557eda..5b2d810a 100644 --- a/packages/mobile/app/dashboard/(tabs)/_layout.tsx +++ b/packages/mobile/app/dashboard/(tabs)/_layout.tsx @@ -1,5 +1,5 @@ import { Tabs } from "expo-router"; -import { ClipboardList, Home, Settings } from "lucide-react-native"; +import { ClipboardList, Home, Search, Settings } from "lucide-react-native"; import React from "react"; export default function TabLayout() { @@ -13,6 +13,13 @@ export default function TabLayout() { }} /> <Tabs.Screen + name="search" + options={{ + title: "Search", + tabBarIcon: ({ color }) => <Search color={color} />, + }} + /> + <Tabs.Screen name="lists" options={{ title: "Lists", diff --git a/packages/mobile/app/dashboard/(tabs)/search.tsx b/packages/mobile/app/dashboard/(tabs)/search.tsx new file mode 100644 index 00000000..0cc16716 --- /dev/null +++ b/packages/mobile/app/dashboard/(tabs)/search.tsx @@ -0,0 +1,33 @@ +import { keepPreviousData } from "@tanstack/react-query"; +import { useState } from "react"; +import { View } from "react-native"; +import { useDebounce } from "use-debounce"; + +import BookmarkList from "@/components/bookmarks/BookmarkList"; +import { Input } from "@/components/ui/Input"; +import { api } from "@/lib/trpc"; + +export default function Search() { + const [search, setSearch] = useState(""); + + const [query] = useDebounce(search, 200); + + const { data } = api.bookmarks.searchBookmarks.useQuery( + { text: query }, + { placeholderData: keepPreviousData }, + ); + + return ( + <View className="flex gap-2 p-2"> + <Input + placeholder="Search" + className="bg-white" + value={search} + onChangeText={setSearch} + autoFocus + autoCapitalize="none" + /> + {data && <BookmarkList ids={data.bookmarks.map((b) => b.id)} />} + </View> + ); +} diff --git a/packages/mobile/package.json b/packages/mobile/package.json index 7e5362dc..252f98e0 100644 --- a/packages/mobile/package.json +++ b/packages/mobile/package.json @@ -33,7 +33,8 @@ "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", "react-native-svg": "^15.1.0", - "tailwind-merge": "^2.2.1" + "tailwind-merge": "^2.2.1", + "use-debounce": "^10.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index de59f054..99194c39 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -265,6 +265,9 @@ importers: tailwind-merge: specifier: ^2.2.1 version: 2.2.1 + use-debounce: + specifier: ^10.0.0 + version: 10.0.0(react@18.2.0) devDependencies: '@babel/core': specifier: ^7.20.0 @@ -16532,6 +16535,15 @@ packages: react: 18.2.0 dev: false + /use-debounce@10.0.0(react@18.2.0): + resolution: {integrity: sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==} + engines: {node: '>= 16.0.0'} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.2.0 + dev: false + /use-latest-callback@0.1.9(react@18.2.0): resolution: {integrity: sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==} peerDependencies: |