my liked playbacks

src/screens/Library/components/BackTracks.js

@@ -3,7 +3,6 @@ import {
   FlatList,
   Image,
   Pressable,
-  Text,
   View,
   useWindowDimensions,
 } from "react-native";
@@ -26,7 +25,7 @@ const BackTracks = () => {
   return (
     <CardContainer label="Mes Playbacks">
       <View>
-        {items.length > 0 ? (
+        {items.length > 0 && (
           <FlatList
             onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
             data={items}
@@ -53,8 +52,6 @@ const BackTracks = () => {
               </View>
             )}
           />
-        ) : (
-          <Text>Aucun playback pour l'instant</Text>
         )}
       </View>
     </CardContainer>

src/screens/Library/components/LikedPlayback.js

@@ -1,21 +1,60 @@
-import { View, Text, Image } from "react-native";
-import React from "react";
+import React, { useState } from "react";
+import {
+  FlatList,
+  Image,
+  Pressable,
+  View,
+  useWindowDimensions,
+} from "react-native";
+import { Routes } from "../../../navigation";
+import { navigate } from "../../../navigation/NavigationService";
+import { useUserData } from "../../../providers/UserDataProvider";
 import CardContainer from "./CardContainer";
-import { Style } from "../../../styles";
-import { img } from "../../../assets";
 
 const LikedPlayback = () => {
+  const { userLikedPlaybacks } = useUserData();
+  const items = Array.isArray(userLikedPlaybacks)
+    ? userLikedPlaybacks.slice(0, 3)
+    : [];
+  const { width: screenWidth } = useWindowDimensions();
+  const [containerWidth, setContainerWidth] = useState(screenWidth);
+  const numColumns = 3;
+  const gap = 8;
+  const itemWidth = Math.max(
+    0,
+    Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
+  );
   return (
     <CardContainer label="Playbacks likés">
-      <View style={{ ...Style.containerRow, gap: 6 }}>
-        {Array.from({ length: 3 }).map((_, index) => (
-          <View style={{ flex: 1 }} key={index}>
-            <Image
-              source={img.placeholder3}
-              style={{ width: "100%", height: 172, borderRadius: 10 }}
-            />
-          </View>
-        ))}
+      <View>
+        {items.length > 0 && (
+          <FlatList
+            onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+            data={items}
+            numColumns={numColumns}
+            key={numColumns}
+            columnWrapperStyle={{ gap }}
+            keyExtractor={(item) => item.id}
+            renderItem={({ item }) => (
+              <View style={{ width: itemWidth }} key={item.id}>
+                <Pressable
+                  onPress={() =>
+                    navigate(Routes.Playbacks, { projectId: item.id })
+                  }
+                >
+                  <Image
+                    source={{ uri: item.coverUrl || "" }}
+                    style={{
+                      width: "100%",
+                      height: Math.round((itemWidth * 16) / 9),
+                      borderRadius: 10,
+                    }}
+                  />
+                </Pressable>
+              </View>
+            )}
+          />
+        )}
       </View>
     </CardContainer>
   );