diff --git a/api/tmdb.tsx b/api/tmdb.tsx index 89f52a0..70e9895 100644 --- a/api/tmdb.tsx +++ b/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(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; + } } -} \ No newline at end of file + async getDirector(id: string): Promise { + 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; diff --git a/components/ListWidget.tsx b/components/ListWidget.tsx index 321ee3e..c2debf6 100644 --- a/components/ListWidget.tsx +++ b/components/ListWidget.tsx @@ -59,7 +59,7 @@ export function ListWidget(props: ListWidgetProps) { fontWeight: "bold", fontSize: 25, paddingRight: 50 - }}>{props.director} + }}>{props.name} {formatTime(props.runtime)} diff --git a/components/Movie.tsx b/components/Movie.tsx new file mode 100644 index 0000000..463f519 --- /dev/null +++ b/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; diff --git a/components/MovieList.tsx b/components/MovieList.tsx index 041c4b9..f171461 100644 --- a/components/MovieList.tsx +++ b/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 diff --git a/constants/config.ts b/constants/config.ts new file mode 100644 index 0000000..2f64e41 --- /dev/null +++ b/constants/config.ts @@ -0,0 +1,4 @@ +export default { + api_key: "a133422b5b1f22428e8074470d321865", + base_url: "https://api.themoviedb.org/3/" +} \ No newline at end of file diff --git a/navigation/index.tsx b/navigation/index.tsx index 6872fa4..cddd74b 100644 --- a/navigation/index.tsx +++ b/navigation/index.tsx @@ -3,15 +3,15 @@ * https://reactnavigation.org/docs/getting-started * */ -import { FontAwesome } from '@expo/vector-icons'; -import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome"; -import { faClock, faFilm, faHeart} from "@fortawesome/free-solid-svg-icons"; +import {FontAwesome} from '@expo/vector-icons'; +import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome"; +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 { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native'; -import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; +import {NavigationContainer, DefaultTheme, DarkTheme} from '@react-navigation/native'; +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,17 +19,17 @@ 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 }) { - return ( - - - - ); +export default function Navigation({colorScheme}: { colorScheme: ColorSchemeName }) { + return ( + + + + ); } /** @@ -39,15 +39,15 @@ export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeNa const Stack = createNativeStackNavigator(); function RootNavigator() { - return ( - - - - - - - - ); + return ( + + + + + + + + ); } /** @@ -57,54 +57,54 @@ function RootNavigator() { const BottomTab = createBottomTabNavigator(); function BottomTabNavigator() { - const colorScheme = useColorScheme(); + const colorScheme = useColorScheme(); - return ( - - + ) => ({ - tabBarIcon: ({ color, size}) => , - headerShown: false, + component={WatchLaterScreen} + options={({navigation}: RootTabScreenProps<'WatchLater'>) => ({ + tabBarIcon: ({color, size}) => , + headerShown: false, - })} - /> - + , - }} - /> - , + }} + /> + , - }} - /> - - ); + options={{ + headerShown: false, + tabBarIcon: ({color, size}) => , + }} + /> + + ); } /** * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/ */ function TabBarIcon(props: { - name: any; - color: string; - size: number; + name: any; + color: string; + size: number; }) { - return ; + return ; } diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx index 16951ae..0fae476 100644 --- a/screens/HomeScreen.tsx +++ b/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([]); + 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', - marginLeft:'auto', - marginRight:'auto', + justifyContent: 'center', + marginLeft: 'auto', + marginRight: 'auto', borderRadius: 15, @@ -79,7 +93,7 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) { }} /> - + @@ -94,63 +108,99 @@ export default function App({ navigation }: RootStackScreenProps<'Home'>) { - - - - + + + - - SPIDER-MAN No Way Home - + + SPIDER-MAN + No Way Home + Jean-Marc généreux - - - - - - - - - - - - - + + + + + + + + + + + + + ); } type BadgeGenreProps = { - name : String + name: String isSelected: Boolean } export function BadgeGenre(props: BadgeGenreProps) { - if(props.isSelected==false){ + if (props.isSelected == false) { return ( - + {props.name} ); - } - else{ + } else { return ( - + {props.name} @@ -161,17 +211,26 @@ export function BadgeGenre(props: BadgeGenreProps) { } type BadgeFilmProps = { - name : String + name: String } + export function BadgeFilm(props: BadgeFilmProps) { - return ( - - {props.name} - + return ( + + {props.name} + - ); + ); }