merge main

front/components/V2/SearchHistory.tsx

@@ -0,0 +1,77 @@
+import { View } from 'react-native';
+import { Text, theme } from 'native-base';
+import { useQuery } from '../../Queries';
+import API from '../../API';
+import { translate } from '../../i18n/i18n';
+import { LoadingView } from '../Loading';
+import useColorScheme from '../../hooks/colorScheme';
+
+type historyRowProps = {
+	type: string;
+	query: string;
+	timestamp: Date;
+};
+
+const HistoryRowComponent = (props: historyRowProps) => {
+	const colorScheme = useColorScheme();
+
+	return (
+		<View
+			style={{
+				borderTopWidth: 1,
+				borderColor:
+					colorScheme == 'dark' ? theme.colors.coolGray[400] : theme.colors.coolGray[800],
+				paddingTop: 5,
+				display: 'flex',
+				flexDirection: 'row',
+				justifyContent: 'space-between',
+				alignItems: 'center',
+				gap: 10,
+			}}
+		>
+			<View>
+				<View
+					style={{
+						backgroundColor:
+							colorScheme == 'dark'
+								? theme.colors.coolGray[600]
+								: theme.colors.coolGray[400],
+						borderRadius: 8,
+						paddingVertical: 4,
+						paddingHorizontal: 12,
+						alignSelf: 'flex-start',
+					}}
+				>
+					<Text>{props.type}</Text>
+				</View>
+				<Text>{props.query}</Text>
+			</View>
+			<Text>{props.timestamp.toLocaleDateString(['fr-FR', 'en-GB'])}</Text>
+		</View>
+	);
+};
+
+const SearchHistoryComponent = () => {
+	const historyQuery = useQuery(API.getSearchHistory(0, 12));
+
+	if (historyQuery.isLoading) {
+		return <LoadingView />;
+	}
+
+	return (
+		<View style={{ display: 'flex', gap: 10 }}>
+			<Text fontSize={20}>{translate('histoHeading')}</Text>
+			<Text>{translate('histoDesc')}</Text>
+			{historyQuery.data?.map((data, index) => (
+				<HistoryRowComponent
+					key={index}
+					type={data.type}
+					query={data.query}
+					timestamp={data.timestamp}
+				/>
+			))}
+		</View>
+	);
+};
+
+export default SearchHistoryComponent;

front/i18n/Translations.ts

@@ -87,6 +87,8 @@ export const en = {
 	genreFilter: 'Genres',
 	favoriteFilter: 'Favorites',
 	searchBarPlaceholder: 'What are you looking for ?',
+	histoHeading: 'Your last researches',
+	histoDesc: 'Quickly find the tracks that you recently searched. Search and play away !',
 
 	// profile page
 	user: 'Profile',
@@ -411,6 +413,9 @@ export const fr: typeof en = {
 	genreFilter: 'Genres',
 	favoriteFilter: 'Favoris',
 	searchBarPlaceholder: 'Que recherchez vous ?',
+	histoHeading: 'Vos Dernières Recherches',
+	histoDesc:
+		'Retrouvez rapidement les morceaux que vous avez cherchés récemment. Continuez à explorer et à jouer !',
 
 	// Difficulty settings
 	diffBtn: 'Difficulté',
@@ -748,6 +753,9 @@ export const sp: typeof en = {
 	genreFilter: 'géneros',
 	favoriteFilter: 'Favorites',
 	searchBarPlaceholder: 'Qué estás buscando ?',
+	histoHeading: 'Tus últimas investigaciones',
+	histoDesc:
+		'Encuentra rápidamente las canciones que has estado buscando recientemente. ¡Sigue explorando y jugando!',
 
 	// Difficulty settings
 	diffBtn: 'Dificultad',

front/views/V2/SearchView.tsx

@@ -6,7 +6,7 @@ import MusicList from '../../components/UI/MusicList';
 import { useQuery } from '../../Queries';
 import API from '../../API';
 import { View } from 'react-native';
-import { Text } from 'native-base';
+import SearchHistory from '../../components/V2/SearchHistory';
 
 export type searchProps = {
 	artist: number | undefined;
@@ -50,8 +50,9 @@ const SearchView = (props: RouteProps<{}>) => {
 	return (
 		<ScaffoldCC routeName={props.route.name}>
 			<View style={{display: 'flex', gap: 20}} >
-			<SearchBarComponent onValidate={(data) => handleLog(data)} />
-			<MusicList initialMusics={result} />
+				<SearchBarComponent onValidate={(data) => handleLog(data)} />
+				{result ? <MusicList initialMusics={result} />
+				: <SearchHistory />}
 			</View>
 		</ScaffoldCC>
 	);