test with firebase

components/selectChantier.tsx

@@ -1,17 +1,30 @@
-import { useState } from 'react';
-import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View, LayoutAnimation } from 'react-native';
-import { ThemedTextInput } from './themed-textinpute';
+import { useState, useEffect } from "react";
+import {
+  Button,
+  GestureResponderEvent,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  View,
+  LayoutAnimation,
+} from "react-native";
+import { ThemedTextInput } from "./themed-textinpute";
 import { ThemedView } from "./themed-view";
-import { ThemedText } from './themed-text';
-import { ThemedButton } from './themed-button';
-import { Chantier, Chef, exempleChantier } from '@/class/class';
+import { ThemedText } from "./themed-text";
+import { ThemedButton } from "./themed-button";
+import { Chantier, User } from "@/class/class";
 import { Dimensions } from "react-native";
-import Animated, { Layout,LinearTransition,Easing,runOnJS } from 'react-native-reanimated';
-import { useChantier } from '@/app/Context';
+import Animated, {
+  Layout,
+  LinearTransition,
+  Easing,
+  runOnJS,
+} from "react-native-reanimated";
+import { useChantier } from "@/app/Context";
+import { getChantiers } from "@/class/class";
 
 const screenHeight = Dimensions.get("window").height;
 
-
 /*
 
 <ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
@@ -21,156 +34,174 @@ const screenHeight = Dimensions.get("window").height;
 */
 
 export default function SelectChantier() {
+  const { chantier, setChantier } = useChantier();
+  const [search, setSearch] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [chantiers, setChantiers] = useState<Chantier[]>([]);
 
-    const { chantier, setChantier } = useChantier();
-    const [search, setSearch] = useState('');
-    const [isOpen,setIsOpen] = useState(false);
-    const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
-    
-    const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
-    const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
-    const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
-    const AnimatedThemedTextInput = Animated.createAnimatedComponent(ThemedTextInput);
+  const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
+  const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
+  const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
+  const AnimatedThemedTextInput =
+    Animated.createAnimatedComponent(ThemedTextInput);
 
   function onPressOpen(): void {
-    LayoutAnimation.configureNext(
-      LayoutAnimation.Presets.easeInEaseOut
-    );
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     setIsOpen(!isOpen);
   }
 
+  useEffect(() => {
+    async function loadChantiers() {
+      const list = await getChantiers();
+      setChantiers(list);
+    }
+
+    loadChantiers();
+  }, []);
+
   function selectChantier(chantier: Chantier): void {
     setChantier(chantier);
     setIsOpen(false);
   }
 
+  const renderChantier = (chantier: Chantier, index: number) => {
+    return (
+      <ScrollView>
+        {chantiers
+          .filter((c) => c.adresse.toLowerCase().includes(search.toLowerCase()))
+          .map((chantier, index) => (
+            <Pressable key={index} onPress={() => selectChantier(chantier)}>
+              <ThemedView lvl={4} style={styles.chantier}>
+                <ThemedText>Adresse: {chantier.adresse}</ThemedText>
+                <ThemedText>
+                  Chef de chantier: {chantier.chef.last_name}{" "}
+                  {chantier.chef.name}
+                </ThemedText>
+                <ThemedText>
+                  Date de début: {chantier.dateDep.toLocaleDateString()}
+                </ThemedText>
+                <ThemedText>État: {chantier.etat}</ThemedText>
+              </ThemedView>
+            </Pressable>
+          ))}
+      </ScrollView>
+    );
+  };
 
-
-    const renderChantier = (chantier:Chantier, index: number)  => {
-      return(
-      <Pressable key={index} onPress={() => selectChantier(chantier)}>
-        <ThemedView lvl={4} style={styles.chantier}>
-          <ThemedText>adresse: {chantier.adresse}</ThemedText>
-          <ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
-          <ThemedText >date de début: {chantier.dateDep}</ThemedText>
-          <ThemedText>etat: {chantier.etat}</ThemedText>
-        </ThemedView >
-      </Pressable>
-      );
-      
-    };
-
-
-    return(
-      <Animated.View 
+  return (
+    <Animated.View
       layout={LinearTransition.duration(200)}
-      style={isOpen ? styles.windowOpean : styles.windowClose}>
-
-        <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
-          <ThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
-            <ThemedText style={styles.buttonText}>{isOpen ? "Close" : "Open"}</ThemedText>
-          </ThemedButton>
-          {isOpen &&
-            <View style={styles.menu}>
-                <ThemedTextInput
-                  lvl={1}
-                  border={4}
-                  style={styles.input}
-                  placeholder='Rechercher un chantier'
-                  value={search}
-                  onChangeText={setSearch}
-                />
-                  <ThemedView lvl={2} style={styles.list}>
-                    <ScrollView contentContainerStyle={styles.chantiersList} >
-                      
-                      {chantiers.map((chantier, index) => (
-                        renderChantier(chantier, index)
-                        ))
-                      }
-                    </ScrollView>
-                  </ThemedView>
-            </View>
-          }
-        </AnimatedThemedView>
-      </Animated.View>
-    )
-    
+      style={isOpen ? styles.windowOpean : styles.windowClose}
+    >
+      <AnimatedThemedView
+        layout={LinearTransition.duration(200)}
+        lvl={2}
+        shadow={true}
+        style={styles.window}
+      >
+        <ThemedButton
+          style={isOpen ? styles.buttonOpen : styles.buttonClose}
+          lvl={isOpen ? 1 : 1}
+          onPress={() => onPressOpen()}
+        >
+          <ThemedText style={styles.buttonText}>
+            {isOpen ? "Close" : "Open"}
+          </ThemedText>
+        </ThemedButton>
+        {isOpen && (
+          <View style={styles.menu}>
+            <ThemedTextInput
+              lvl={1}
+              border={4}
+              style={styles.input}
+              placeholder="Rechercher un chantier"
+              value={search}
+              onChangeText={setSearch}
+            />
+            <ThemedView lvl={2} style={styles.list}>
+              <ScrollView contentContainerStyle={styles.chantiersList}>
+                {chantiers.map((chantier, index) =>
+                  renderChantier(chantier, index)
+                )}
+              </ScrollView>
+            </ThemedView>
+          </View>
+        )}
+      </AnimatedThemedView>
+    </Animated.View>
+  );
 }
 
 const styles = StyleSheet.create({
-
-  windowClose:{
+  windowClose: {
     //backgroundColor: '#00FFFF',
     //borderRadius:10,
     padding: 10,
-    width:"50%",
-    height:60,
-    overflow: 'hidden',    
+    width: "50%",
+    height: 60,
+    overflow: "hidden",
   },
-  windowOpean:{
+  windowOpean: {
     //backgroundColor: '#00FFFF',
     //borderRadius:10,
-    width:"100%",
-    height: screenHeight/2,
+    width: "100%",
+    height: screenHeight / 2,
     padding: 10,
   },
-  window:{
-    borderRadius:15,
+  window: {
+    borderRadius: 15,
     height: "100%",
     //backgroundColor: '#00FF00',
-    overflow: 'hidden',
+    overflow: "hidden",
   },
-  menu:{
-    padding:5,
-    flex: 1, 
+  menu: {
+    padding: 5,
+    flex: 1,
     minHeight: 0,
     //backgroundColor:'#FF00FF',
   },
-  list:{
+  list: {
     flex: 1,
-    overflow: 'hidden',
-    borderRadius:10,
-
+    overflow: "hidden",
+    borderRadius: 10,
   },
-  chantiersList:{
+  chantiersList: {
     //padding:5,
     //backgroundColor:'0000FF',
     //flexDirection: 'row',
     //alignItems: 'center',
     gap: 8,
-    
   },
-  chantier:{
-    padding:5,
+  chantier: {
+    padding: 5,
     //marginTop:5,
     //margin:5,
-    borderRadius:10,
+    borderRadius: 10,
     //borderWidth: 1,
-    
   },
   input: {
-    width: '100%',
+    width: "100%",
     borderWidth: 1,
     borderRadius: 10,
     padding: 10,
     fontSize: 16,
-    marginBottom:10,
+    marginBottom: 10,
   },
-  buttonClose:{
-    width:'100%',
+  buttonClose: {
+    width: "100%",
     margin: 0,
     borderRadius: 15,
     padding: 10,
-    height:40,
+    height: 40,
   },
-  buttonOpen:{
-    width:'50%',
+  buttonOpen: {
+    width: "50%",
     margin: 5,
     borderRadius: 10,
     padding: 10,
-    height:40,
+    height: 40,
+  },
+  buttonText: {
+    textAlign: "center",
   },
-  buttonText:{
-    textAlign: 'center',
-  }
 });