🚧 Adding the list view page, but has to be modified

2025-10-13 09:58:07 +02:00
parent d08bb6da70
commit 1366c9ee3a
5 changed files with 198 additions and 29 deletions
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -7,8 +7,8 @@ import { HapticTab } from '@/components/haptic-tab';
 import { IconSymbol } from '@/components/ui/icon-symbol';
 import { Colors } from '@/constants/theme';
 import { useColorScheme } from '@/hooks/use-color-scheme';
-import TabTwoScreen from './explore';
-import HomeScreen from './index';
+import TabTwoScreen from './index';
+import HomeScreen from './bonjourFL';

 const Tabs = createBottomTabNavigator();

@@ -23,10 +23,10 @@ export default function TabLayout() {
        tabBarButton: HapticTab,
      }}>
      <Tabs.Screen
-        name="index"
+        name="bonjourFL"
        component={HomeScreen}
        options={{
-          title: 'Home',
+          title: 'Bonjour',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
        }}
      />
--- a/app/(tabs)/bonjourFL.tsx
+++ b/app/(tabs)/bonjourFL.tsx
@@ -0,0 +1,148 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import React, { useMemo, useState } from 'react';
+import { Button, FlatList, Image, StyleSheet, Text, TextInput, View } from 'react-native';
+import rawConcerts from '../../data/concerts.json';
+
+type Concert = {
+  group: string;
+  date: string;
+  nationality: string;
+  location: string;
+  price: number;
+  ticketsLeft: number;
+  Image: string;
+  favorite: boolean;
+};
+
+export default function BonjourScreen() {
+
+  const router = useRouter();
+  const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
+  const [search, setSearch] = useState('');
+
+
+  const concertsData: Concert[] = Array.isArray(rawConcerts)
+    ? (rawConcerts as Concert[])
+    : [];
+
+  const filteredData = useMemo(() => {
+    if (!Array.isArray(concertsData)) return [];
+    const q = search.trim().toLowerCase();
+    if (!q) return concertsData;
+    return concertsData.filter(
+      (item) => !!item && (item.group ?? '').toLowerCase().includes(q)
+    );
+  }, [concertsData, search]);
+
+
+  const renderItem = ({ item, index }: { item?: Concert; 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}>
+      <Image source={{ uri: item.Image }} style={styles.image} />
+      <View style={styles.info}>
+        <Text style={styles.group}>{item.group}</Text>
+        <Text>{item.date}</Text>
+        <Text>{item.location}</Text>
+        <Text>Prix : {item.price} €</Text>
+        <Text>Places restantes : {item.ticketsLeft}</Text>
+      </View>
+    </View>);
+  };
+
+  return(
+    <View style={styles.container}>
+      <FlatList
+        data={filteredData}
+        renderItem={renderItem}
+        keyExtractor={(_, index) => index.toString()}
+        contentContainerStyle={{ paddingBottom: 40 }}
+        ListHeaderComponent={
+          <View style={styles.header}>
+            <Text style={styles.text}>
+              Bonjour {prenom} {nom}
+            </Text>
+
+            {/* 🔍 Champ de recherche */}
+            <TextInput
+              style={styles.input}
+              placeholder="Rechercher un groupe..."
+              value={search}
+              onChangeText={setSearch}
+            />
+          </View>
+        }
+        ListEmptyComponent={
+          <Text style={styles.empty}>Aucun résultat trouvé 😕</Text>
+        }
+      />
+
+      <View style={styles.footer}>
+        <Button title="Retour" onPress={() => router.back()} />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header: {
+    marginTop: 60,
+    marginBottom: 20,
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  text: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    marginBottom: 10,
+  },
+  input: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 10,
+    padding: 10,
+    fontSize: 16,
+  },
+  card: {
+    flexDirection: 'row',
+    marginHorizontal: 20,
+    marginBottom: 15,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 10,
+    padding: 10,
+    backgroundColor: '#fafafa',
+  },
+  image: {
+    width: 80,
+    height: 80,
+    borderRadius: 8,
+    marginRight: 10,
+  },
+  info: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  group: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    marginBottom: 5,
+  },
+  footer: {
+    padding: 20,
+  },
+  empty: {
+    textAlign: 'center',
+    marginTop: 30,
+    color: '#888',
+  },
+});
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -15,8 +15,8 @@ export default function RootLayout() {
  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
-        <Stack.Screen name="selectChantier" options={{ headerShown: false }}/>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="selectChantier" options={{ headerShown: false }}/>
        <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
      </Stack>
      <StatusBar style="auto" />
--- a/data/concerts.json
+++ b/data/concerts.json
@@ -0,0 +1,45 @@
+[
+    {
+      "group": "Berurier Noir",
+      "date":"20 Avril 1983",
+      "nationality": "French",
+      "location": "Le Liberté",
+      "price": 20,
+      "ticketsLeft": 36,
+      "Image": "https://media.discordapp.net/attachments/1415267028201246812/1424825038657425518/a06e3304-86ca-4b4f-8016-c4ae9844b0df.png?ex=68e9f879&is=68e8a6f9&hm=b6ff1f540d5c382930b56bd6f90565f517ee179347d6ee6aebd5254b10cf4c88&=&format=webp&quality=lossless&width=579&height=579",
+      "favorite": false
+    },
+    {
+        "group": "Molodoi",
+        "date":"22 Avril 1983",
+        "nationality": "French",
+        "location": "Le Liberté",
+        "price": 22,
+        "ticketsLeft": 400,
+        "Image": "https://media.discordapp.net/attachments/1415267028201246812/1424826240090509332/7fdbfe06-8300-441e-81ac-87851d004dc3.png?ex=68e9f997&is=68e8a817&hm=cc71621c3e7c3c1aaeda5555e9dd4204d43414cd0332c2b116b10d009b68df3c&=&format=webp&quality=lossless&width=579&height=579",
+        "favorite": false
+      
+    },
+    {
+        "group": "Iggy Pop",
+        "date":"24 Avril 1983",
+        "nationality": "French",
+        "location": "USA",
+        "price": 32,
+        "ticketsLeft": 0,
+        "Image": "https://static.fnac-static.com/multimedia/FR/Images_Produits/FR/fnac.com/Visual_Principal_340/2/2/8/0094633089822/tsp20130828210922/A-million-in-prizes-The-Iggy-Pop-Anthology.jpg",
+        "favorite": false
+      
+    },
+    {
+        "group": "Sex Pistols",
+        "date":"23 Avril ",
+        "nationality": "French",
+        "location": "",
+        "price": 20,
+        "ticketsLeft": 36,
+        "Image": "https://media.discordapp.net/attachments/1415267028201246812/1424826240090509332/7fdbfe06-8300-441e-81ac-87851d004dc3.png?ex=68e9f997&is=68e8a817&hm=cc71621c3e7c3c1aaeda5555e9dd4204d43414cd0332c2b116b10d009b68df3c&=&format=webp&quality=lossless&width=579&height=579",
+        "favorite": true
+      
+    }
+]
--- a/package-lock.json
+++ b/package-lock.json
@@ -83,7 +83,6 @@
      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
      "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.3",
@@ -1465,7 +1464,6 @@
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=6.9.0"
      }
