comprend rien du tout

api/tmdb.tsx

@@ -1,15 +1,75 @@
 import axios from "axios";
+import {Cast, People} from "../components/Movie";
+import Movie from "../components/Movie";
+import Config from "../constants/config";
+
+interface idMovie {
+    id: string
+
+}
+
 
 class apiTMBD {
-    api_key: string = "a133422b5b1f22428e8074470d32186";
-    base_url: string = "https://api.themoviedb.org/3/";
 
-    apiTMDB() {
-    };
 
-    getPopularMovie() {
+    async getTrendingMovie() {
+        const movielist: string[] = [];
+        try {
+            axios.get(Config.base_url + "trending/all/day?api_key=" + Config.api_key).then(async (response) => {
+                await response.data.results.forEach(async function (id: idMovie) {
+                    movielist.push(id.id);
+                    console.log(id.id);
+                    return movielist;
+
+                })
+            })
+        } catch (err) {
+            return movielist;
+        }
+        return [];
+
+
+    }
+
+    async getInfoMovie(id: string) {
+        try {
+            axios.get<Movie>(Config.base_url + "movie/" + id + "?api_key=" + Config.api_key).then(async (response) => {
+                let director = await this.getDirector(response.data.id);
+                console.log("----------");
+                console.log(director);
+                console.log("----------");
+            })
+
+
+            /*let newmovie = new Movie(movie.id, movie.original_title, movie.poster_path, movie.runtime, movie.vote_average, director)
+            console.log(newmovie);*/
+            return null;
+        } catch (err) {
+            return null;
+        }
+    }
+
+
+    async getDirector(id: string): Promise<string | undefined> {
+        try {
+            const {data: cast} = await axios.get(Config.base_url + "movie/" + id + "/credits?api_key=" + Config.api_key);
+            cast.crew.forEach((people: People) => {
+                if (people.job == "Director") {
+                    console.log(people.name);
+
+                    return people.name;
+                }
+
+            })
+        } catch (err) {
+            return undefined;
+        }
+
 
     }
 
 
 }
+
+
+export default apiTMBD;

components/ListWidget.tsx

@@ -59,7 +59,7 @@ export function ListWidget(props: ListWidgetProps) {
                     fontWeight: "bold",
                     fontSize: 25,
                     paddingRight: 50
-                }}>{props.director}</Text>
+                }}>{props.name}</Text>
                 <Text style={{color: "grey", fontWeight: "bold", fontSize: 17}}>{formatTime(props.runtime)}</Text>
                 <View style={{marginVertical: 10}}>
                     <BadgeFilm name={"Science-Ficton"}/>

components/Movie.tsx

@@ -0,0 +1,35 @@
+import apiTMBD from "../api/tmdb";
+
+class Movie {
+    id: string
+    original_title: string
+    poster_path: string
+    runtime: number
+    vote_average: number
+
+    director: string | undefined
+
+    constructor(id: string, original_title: string, poster_path: string, runtime: number, vote_average: number, director: string | undefined) {
+        this.id = id;
+        this.original_title = original_title;
+        this.poster_path = poster_path;
+        this.runtime = runtime;
+        this.vote_average = vote_average;
+        this.director = director;
+    }
+
+
+}
+
+export interface Cast {
+    cast: string
+
+}
+
+export interface People {
+    name: string
+    job: string
+
+}
+
+export default Movie;

components/MovieList.tsx

@@ -1,8 +1,9 @@
 import {useEffect, useState} from "react";
 import {FlatList, View} from "react-native";
 import {ListWidget} from "./ListWidget";
-import tmdb from "../api/tmdb"
 import axios from "axios";
