[FEAT] MusicList component:
Implemented MusicList for displaying music items with optimized rendering and dynamic loading (code with comment).
This commit is contained in:
mathysPaul
@@ -1,11 +1,11 @@
|
||||
import { FlatList, HStack, View, useBreakpointValue, useTheme, Text, Row } from "native-base";
|
||||
import MusicItem, { MusicItemType } from "./MusicItem";
|
||||
import React, { useState } from "react";
|
||||
import { ActivityIndicator } from "react-native";
|
||||
import { ArrowDown2, ArrowRotateLeft, Chart2, Cup, Icon } from "iconsax-react-native";
|
||||
import { FlatList, HStack, View, useBreakpointValue, useTheme, Text, Row } from 'native-base';
|
||||
import MusicItem, { MusicItemType } from './MusicItem';
|
||||
import React, { useState } from 'react';
|
||||
import { ActivityIndicator } from 'react-native';
|
||||
import { ArrowDown2, ArrowRotateLeft, Chart2, Cup, Icon } from 'iconsax-react-native';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import ButtonBase from "./ButtonBase";
|
||||
import useColorScheme from "../../hooks/colorScheme";
|
||||
import ButtonBase from './ButtonBase';
|
||||
import useColorScheme from '../../hooks/colorScheme';
|
||||
|
||||
interface MusicItemTitleProps {
|
||||
text: string;
|
||||
@@ -41,95 +41,97 @@ const MusicItemTitle = (props: MusicItemTitleProps) => {
|
||||
};
|
||||
|
||||
type MusicListProps = {
|
||||
initialMusics: MusicItemType[];
|
||||
loadMoreMusics: (page: number) => Promise<MusicItemType[]>; // fonction pour charger plus de musiques
|
||||
initialMusics: MusicItemType[];
|
||||
loadMoreMusics: (page: number) => Promise<MusicItemType[]>; // fonction pour charger plus de musiques
|
||||
};
|
||||
|
||||
const MusicList: React.FC<MusicListProps> = ({initialMusics}) => {
|
||||
const [musicData, setMusicData] = useState<MusicItemType[]>(initialMusics);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { colors } = useTheme();
|
||||
const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' });
|
||||
const isSmallScreen = screenSize === 'small';
|
||||
const isBigScreen = screenSize === 'xl';
|
||||
const MusicList: React.FC<MusicListProps> = ({ initialMusics }) => {
|
||||
const [musicData, setMusicData] = useState<MusicItemType[]>(initialMusics);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { colors } = useTheme();
|
||||
const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' });
|
||||
const isSmallScreen = screenSize === 'small';
|
||||
const isBigScreen = screenSize === 'xl';
|
||||
|
||||
const loadMoreMusicItems = () => {
|
||||
if (!loading) {
|
||||
setLoading(true);
|
||||
setTimeout(() => {
|
||||
const moreItems: MusicItemType[] = [
|
||||
];
|
||||
setMusicData((currentItems) => [...currentItems, ...moreItems]);
|
||||
setLoading(false);
|
||||
}, 2000); // Simule un appel réseau avec un délai de 2 secondes.
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.container}>
|
||||
<HStack
|
||||
space={isSmallScreen ? 1 : 2}
|
||||
style={{
|
||||
backgroundColor: colors.coolGray[500],
|
||||
paddingHorizontal: isSmallScreen ? 8 : 16,
|
||||
paddingVertical: 12,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
fontSize="lg"
|
||||
style={{ flex: 4, width: '100%', justifyContent: 'center', paddingRight: 60 }}
|
||||
>
|
||||
Song
|
||||
</Text>
|
||||
{[
|
||||
{ text: 'level', icon: Chart2 },
|
||||
{ text: 'lastScore', icon: ArrowRotateLeft },
|
||||
{ text: 'BastScore', icon: Cup },
|
||||
].map((value) => (
|
||||
<MusicItemTitle
|
||||
key={value.text + 'key'}
|
||||
text={value.text}
|
||||
icon={value.icon}
|
||||
isBigScreen={isBigScreen}
|
||||
/>
|
||||
))}
|
||||
</HStack>
|
||||
<FlatList
|
||||
data={musicData}
|
||||
renderItem={({ item }) => <MusicItem style={{marginBottom: 2}} {...item} />}
|
||||
keyExtractor={(item) => item.artist + item.song}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.footerContainer}>
|
||||
{loading ? (
|
||||
<ActivityIndicator
|
||||
color={colors.primary[300]}
|
||||
/>
|
||||
) : (
|
||||
<ButtonBase
|
||||
style={{borderRadius: 999}}
|
||||
onPress={loadMoreMusicItems}
|
||||
icon={ArrowDown2}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
const loadMoreMusicItems = () => {
|
||||
if (!loading) {
|
||||
setLoading(true);
|
||||
setTimeout(() => {
|
||||
const moreItems: MusicItemType[] = [];
|
||||
setMusicData((currentItems) => [...currentItems, ...moreItems]);
|
||||
setLoading(false);
|
||||
}, 2000); // Simule un appel réseau avec un délai de 2 secondes.
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.container}>
|
||||
<HStack
|
||||
space={isSmallScreen ? 1 : 2}
|
||||
style={{
|
||||
backgroundColor: colors.coolGray[500],
|
||||
paddingHorizontal: isSmallScreen ? 8 : 16,
|
||||
paddingVertical: 12,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
fontSize="lg"
|
||||
style={{
|
||||
flex: 4,
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
paddingRight: 60,
|
||||
}}
|
||||
>
|
||||
Song
|
||||
</Text>
|
||||
{[
|
||||
{ text: 'level', icon: Chart2 },
|
||||
{ text: 'lastScore', icon: ArrowRotateLeft },
|
||||
{ text: 'BastScore', icon: Cup },
|
||||
].map((value) => (
|
||||
<MusicItemTitle
|
||||
key={value.text + 'key'}
|
||||
text={value.text}
|
||||
icon={value.icon}
|
||||
isBigScreen={isBigScreen}
|
||||
/>
|
||||
))}
|
||||
</HStack>
|
||||
<FlatList
|
||||
data={musicData}
|
||||
renderItem={({ item }) => <MusicItem style={{ marginBottom: 2 }} {...item} />}
|
||||
keyExtractor={(item) => item.artist + item.song}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.footerContainer}>
|
||||
{loading ? (
|
||||
<ActivityIndicator color={colors.primary[300]} />
|
||||
) : (
|
||||
<ButtonBase
|
||||
style={{ borderRadius: 999 }}
|
||||
onPress={loadMoreMusicItems}
|
||||
icon={ArrowDown2}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
borderRadius: 10,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
footerContainer : {
|
||||
height: 60,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}
|
||||
container: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
borderRadius: 10,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
footerContainer: {
|
||||
height: 60,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
export default MusicList;
|
||||
export default MusicList;
|
||||
|
||||
+208
-126
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useState, useMemo } from 'react';
|
||||
import React, { useCallback, useState, useMemo, 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';
|
||||
@@ -6,151 +6,233 @@ import ButtonBase from './ButtonBase';
|
||||
import { ArrowDown2, Chart2, ArrowRotateLeft, Cup, Icon } from 'iconsax-react-native';
|
||||
import useColorScheme from '../../hooks/colorScheme';
|
||||
|
||||
// Props type definition for MusicItemTitle.
|
||||
interface MusicItemTitleProps {
|
||||
/** Text to be displayed when the screen size is large. */
|
||||
text: string;
|
||||
|
||||
/** Icon component to be used. */
|
||||
icon: Icon;
|
||||
|
||||
/** Flag to indicate if the screen size is large enough to display additional text. */
|
||||
isBigScreen: boolean;
|
||||
}
|
||||
|
||||
const MusicItemTitle = React.memo((props: MusicItemTitleProps) => {
|
||||
const colorScheme = useColorScheme();
|
||||
function MusicItemTitleComponent(props: MusicItemTitleProps) {
|
||||
const colorScheme = useColorScheme();
|
||||
|
||||
return (
|
||||
<Row
|
||||
style={{
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
maxWidth: props.isBigScreen ? 150 : 50,
|
||||
height: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: props.isBigScreen ? 'flex-end' : 'center',
|
||||
}}
|
||||
>
|
||||
{props.isBigScreen && (
|
||||
<Text fontSize="lg" style={{ paddingRight: 8 }}>
|
||||
{props.text}
|
||||
</Text>
|
||||
)}
|
||||
<props.icon
|
||||
size={18}
|
||||
color={colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'}
|
||||
/>
|
||||
</Row>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Row
|
||||
style={{
|
||||
display: 'flex',
|
||||
flex: 1,
|
||||
maxWidth: props.isBigScreen ? 150 : 50,
|
||||
height: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: props.isBigScreen ? 'flex-end' : 'center',
|
||||
}}
|
||||
>
|
||||
{/* Conditional rendering based on screen size. */}
|
||||
{props.isBigScreen && (
|
||||
<Text fontSize="lg" style={{ paddingRight: 8 }}>
|
||||
{props.text}
|
||||
</Text>
|
||||
)}
|
||||
{/* Icon with color based on the current color scheme. */}
|
||||
<props.icon
|
||||
size={18}
|
||||
color={colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'}
|
||||
/>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
// MusicItemTitle component, memoized for performance.
|
||||
const MusicItemTitle = memo(MusicItemTitleComponent);
|
||||
|
||||
/**
|
||||
* Define the type for the MusicList component props.
|
||||
*/
|
||||
type MusicListProps = {
|
||||
initialMusics: MusicItemType[];
|
||||
loadMoreMusics: (page: number, musics: MusicItemType[]) => Promise<MusicItemType[]>;
|
||||
musicsPerPage: number;
|
||||
/**
|
||||
* 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;
|
||||
};
|
||||
|
||||
const MusicList: React.FC<MusicListProps> = React.memo(({ initialMusics, loadMoreMusics, musicsPerPage }) => {
|
||||
const [musicListState, setMusicListState] = useState({
|
||||
allMusics: initialMusics,
|
||||
displayedMusics: initialMusics.slice(0, musicsPerPage),
|
||||
currentPage: 1,
|
||||
loading: false,
|
||||
hasMoreMusics: true,
|
||||
});
|
||||
const { colors } = useTheme();
|
||||
const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' });
|
||||
const isBigScreen = screenSize === 'xl';
|
||||
/**
|
||||
* `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 }: 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: true,
|
||||
});
|
||||
const { colors } = useTheme();
|
||||
const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' });
|
||||
const isBigScreen = screenSize === 'xl';
|
||||
|
||||
const loadMoreMusicItems = useCallback(async () => {
|
||||
if (musicListState.loading || !musicListState.hasMoreMusics) {
|
||||
return;
|
||||
}
|
||||
// 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 }));
|
||||
setMusicListState((prevState) => ({ ...prevState, loading: true }));
|
||||
|
||||
let hasMoreMusics = true;
|
||||
const nextEndIndex = (musicListState.currentPage + 1) * musicsPerPage;
|
||||
let updatedAllMusics = musicListState.allMusics;
|
||||
let hasMoreMusics = true;
|
||||
const nextEndIndex = (musicListState.currentPage + 1) * musicsPerPage;
|
||||
let updatedAllMusics = musicListState.allMusics;
|
||||
|
||||
if (updatedAllMusics.length <= nextEndIndex) {
|
||||
const newMusics = await loadMoreMusics(musicListState.currentPage, updatedAllMusics);
|
||||
updatedAllMusics = [...updatedAllMusics, ...newMusics];
|
||||
hasMoreMusics = newMusics.length > 0;
|
||||
}
|
||||
if (updatedAllMusics.length <= nextEndIndex) {
|
||||
const newMusics = await loadMoreMusics(musicListState.currentPage, updatedAllMusics);
|
||||
updatedAllMusics = [...updatedAllMusics, ...newMusics];
|
||||
hasMoreMusics = newMusics.length > 0;
|
||||
}
|
||||
|
||||
setMusicListState(prevState => ({
|
||||
...prevState,
|
||||
allMusics: updatedAllMusics,
|
||||
displayedMusics: updatedAllMusics.slice(0, nextEndIndex),
|
||||
currentPage: prevState.currentPage + 1,
|
||||
loading: false,
|
||||
hasMoreMusics: hasMoreMusics,
|
||||
}));
|
||||
}, [musicsPerPage, loadMoreMusics, musicListState]);
|
||||
setMusicListState((prevState) => ({
|
||||
...prevState,
|
||||
allMusics: updatedAllMusics,
|
||||
displayedMusics: updatedAllMusics.slice(0, nextEndIndex),
|
||||
currentPage: prevState.currentPage + 1,
|
||||
loading: false,
|
||||
hasMoreMusics: hasMoreMusics,
|
||||
}));
|
||||
}, [musicsPerPage, loadMoreMusics, musicListState]);
|
||||
|
||||
const headerComponent = useMemo(() => (
|
||||
<HStack
|
||||
space={isBigScreen ? 1 : 2}
|
||||
style={{
|
||||
backgroundColor: colors.coolGray[500],
|
||||
paddingHorizontal: isBigScreen ? 8 : 16,
|
||||
paddingVertical: 12,
|
||||
marginBottom: 2,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
fontSize="lg"
|
||||
style={{ flex: 4, width: '100%', justifyContent: 'center', paddingRight: 60 }}
|
||||
>
|
||||
Song
|
||||
</Text>
|
||||
{[
|
||||
{ text: 'level', icon: Chart2 },
|
||||
{ text: 'lastScore', icon: ArrowRotateLeft },
|
||||
{ text: 'BastScore', icon: Cup },
|
||||
].map((value) => (
|
||||
<MusicItemTitle
|
||||
key={value.text + 'key'}
|
||||
text={value.text}
|
||||
icon={value.icon}
|
||||
isBigScreen={isBigScreen}
|
||||
/>
|
||||
))}
|
||||
</HStack>
|
||||
), [colors.coolGray[500], isBigScreen]);
|
||||
// useMemo to optimize performance by memorizing the header,
|
||||
// preventing unnecessary re-renders.
|
||||
const headerComponent = useMemo(
|
||||
() => (
|
||||
<HStack
|
||||
space={isBigScreen ? 1 : 2}
|
||||
style={{
|
||||
backgroundColor: colors.coolGray[500],
|
||||
paddingHorizontal: isBigScreen ? 8 : 16,
|
||||
paddingVertical: 12,
|
||||
marginBottom: 2,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
fontSize="lg"
|
||||
style={{
|
||||
flex: 4,
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
paddingRight: 60,
|
||||
}}
|
||||
>
|
||||
Song
|
||||
</Text>
|
||||
{[
|
||||
{ text: 'level', icon: Chart2 },
|
||||
{ text: 'lastScore', icon: ArrowRotateLeft },
|
||||
{ text: 'BastScore', icon: Cup },
|
||||
].map((value) => (
|
||||
<MusicItemTitle
|
||||
key={value.text + 'key'}
|
||||
text={value.text}
|
||||
icon={value.icon}
|
||||
isBigScreen={isBigScreen}
|
||||
/>
|
||||
))}
|
||||
</HStack>
|
||||
),
|
||||
[colors.coolGray[500], isBigScreen]
|
||||
);
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
style={styles.container}
|
||||
ListHeaderComponent={headerComponent}
|
||||
data={musicListState.displayedMusics}
|
||||
renderItem={({ item }) => <MusicItem style={{marginBottom: 2}} {...item} />}
|
||||
keyExtractor={(item) => item.artist + item.song}
|
||||
ListFooterComponent={musicListState.hasMoreMusics ?
|
||||
(<View style={styles.footerContainer}>
|
||||
{musicListState.loading ? (
|
||||
<ActivityIndicator color={colors.primary[300]} />
|
||||
) : (
|
||||
<ButtonBase
|
||||
style={{borderRadius: 999}}
|
||||
onPress={loadMoreMusicItems}
|
||||
icon={ArrowDown2}
|
||||
/>
|
||||
)}
|
||||
</View>) : null
|
||||
}
|
||||
/>
|
||||
);
|
||||
});
|
||||
// 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}
|
||||
ListFooterComponent={
|
||||
musicListState.hasMoreMusics ? (
|
||||
<View style={styles.footerContainer}>
|
||||
{musicListState.loading ? (
|
||||
<ActivityIndicator color={colors.primary[300]} />
|
||||
) : (
|
||||
<ButtonBase
|
||||
style={{ borderRadius: 999 }}
|
||||
onPress={loadMoreMusicItems}
|
||||
icon={ArrowDown2}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Styles for the MusicList component
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
borderRadius: 10,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
footerContainer : {
|
||||
height: 60,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}
|
||||
container: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
borderRadius: 10,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
footerContainer: {
|
||||
height: 60,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
// 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);
|
||||
|
||||
export default MusicList;
|
||||
|
||||
Reference in New Issue
Block a user