test firebase

app/(tabs)/gestionnaire_ressource.tsx

@@ -1,36 +1,56 @@
-import { useRouter , useLocalSearchParams} from "expo-router";
+import { useRouter, useLocalSearchParams } from "expo-router";
 import { navigate } from "expo-router/build/global-state/routing";
-import React, {useState} from 'react';
-import { Button,FlatList,Image, Text, TextInput,View, StyleSheet } from 'react-native';
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  FlatList,
+  Image,
+  Text,
+  TextInput,
+  View,
+  StyleSheet,
+} from "react-native";
+import { getRessources, Ressource } from "../../services/ressourcesService";
 
 export default function GestionnaireRessource() {
   const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState("");
+  const [ressource, setRessources] = useState<Ressource[]>([]);
+  const [loading, setLoading] = useState(true);
   const router = useRouter();
 
-  type Ressource ={
-    id: number;
-    name: string;
-    type: string;
-    Image: string;
-  }
-
-  const data: Ressource[] = [
-    { id: 1, name: 'Marteau', type: 'Outil', Image: '' },
-    { id: 2, name: 'Scie', type: 'Outil' , Image: ''},
-    { id: 3, name: 'Pelle', type: 'Outil' , Image: '' },
-    { id: 4, name: 'Grue', type: 'Machine',Image: 'https://media.discordapp.net/attachments/1425108443571945644/1427207643180826757/raw.png?ex=68ee0632&is=68ecb4b2&hm=1efc51065c6abfb1af75b8382f9924c2eb177c7d7672f7ed9837e96ef3076d16&=&format=webp&quality=lossless&width=421&height=632'},
-    { id: 5, name: 'Bulldozer', type: 'Machine', Image: ''},
-  ];
-
-
-    const renderRessource = ({ item, index }: { item?: Ressource; index: number })  => {
-      if (!item) {
-        // optionnel : afficher un placeholder pour debug
-        // return <View style={styles.card}><Text>Item manquant</Text></View>;
-        return null;
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const data = await getRessources();
+        setRessources(data);
+      } catch (error) {
+        console.error("Erreur lors du chargement des ressources :", error);
+      } finally {
+        setLoading(false);
       }
-      return(
+    }
+
+    loadData();
+  }, []);
+
+  const filteredData = ressource.filter((r) =>
+    r.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const renderRessource = ({
+    item,
+    index,
+  }: {
+    item?: Ressource;
+    index: number;
+  }) => {
+    if (!item) {
+      // optionnel : afficher un placeholder pour debug
+      // return <View style={styles.card}><Text>Item manquant</Text></View>;
+      return null;
+    }
+    return (
       <View style={styles.card}>
         <View style={styles.info}>
           <Image source={{ uri: item.Image }} style={styles.image} />
@@ -38,13 +58,14 @@ export default function GestionnaireRessource() {
           <Text>{item.name}</Text>
           <Text>{item.type}</Text>
         </View>
-      </View>);
-    };
+      </View>
+    );
+  };
 
-  return(
+  return (
     <View style={styles.container}>
       <FlatList
-        data={data}
+        data={filteredData}
         renderItem={renderRessource}
         keyExtractor={(_, index) => index.toString()}
         contentContainerStyle={{ paddingBottom: 40 }}
@@ -69,45 +90,48 @@ export default function GestionnaireRessource() {
       />
 
       <View style={styles.footer}>
-        <Button title="Retour" onPress={() =>router.push('/(tabs)/bonjourFL')} />
+        <Button
+          title="Retour"
+          onPress={() => router.push("/(tabs)/bonjourFL")}
+        />
       </View>
     </View>
-  )
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: "#fff",
   },
   header: {
     marginTop: 60,
     marginBottom: 20,
-    alignItems: 'center',
+    alignItems: "center",
     paddingHorizontal: 20,
   },
   text: {
     fontSize: 22,
-    fontWeight: 'bold',
+    fontWeight: "bold",
     marginBottom: 10,
   },
   input: {
-    width: '100%',
+    width: "100%",
     borderWidth: 1,
-    borderColor: '#ccc',
+    borderColor: "#ccc",
     borderRadius: 10,
     padding: 10,
     fontSize: 16,
   },
   card: {
-    flexDirection: 'row',
+    flexDirection: "row",
     marginHorizontal: 20,
     marginBottom: 15,
     borderWidth: 1,
-    borderColor: '#ddd',
+    borderColor: "#ddd",
     borderRadius: 10,
     padding: 10,
-    backgroundColor: '#fafafa',
+    backgroundColor: "#fafafa",
   },
   image: {
     width: 80,
@@ -117,10 +141,10 @@ const styles = StyleSheet.create({
   },
   info: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   group: {
-    fontWeight: 'bold',
+    fontWeight: "bold",
     fontSize: 16,
     marginBottom: 5,
   },
@@ -128,8 +152,8 @@ const styles = StyleSheet.create({
     padding: 20,
   },
   empty: {
-    textAlign: 'center',
+    textAlign: "center",
     marginTop: 30,
-    color: '#888',
+    color: "#888",
   },
-});
+});