add review and recommendations to info page

model/MinimalMovie.tsx

@@ -0,0 +1,16 @@
+class MinimalMovie {
+    public original_title: string
+
+    public poster_path: string
+
+
+    constructor(original_title: string, poster_path: string) {
+        this.original_title = original_title;
+        this.poster_path = 'https://image.tmdb.org/t/p/w780' + poster_path;
+
+    }
+
+
+}
+
+export default MinimalMovie;

model/review.tsx

@@ -0,0 +1,28 @@
+class Review {
+    public message: string
+
+    public pseudo: string
+
+    public profil_path: string
+
+    public date: string
+
+
+    constructor(message: string, profil_path: string, date: string, pseudo: string) {
+        this.message = message;
+        if (profil_path === null) {
+            console.log("nulllllllllll")
+            this.profil_path = "https://thumbs.dreamstime.com/b/profil-vectoriel-avatar-par-d%C3%A9faut-utilisateur-179376714.jpg";
+        } else {
+            this.profil_path = 'https://image.tmdb.org/t/p/w500' + profil_path;
+        }
+
+        this.date = date.substring(0, 10);
+        this.pseudo = pseudo;
+
+    }
+
+
+}
+
+export default Review;

screens/InfoScreen.tsx

@@ -9,7 +9,7 @@ import {
     Image,
     ImageBackground,
     SafeAreaView,
-    ActivityIndicator, FlatList
+    ActivityIndicator, FlatList, TouchableHighlight
 } from 'react-native';
 import {RootStackScreenProps} from "../types";
 import {useSafeAreaInsets} from "react-native-safe-area-context";
@@ -23,6 +23,9 @@ import config from "../constants/config";
 import YoutubeIframe from "react-native-youtube-iframe";
 import Icon from "react-native-ionicons";
 import Ionicons from "@expo/vector-icons/Ionicons";
+import MinimalMovie from "../model/MinimalMovie";
+import {ListWidget} from "./WatchLaterScreen";
+import Review from "../model/review";
 
 export default function InfoScreen({navigation, route}: RootStackScreenProps<'Info'>) {
     const item: Movie = route.params.item
@@ -36,6 +39,8 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
         },
     });
     const [trailerPath, setTrailerPath] = useState("");
+    const [similarMovies, setsimilarMovies] = useState<MinimalMovie[]>([]);
+    const [review, setReview] = useState<Review[]>([]);
     const getTriller = async () => {
         const trailerResponse = (await fetch(config.base_url + "movie/" + item.id + "/videos?api_key=" + config.api_key + "&language=fr-FR"));
 
@@ -50,10 +55,33 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
         setTrailerPath(trailer_key);
     }
 
-    useEffect(() => {
+    const getSimilarMovies = async () => {
+        const SimilarMoviesResponse = (await fetch(config.base_url + "movie/" + item.id + "/recommendations?api_key=" + config.api_key + "&language=fr-FR"));
+
+        const SimilarMoviesJson = await SimilarMoviesResponse.json();
+        const SimilarMoviesList = SimilarMoviesJson.results.slice(0, 10).map((elt) => {
+            return new MinimalMovie(elt["original_title"], elt["poster_path"])
+        });
+        console.log("similar", SimilarMoviesList);
+        setsimilarMovies(SimilarMoviesList);
+    }
+    const getReview = async () => {
+        const ReviewResponse = (await fetch(config.base_url + "movie/" + item.id + "/reviews?api_key=" + config.api_key + "&language=us-EN&page=1"));
+
+        const ReviewJson = await ReviewResponse.json();
+        const ReviewList = ReviewJson.results.map((elt) => {
+
+            return new Review(elt["content"], elt["author_details"].avatar_path, elt["created_at"], elt["author"])
+        });
+        console.log("review", ReviewList);
+        setReview(ReviewList);
+    }
 
+    useEffect(() => {
 
+        getReview();
         getTriller();
+        getSimilarMovies();
     }, []);
 
     function formatTime(time: number) {
@@ -94,8 +122,8 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
                 <TouchableOpacity onPress={() => navigation.goBack()} style={{zIndex: 100}}>
                     <Ionicons name="ios-arrow-back" size={30} color="white" style={{position: "absolute", top: 10, left: 10}}/>
                 </TouchableOpacity>
-                <ScrollView style={{paddingHorizontal: 35, height: "100%"}}>
-                    <View>
+                <ScrollView style={{height: "100%"}} showsVerticalScrollIndicator={false}>
+                    <View style={{paddingHorizontal: 35}}>
                         <Text style={{color: "white", fontSize: 43, fontWeight: "bold", paddingBottom: 10, paddingTop: "45%"}} numberOfLines={2}>{item.original_title}</Text>
                         <View style={{flexDirection: "row", width: "100%", justifyContent: "flex-start"}}>
                             <InfoBadge texte={`${item.genres[0]} ${item.genres[1] !== undefined ? ", " + item.genres[1] : ""}`}></InfoBadge>
@@ -123,6 +151,56 @@ export default function InfoScreen({navigation, route}: RootStackScreenProps<'In
 
                     </View>
 
+
+                    {similarMovies.length !== 0 && (
+                        <>
+                            <Text style={{color: "white", paddingTop: 30, paddingLeft: 35, fontSize: 17, fontWeight: "800"}}>Recommandations</Text>
+                            <FlatList
+                                showsHorizontalScrollIndicator={false}
+                                style={{paddingTop: 20}}
+                                data={similarMovies}
+                                horizontal={true}
+                                keyExtractor={item => item.original_title}
+                                renderItem={({item}) =>
+                                    <View style={{width: 90, marginHorizontal: 7}}>
+                                        <Image source={{uri: item.poster_path}} style={{height: 130, width: 90, borderRadius: 8}}></Image>
+                                        <Text numberOfLines={2} style={{color: "white", paddingTop: 5, fontWeight: "200"}}>{item.original_title}</Text>
+                                    </View>
+                                }
+                            /></>
+
+
+                    )}
+                    {review.length !== 0 && (
+                        <>
+                            <Text style={{color: "white", paddingTop: 30, paddingLeft: 35, fontSize: 17, fontWeight: "800"}}>Commentaires</Text>
+                            <FlatList
+                                showsHorizontalScrollIndicator={false}
+                                style={{paddingTop: 10}}
+                                data={review}
+                                horizontal={true}
+                                keyExtractor={item => item.profil_path}
+                                renderItem={({item}) =>
+                                    <View style={{marginHorizontal: 7, width: 300, padding: 20, backgroundColor: "#09090F", marginVertical: 10, borderRadius: 14, borderWidth: 0.8, borderColor: "rgba(223,223,223,0.14)"}}>
+
+                                        <View style={{flexDirection: "row", paddingBottom: 20}}>
+                                            <Image source={{uri: item.profil_path}} style={{height: 50, width: 50, borderRadius: 100}}></Image>
+                                            <View style={{paddingLeft: 10, flexDirection: "row", justifyContent: "space-between", width: "80%", alignItems: "center"}}>
+                                                <Text numberOfLines={1} style={{color: "white", paddingTop: 5, fontWeight: "700", fontSize: 16}}>{item.pseudo}</Text>
+                                                <Text style={{color: "grey", paddingTop: 5, fontWeight: "500", fontSize: 14}}>{item.date}</Text>
+                                            </View>
+                                        </View>
+
+
+                                        <Text numberOfLines={15} style={{color: "#B3B3B3", paddingTop: 5, fontWeight: "400"}}>{item.message}</Text>
+                                    </View>
+                                }
+                            /></>
+
+
+                    )}
+
+
                 </ScrollView>
             </SafeAreaView>
         </View>