From bb7a17fc22a5b1a25bf7e8d67ea764bdc7fca0be Mon Sep 17 00:00:00 2001 From: danis Date: Sun, 7 Jan 2024 17:22:02 +0100 Subject: [PATCH] feat(../V2/SearchView: copied working parts of music list --- front/components/UI/MusicList.tsx | 14 +-- front/views/V2/SearchView.tsx | 154 ++++++++++++++++++++++++------ 2 files changed, 130 insertions(+), 38 deletions(-) diff --git a/front/components/UI/MusicList.tsx b/front/components/UI/MusicList.tsx index 2fff37d..4272ccd 100644 --- a/front/components/UI/MusicList.tsx +++ b/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; diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index b71a764..4124492 100644 --- a/front/views/V2/SearchView.tsx +++ b/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( + () => ( + + + {translate('musicListTitleSong')} + + {[ + { text: translate('musicListTitleLastScore'), icon: ArrowRotateLeft }, + { text: translate('musicListTitleBestScore'), icon: Cup }, + ].map((value) => ( + + {/* Conditional rendering based on screen size. */} + {isBigScreen && ( + + {value.text} + + )} + {/* Icon with color based on the current color scheme. */} + + + ))} + + ), + [colors.coolGray[500], isBigScreen] + ); return ( - - {yes.map((song) => ( - { - console.log('onLike'); - }} - onPlay={() => navigation.navigate('Play', { songId: song.id })} - /> - ))} - + // + // {yes.map((song) => ( + // { + // console.log('onLike'); + // }} + // onPlay={() => navigation.navigate('Play', { songId: song.id })} + // /> + // ))} + // + } + keyExtractor={(item) => item.artist + item.song} + // ListFooterComponent={ + // musicListState.hasMoreMusics ? ( + // + // {musicListState.loading ? ( + // + // ) : ( + // + // )} + // + // ) : 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<{}>) => { handleLog(data)} /> - {result - ? + {result.length != 0 + ? : } ); }; -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; \ No newline at end of file