⚡ Ajout de l'option de recherche dans la liste de carte ! 💥

redux/actions/actionSelection.tsx

@@ -46,13 +46,22 @@ export const getAllCards = () => {
       //Have it first fetch data from our starwars url.
       const options = {
         method: 'GET',
+        // headers: {
+        //   'content-length':'9505',
+        //   'content-type':'application/json; charset=utf-8',
+        //   'etag':'W/"74bb-QMT8DIj6saBS1wT4u5WWcEmZAdw"'
+        // }
+
+        //! Actualisation de l'API (16/03) :
         headers: {
-          'content-length':'9505',
-          'content-type':'application/json; charset=utf-8',
-          'etag':'W/"74bb-QMT8DIj6saBS1wT4u5WWcEmZAdw"'
+          'content-length': '9508',
+          'content-type': 'application/json; charset=utf-8',
+          'etag': 'W/"74bb-d4gMlMNks7UGES3Jmn6wzUTXaLI"'
         }
       };
-      const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EURTWhjBC2SRb4Ez42BT1kx8R2NcJc07kL', options);
+      //! Actualisation de l'API (16/03) :
+      const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EU1AbKy9Q7sOUjQYC5AFF1O1JPuoAgCNxk', options);
+      //const CardsPromise = await fetch('https://us.api.blizzard.com/hearthstone/cards?locale=en_US&access_token=EURTWhjBC2SRb4Ez42BT1kx8R2NcJc07kL', options);
       //console.log("FETCH")
       //console.log(CardsPromise)
 

screens/ListScreen.tsx

@@ -1,5 +1,5 @@
 
-import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native';
+import { StyleSheet, Text, View, Button, TouchableHighlight, TextInput } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import React, { useState, useEffect } from "react";
 import { FlatList } from 'react-native-gesture-handler';
@@ -16,6 +16,11 @@ import { Card } from '../models/Card';
 import { Image } from 'react-native';
 import { ImageURISource } from 'react-native';
 
+//* Icons
+
+//import { BiSearchAlt } from 'react-icons';
+
+
 //@ts-ignore
 const Item = ({url}) => (
     // <View style={styles.item}>
@@ -63,30 +68,32 @@ export default function ListScreen({navigation}){
 
     //https://us.api.blizzard.com/hearthstone/cards/678?locale=en_US
 
+    //* Search : 
+    const [searchValue, setSearchValue] = useState('');
+
+    //@ts-ignore
+    const filteredList = nList.filter(item => item.name.toLowerCase().includes(searchValue.toLowerCase()));
+
     return (
         <View style={styles.container}>
-            {/* <FlatList data={nList}         
-            renderItem={({item}) => <Item title={item.name} />}
-            keyExtractor={item => item.id}/> */}
+
+            <TextInput
+                style={styles.textInput}
+                value={searchValue}
+                onChangeText={text => setSearchValue(text)}
+                placeholder="Rechercher une carte..."
+            />
 
             <FlatList 
                 numColumns={2}
-                data={nList} 
+                data={filteredList} 
                 renderItem={({item}) =>
-                    
-                    //<TouchableHighlight onPress={() => navigation.navigate("CardsDetails", {"card": item})}> //* mettre la page de detail ici, renvoi a home pour l'instant
                     <TouchableHighlight onPress={() => navigation.navigate("ListFav")}>
                         <Item url={item.img}/>
                     </TouchableHighlight>
-                    
-                    // //<Text>{item.name}</Text>
-                    // // <View>
-                    // //     <Image 
-                    // //     source={{uri:item.img}}
-                    // //     style={{flex:1, minHeight:250, minWidth:180}}/>
-
-                    // // </View>
-                } keyExtractor={(item: Card) => item.id.toString()}/>
+                } 
+                keyExtractor={(item: Card) => item.id.toString()}
+            />
         </View>
 
         
@@ -121,5 +128,14 @@ const styles = StyleSheet.create({
     },
     title: {
         fontStyle: "italic",
+    },
+    textInput: {
+        padding: 15,
+        margin: 5,
+        width:200,
+        backgroundColor: '#ffffff',
+        borderRadius : 15,
+        shadowColor: 'grey',
+        textAlign:'center'
     }
 });