+import apiTMBD from "../api/tmdb";
+
 
 interface idMovie {
     id: string
@@ -10,17 +11,6 @@ interface idMovie {
 }
 
 
-interface Cast {
-    cast: string
-
-}
-
-interface People {
-    name: string
-    job: string
-
-}
-
 interface Movie {
     id: string
     original_title: string

constants/config.ts

@@ -0,0 +1,4 @@
+export default {
+    api_key: "a133422b5b1f22428e8074470d321865",
+    base_url: "https://api.themoviedb.org/3/"
+}

navigation/index.tsx

@@ -3,15 +3,15 @@
  * https://reactnavigation.org/docs/getting-started
  *
  */
-import { FontAwesome } from '@expo/vector-icons';
+import {FontAwesome} from '@expo/vector-icons';
-import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
+import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
-import { faClock, faFilm, faHeart} from "@fortawesome/free-solid-svg-icons";
+import {faClock, faFilm, faHeart} from "@fortawesome/free-solid-svg-icons";
 import Ionicons from '@expo/vector-icons/Ionicons';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
+import {NavigationContainer, DefaultTheme, DarkTheme} from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import * as React from 'react';
-import { ColorSchemeName, Pressable } from 'react-native';
+import {ColorSchemeName, Pressable} from 'react-native';
 
 import Colors from '../constants/Colors';
 import useColorScheme from '../hooks/useColorScheme';
@@ -19,15 +19,15 @@ import NotFoundScreen from '../screens/NotFoundScreen';
 import WatchLaterScreen from '../screens/WatchLaterScreen';
 import FavoriteScreen from '../screens/FavoriteScreen';
 import HomeScreen from '../screens/HomeScreen';
-import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
+import {RootStackParamList, RootTabParamList, RootTabScreenProps} from '../types';
 import LinkingConfiguration from './LinkingConfiguration';
 
-export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
+export default function Navigation({colorScheme}: { colorScheme: ColorSchemeName }) {
     return (
         <NavigationContainer
             linking={LinkingConfiguration}
             theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <RootNavigator />
+            <RootNavigator/>
         </NavigationContainer>
     );
 }
@@ -41,11 +41,11 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
 function RootNavigator() {
     return (
         <Stack.Navigator>
-        <Stack.Screen name="Root" component={BottomTabNavigator} options={{ headerShown: false }} />
+            <Stack.Screen name="Root" component={BottomTabNavigator} options={{headerShown: false}}/>
-        <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
+            <Stack.Screen name="Home" component={HomeScreen} options={{headerShown: false}}/>
-      <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
+            <Stack.Screen name="NotFound" component={NotFoundScreen} options={{title: 'Oops!'}}/>
-        <Stack.Screen name="Favorite" component={FavoriteScreen} options={{ headerShown: false }} />
+            <Stack.Screen name="Favorite" component={FavoriteScreen} options={{headerShown: false}}/>
-        <Stack.Screen name="WatchLater" component={WatchLaterScreen} options={{ headerShown: false }} />
+            <Stack.Screen name="WatchLater" component={WatchLaterScreen} options={{headerShown: false}}/>
         </Stack.Navigator>
     );
 }
@@ -61,7 +61,7 @@ function BottomTabNavigator() {
 
     return (
         <BottomTab.Navigator
-      initialRouteName="Favorite"
+            initialRouteName="Home"
             screenOptions={{
                 tabBarActiveTintColor: "purple",
 
@@ -70,8 +70,8 @@ function BottomTabNavigator() {
                 name="WatchLater"
 
                 component={WatchLaterScreen}
-        options={({ navigation }: RootTabScreenProps<'WatchLater'>) => ({
+                options={({navigation}: RootTabScreenProps<'WatchLater'>) => ({
-          tabBarIcon: ({ color, size}) => <TabBarIcon name={faClock} color={color} size={20}/>,
+                    tabBarIcon: ({color, size}) => <TabBarIcon name={faClock} color={color} size={20}/>,
                     headerShown: false,
 
                 })}
@@ -82,7 +82,7 @@ function BottomTabNavigator() {
 
                 options={{
                     headerShown: false,
-                tabBarIcon: ({ color, size }) => <TabBarIcon name={faFilm} color={color} size={20}/>,
+                    tabBarIcon: ({color, size}) => <TabBarIcon name={faFilm} color={color} size={20}/>,
                 }}
             />
             <BottomTab.Screen
@@ -91,7 +91,7 @@ function BottomTabNavigator() {
 
                 options={{
                     headerShown: false,
-          tabBarIcon: ({ color, size }) => <TabBarIcon name={faHeart} color={color} size={20} />,
+                    tabBarIcon: ({color, size}) => <TabBarIcon name={faHeart} color={color} size={20}/>,
                 }}
             />
         </BottomTab.Navigator>
@@ -106,5 +106,5 @@ function TabBarIcon(props: {
     color: string;
     size: number;
 }) {
-  return <FontAwesomeIcon icon={props.name} style={{marginBottom: -5}} size={props.size} color={props.color} />;
+    return <FontAwesomeIcon icon={props.name} style={{marginBottom: -5}} size={props.size} color={props.color}/>;
 }

screens/HomeScreen.tsx

@@ -1,15 +1,29 @@
 import * as React from 'react';
-import {Button,TouchableOpacity,ScrollView,View, Text, StyleSheet, Image, ImageBackground, SafeAreaView} from 'react-native';
+import {
+    Button,
+    TouchableOpacity,
+    ScrollView,
+    View,
+    Text,
+    StyleSheet,
+    Image,
+    ImageBackground,
+    SafeAreaView
+} from 'react-native';
 import {RootStackScreenProps} from "../types.js";
 import Rive from 'rive-react-native';
 import {useEffect, useRef, useState} from "react";
 import {RiveViewManager} from "rive-react-native/lib/typescript/Rive.js";
 import {useSafeAreaInsets} from "react-native-safe-area-context";
+import {Movie} from "../interfaces";
+import apiTMBD from '../api/tmdb';
 
-export default function App({ navigation }: RootStackScreenProps<'Home'>) {
+export default function App({navigation}: RootStackScreenProps<'Home'>) {
     const insets = useSafeAreaInsets();
-
+    let [movies, setMovies] = useState<Movie[]>([]);
-
+    var api = new apiTMBD();
+    let moviess: string[] = api.getTrendingMovie();
+    api.getInfoMovie("505642");
 
     const styles = StyleSheet.create({
         background: {
@@ -18,15 +32,15 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) {
             paddingTop: insets.top,
         },
 
-        container:{
+        container: {
             flex: 1,
         },
         filmCard: {
             width: '80%',
             height: '60%',
-            justifyContent:'center',
+            justifyContent: 'center',
-            marginLeft:'auto',
+            marginLeft: 'auto',
-            marginRight:'auto',
+            marginRight: 'auto',
             borderRadius: 15,
 
 
@@ -79,7 +93,7 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) {
                     }}
                 />
             </View>
-            <View style={{height:35, marginTop: 10, marginBottom: 15}}>
+            <View style={{height: 35, marginTop: 10, marginBottom: 15}}>
                 <ScrollView
                     horizontal={true}
                     showsHorizontalScrollIndicator={false}>
@@ -94,37 +108,58 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) {
                     <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: 'column',
-                <View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
+                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}}>SPIDER-MAN No Way Home</Text>
+                    <Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>SPIDER-MAN
+                        No Way Home</Text>
                 </View>
                 <Text style={{color: "grey", fontSize: 20, fontWeight: "bold"}}>Jean-Marc généreux</Text>
             </View>
-            <View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: '15%', width:'100%'}}>
+            <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: "space-evenly",
+                paddingHorizontal: 30,
+                height: '15%',
+                width: '100%'
+            }}>
                 <TouchableOpacity>
                     <Image
-                    source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch",  height:'65%', aspectRatio: 1,}}
+                        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,}}
+                        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,}}
+                        source={require('../assets/images/Favorite.png')}
+                        style={{resizeMode: "stretch", height: '65%', aspectRatio: 1,}}
                     />
 
                 </TouchableOpacity>
@@ -134,23 +169,38 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) {
 }
 
 type BadgeGenreProps = {
-    name : String
+    name: String
     isSelected: Boolean
 
 }
 
 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"}} >
+            <View style={{
+                paddingHorizontal: 20,
+                marginHorizontal: 5,
+                height: 35,
+                backgroundColor: '#2E2E2E',
+                borderRadius: 20,
+                justifyContent: "center"
+            }}>
                 <Text style={{color: "white"}}>{props.name}</Text>
             </View>
 
         );
-    }
+    } else {
-    else{
         return (
-            <View style={{paddingHorizontal: 20,  marginHorizontal: 5,height: 35, backgroundColor: '#5C5C5C', borderRadius: 20, borderWidth: 1, borderColor: "white" ,justifyContent: "center"}} >
+            <View style={{
+                paddingHorizontal: 20,
+                marginHorizontal: 5,
+                height: 35,
+                backgroundColor: '#5C5C5C',
+                borderRadius: 20,
+                borderWidth: 1,
+                borderColor: "white",
+                justifyContent: "center"
+            }}>
                 <Text style={{color: "white"}}>{props.name}</Text>
             </View>
 
@@ -161,14 +211,23 @@ export function BadgeGenre(props: BadgeGenreProps) {
 }
 
 type BadgeFilmProps = {
-    name : String
+    name: String
 
 }
+
 export function BadgeFilm(props: BadgeFilmProps) {
 
     return (
-            <View style={{paddingHorizontal: 15,  marginHorizontal: 5,height: 30, backgroundColor: '#8906B8', borderRadius: 15, justifyContent: "center", alignSelf: "flex-start"}} >
+        <View style={{
-                <Text style={{color: "white", fontSize: 12, fontWeight:"bold"}}>{props.name}</Text>
+            paddingHorizontal: 15,
+            marginHorizontal: 5,
+            height: 30,
+            backgroundColor: '#8906B8',
+            borderRadius: 15,
+            justifyContent: "center",
+            alignSelf: "flex-start"
+        }}>
+            <Text style={{color: "white", fontSize: 12, fontWeight: "bold"}}>{props.name}</Text>
         </View>
 
     );