feat: top du mois

src/screens/HitParade/HitParade.js

@@ -49,35 +49,27 @@ const HitParade = () => {
   const [selectedCategory, setSelectedCategory] = useState('Chansons')
   const navigateToMusicDetails = useNavigateToMusicDetails()
   const { data: allSongs } = useDataFromRef({
-    ref: projectsRef.orderBy('updatedAt', 'desc'),
+    ref: projectsRef.where('hasSong', '==', true),
     format: (docs) => docs.filter((item) => item?.hasPlayback !== true),
     simpleRef: false,
     listener: true,
     condition: true,
   })
 
-  const previousMonthKey = useMemo(() => {
-    const now = new Date()
-    const target = new Date(now.getFullYear(), now.getMonth(), 1)
-    target.setMonth(target.getMonth() - 1)
-    const month = String(target.getMonth() + 1).padStart(2, '0')
-    return `${target.getFullYear()}-${month}`
-  }, [])
-
-  const { data: monthlyTopDoc } = useDataFromRef({
-    ref: firebase.firestore().collection('monthlyTopSongs').doc(previousMonthKey),
-    initialState: null,
-    simpleRef: true,
+  const { data: topMonthSongs } = useDataFromRef({
+    ref: projectsRef.where('monthViews', '>', 0).orderBy('monthViews', 'desc').limit(20),
+    format: (docs) => docs.filter((item) => item?.hasPlayback !== true),
+    simpleRef: false,
     listener: false,
     condition: true,
   })
 
   const songsList = useMemo(() => (Array.isArray(allSongs) ? allSongs : []), [allSongs])
 
-  const topMonthList = useMemo(() => {
-    const items = monthlyTopDoc?.topProjects
-    return Array.isArray(items) ? items : []
-  }, [monthlyTopDoc])
+  const topMonthList = useMemo(
+    () => (Array.isArray(topMonthSongs) ? topMonthSongs : []),
+    [topMonthSongs]
+  )
 
   // === RENDUS PAR PLATEFORME ===
   const renderSongsMobile = () => (
@@ -114,17 +106,17 @@ const HitParade = () => {
         paddingBottom: responsiveHeight(20),
       }}
       data={topMonthList}
-      keyExtractor={(item) => item.projectId}
-      renderItem={({ item }) => (
+      keyExtractor={(item) => item.id}
+      renderItem={({ item, index }) => (
         <SongCard
-          rank={item?.rank}
+          rank={index + 1}
           title={item?.title || 'Sans titre'}
           artist={item?.userName}
           coverUrl={item?.coverUrl || null}
           subscriptionLevel={getCreatorLevel(item)}
           onPress={() =>
             navigateToMusicDetails({
-              projectId: item?.projectId,
+              projectId: item?.id,
               songUrl: item?.songUrl,
             })
           }
@@ -157,17 +149,17 @@ const HitParade = () => {
 
   const renderTopMonthColumns = () => (
     <View style={{ gap: 10 }}>
-      {topMonthList.map((item) => (
+      {topMonthList.map((item, index) => (
         <SongCard
-          key={item.projectId}
-          rank={item?.rank}
+          key={item.id}
+          rank={index + 1}
           title={item?.title || 'Sans titre'}
           artist={item?.userName}
           coverUrl={item?.coverUrl || null}
           subscriptionLevel={getCreatorLevel(item)}
           onPress={() =>
             navigateToMusicDetails({
-              projectId: item?.projectId,
+              projectId: item?.id,
               songUrl: item?.songUrl,
             })
           }
@@ -360,7 +352,7 @@ const HitParade = () => {
     ? 'Coups de coeur des utilisateurs'
     : `Coups de coeur des utilisateurs catégorie ${selectedCategory}`
 
-  const heroSubtitle = 'Les 3 musiques les plus likées du mois reçoivent des tokens.'
+  const heroSubtitle = 'Les 3 musiques les plus écoutées du mois reçoivent des tokens.'
 
   const renderHero = () => (
     <View style={{ gap: 11, maxWidth: 800, width: '100%', alignSelf: 'center' }}>