Rework music list

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;

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<MusicItemType[]>;
-
-	/**
-	 * 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
- * <MusicList
- *   initialMusics={initialMusicData}
- *   loadMoreMusics={(page, currentMusics) => 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(
-		() => (
-			<HStack
-				space={isBigScreen ? 1 : 2}
+	return (
+		<HStack
+			space={isBigScreen ? 1 : 2}
+			style={{
+				backgroundColor: colors.coolGray[500],
+				paddingHorizontal: isBigScreen ? 8 : 16,
+				paddingVertical: 12,
+				marginBottom: 2,
+			}}
+		>
+			<Text
+				fontSize="lg"
 				style={{
-					backgroundColor: colors.coolGray[500],
-					paddingHorizontal: isBigScreen ? 8 : 16,
-					paddingVertical: 12,
-					marginBottom: 2,
+					flex: 4,
+					width: '100%',
+					justifyContent: 'center',
+					paddingRight: 60,
 				}}
 			>
-				<Text
-					fontSize="lg"
-					style={{
-						flex: 4,
-						width: '100%',
-						justifyContent: 'center',
-						paddingRight: 60,
-					}}
-				>
-					{translate('musicListTitleSong')}
-				</Text>
-				{[
-					{ text: translate('musicListTitleLastScore'), icon: ArrowRotateLeft },
-					{ text: translate('musicListTitleBestScore'), icon: Cup },
-				].map((value) => (
-					<MusicItemTitle
-						key={value.text + 'key'}
-						text={value.text}
-						icon={value.icon}
-						isBigScreen={isBigScreen}
-					/>
-				))}
-			</HStack>
-		),
-		[colors.coolGray[500], isBigScreen]
+				{translate('musicListTitleSong')}
+			</Text>
+			<MusicItemTitle
+				text={translate('musicListTitleLastScore')}
+				icon={ArrowRotateLeft}
+				isBigScreen={isBigScreen}
+			/>
+			<MusicItemTitle
+				text={translate('musicListTitleBestScore')}
+				icon={Cup}
+				isBigScreen={isBigScreen}
+			/>
+		</HStack>
 	);
+};
+
+function MusicListCC({
+	musics,
+	refetch,
+	hasMore,
+	isFetching,
+	fetchMore,
+}: {
+	musics?: Song[];
+	refetch: () => Promise<unknown>;
+	hasMore?: boolean;
+	isFetching: boolean;
+	fetchMore?: () => Promise<unknown>;
+}) {
+	const { mutateAsync } = useLikeSongMutation();
+	const navigation = useNavigation();
+	const { colors } = useTheme();
+
+	if (!musics) {
+		return <LoadingView />;
+	}
 
-	// FlatList: Renders list efficiently, only rendering visible items.
 	return (
 		<FlatList
 			style={styles.container}
-			ListHeaderComponent={headerComponent}
-			data={musicListState.displayedMusics}
-			renderItem={({ item }) => <MusicItem style={{ marginBottom: 2 }} {...item} />}
-			keyExtractor={(item) => item.artist + item.song}
+			ListHeaderComponent={Header}
+			data={musics}
+			renderItem={({ item: song }) => (
+				<MusicItem
+					artist={song.artist!.name}
+					song={song.name}
+					image={song.cover}
+					lastScore={song.lastScore}
+					bestScore={song.bestScore}
+					liked={song.isLiked!}
+					onLike={(state: boolean) => {
+						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 ? (
 					<View style={styles.footerContainer}>
-						{musicListState.loading ? (
+						{isFetching ? (
 							<ActivityIndicator color={colors.primary[300]} />
 						) : (
 							<ButtonBase
 								style={{ borderRadius: 999 }}
-								onPress={loadMoreMusicItems}
+								onPress={() => {
+									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;