movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 14:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: show home screen until searchresults are loaded

Browse Source
This commit is contained in:
Adrian Castro
2024-03-05 18:22:45 +01:00
parent e3255443e0
commit c61522c222
3 changed files with 100 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
apps/expo/src/app/(tabs)/index.tsx
View File

@@ -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 (
<View style={{ flex: 1 }}>
<ScrollView
@@ -77,25 +42,8 @@ export default function HomeScreen() {
</View>
}
>
<Text className="mb-2 mt-4 text-xl font-semibold">Bookmarks</Text>
<View className="flex w-full flex-1 flex-row flex-wrap justify-start">
{bookmarks?.map((item, index) => (
<View key={index} className="basis-1/2 px-3 pb-3">
<Item data={item} />
</View>
))}
</View>
<Text className="mb-2 mt-4 text-xl font-semibold">
Continue Watching
</Text>
<View className="flex w-full flex-1 flex-row flex-wrap justify-start">
{watching?.map((item, index) => (
<View key={index} className="basis-1/2 px-3 pb-3">
<Item data={item} />
</View>
))}
</View>
<ItemListSection title="Bookmarks" items={bookmarks} />
<ItemListSection title="Continue Watching" items={watching} />
</ScreenLayout>
</ScrollView>
</View>

37
apps/expo/src/app/(tabs)/search/_layout.tsx
View File

@@ -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() {
</View>
}
>
<View className="flex w-full flex-1 flex-row flex-wrap justify-start">
{data?.map((item, index) => (
<View key={index} className="basis-1/2 px-3 pb-3">
<Item data={item} />
</View>
))}
</View>
{searchResultsLoaded ? (
<View className="flex w-full flex-1 flex-row flex-wrap justify-start">
{data?.map((item, index) => (
<View key={index} className="basis-1/2 px-3 pb-3">
<Item data={item} />
</View>
))}
</View>
) : (
<View style={{ flex: 1 }}>
<ItemListSection title="Bookmarks" items={bookmarks} />
<ItemListSection title="Continue Watching" items={watching} />
</View>
)}
</ScreenLayout>
</ScrollView>
<Animated.View

64
apps/expo/src/components/item/ItemListSection.tsx Normal file
View File

@@ -0,0 +1,64 @@
import React from "react";
import { Text, View } from "react-native";
import type { ItemData } from "~/components/item/item";
import Item from "~/components/item/item";
export 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,
},
];
export 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,
},
];
export const ItemListSection = ({
title,
items,
}: {
title: string;
items: ItemData[];
}) => {
return (
<View>
<Text className="mb-2 mt-4 text-xl font-semibold">{title}</Text>
<View className="flex w-full flex-1 flex-row flex-wrap justify-start">
{items.map((item, index) => (
<View key={index} className="basis-1/2 px-3 pb-3">
<Item data={item} />
</View>
))}
</View>
</View>
);
};