fix - placeholder library

.eslintrc.js

@@ -1,7 +1,12 @@
 module.exports = {
-    extends: ["expo", "prettier"],
+  extends: ['expo', 'prettier'],
-    plugins: ["prettier"],
+  plugins: ['prettier'],
   rules: {
-        "prettier/prettier": "error",
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+      },
+    ],
   },
 };

src/screens/Library/Library.js

@@ -1,24 +1,57 @@
-import { View, Image, ScrollView, Pressable, Platform } from "react-native";
+import { View, Image, ScrollView, Pressable, Platform } from 'react-native';
-import React from "react";
+import React from 'react';
-import Page from "../../layouts/Page";
+import Page from '../../layouts/Page';
-import { background, icons } from "../../assets";
+import { background, icons } from '../../assets';
-import SearchBar from "../../components/SearchBar";
+import SearchBar from '../../components/SearchBar';
-import MyMusic from "./components/MyMusic";
+import MyMusic from './components/MyMusic';
-import BackTracks from "./components/BackTracks";
+import BackTracks from './components/BackTracks';
-import MyClips from "./components/MyClips";
+import MyClips from './components/MyClips';
-import LikedMusic from "./components/LikedMusic";
+import LikedMusic from './components/LikedMusic';
-import LikedPlayback from "./components/LikedPlayback";
+import LikedPlayback from './components/LikedPlayback';
-import LikedClips from "./components/LikedClips";
+import LikedClips from './components/LikedClips';
-import { responsiveHeight } from "react-native-responsive-dimensions";
+import { responsiveHeight } from 'react-native-responsive-dimensions';
-import MyPlaylist from "./components/MyPlaylist";
+import MyPlaylist from './components/MyPlaylist';
-import { navigate } from "../../navigation/NavigationService";
+import { navigate } from '../../navigation/NavigationService';
-import { Routes } from "../../navigation";
+import { Routes } from '../../navigation';
+import { useUser } from '../../providers/UserDataProvider';
+import { Text } from 'react-native';
+import { Palette } from '../../styles';
+import { FONT_FAMILY } from '../../styles/Fonts';
 
 const Library = () => {
+  const {
+    userProjects = [],
+    userPlaybacks = [],
+    userLikedProjects = [],
+    userLikedPlaybacks = [],
+    userPlaylists = [],
+  } = useUser() || {};
+
+  const hasMyMusic = Array.isArray(userProjects) && userProjects.length > 0;
+  const hasBackTracks =
+    Array.isArray(userPlaybacks) && userPlaybacks.length > 0;
+  const hasLikedMusic =
+    Array.isArray(userLikedProjects) && userLikedProjects.length > 0;
+  const hasLikedPlayback =
+    Array.isArray(userLikedPlaybacks) && userLikedPlaybacks.length > 0;
+  const hasPlaylists = Array.isArray(userPlaylists) && userPlaylists.length > 0;
+
+  const hasMyClips = false; // À modifier quand les vraies données seront disponibles
+  const hasLikedClips = false; // À modifier quand les vraies données seront disponibles
+
+  const hasAnySection =
+    hasMyMusic ||
+    hasBackTracks ||
+    hasLikedMusic ||
+    hasLikedPlayback ||
+    hasPlaylists ||
+    hasMyClips ||
+    hasLikedClips;
+
   return (
-    <Page backgroundImg={background.libraryBG} headerType="NONE">
+    <Page backgroundImg={background.libraryBG} headerType='NONE'>
       <View style={{ gap: 17, paddingBottom: 20 }}>
-        <Image source={icons.musicLandLogo} style={{ alignSelf: "center" }} />
+        <Image source={icons.musicLandLogo} style={{ alignSelf: 'center' }} />
         <Pressable onPress={() => navigate(Routes.Research)}>
           <SearchBar
             textInputProps={{
@@ -34,17 +67,37 @@ const Library = () => {
             flexGrow: 1,
             gap: 20,
             paddingBottom: responsiveHeight(20),
-            paddingTop: Platform.OS !== "android" ? 20 : 0,
+            paddingTop: Platform.OS !== 'android' ? 20 : 0,
           }}
-          showsVerticalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}>
-        >
+          {hasMyMusic && <MyMusic />}
-          <MyMusic />
+          {hasBackTracks && <BackTracks />}
-          <BackTracks />
+          {hasLikedMusic && <LikedMusic />}
-          <LikedMusic />
+          {hasMyClips && <MyClips />}
-          {/*<MyClips />*/}
+          {hasPlaylists && <MyPlaylist />}
-          <MyPlaylist />
+          {hasLikedPlayback && <LikedPlayback />}
-          <LikedPlayback />
+          {hasLikedClips && <LikedClips />}
-          {/*<LikedClips />*/}
+
+          {!hasAnySection && (
+            <View
+              style={{
+                flex: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingTop: 40,
+              }}>
+              <Text
+                style={{
+                  fontSize: 16,
+                  color: Palette.white,
+                  opacity: 0.8,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                  textAlign: 'center',
+                }}>
+                Rien n'est disponible encore ici
+              </Text>
+            </View>
+          )}
         </ScrollView>
       </View>
     </Page>