fix: history card request

expo/app/(tabs)/profile/index.tsx

@@ -7,8 +7,8 @@ export default function TabsProfile() {
   return (
     <ScrollView
       contentContainerStyle={{
-        paddingVertical: 18,
-        paddingHorizontal: 32,
+        paddingVertical: 32,
+        paddingHorizontal: 18,
       }}
     >
       <UserRoomHistory limit={10} />

expo/components/RoomHistoryInfoCard.tsx

@@ -1,58 +1,34 @@
 import { MaterialIcons } from "@expo/vector-icons";
-import { Room } from "commons/database-types-utils";
 import { Link } from "expo-router";
-import { useEffect, useState } from "react";
 import { StyleSheet } from "react-native";
 
-import Alert from "./Alert";
 import { Text, View } from "./Themed";
-import { getUserProfileFromUserProfileId } from "../lib/userProfile";
 
 interface RoomHistoryInfoCardProps {
-  room: Room;
+  createdAt: string;
+  hostUsername: string;
+  roomId: string;
+  roomName: string;
 }
 export default function RoomHistoryInfoCard({
-  room,
+  createdAt,
+  hostUsername,
+  roomId,
+  roomName,
 }: RoomHistoryInfoCardProps) {
-  const [username, setUsername] = useState("");
-  const [formatedDate, setFormatedDate] = useState("");
-
-  const getUsername = async (userProfileId: string) => {
-    const user = await getUserProfileFromUserProfileId(userProfileId);
-    if (!user) {
-      Alert.alert("Erreur lors de la récupération de l'utilisateur");
-      return;
-    }
-    return user.username;
-  };
-  useEffect(() => {
-    (async () => {
-      const username = await getUsername(room.host_user_profile_id || "");
-      if (!username) {
-        Alert.alert("Erreur lors de la récupération du nom d'utilisateur");
-        return;
-      }
-      const formattedDate = new Date(room.created_at).toLocaleDateString(
-        "fr-FR",
-        {
-          year: "numeric",
-          month: "long",
-          day: "numeric",
-        }
-      );
-
-      setUsername(username);
-      setFormatedDate(formattedDate);
-    })();
-  }, []);
+  const formattedDate = new Date(createdAt).toLocaleDateString("fr-FR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
 
   return (
-    <Link href={`/rooms/${room.id}`}>
+    <Link href={`/rooms/${roomId}`}>
       <View style={styles.layout}>
         <View style={styles.infos}>
-          <Text style={styles.roomName}>{room.name}</Text>
+          <Text style={styles.roomName}>{roomName}</Text>
           <Text style={styles.roomInfo}>
-            par {username} le {formatedDate}
+            par {hostUsername} le {formattedDate}
           </Text>
         </View>
         <MaterialIcons name="keyboard-arrow-right" size={32} color="black" />
@@ -67,11 +43,11 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
     width: "100%",
+    marginVertical: 8,
   },
 
   infos: {
     flexDirection: "column",
-    marginVertical: 8,
     gap: 4,
   },
 

expo/components/UserRoomHistory.tsx

@@ -1,49 +1,82 @@
-import { Room } from "commons/database-types-utils";
+import { QueryData } from "@supabase/supabase-js/dist/module/lib/types";
 import { useEffect, useState } from "react";
 import { FlatList, StyleSheet } from "react-native";
 
-import Alert from "./Alert";
 import RoomHistoryInfoCard from "./RoomHistoryInfoCard";
-import { View } from "./Themed";
+import { Text, View } from "./Themed";
 import H2 from "./text/H2";
 import { supabase } from "../lib/supabase";
 import { useUserProfile } from "../lib/userProfile";
 
+const historyRoom = supabase
+  .from("room_users")
+  .select("rooms!inner(created_at, name,id, host:user_profile(username))");
+
+type historyRoomType = QueryData<typeof historyRoom>;
+
 export default function UserRoomHistory({ limit = 5 }: { limit?: number }) {
-  const [rooms, setRooms] = useState<Room[]>([]);
+  const [rooms, setRooms] = useState<historyRoomType | null>([]);
   const user = useUserProfile();
 
   useEffect(() => {
-    (async () => {
-      if (!user) return;
-      const userId = user.user_profile_id;
-
-      const { error, data } = await supabase
-        .from("rooms")
-        .select("*, room_users(*)")
-        .eq("room_users.profile_id", userId)
-        .eq("is_active", false)
-        .order("created_at", { ascending: false })
+    if (!user) return;
+    /**
+     * Fetch all rooms where user is a member and the room is not active
+     * Tips : If the filter on a referenced table's column is not satisfied, the referenced
+     * table returns [] or null but the parent table is not filtered out.
+     * If you want to filter out the parent table rows, use the !inner hint
+     */
+    const fetchRoomHistory = async () => {
+      const { data } = await supabase
+        .from("room_users")
+        .select(
+          "rooms!inner(created_at, name, id, host:user_profile(username))"
+        )
+        .eq("rooms.is_active", false)
+        .eq("profile_id", user.user_profile_id)
+        .order("rooms(created_at)", { ascending: false })
         .limit(limit);
 
-      if (error) {
-        return Alert.alert(
-          "Erreur lors de la récupération des salles d'écoute"
-        );
+      if (!data || data.length === 0) {
+        return setRooms(null);
       }
 
       setRooms(data);
-    })();
+    };
+    fetchRoomHistory();
   }, [user]);
 
   return (
     <View style={{ gap: 10 }}>
       <H2>Historique</H2>
+      {rooms == null && (
+        <Text
+          style={{
+            fontFamily: "Outfit-Regular",
+            fontSize: 16,
+            color: "#B2B2B2",
+          }}
+        >
+          Vous n'avez aucune salle dans votre historique
+        </Text>
+      )}
       <FlatList
         data={rooms}
-        keyExtractor={(item) => item.id}
+        keyExtractor={(item) => item.rooms?.id ?? ""}
         renderItem={({ item }) => {
-          return <RoomHistoryInfoCard room={item} />;
+          if (!item.rooms)
+            return <Text>Impossible de charger cette salle</Text>;
+          return (
+            <RoomHistoryInfoCard
+              createdAt={item.rooms.created_at}
+              hostUsername={
+                item.rooms.host?.username ??
+                "Impossible de récupérer le nom de l'hôte"
+              }
+              roomId={item.rooms.id}
+              roomName={item.rooms.name}
+            />
+          );
         }}
       />
     </View>