diff --git a/src/screens/HitParade/HitParade.js b/src/screens/HitParade/HitParade.js index d80db3d..dc5d46e 100644 --- a/src/screens/HitParade/HitParade.js +++ b/src/screens/HitParade/HitParade.js @@ -3,7 +3,6 @@ import { FlatList, Image, Platform, - Pressable, ScrollView, StyleSheet, Text, @@ -20,17 +19,13 @@ import useDataFromRef from '../../hooks/useDataFromRef' import useNavigateToMusicDetails from '../../hooks/useNavigateToMusicDetails' import useSearch from '../../hooks/useSearch' import Page from '../../layouts/Page' -import { Routes } from '../../navigation' -import { navigate } from '../../navigation/NavigationService' import { Palette, Style } from '../../styles' import { FONT_FAMILY } from '../../styles/Fonts' import CreateLyricsHeader from '../Writing/components/CreateLyricsHeader' import MobileCoinBadge from '../../components/MobileCoinBadge' import ResearchHeader from '../Library/components/ResearchHeader' import SearchResultsList from '../Library/components/SearchResultsList' -import PlaybacksCard from './components/PlaybacksCard' import SongCard from './components/SongCard' -import BorderGradient from '../../components/BorderGradient/BorderGradient.web' const allowedPremiumLevels = new Set(['starter', 'pro', 'premium']) @@ -53,34 +48,37 @@ const chunkArray = (items = [], size = 10) => { const HitParade = () => { const [selectedCategory, setSelectedCategory] = useState('Chansons') const navigateToMusicDetails = useNavigateToMusicDetails() - const { data: topSongs } = useDataFromRef({ - ref: projectsRef.where('views', '>', 0).orderBy('views', 'desc').limit(20), + const { data: allSongs } = useDataFromRef({ + ref: projectsRef.orderBy('updatedAt', 'desc'), + format: (docs) => docs.filter((item) => item?.hasPlayback !== true), simpleRef: false, listener: true, condition: true, }) - const { data: topPlaybacks } = useDataFromRef({ - ref: projectsRef.where('views', '>', 0).orderBy('views', 'desc').limit(60), - format: (docs) => docs.filter((d) => d?.playbackUrl != null).slice(0, 20), - simpleRef: false, - listener: true, - condition: true, - }) - - const songsList = useMemo(() => (Array.isArray(topSongs) ? topSongs : []), [topSongs]) - - const playbackList = useMemo( - () => (Array.isArray(topPlaybacks) ? topPlaybacks : []), - [topPlaybacks] - ) - - const resolvePlaybackThumbnail = useCallback((project) => { - const candidates = [project?.thumbnailUrl, project?.songThumbnailUrl, project?.coverUrl] - const uri = candidates.find((value) => typeof value === 'string' && value.trim().length > 0) - return uri || null + 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, + 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]) + // === RENDUS PAR PLATEFORME === const renderSongsMobile = () => ( { gap: 10, paddingBottom: responsiveHeight(20), }} - data={Array.isArray(topSongs) ? topSongs : []} + data={songsList} keyExtractor={(item) => item.id} - renderItem={({ item, index }) => ( + renderItem={({ item }) => ( { /> ) - const renderPlaybacksMobile = () => ( + const renderTopMonthMobile = () => ( item.id} - renderItem={({ item, index }) => ( - item.projectId} + renderItem={({ item }) => ( + navigate(Routes.Playbacks, { projectId: item.id })} + onPress={() => + navigateToMusicDetails({ + projectId: item?.projectId, + songUrl: item?.songUrl, + }) + } /> )} /> @@ -132,10 +135,10 @@ const HitParade = () => { const renderSongList = () => ( - {songsList.map((item, idx) => ( + {songsList.map((item) => ( { ) - const renderPlaybackColumns = () => ( + const renderTopMonthColumns = () => ( - {playbackList.map((item, idx) => ( - ( + navigate(Routes.Playbacks, { projectId: item.id })} + onPress={() => + navigateToMusicDetails({ + projectId: item?.projectId, + songUrl: item?.songUrl, + }) + } /> ))} @@ -204,9 +212,9 @@ const HitParade = () => { } } songsList.forEach(collectUserId) - playbackList.forEach(collectUserId) + topMonthList.forEach(collectUserId) return Array.from(collected) - }, [playbackList, songsList]) + }, [songsList, topMonthList]) const fetchCreatorsByIds = useCallback( async (userIds) => { @@ -332,7 +340,7 @@ const HitParade = () => { const shouldBlurContent = shouldShowResults const handlePlayRandomSong = useCallback(() => { - const arr = Array.isArray(topSongs) ? topSongs : [] + const arr = songsList if (!arr.length) { console.warn('Aucune chanson disponible pour le moment.') @@ -346,17 +354,13 @@ const HitParade = () => { songUrl: randomSong?.songUrl, project: randomSong, }) - }, [navigateToMusicDetails, topSongs]) - - const categoryLabel = selectedCategory === 'Playback' ? 'playbacks' : 'chansons' + }, [navigateToMusicDetails, songsList]) const heroTitle = isWeb ? 'Coups de coeur des utilisateurs' : `Coups de coeur des utilisateurs catégorie ${selectedCategory}` - const heroSubtitle = isWeb - ? 'Les 3 chansons et playbacks les plus likées du mois reçoivent des tokens.' - : `Les 3 ${categoryLabel} les plus likées du mois reçoivent des tokens.` + const heroSubtitle = 'Les 3 musiques les plus likées du mois reçoivent des tokens.' const renderHero = () => ( @@ -453,11 +457,11 @@ const HitParade = () => { fontFamily: FONT_FAMILY.HelveticaNeueBold, }} > - Playbacks + Top du mois {/* */} - {renderPlaybackColumns()} + {renderTopMonthColumns()} @@ -474,7 +478,7 @@ const HitParade = () => { gap: 12, }} > - {['Chansons', 'Playback'].map((item, index) => ( + {['Chansons', 'Top du mois'].map((item, index) => ( { {selectedCategory === 'Chansons' && renderSongsMobile()} - {selectedCategory === 'Playback' && renderPlaybacksMobile()} + {selectedCategory === 'Top du mois' && renderTopMonthMobile()} {/* "Clips" pourra reprendre la même logique si tu le réactives */} ) diff --git a/src/utils/monthKey.js b/src/utils/monthKey.js new file mode 100644 index 0000000..d4cbcf0 --- /dev/null +++ b/src/utils/monthKey.js @@ -0,0 +1,9 @@ +export const buildMonthKey = (date = new Date()) => { + const target = date instanceof Date ? new Date(date) : new Date() + const year = target.getFullYear() + const month = String(target.getMonth() + 1).padStart(2, '0') + + return `${year}-${month}` +} + +export default buildMonthKey