merge + home

components/selectChantier.tsx

@@ -1,16 +1,25 @@
-import { useChantier } from '@/app/ContextChantier';
-import { Chantier, exempleChantier } from '@/class/class';
-import { useState } from 'react';
-import { Dimensions, Image, LayoutAnimation, Pressable, ScrollView, StyleSheet, View } from 'react-native';
-import Animated, { LinearTransition } from 'react-native-reanimated';
-import { ThemedButton } from './themed-button';
-import { ThemedText } from './themed-text';
-import { ThemedTextInput } from './themed-textinput';
+import { useChantier } from "@/app/ContextChantier";
+import { Chantier, getChantiers } from "@/class/class";
+import { useEffect, useState } from "react";
+import {
+  Dimensions,
+  Image,
+  LayoutAnimation,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  View
+} from "react-native";
+import Animated, {
+  LinearTransition
+} from "react-native-reanimated";
+import { ThemedButton } from "./themed-button";
+import { ThemedText } from "./themed-text";
+import { ThemedTextInput } from "./themed-textinput";
 import { ThemedView } from "./themed-view";
 
 const screenHeight = Dimensions.get("window").height;
 
-
 /*
 
 <ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
@@ -20,136 +29,123 @@ 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(
-      <Pressable key={index} onPress={() => selectChantier(chantier)}>
-        <ThemedView lvl={4} style={styles.chantier}>
-          <View>
-            <Image source={{ uri: chantier.urlImg }} style={styles.image} />
-            
-          </View>
-          <View>
-            <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>
-          </View>
-        </ThemedView >
-      </Pressable>
-      );
-      
-    };
-
-
-    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 ? "Fermer" : "Chantiers"}</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>
+  const renderChantier = (chantier: Chantier, index: number) => {
+    return (
+        <Pressable key={index} onPress={() => selectChantier(chantier)}>
+          <ThemedView lvl={4} style={styles.chantier}>
+            <View>
+              <Image source={{ uri:"https://cdn.discordapp.com/attachments/1425108443571945644/1427207643180826757/raw.png?ex=69392bb2&is=6937da32&hm=dcc09e76d3dca89d2418947b46efbd38673b9dc559027724b2e51d493b173bc9&" /*chantier.urlImg*/ }} style={styles.image} />
             </View>
-          }
-        </AnimatedThemedView>
-      </Animated.View>
-    )
-    
+            <View>
+            <ThemedText>Adresse: {chantier.adresse}</ThemedText>
+            <ThemedText>Chef de chantier: {chantier.chef.last_name}{" "}{chantier.chef.name}</ThemedText>
+            <ThemedText>État: {chantier.etat}</ThemedText>
+            </View>
+          </ThemedView>
+        </Pressable>
+    );
+  };
+
+  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 ? "Fermer" : "Chantier"}
+          </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,
     flexDirection: 'row',
     height: 100,
@@ -162,28 +158,28 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
   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',
-  }
 });