From 284ead8f7537ae7b998e32190c5845ac3b8de72f Mon Sep 17 00:00:00 2001 From: Adrian Castro <22133246+castdrian@users.noreply.github.com> Date: Sat, 9 Mar 2024 19:01:26 +0100 Subject: [PATCH 1/2] refactor: unmerge home and search tabs --- apps/expo/src/app/(tabs)/_layout.tsx | 4 +- apps/expo/src/app/(tabs)/index.tsx | 36 +++++- apps/expo/src/app/(tabs)/search.tsx | 174 ++++++++++++++++++++++++++- 3 files changed, 206 insertions(+), 8 deletions(-) diff --git a/apps/expo/src/app/(tabs)/_layout.tsx b/apps/expo/src/app/(tabs)/_layout.tsx index 9ec283b..eaf5ba3 100644 --- a/apps/expo/src/app/(tabs)/_layout.tsx +++ b/apps/expo/src/app/(tabs)/_layout.tsx @@ -25,7 +25,7 @@ export default function TabLayout() { tabPress: () => { void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); switch (route.name) { - case "search": + case "index": focusSearchInputRef.current(); break; } @@ -79,7 +79,7 @@ export default function TabLayout() { ( ; + return ( + + + Home + + } + > + 0 || watching.length > 0 ? true : false + } + > + + + + + + ); } diff --git a/apps/expo/src/app/(tabs)/search.tsx b/apps/expo/src/app/(tabs)/search.tsx index 237088a..9257e1a 100644 --- a/apps/expo/src/app/(tabs)/search.tsx +++ b/apps/expo/src/app/(tabs)/search.tsx @@ -1,7 +1,173 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import { Keyboard, ScrollView, View } from "react-native"; +import Animated, { + Easing, + useAnimatedStyle, + useSharedValue, + withTiming, +} from "react-native-reanimated"; +import { useQuery } from "@tanstack/react-query"; -import HomeScreenContent from "~/components/HomeScreenContent"; +import { getMediaPoster, searchTitle } from "@movie-web/tmdb"; -export default function SearchScreen() { - return ; +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 { SearchBar } from "~/components/ui/Searchbar"; +import { Text } from "~/components/ui/Text"; + +export default function HomeScreen() { + const [query, setQuery] = useState(""); + const translateY = useSharedValue(0); + const fadeAnim = useSharedValue(1); + const searchResultsOpacity = useSharedValue(0); + const searchResultsScale = useSharedValue(0.95); + const [searchResultsLoaded, setSearchResultsLoaded] = useState(false); + + const { data } = useQuery({ + queryKey: ["searchResults", query], + queryFn: () => fetchSearchResults(query), + }); + + useEffect(() => { + if (data && data.length > 0 && query) { + searchResultsOpacity.value = withTiming(1, { duration: 500 }); + searchResultsScale.value = withTiming(1, { duration: 500 }); + setSearchResultsLoaded(true); + } else if (!query) { + searchResultsOpacity.value = withTiming(0, { duration: 500 }); + searchResultsScale.value = withTiming(0.95, { duration: 500 }); + setSearchResultsLoaded(false); + } + }, [data, query, searchResultsOpacity, searchResultsScale]); + + useEffect(() => { + const keyboardWillShowListener = Keyboard.addListener( + "keyboardWillShow", + (e) => { + translateY.value = withTiming( + -(e.endCoordinates.height - 110), // determines the height of the Searchbar above keyboard, use Platform.select to adjust value if needed + { + duration: e.duration ?? 250, // duration always returns 0 on Android, adjust value if needed + easing: Easing.out(Easing.ease), + }, + ); + }, + ); + + const keyboardWillHideListener = Keyboard.addListener( + "keyboardWillHide", + () => { + translateY.value = withTiming(0, { + duration: 250, + easing: Easing.out(Easing.ease), + }); + }, + ); + + return () => { + keyboardWillShowListener.remove(); + keyboardWillHideListener.remove(); + }; + }, [translateY]); + + const animatedStyle = useAnimatedStyle(() => { + return { + transform: [{ translateY: translateY.value }], + opacity: fadeAnim.value, + }; + }); + + const searchResultsStyle = useAnimatedStyle(() => { + return { + opacity: searchResultsOpacity.value, + transform: [{ scale: searchResultsScale.value }], + }; + }); + + const handleScrollBegin = () => { + fadeAnim.value = withTiming(0, { + duration: 100, + }); + }; + + const handleScrollEnd = () => { + fadeAnim.value = withTiming(1, { + duration: 100, + }); + }; + + return ( + + + + Search + + } + > + {searchResultsLoaded ? ( + + + {data?.map((item, index) => ( + + + + ))} + + + ) : ( + 0 || watching.length > 0 ? true : false + } + > + + + + )} + + + + + + + ); +} + +async function fetchSearchResults(query: string): Promise { + const results = await searchTitle(query); + + return results.map((result) => ({ + id: result.id.toString(), + title: result.media_type === "tv" ? result.name : result.title, + posterUrl: getMediaPoster(result.poster_path), + year: new Date( + result.media_type === "tv" ? result.first_air_date : result.release_date, + ).getFullYear(), + type: result.media_type, + })); } From 69bcb978892f4811f890b66bc448f3d183c820e3 Mon Sep 17 00:00:00 2001 From: Adrian Castro <22133246+castdrian@users.noreply.github.com> Date: Sat, 9 Mar 2024 19:09:26 +0100 Subject: [PATCH 2/2] fix: oops --- apps/expo/src/app/(tabs)/_layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/expo/src/app/(tabs)/_layout.tsx b/apps/expo/src/app/(tabs)/_layout.tsx index eaf5ba3..35d7593 100644 --- a/apps/expo/src/app/(tabs)/_layout.tsx +++ b/apps/expo/src/app/(tabs)/_layout.tsx @@ -25,7 +25,7 @@ export default function TabLayout() { tabPress: () => { void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); switch (route.name) { - case "index": + case "search": focusSearchInputRef.current(); break; }