@@ -3165,7 +3163,6 @@
      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-7.1.18.tgz",
      "integrity": "sha512-DZgd6860dxcq3YX7UzIXeBr6m3UgXvo9acxp5jiJyIZXdR00Br9JwVkO7e0bUeTA2d3Z8dsmtAR84Y86NnH64Q==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@react-navigation/core": "^7.12.4",
        "escape-string-regexp": "^4.0.0",
@@ -3362,7 +3359,6 @@
      "integrity": "sha512-Qec1E3mhALmaspIrhWt9jkQMNdw6bReVu64mjvhbhq2NFPftLPVr+l1SZgmw/66WwBNpDh7ao5AT6gF5v41PFA==",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "csstype": "^3.0.2"
      }
@@ -3434,7 +3430,6 @@
      "integrity": "sha512-n1H6IcDhmmUEG7TNVSspGmiHHutt7iVKtZwRppD7e04wha5MrkV1h3pti9xQLcCMt6YWsncpoT0HMjkH1FNwWQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.46.0",
        "@typescript-eslint/types": "8.46.0",
@@ -3997,7 +3992,6 @@
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "license": "MIT",
-      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -4683,7 +4677,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.8.9",
        "caniuse-lite": "^1.0.30001746",
@@ -5823,7 +5816,6 @@
      "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -6259,7 +6251,6 @@
      "resolved": "https://registry.npmjs.org/expo/-/expo-54.0.13.tgz",
      "integrity": "sha512-F1puKXzw8ESnsbvaKdXtcIiyYLQ2kUHqP8LuhgtJS1wm6w55VhtOPg8yl/0i8kPbTA0YfD+KYdXjSfhPXgUPxw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.20.0",
        "@expo/cli": "54.0.11",
