fix display homepage

redux_test_david
Lucas Delanier 2 years ago
parent 39ff985d99
commit f243584049

@ -61,7 +61,7 @@ function BottomTabNavigator() {
return (
<BottomTab.Navigator
initialRouteName="WatchLater"
initialRouteName="Home"
screenOptions={{
tabBarActiveTintColor: "purple",

@ -73,10 +73,16 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
});
const dispatch = useDispatch();
useEffect(() => {
const loadTrendingID = async () => {
// @ts-ignore
await dispatch(getTrendingID());
};
console.log("test1:", trendingMovies);
loadTrendingID();
}, [dispatch]);
type ItemProps = {
movie : Movie
@ -88,80 +94,83 @@ export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>)
dispatch(removeMovieTrending(props));
}
return(
<SafeAreaView style={styles.background}>
<ImageBackground blurRadius={20}
style={{
position: 'absolute',
width: "120%",
height: "120%",
justifyContent: "center",
alignItems: "center",
opacity: 0.28
}}
source={{
uri: trendingMovies[0].poster_path,
}}
></ImageBackground>
<View style={styles.image}>
<Image
style={styles.filmCard}
source={{
uri: trendingMovies[0].poster_path,
}}
/>
</View>
<View style={{height:35, marginTop: 10, marginBottom: 15}}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={true}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
</ScrollView>
</View>
<View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}>
<View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
<BadgeFilm name={"Science-fiction"}></BadgeFilm>
<BadgeFilm name={"Science-fiction"}></BadgeFilm>
<BadgeFilm name={"9:11"}></BadgeFilm>
</View>
<View>
<Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>{trendingMovies[0].original_title}</Text>
</View>
<Text style={{color: "grey", fontSize: 20, fontWeight: "bold"}}>{trendingMovies[0].release_date}</Text>
</View>
<View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: '15%', width:'100%'}}>
<TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
<Image
source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch", height:'65%', aspectRatio: 1,}}
/>
</TouchableOpacity>
<TouchableOpacity>
<Image
source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'85%',aspectRatio: 1,}}
/>
</TouchableOpacity>
<TouchableOpacity>
return(
<>
{trendingMovies.length !== 0 && (
<SafeAreaView style={styles.background}>
<ImageBackground blurRadius={20}
style={{
position: 'absolute',
width: "120%",
height: "120%",
justifyContent: "center",
alignItems: "center",
opacity: 0.28
}}
source={{
uri: trendingMovies[0].poster_path,
}}
></ImageBackground>
<View style={styles.image}>
<Image
source={require('../assets/images/Favorite.png')} style={{ resizeMode:"stretch", height:'65%', aspectRatio: 1,}}
style={styles.filmCard}
source={{
uri: trendingMovies[0].poster_path,
}}
/>
</TouchableOpacity>
</View>
</SafeAreaView>);
</View>
<View style={{height:35, marginTop: 10, marginBottom: 15}}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={true}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
</ScrollView>
</View>
<View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}>
<View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
<BadgeFilm name={"Science-fiction"}></BadgeFilm>
<BadgeFilm name={"Science-fiction"}></BadgeFilm>
<BadgeFilm name={"9:11"}></BadgeFilm>
</View>
<View>
<Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>{trendingMovies[0].original_title}</Text>
</View>
<Text style={{color: "grey", fontSize: 20, fontWeight: "bold"}}>{trendingMovies[0].release_date}</Text>
</View>
<View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: '15%', width:'100%'}}>
<TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
<Image
source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch", height:'65%', aspectRatio: 1,}}
/>
</TouchableOpacity>
<TouchableOpacity>
<Image
source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'85%',aspectRatio: 1,}}
/>
</TouchableOpacity>
<TouchableOpacity>
<Image
source={require('../assets/images/Favorite.png')} style={{ resizeMode:"stretch", height:'65%', aspectRatio: 1,}}
/>
</TouchableOpacity>
</View>
</SafeAreaView>)}
</>
)
}
type BadgeGenreProps = {
name : String
@ -170,7 +179,7 @@ type BadgeGenreProps = {
}
export function BadgeGenre(props: BadgeGenreProps) {
if(props.isSelected==false){
if(props.isSelected===false){
return (
<View style={{paddingHorizontal: 20, marginHorizontal: 5,height: 35, backgroundColor: '#2E2E2E', borderRadius: 20, justifyContent: "center"}} >
<Text style={{color: "white"}}>{props.name}</Text>

@ -42,15 +42,7 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
const [isLoading, setLoading] = useState(true);
// @ts-ignore
const trendingMovies = useSelector(state => state.appReducer.watchLaterMovies);
const dispatch = useDispatch();
useEffect(() => {
const loadTrendingID = async () => {
// @ts-ignore
await dispatch(getTrendingID());
};
loadTrendingID();
console.log("test2:", trendingMovies);
}, [dispatch]);
return (
<SafeAreaView style={styles.container}>
<View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20, marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >

Loading…
Cancel
Save