fix(searchViewV2): the fat of the land

front/API.ts

@@ -277,10 +277,10 @@ export default class API {
 		};
 	}
 
-	public static getAllSongs(include?: SongInclude[]): Query<Song[]> {
+	public static getAllSongs(falseQuery: string, include?: SongInclude[]): Query<Song[]> {
 		include ??= [];
 		return {
-			key: ['songs', include],
+			key: ['songs', falseQuery, include],
 			exec: () =>
 				API.fetch(
 					{

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 } from 'iconsax-react-native';
+import { ArrowDown2, ArrowRotateLeft, Cup, Icon, Music } 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.
  */
-function MusicListComponent({
+const 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 MusicList;
+export default MusicListComponent;

front/views/V2/SearchView.tsx

@@ -5,8 +5,10 @@ import { RouteProps, useNavigation } from '../../Navigation';
 import MusicList from '../../components/UI/MusicList';
 import { useQuery } from '../../Queries';
 import API from '../../API';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
 import SearchHistory from '../../components/V2/SearchHistory';
+import MusicListComponent from '../../components/UI/MusicList';
+import MusicItem from '../../components/UI/MusicItem';
 
 export type searchProps = {
 	artist: number | undefined;
@@ -14,16 +16,39 @@ export type searchProps = {
 	query: string;
 };
 
+const TaRace = ({yes}: {yes: any[]}) => {
+	const navigation = useNavigation();
+
+	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>
+	);
+}
+
 // eslint-disable-next-line @typescript-eslint/ban-types
 const SearchView = (props: RouteProps<{}>) => {
 	const navigation = useNavigation();
 	const [searchQuery, setSearchQuery] = React.useState({} as searchProps);
-	const rawResult = useQuery(API.searchSongs(searchQuery), {enabled: !!searchQuery.query, onSuccess() {
-		
-		setSearchQuery({} as searchProps);
-	}, onError() {
-		setSearchQuery({} as searchProps);
-	},});
+	const rawResult = useQuery(API.getAllSongs(searchQuery.query), {enabled: !!searchQuery.query,
+		onSuccess() {
+			setSearchQuery({} as searchProps);
+		}, onError() {
+			setSearchQuery({} as searchProps);
+		},});
 	const result =
 	rawResult.data?.map((song) => ({
 		artist: song?.artist?.name ?? 'duh',
@@ -51,7 +76,8 @@ const SearchView = (props: RouteProps<{}>) => {
 		<ScaffoldCC routeName={props.route.name}>
 			<View style={{display: 'flex', gap: 20}} >
 				<SearchBarComponent onValidate={(data) => handleLog(data)} />
-				{result ? <MusicList initialMusics={result} />
+				{result
+				? <TaRace yes={result} />
 				: <SearchHistory />}
 			</View>
 		</ScaffoldCC>