diff --git a/apps/expo/src/app/(tabs)/index.tsx b/apps/expo/src/app/(tabs)/index.tsx index d694225..fd1216f 100644 --- a/apps/expo/src/app/(tabs)/index.tsx +++ b/apps/expo/src/app/(tabs)/index.tsx @@ -1,8 +1,11 @@ import { ScrollView, View } from "react-native"; import { useSharedValue, withTiming } from "react-native-reanimated"; -import type { ItemData } from "~/components/item/item"; -import Item from "~/components/item/item"; +import { + bookmarks, + ItemListSection, + watching, +} from "~/components/item/ItemListSection"; import ScreenLayout from "~/components/layout/ScreenLayout"; import { Text } from "~/components/ui/Text"; @@ -21,44 +24,6 @@ export default function HomeScreen() { }); }; - const bookmarks: ItemData[] = [ - { - id: "219651", - title: "Welcome to Samdal-ri", - posterUrl: - "https://www.themoviedb.org/t/p/w185/98IvA2i0PsTY8CThoHByCKOEAjz.jpg", - type: "tv", - year: 2023, - }, - { - id: "194797", - title: "Doona!", - posterUrl: - "https://www.themoviedb.org/t/p/w185/bQhiOkU3lCu5pwCqPdNVG5GBLlj.jpg", - type: "tv", - year: 2023, - }, - ]; - - const watching: ItemData[] = [ - { - id: "113268", - title: "The Uncanny Counter", - posterUrl: - "https://www.themoviedb.org/t/p/w185/tKU34QiJUfVipcuhAs5S3TdCpAF.jpg", - type: "tv", - year: 2020, - }, - { - id: "203508", - title: "Earth Arcade", - posterUrl: - "https://www.themoviedb.org/t/p/w185/vBJ0uF0WlFcjr9obZZqE6GSsKoL.jpg", - type: "tv", - year: 2022, - }, - ]; - return ( } > - Bookmarks - - {bookmarks?.map((item, index) => ( - - - - ))} - - - - Continue Watching - - - {watching?.map((item, index) => ( - - - - ))} - + + diff --git a/apps/expo/src/app/(tabs)/search/_layout.tsx b/apps/expo/src/app/(tabs)/search/_layout.tsx index 2e2465a..663f463 100644 --- a/apps/expo/src/app/(tabs)/search/_layout.tsx +++ b/apps/expo/src/app/(tabs)/search/_layout.tsx @@ -12,6 +12,11 @@ import { getMediaPoster, searchTitle } from "@movie-web/tmdb"; import type { ItemData } from "~/components/item/item"; import Item from "~/components/item/item"; +import { + bookmarks, + ItemListSection, + watching, +} from "~/components/item/ItemListSection"; import ScreenLayout from "~/components/layout/ScreenLayout"; import { Text } from "~/components/ui/Text"; import Searchbar from "./Searchbar"; @@ -20,12 +25,21 @@ export default function SearchScreen() { const [query, setQuery] = useState(""); const translateY = useSharedValue(0); const fadeAnim = useSharedValue(1); + const [searchResultsLoaded, setSearchResultsLoaded] = useState(false); - const { data } = useQuery({ + const { data, isSuccess } = useQuery({ queryKey: ["searchResults", query], queryFn: () => fetchSearchResults(query), }); + useEffect(() => { + if (isSuccess && data && data.length > 0) { + setSearchResultsLoaded(true); + } else { + setSearchResultsLoaded(false); + } + }, [data, isSuccess]); + useEffect(() => { const keyboardWillShowListener = Keyboard.addListener( "keyboardWillShow", @@ -91,13 +105,20 @@ export default function SearchScreen() { } > - - {data?.map((item, index) => ( - - - - ))} - + {searchResultsLoaded ? ( + + {data?.map((item, index) => ( + + + + ))} + + ) : ( + + + + + )} { + return ( + + {title} + + {items.map((item, index) => ( + + + + ))} + + + ); +};