diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx
index 0ec2e9f..4af042e 100644
--- a/front/components/V2/SearchBar.tsx
+++ b/front/components/V2/SearchBar.tsx
@@ -149,7 +149,7 @@ const SearchBarComponent = () => {
setArtist(artist.name);
}}
/>
- ))
+ ))
: null}
diff --git a/front/components/V2/SearchHistory.tsx b/front/components/V2/SearchHistory.tsx
new file mode 100644
index 0000000..19773bd
--- /dev/null
+++ b/front/components/V2/SearchHistory.tsx
@@ -0,0 +1,69 @@
+import { View } from 'react-native';
+import { Text } from 'native-base';
+import { useQuery } from '../../Queries';
+import API from '../../API';
+import { translate } from '../../i18n/i18n';
+import { LoadingView } from '../Loading';
+
+type historyRowProps = {
+ type: string;
+ query: string;
+ timestamp: Date;
+};
+
+const HistoryRowComponent = (props: historyRowProps) => {
+ return (
+
+
+
+ {props.type}
+
+ {props.query}
+
+ {props.timestamp.toLocaleDateString()}
+
+ );
+};
+
+const SearchHistoryComponent = () => {
+ const historyQuery = useQuery(API.getSearchHistory(0, 12));
+
+ if (historyQuery.isLoading) {
+ return ;
+ }
+
+ return (
+
+ {translate('histoHeading')}
+ {translate('histoDesc')}
+ {historyQuery.data?.map((data, index) => (
+
+ ))}
+
+ );
+};
+
+export default SearchHistoryComponent;
diff --git a/front/i18n/Translations.ts b/front/i18n/Translations.ts
index 491366e..c4dfc59 100644
--- a/front/i18n/Translations.ts
+++ b/front/i18n/Translations.ts
@@ -85,6 +85,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',
@@ -398,6 +400,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é',
@@ -725,6 +730,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',
diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx
index ca52594..a4034e7 100644
--- a/front/views/V2/SearchView.tsx
+++ b/front/views/V2/SearchView.tsx
@@ -2,12 +2,17 @@ import React from 'react';
import ScaffoldCC from '../../components/UI/ScaffoldCC';
import SearchBarComponent from '../../components/V2/SearchBar';
import { RouteProps } from '../../Navigation';
+import SearchHistory from '../../components/V2/SearchHistory';
+import { View } from 'react-native';
// eslint-disable-next-line @typescript-eslint/ban-types
const SearchView = (props: RouteProps<{}>) => {
return (
-
+
+
+
+
);
};