From 3353a17611a357ad602a26ad1b6902b3b4bf3cff Mon Sep 17 00:00:00 2001
From: danis <amaury.danis-cousandier@epitech.eu>
Date: Wed, 6 Dec 2023 22:41:02 +0100
Subject: [PATCH] feat(search histo v2): created search history component +
 historyRow + fetching da things

---
 front/components/V2/SearchBar.tsx     |  2 +-
 front/components/V2/SearchHistory.tsx | 69 +++++++++++++++++++++++++++
 front/i18n/Translations.ts            |  8 ++++
 front/views/V2/SearchView.tsx         |  7 ++-
 4 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 front/components/V2/SearchHistory.tsx

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}
 					</View>
 				</ScrollView>
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 (
+		<View
+			style={{
+				borderTopWidth: 1,
+				borderTopColor: '#9E9E9E',
+				paddingTop: 5,
+				display: 'flex',
+				flexDirection: 'row',
+				justifyContent: 'space-between',
+				alignItems: 'center',
+				gap: 10,
+			}}
+		>
+			<View>
+				<View
+					style={{
+						backgroundColor: 'gray',
+						borderRadius: 8,
+						paddingVertical: 4,
+						paddingHorizontal: 12,
+					}}
+				>
+					<Text>{props.type}</Text>
+				</View>
+				<Text>{props.query}</Text>
+			</View>
+			<Text>{props.timestamp.toLocaleDateString()}</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;
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 (
 		<ScaffoldCC routeName={props.route.name}>
-			<SearchBarComponent />
+			<View style={{ display: 'flex', gap: 50 }}>
+				<SearchBarComponent />
+				<SearchHistory />
+			</View>
 		</ScaffoldCC>
 	);
 };