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) => (
+
+
+
+ ))}
+
+
+ );
+};