feat(../V2/SearchView: copied working parts of music list

front/components/UI/MusicList.tsx

@@ -3,7 +3,7 @@ import { FlatList, HStack, View, useBreakpointValue, useTheme, Text, Row } from
 import { ActivityIndicator, StyleSheet } from 'react-native';
 import MusicItem, { MusicItemType } from './MusicItem';
 import ButtonBase from './ButtonBase';
-import { ArrowDown2, ArrowRotateLeft, Cup, Icon, Music } from 'iconsax-react-native';
+import { ArrowDown2, ArrowRotateLeft, Cup, Icon } from 'iconsax-react-native';
 import { translate } from '../../i18n/i18n';
 
 // Props type definition for MusicItemTitle.
@@ -98,11 +98,11 @@ type MusicListProps = {
  *   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.
  */
-const MusicListComponent = ({
+function MusicListComponent({
 	initialMusics,
 	loadMoreMusics,
 	musicsPerPage = loadMoreMusics ? 50 : initialMusics.length,
-}: MusicListProps) => {
+}: MusicListProps) {
 	// State initialization for MusicList.
 	// 'allMusics': all music items.
 	// 'displayedMusics': items displayed per page.
@@ -236,8 +236,8 @@ 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;
-// });
+const MusicList = memo(MusicListComponent, (prev, next) => {
+	return prev.initialMusics.length == next.initialMusics.length;
+});
 
-export default MusicListComponent;
+export default MusicList;

front/views/V2/SearchView.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import ScaffoldCC from '../../components/UI/ScaffoldCC';
 import SearchBarComponent from '../../components/V2/SearchBar';
 import { RouteProps, useNavigation } from '../../Navigation';
-import MusicList from '../../components/UI/MusicList';
 import { useQuery } from '../../Queries';
 import API from '../../API';
-import { View, Text } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import SearchHistory from '../../components/V2/SearchHistory';
-import MusicListComponent from '../../components/UI/MusicList';
 import MusicItem from '../../components/UI/MusicItem';
+import { FlatList, HStack, useBreakpointValue, useTheme, Text, Row } from 'native-base';
+import { translate } from '../../i18n/i18n';
+import { ArrowDown2, ArrowRotateLeft, Cup, Icon } from 'iconsax-react-native';
 
 export type searchProps = {
 	artist: number | undefined;
@@ -16,26 +17,102 @@ export type searchProps = {
 	query: string;
 };
 
-const TaRace = ({yes}: {yes: any[]}) => {
-	const navigation = useNavigation();
+const Oui = ({yes}: {yes: any[]}) => {
+	const { colors } = useTheme();
+	const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' });
+	const isBigScreen = screenSize === 'xl';
+
+	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,
+					}}
+				>
+					{translate('musicListTitleSong')}
+				</Text>
+				{[
+					{ text: translate('musicListTitleLastScore'), icon: ArrowRotateLeft },
+					{ text: translate('musicListTitleBestScore'), icon: Cup },
+				].map((value) => (
+					<Row
+			style={{
+				display: 'flex',
+				flex: 1,
+				maxWidth: isBigScreen ? 150 : 50,
+				height: '100%',
+				alignItems: 'center',
+				justifyContent: isBigScreen ? 'flex-end' : 'center',
+			}}
+		>
+			{/* Conditional rendering based on screen size. */}
+			{isBigScreen && (
+				<Text fontSize="lg" style={{ paddingRight: 8 }}>
+					{value.text}
+				</Text>
+			)}
+			{/* Icon with color based on the current color scheme. */}
+			<value.icon size={18} color={colors.text[700]} />
+		</Row>
+				))}
+			</HStack>
+		),
+		[colors.coolGray[500], isBigScreen]
+	);
 
 	return (
-		<View>
-			{yes.map((song) => (
-				<MusicItem
-				artist={song?.artist?.name ?? 'duh'}
-				song={song?.name}
-				image={song?.cover}
-				lastScore={42}
-				bestScore={42}
-				liked={true}
-				onLike={() => {
-					console.log('onLike');
-				}}
-				onPlay={() => navigation.navigate('Play', { songId: song.id })}
-				/>
-			))}
-		</View>
+		// <View>
+		// 	{yes.map((song) => (
+		// 		<MusicItem
+		// 		artist={song?.artist}
+		// 		song={song?.song}
+		// 		image={song?.cover}
+		// 		lastScore={42}
+		// 		bestScore={42}
+		// 		liked={true}
+		// 		onLike={() => {
+		// 			console.log('onLike');
+		// 		}}
+		// 		onPlay={() => navigation.navigate('Play', { songId: song.id })}
+		// 		/>
+		// 	))}
+		// </View>
+		<FlatList
+			nestedScrollEnabled
+			style={styles.container}
+			ListHeaderComponent={headerComponent}
+			data={yes}
+			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
+			// }
+		/>
 	);
 }
 
@@ -43,12 +120,7 @@ const TaRace = ({yes}: {yes: any[]}) => {
 const SearchView = (props: RouteProps<{}>) => {
 	const navigation = useNavigation();
 	const [searchQuery, setSearchQuery] = React.useState({} as searchProps);
-	const rawResult = useQuery(API.getAllSongs(searchQuery.query), {enabled: !!searchQuery.query,
-		onSuccess() {
-			setSearchQuery({} as searchProps);
-		}, onError() {
-			setSearchQuery({} as searchProps);
-		},});
+	const rawResult = useQuery(API.getAllSongs(searchQuery.query));
 	const result =
 	rawResult.data?.map((song) => ({
 		artist: song?.artist?.name ?? 'duh',
@@ -67,6 +139,12 @@ const SearchView = (props: RouteProps<{}>) => {
 	const handleLog = (query: searchProps) => {
 		console.log("got query: ", query.query);
 		setSearchQuery(query);
+		console.log('raw:' + rawResult);
+	}
+
+	const handleClear = () => {
+		console.log('stage cleared');
+		setSearchQuery({} as searchProps);
 	}
 
 	console.table('result:', result);
@@ -76,12 +154,26 @@ const SearchView = (props: RouteProps<{}>) => {
 		<ScaffoldCC routeName={props.route.name}>
 			<View style={{display: 'flex', gap: 20}} >
 				<SearchBarComponent onValidate={(data) => handleLog(data)} />
-				{result
-				? <TaRace yes={result} />
+				{result.length != 0
+				? <Oui yes={result} />
 				: <SearchHistory />}
 			</View>
 		</ScaffoldCC>
 	);
 };
 
-export default SearchView;
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		gap: 2,
+		borderRadius: 10,
+		overflow: 'hidden',
+	},
+	footerContainer: {
+		height: 60,
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+});
+
+export default SearchView;