Scribd
Upload
11 views17 pages

Cours Math 04.05.02 - 119

The document contains a React component named 'Search' that manages a list of films and allows users to search for films using an input field. It includes methods for loading films from an API, handling user input, and displaying a loading indicator. The component also utilizes a FlatList to render the list of films dynamically based on user searches.

Uploaded by

xhh87iur6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views17 pages

Cours Math 04.05.02 - 119

The document contains a React component named 'Search' that manages a list of films and allows users to search for films using an input field. It includes methods for loading films from an API, handling user input, and displaying a loading indicator. The component also utilizes a FlatList to render the list of films dynamically based on user searches.

Uploaded by

xhh87iur6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

1 rm -rf node_modules

2 npm install
1 class Search extends React.Component {
2
3 constructor(props) {
4 super(props);
5 this._films = [
6 {
7 id:181808,
8 vote_average:7.2,
9 title:"Star Wars VIII - Les derniers Jedi"
10 poster_path:"",
11 original_title:"Star Wars: The Last Jedi"
12 overview:"Overview1",
13 release_date:"2017-12-13"
14 }
15 ];
16 }
17
18 _load_films () {
19 this._films.push(
20 {
21 id:181809,
22 vote_average:8.1,
23 title:"La Guerre des étoiles",
24 poster_path:"",
25 original_title:"Star Wars",
26 overview:"Overview2",
27 release_date:"1977-05-25"
28 }
29 );
30 this.forceUpdate();
31 }
32
33 _test1 () {
34 console.log("Jalon 1");
35 return (this._films);
36 }
37
38 _test2 (a) {
39 console.log("Jalon 2");
40 return (a.id.toString());
41 }
42
43 _test3 (b) {
44 console.log("Jalon 3");
45 return (<Text>{b.id.toString()}</Text>);
46 }
47
48 render() {
49 return (
50 <View style={styles.main_container}>
51 <TextInput style={styles.textinput} placeholder=
52 <Button title='Rechercher' onPress={() => {
53 <FlatList
54 data={this._test1()}
55 keyExtractor={(item) => this._test2(item)}
56 renderItem={({item}) => this._test3(item)}
57 extraData={this.state}
58 />
59 </View>
60 );
61 }
62 }

1 Jalon 1
2 Jalon 2
3 Jalon 3
4 Jalon 2
5 Jalon 2

1 Jalon 4
2 Jalon 1
1 this.setState({refresh: true});
1 import React from 'react'
2 import {ActivityIndicator,StyleSheet, View, Button, TextInput,FlatList
3 import FilmItem from './FilmItem'
4 import {getFilmFromAPI} from './API/tmdb'
5
6 class Search extends React.Component {
7 constructor(props){
8 super(props)
9 this.state = { films: [],
10 isLoading: false
11 }
12 this.searchedText = ""
13 this.page = 0
14 this.totalPages = 0
15 }
16
17 _loadFilms(){
18 if(this.searchedText.length > 0) {
19 this.setState({isLoading:true})
20 getFilmFromAPI(this.searchedText, this.page+1).then(data =
21 this.page = data.page
22 this.totalPages = data.total_pages
23
24 this.setState({
25 films: [ ...this.state.films, ...data.results],
26 isLoading:false})
27 })
28 }
29 }
30
31 _searchTextInputChanged(text){
32 this.searchedText = text
33 }
34
35 _displayLoading(){
36 if(this.state.isLoading){
37 return(
38 <View style={styles.loading}>
39 <ActivityIndicator size="large"
40 </View>
41 )
42 }
43 }
44
45
46 _searchFilms() {
47 this.page = 0
48 this.totalPages = 0
49 this.setState({
50 films: [],
51 }, () => {
52 this._loadFilms()
53 })
54 }
55
56
57 render(){
58 console.log(this.page)
59 console.log(this.totalPages)
60 return(
61 <View style={styles.maincontainer} >
62 <TextInput onSubmitEditing={() => this._searchFilms()} onC
63 <Button title="Rechercher" onPress={() =>
64 <FlatList
65 data={this.state.films}
66 keyExtractor={(item)=>item.id.toString()}
67 renderItem={({item}) =><FilmItem film={item}/>}
68 onEndReachedThreshold={0.5}
69 onEndReached={() => {
70 if(this.page < this.totalPages){
71 this._loadFilms()
72 }
73 }}
74 />
75 {this._displayLoading()}
76 </View>
77 )
78 }
79 }
80
81 const styles = StyleSheet.create({
82 maincontainer:{
83 marginTop: 50,
84 flex:1
85
86 },
87
88 loading:{
89 position: 'absolute',
90 left: 0,
91 right: 0,
92 top: 100,
93 bottom: 0,
94 alignItems: 'center',
95 justifyContent: 'center'
96 },
97
98 textinput: {
99 marginLeft: 5,
100 marginRight: 5,
101 height: 50,
102 borderColor: '#000000',
103 borderWidth: 1,
104 paddingLeft: 5,
105 }
106 })
107 export default Search;
❶

You might also like