@@ -6327,7 +6318,6 @@
      "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-18.0.9.tgz",
      "integrity": "sha512-sqoXHAOGDcr+M9NlXzj1tGoZyd3zxYDy215W6E0Z0n8fgBaqce9FAYQE2bu5X4G629AYig5go7U6sQz7Pjcm8A==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@expo/config": "~12.0.9",
        "@expo/env": "~2.0.7"
@@ -6352,7 +6342,6 @@
      "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.9.tgz",
      "integrity": "sha512-xCoQbR/36qqB6tew/LQ6GWICpaBmHLhg/Loix5Rku/0ZtNaXMJv08M9o1AcrdiGTn/Xf/BnLu6DgS45cWQEHZg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "fontfaceobserver": "^2.1.0"
      },
@@ -6403,7 +6392,6 @@
      "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-8.0.8.tgz",
      "integrity": "sha512-MyeMcbFDKhXh4sDD1EHwd0uxFQNAc6VCrwBkNvvvufUsTYFq3glTA9Y8a+x78CPpjNqwNAamu74yIaIz7IEJyg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "expo-constants": "~18.0.8",
        "invariant": "^2.2.4"
@@ -10543,7 +10531,6 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -10563,7 +10550,6 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "scheduler": "^0.26.0"
      },
@@ -10600,7 +10586,6 @@
      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.81.4.tgz",
      "integrity": "sha512-bt5bz3A/+Cv46KcjV0VQa+fo7MKxs17RCcpzjftINlen4ZDUl0I6Ut+brQ2FToa5oD0IB0xvQHfmsg2EDqsZdQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@jest/create-cache-key-function": "^29.7.0",
        "@react-native/assets-registry": "0.81.4",
@@ -10658,7 +10643,6 @@
      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.28.0.tgz",
      "integrity": "sha512-0msfJ1vRxXKVgTgvL+1ZOoYw3/0z1R+Ked0+udoJhyplC2jbVKIJ8Z1bzWdpQRCV3QcQ87Op0zJVE5DhKK2A0A==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@egjs/hammerjs": "^2.0.17",
        "hoist-non-react-statics": "^3.3.0",
@@ -10684,7 +10668,6 @@
      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-4.1.3.tgz",
      "integrity": "sha512-GP8wsi1u3nqvC1fMab/m8gfFwFyldawElCcUSBJQgfrXeLmsPPUOpDw44lbLeCpcwUuLa05WTVePdTEwCLTUZg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "react-native-is-edge-to-edge": "^1.2.1",
        "semver": "7.7.2"
@@ -10713,7 +10696,6 @@
      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.1.tgz",
      "integrity": "sha512-/wJE58HLEAkATzhhX1xSr+fostLsK8Q97EfpfMDKo8jlOc1QKESSX/FQrhk7HhQH/2uSaox4Y86sNaI02kteiA==",
      "license": "MIT",
-      "peer": true,
      "peerDependencies": {
        "react": "*",
        "react-native": "*"
@@ -10724,7 +10706,6 @@
      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-4.16.0.tgz",
      "integrity": "sha512-yIAyh7F/9uWkOzCi1/2FqvNvK6Wb9Y1+Kzn16SuGfN9YFJDTbwlzGRvePCNTOX0recpLQF3kc2FmvMUhyTCH1Q==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "react-freeze": "^1.0.0",
        "react-native-is-edge-to-edge": "^1.2.1",
@@ -10740,7 +10721,6 @@
      "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.21.1.tgz",
      "integrity": "sha512-BeNsgwwe4AXUFPAoFU+DKjJ+CVQa3h54zYX77p7GVZrXiiNo3vl03WYDYVEy5R2J2HOPInXtQZB5gmj3vuzrKg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.18.6",
        "@react-native/normalize-colors": "^0.74.1",
@@ -10883,7 +10863,6 @@
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -12306,7 +12285,6 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -12513,7 +12491,6 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -13460,7 +13437,6 @@
      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
      "license": "MIT",
-      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }