From 7a63a66da58a74be455380ecb5bcc9792b25cc00 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Fri, 12 Jan 2024 18:29:09 +0100 Subject: [PATCH] Rework music list --- front/components/UI/MusicItem.tsx | 2 - front/components/UI/MusicList.tsx | 234 +++++++++++------------------- front/views/MusicView.tsx | 58 ++------ 3 files changed, 91 insertions(+), 203 deletions(-) diff --git a/front/components/UI/MusicItem.tsx b/front/components/UI/MusicItem.tsx index 8d12953..6964387 100644 --- a/front/components/UI/MusicItem.tsx +++ b/front/components/UI/MusicItem.tsx @@ -184,8 +184,6 @@ function MusicItemComponent(props: MusicItemType) { ); } -// Using `memo` to optimize rendering performance by memorizing the component's output. -// This ensures that the component only re-renders when its props change. const MusicItem = memo(MusicItemComponent); export default MusicItem; diff --git a/front/components/UI/MusicList.tsx b/front/components/UI/MusicList.tsx index c3a2bd0..eddd92c 100644 --- a/front/components/UI/MusicList.tsx +++ b/front/components/UI/MusicList.tsx @@ -1,10 +1,14 @@ -import React, { useCallback, useState, useMemo, memo } from 'react'; +import { memo } from 'react'; import { FlatList, HStack, View, useBreakpointValue, useTheme, Text, Row } from 'native-base'; import { ActivityIndicator, StyleSheet } from 'react-native'; -import MusicItem, { MusicItemType } from './MusicItem'; +import MusicItem from './MusicItem'; import ButtonBase from './ButtonBase'; import { ArrowDown2, ArrowRotateLeft, Cup, Icon } from 'iconsax-react-native'; import { translate } from '../../i18n/i18n'; +import Song from '../../models/Song'; +import { useLikeSongMutation } from '../../utils/likeSongMutation'; +import { useNavigation } from '../../Navigation'; +import { LoadingView } from '../Loading'; // Props type definition for MusicItemTitle. interface MusicItemTitleProps { @@ -47,167 +51,99 @@ function MusicItemTitleComponent(props: MusicItemTitleProps) { // MusicItemTitle component, memoized for performance. const MusicItemTitle = memo(MusicItemTitleComponent); -/** - * Define the type for the MusicList component props. - */ -type MusicListProps = { - /** - * Music items available for display. Not all items may be displayed initially; - * depends on 'musicsPerPage'. - */ - initialMusics: MusicItemType[]; - - /** - * Function to load more music items asynchronously. Called with current page number - * and the list of all music items. Should return a Promise with additional music items. - */ - loadMoreMusics?: (page: number, musics: MusicItemType[]) => Promise; - - /** - * Number of music items to display per page. Determines initial and additional items displayed. - */ - musicsPerPage?: number; -}; - -/** - * `MusicList` Component - * - * A responsive and dynamic list component designed for displaying a collection of music items. - * It allows for loading and rendering an initial set of music items and provides functionality - * to load more items dynamically as needed. - * - * Features: - * - Dynamically loads and displays music items based on the provided `initialMusics` and `musicsPerPage`. - * - Supports pagination through the `loadMoreMusics` function, which loads additional music items when invoked. - * - Adapts its layout responsively based on screen size for optimal viewing across different devices. - * - Includes a loading indicator to inform users when additional items are being loaded. - * - Conditionally renders a 'Load More' button to fetch more music items, hidden when no more items are available. - * - * Usage: - * - * ```jsx - * loadAdditionalMusics(page, currentMusics)} - * musicsPerPage={10} - * /> - * ``` - * - * Note: - * - The `MusicList` is designed to handle a potentially large number of music items efficiently, - * making it suitable for use cases where the list of items is expected to grow over time. - * - The layout and styling are optimized for performance and responsiveness. - */ -function MusicListComponent({ - initialMusics, - loadMoreMusics, - musicsPerPage = loadMoreMusics ? 50 : initialMusics.length, -}: MusicListProps) { - // State initialization for MusicList. - // 'allMusics': all music items. - // 'displayedMusics': items displayed per page. - // 'currentPage': current page in pagination. - // 'loading': indicates if more items are being loaded. - // 'hasMoreMusics': flag for more items availability. - const [musicListState, setMusicListState] = useState({ - allMusics: initialMusics, - displayedMusics: initialMusics.slice(0, musicsPerPage), - currentPage: 1, - loading: false, - hasMoreMusics: initialMusics.length > musicsPerPage || !!loadMoreMusics, - }); +const Header = () => { const { colors } = useTheme(); const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' }); const isBigScreen = screenSize === 'xl'; - // Loads additional music items. - // Uses useCallback to avoid unnecessary redefinitions on re-renders. - const loadMoreMusicItems = useCallback(async () => { - if (musicListState.loading || !musicListState.hasMoreMusics) { - return; - } - - setMusicListState((prevState) => ({ ...prevState, loading: true })); - - let hasMoreMusics = true; - const nextEndIndex = (musicListState.currentPage + 1) * musicsPerPage; - let updatedAllMusics = musicListState.allMusics; - - if (loadMoreMusics && updatedAllMusics.length <= nextEndIndex) { - const newMusics = await loadMoreMusics(musicListState.currentPage, updatedAllMusics); - updatedAllMusics = [...updatedAllMusics, ...newMusics]; - hasMoreMusics = newMusics.length > 0; - } else { - hasMoreMusics = updatedAllMusics.length > nextEndIndex; - } - - setMusicListState((prevState) => ({ - ...prevState, - allMusics: updatedAllMusics, - displayedMusics: updatedAllMusics.slice(0, nextEndIndex), - currentPage: prevState.currentPage + 1, - loading: false, - hasMoreMusics: hasMoreMusics, - })); - }, [musicsPerPage, loadMoreMusics, musicListState]); - - // useMemo to optimize performance by memorizing the header, - // preventing unnecessary re-renders. - const headerComponent = useMemo( - () => ( - + - - {translate('musicListTitleSong')} - - {[ - { text: translate('musicListTitleLastScore'), icon: ArrowRotateLeft }, - { text: translate('musicListTitleBestScore'), icon: Cup }, - ].map((value) => ( - - ))} - - ), - [colors.coolGray[500], isBigScreen] + {translate('musicListTitleSong')} + + + + ); +}; + +function MusicListCC({ + musics, + refetch, + hasMore, + isFetching, + fetchMore, +}: { + musics?: Song[]; + refetch: () => Promise; + hasMore?: boolean; + isFetching: boolean; + fetchMore?: () => Promise; +}) { + const { mutateAsync } = useLikeSongMutation(); + const navigation = useNavigation(); + const { colors } = useTheme(); + + if (!musics) { + return ; + } - // FlatList: Renders list efficiently, only rendering visible items. return ( } - keyExtractor={(item) => item.artist + item.song} + ListHeaderComponent={Header} + data={musics} + renderItem={({ item: song }) => ( + { + mutateAsync({ songId: song.id, like: state }).then(() => refetch()); + }} + onPlay={() => navigation.navigate('Play', { songId: song.id })} + style={{ marginBottom: 2 }} + /> + )} + keyExtractor={(item) => item.id.toString()} ListFooterComponent={ - musicListState.hasMoreMusics ? ( + hasMore ? ( - {musicListState.loading ? ( + {isFetching ? ( ) : ( { + fetchMore?.(); + }} icon={ArrowDown2} /> )} @@ -232,10 +168,4 @@ const styles = StyleSheet.create({ }, }); -// Using `memo` to optimize rendering performance by memorizing the component's output. -// This ensures that the component only re-renders when its props change. -const MusicList = memo(MusicListComponent, (prev, next) => { - return prev.initialMusics.length == next.initialMusics.length; -}); - -export default MusicList; +export default MusicListCC; diff --git a/front/views/MusicView.tsx b/front/views/MusicView.tsx index 3bfb4b4..21a71b0 100644 --- a/front/views/MusicView.tsx +++ b/front/views/MusicView.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useBreakpointValue, useTheme } from 'native-base'; import { useWindowDimensions } from 'react-native'; import { @@ -11,57 +10,20 @@ import { } from 'react-native-tab-view'; import { Heart, Clock, StatusUp, FolderCross } from 'iconsax-react-native'; import { Scene } from 'react-native-tab-view/lib/typescript/src/types'; -import { useNavigation } from '../Navigation'; import { Translate, TranslationKey } from '../i18n/i18n'; -import MusicList from '../components/UI/MusicList'; import { useQuery } from '../Queries'; import API from '../API'; -import { LoadingView } from '../components/Loading'; -import { useLikeSongMutation } from '../utils/likeSongMutation'; import Song from '../models/Song'; - -type MusicListCCProps = { - data: Song[] | undefined; - isLoading: boolean; - refetch: () => void; -}; - -const MusicListCC = ({ data, isLoading, refetch }: MusicListCCProps) => { - const navigation = useNavigation(); - const { mutateAsync } = useLikeSongMutation(); - const user = useQuery(API.getUserInfo); - - const musics = (data ?? []).map((song) => { - const isLiked = song.likedByUsers?.some(({ userId }) => userId === user.data?.id) ?? false; - - return { - artist: song.artist!.name, - song: song.name, - image: song.cover, - lastScore: song.lastScore, - bestScore: song.bestScore, - liked: isLiked, - onLike: (state: boolean) => { - mutateAsync({ songId: song.id, like: state }).then(() => refetch()); - }, - onPlay: () => navigation.navigate('Play', { songId: song.id }), - }; - }); - - if (isLoading) { - return ; - } - - return ; -}; +import { useState } from 'react'; +import MusicListCC from '../components/UI/MusicList'; const FavoritesMusic = () => { const likedSongs = useQuery(API.getLikedSongs(['artist', 'SongHistory', 'likedByUsers'])); return ( x.song)} - isLoading={likedSongs.isLoading} + musics={likedSongs.data?.map((x) => x.song)} refetch={likedSongs.refetch} + isFetching={likedSongs.isFetching} /> ); }; @@ -70,11 +32,9 @@ const RecentlyPlayedMusic = () => { const playHistory = useQuery(API.getUserPlayHistory(['artist', 'SongHistory', 'likedByUsers'])); return ( x.song !== undefined).map((x) => x.song) as Song[] - } - isLoading={playHistory.isLoading} + musics={playHistory.data?.map((x) => x.song) as Song[]} refetch={playHistory.refetch} + isFetching={playHistory.isFetching} /> ); }; @@ -83,9 +43,9 @@ const StepUpMusic = () => { const nextStep = useQuery(API.getSongSuggestions(['artist', 'SongHistory', 'likedByUsers'])); return ( ); }; @@ -111,7 +71,7 @@ const getTabData = (key: string) => { const MusicTab = () => { const layout = useWindowDimensions(); - const [index, setIndex] = React.useState(0); + const [index, setIndex] = useState(0); const { colors } = useTheme(); const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); const isSmallScreen = screenSize === 'small';