[IMP] InteractiveCC: split in InteractiveBase & AnimatedBase

Fixes the issue where consecutive likes on a track mistakenly
added it twice to the liked list. Now ensures correct toggling
between like and unlike.

.github/workflows/back.yml

@@ -12,27 +12,30 @@ jobs:
       pull-requests: read
     # Set job outputs to values from filter step
     outputs:
-      backend: ${{ steps.filter.outputs.backend }}
-      frontend: ${{ steps.filter.outputs.frontend }}
-      scoro: ${{ steps.filter.outputs.scoro }}
+      back: ${{ steps.filter.outputs.back }}
+      front: ${{ steps.filter.outputs.front }}
+      scorometer: ${{ steps.filter.outputs.scorometer }}
     steps:
     # For pull requests it's not necessary to checkout the code
     - uses: dorny/paths-filter@v2
       id: filter
       with:
         filters: |
-          backend:
-            - 'backend/**'
-          frontend:
-            - 'frontend/**'
-          scoro:
+          back:
+            - 'back/**'
+            - '.github/workflows/back.yml'
+          front:
+            - 'front/**'
+            - '.github/workflows/front.yml'
+          scorometer:
             - 'scorometer/**'
+            - '.github/workflows/scoro.yml'
   back_build:
     runs-on: ubuntu-latest
     timeout-minutes: 10
 
     needs: changes
-    if: ${{ needs.changes.outputs.backend == 'true' }}
+    if: ${{ needs.changes.outputs.back == 'true' }}
     defaults:
       run:
         working-directory: ./back
@@ -47,7 +50,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 15
     needs: [ back_build ]
-    if: ${{ needs.changes.outputs.frontend == 'true' }}
+    if: ${{ needs.changes.outputs.back == 'true' }}
 
     steps:
       - uses: actions/checkout@v3

.github/workflows/front.yml

@@ -12,28 +12,31 @@ jobs:
       pull-requests: read
     # Set job outputs to values from filter step
     outputs:
-      backend: ${{ steps.filter.outputs.backend }}
-      frontend: ${{ steps.filter.outputs.frontend }}
-      scoro: ${{ steps.filter.outputs.scoro }}
+      back: ${{ steps.filter.outputs.back }}
+      front: ${{ steps.filter.outputs.front }}
+      scorometer: ${{ steps.filter.outputs.scorometer }}
     steps:
     # For pull requests it's not necessary to checkout the code
     - uses: dorny/paths-filter@v2
       id: filter
       with:
         filters: |
-          backend:
-            - 'backend/**'
-          frontend:
-            - 'frontend/**'
-          scoro:
+          back:
+            - 'back/**'
+            - '.github/workflows/back.yml'
+          front:
+            - 'front/**'
+            - '.github/workflows/front.yml'
+          scorometer:
             - 'scorometer/**'
+            - '.github/workflows/scoro.yml'
   front_check:
     runs-on: ubuntu-latest
     defaults:
       run:
         working-directory: ./front
     needs: changes
-    if: ${{ needs.changes.outputs.frontend == 'true' }}
+    if: ${{ needs.changes.outputs.front == 'true' }}
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -54,7 +57,7 @@ jobs:
     defaults:
       run:
         working-directory: ./front
-    if: ${{ needs.changes.outputs.frontend == 'true' }}
+    if: ${{ needs.changes.outputs.front == 'true' }}
     needs: [ front_check ]
     steps:
       - uses: actions/checkout@v3

.github/workflows/scoro.yml

@@ -11,25 +11,28 @@ jobs:
       pull-requests: read
     # Set job outputs to values from filter step
     outputs:
-      backend: ${{ steps.filter.outputs.backend }}
-      frontend: ${{ steps.filter.outputs.frontend }}
-      scoro: ${{ steps.filter.outputs.scoro }}
+      back: ${{ steps.filter.outputs.back }}
+      front: ${{ steps.filter.outputs.front }}
+      scorometer: ${{ steps.filter.outputs.scorometer }}
     steps:
     # For pull requests it's not necessary to checkout the code
     - uses: dorny/paths-filter@v2
       id: filter
       with:
         filters: |
-          backend:
-            - 'backend/**'
-          frontend:
-            - 'frontend/**'
-          scoro:
+          back:
+            - 'back/**'
+            - '.github/workflows/back.yml'
+          front:
+            - 'front/**'
+            - '.github/workflows/front.yml'
+          scorometer:
             - 'scorometer/**'
+            - '.github/workflows/scoro.yml'
   scoro_test:
     runs-on: ubuntu-latest
     needs: changes
-    if: ${{ needs.changes.outputs.scoro == 'true' }}
+    if: ${{ needs.changes.outputs.scorometer == 'true' }}
 
     steps:
       - uses: actions/checkout@v3

front/components/UI/AnimatedBase.tsx

@@ -0,0 +1,128 @@
+import React, { useRef, useEffect } from 'react';
+import { Animated, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+
+type StyleObject = Record<string, any>;
+type InterpolatedStyleObject = Record<string, Animated.AnimatedInterpolation<any>>;
+
+interface AnimatedBaseProps {
+  style?: StyleObject;
+  defaultStyle: StyleObject;
+  hoverStyle: StyleObject;
+  pressStyle: StyleObject;
+  currentState: number;
+  duration?: number;
+  children?: React.ReactNode;
+  styleContainer?: StyleProp<ViewStyle>;
+}
+
+const AnimatedBase: React.FC<AnimatedBaseProps> = ({
+    style,
+    defaultStyle,
+    hoverStyle,
+    pressStyle,
+    currentState,
+    children,
+    duration = 250,
+    styleContainer,
+}) => {
+  const animatedValues = useRef<Record<string, Animated.Value>>({}).current;
+
+  const extractTransformKeys = (styleObject: StyleObject) => {
+    return styleObject.transform
+      ? styleObject.transform.map((t: any) => Object.keys(t)[0])
+      : [];
+  };
+
+  useEffect(() => {
+    const allStyleKeys = new Set([
+      ...Object.keys(defaultStyle),
+      ...Object.keys(hoverStyle),
+      ...Object.keys(pressStyle),
+    ]);
+
+    allStyleKeys.forEach((key) => {
+      if (!animatedValues[key]) {
+        animatedValues[key] = new Animated.Value(0);
+        console.log('key; ', key);
+      }
+    });
+
+    const allTransformKeys = new Set([
+      ...extractTransformKeys(defaultStyle),
+      ...extractTransformKeys(hoverStyle),
+      ...extractTransformKeys(pressStyle),
+    ]);
+
+    allTransformKeys.forEach((key) => {
+      if (!animatedValues[key]) {
+        animatedValues[key] = new Animated.Value(0);
+        console.log('keyxx; ', key);
+      }
+    });
+  }, [defaultStyle, hoverStyle, pressStyle]);
+
+  useEffect(() => {
+    animateToState(currentState);
+  }, [currentState]);
+
+  const getTransformValue = (key: string, style: StyleObject) => {
+    const transformObject = style.transform?.find((t: any) => t.hasOwnProperty(key));
+    return transformObject ? transformObject[key] : 0;
+  };
+
+  const interpolateStyle = (stateStyle: StyleObject): InterpolatedStyleObject => {
+    const interpolatedStyle: InterpolatedStyleObject = {};
+    const transform: any = [];
+
+    Object.keys(animatedValues).forEach((key) => {
+      if (stateStyle.transform?.some((t: any) => t.hasOwnProperty(key))) {
+        const defaultValue = getTransformValue(key, defaultStyle);
+        const hoverValue = getTransformValue(key, hoverStyle);
+        const pressValue = getTransformValue(key, pressStyle);
+
+        const interpolated = animatedValues[key]!.interpolate({
+          inputRange: [0, 1, 2],
+          outputRange: [defaultValue, hoverValue, pressValue],
+        });
+
+        transform.push({ [key]: interpolated });
+      } else if (stateStyle[key]) {
+        const defaultValue = defaultStyle[key] || 0;
+        const hoverValue = hoverStyle[key] !== undefined ? hoverStyle[key] : defaultValue;
+        const pressValue = pressStyle[key] !== undefined ? pressStyle[key] : defaultValue;
+
+        interpolatedStyle[key] = animatedValues[key]!.interpolate({
+          inputRange: [0, 1, 2],
+          outputRange: [defaultValue, hoverValue, pressValue],
+        });
+      }
+    });
+
+    if (transform.length > 0) {
+      interpolatedStyle.transform = transform;
+    }
+    
+    return interpolatedStyle;
+  };
+
+  const animateToState = (stateValue: number) => {
+    Object.keys(animatedValues).forEach((key) => {
+      Animated.timing(animatedValues[key]!, {
+        toValue: stateValue,
+        duration: duration,
+        useNativeDriver: false,
+      }).start();
+    });
+  };
+
+  const animatedStyle = StyleSheet.flatten([
+    styleContainer,
+    interpolateStyle(defaultStyle),
+    interpolateStyle(hoverStyle),
+    interpolateStyle(pressStyle),
+  ]);
+
+  return <Animated.View style={[style, animatedStyle]}>{children && children}</Animated.View>;
+};
+
+export default AnimatedBase;

front/components/UI/IconButton.tsx

@@ -30,7 +30,7 @@ type IconButtonProps = {
 	/**
 	 * Callback function triggered when the button is pressed.
 	 */
-	onPress?: () => void | Promise<void>;
+	onPress?: (state: boolean) => void | Promise<void>;
 
 	/**
 	 * Size of the icon.
@@ -183,7 +183,7 @@ const IconButton: React.FC<IconButtonProps> = ({
 	const toggleState = async () => {
 		// Execute onPress if provided.
 		if (onPress) {
-			await onPress();
+			await onPress(!isActiveState);
 		}
 
 		// Toggle isActiveState.

front/components/UI/InteractiveBaseV2.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+interface InteractiveBaseProps {
+    handleHoverIn: () => void;
+    handleHoverOut: () => void;
+    handlePressIn: () => void;
+    handlePressOut: () => void;
+    children: React.ReactNode;
+    style?: any;
+}
+
+const InteractiveBase: React.FC<InteractiveBaseProps> = ({
+    handleHoverIn,
+    handleHoverOut,
+    handlePressIn,
+    handlePressOut,
+    children,
+    style,
+}) => {
+  return (
+    <Pressable
+      style={style}
+      onHoverIn={handleHoverIn}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onHoverOut={handleHoverOut}
+    >
+      {children}
+    </Pressable>
+  );
+};
+
+export default InteractiveBase;

front/components/UI/InteractiveCC.tsx

@@ -5,19 +5,6 @@ import { Animated, StyleSheet, Pressable, ViewStyle, StyleProp } from 'react-nat
 type StyleObject = Record<string, any>;
 type InterpolatedStyleObject = Record<string, Animated.AnimatedInterpolation<any>>;
 
-const TRANSFORM_WHITELIST = {
-	translateX: true,
-	translateY: true,
-	scale: true,
-	scaleX: true,
-	scaleY: true,
-	rotate: true,
-	rotateX: true,
-	rotateY: true,
-	rotateZ: true,
-	perspective: true,
-};
-
 interface InteractiveCCProps {
 	defaultStyle: StyleObject;
 	hoverStyle: StyleObject;

front/components/UI/MusicItem.tsx

@@ -33,7 +33,7 @@ export interface MusicItemType {
 	style?: ViewStyle | ViewStyle[];
 
 	/** Callback function triggered when the like button is pressed. */
-	onLike: () => void;
+	onLike: (state: boolean) => void;
 
 	/** Callback function triggered when the song is played. */
 	onPlay: () => void;

front/components/UI/MusicList.tsx

@@ -237,8 +237,6 @@ 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) => {
-	console.log('AAAAA');
-	console.log(prev.initialMusics, next.initialMusics);
 	return prev.initialMusics.length == next.initialMusics.length;
 });
 

front/components/UI/useInteractionState.tsx

@@ -0,0 +1,48 @@
+import { useState, useCallback } from 'react';
+
+const InteractionStates = {
+  NORMAL: 0,
+  HOVER: 1,
+  PRESSED: 2,
+};
+
+interface InteractionStateProps {
+  onHoverIn?: () => void;
+  onHoverOut?: () => void;
+  onPressIn?: () => void;
+  onPressOut?: () => void;
+}
+
+const useInteractionState = ({ onHoverIn, onHoverOut, onPressIn, onPressOut }: InteractionStateProps = {}) => {
+  const [state, setState] = useState(InteractionStates.NORMAL);
+
+  const handleHoverIn = useCallback(() => {
+    setState(InteractionStates.HOVER);
+    if (onHoverIn) onHoverIn();
+  }, [onHoverIn]);
+
+  const handleHoverOut = useCallback(() => {
+    setState(InteractionStates.NORMAL);
+    if (onHoverOut) onHoverOut();
+  }, [onHoverOut]);
+
+  const handlePressIn = useCallback(() => {
+    setState(InteractionStates.PRESSED);
+    if (onPressIn) onPressIn();
+  }, [onPressIn]);
+
+  const handlePressOut = useCallback(() => {
+    setState(InteractionStates.HOVER);
+    if (onPressOut) onPressOut();
+  }, [onPressOut]);
+
+  return {
+    state,
+    handleHoverIn,
+    handleHoverOut,
+    handlePressIn,
+    handlePressOut,
+  };
+};
+
+export default useInteractionState;

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/MusicView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Center, useBreakpointValue, useTheme } from 'native-base';
-import { useWindowDimensions } from 'react-native';
+import { View, useBreakpointValue, useTheme, Text } from 'native-base';
+import { StyleProp, ViewStyle, useWindowDimensions } from 'react-native';
 import {
 	TabView,
 	SceneMap,
@@ -19,32 +19,132 @@ import { useQuery } from '../Queries';
 import API from '../API';
 import { LoadingView } from '../components/Loading';
 import { useLikeSongMutation } from '../utils/likeSongMutation';
+import Song from '../models/Song';
+import InteractiveCC from '../components/UI/InteractiveCC';
+import ButtonBase from '../components/UI/ButtonBase';
+import InteractiveBase from '../components/UI/InteractiveBaseV2';
+import AnimatedBase from '../components/UI/AnimatedBase';
+import useInteractionState from '../components/UI/useInteractionState';
 
-export const FavoritesMusic = () => {
+// import React from 'react';
+// import { Text, View } from 'react-native';
+// import InteractiveBase from './InteractiveBase';
+// import AnimatedBase from './AnimatedBase';
+// import useInteractionState from './useInteractionState';
+
+interface LinkBaseProps {
+	text: string;
+	style?: StyleProp<ViewStyle>;
+	textStyle?: StyleProp<ViewStyle>;
+	underlineStyle?: StyleProp<ViewStyle>;
+	fontSize?: number;
+	onPress: () => void;
+}
+
+const AnimatedLink = ({ text, style, textStyle, underlineStyle, fontSize = 14 }: LinkBaseProps) => {
+  const interaction = useInteractionState({
+	onPressOut: () => { console.log("AnimatedLink is activate")}
+  });
+  const { colors } = useTheme();
+
+  const defaultUnderlineStyle = { height: fontSize / 8, bottom: 0 };
+  const hoverUnderlineStyle = { height: fontSize * 1.5, bottom: 0 };
+  const pressUnderlineStyle = { height: 0, bottom: fontSize * 1.5 };
+
+  return (
+	<View style={{ flex: 1, alignItems: 'flex-start', position: 'relative'}}>
+		<InteractiveBase {...interaction} style={style}>
+			<AnimatedBase
+				defaultStyle={{ fontSize: 14 }}
+				hoverStyle={{ fontSize: 16 }}
+				pressStyle={{ fontSize: 8 }}
+				currentState={interaction.state}
+			>
+				<Text selectable={false} style={[textStyle]}>
+				{/* {fontSize: fontSize},  */}
+					{text}
+				</Text>
+			</AnimatedBase>
+			<AnimatedBase
+				style={[{
+					minWidth: '100%',
+					position: 'absolute',
+					zIndex: -1,
+					backgroundColor: colors.primary[600],
+				}, underlineStyle && {underlineStyle}]}
+				defaultStyle={{ ...defaultUnderlineStyle }}
+				hoverStyle={{ ...hoverUnderlineStyle }}
+				pressStyle={{ ...pressUnderlineStyle }}
+				currentState={interaction.state}
+			/>
+		</InteractiveBase>
+	</View>
+  );
+};
+
+
+type MusicListCCProps = {
+	data: Song[] | undefined;
+	isLoading: boolean;
+	refetch: () => void;
+};
+
+const MusicListCC = ({ data, isLoading, refetch }: MusicListCCProps) => {
 	const navigation = useNavigation();
-	const likedSongs = useQuery(API.getLikedSongs(['artist', 'SongHistory']));
 	const { mutateAsync } = useLikeSongMutation();
+	const user = useQuery(API.getUserInfo);
 
-	const musics =
-		likedSongs.data?.map((x) => ({
-			artist: x.song.artist!.name,
-			song: x.song.name,
-			image: x.song.cover,
-			lastScore: x.song.lastScore,
-			bestScore: x.song.bestScore,
-			liked: true,
-			onLike: () => {
-				mutateAsync({ songId: x.song.id, like: false }).then(() => likedSongs.refetch());
+	const musics = (data ?? []).map((song) => {
+		const isLiked = song.likedByUsers?.some(({ userId }) => userId === user.data?.id) ?? false;
+
+		return {
+			artist: song.artist!.name,
+			song: song.name,
+			image: song.cover,
+			lastScore: song.lastScore,
+			bestScore: song.bestScore,
+			liked: isLiked,
+			onLike: (state: boolean) => {
+				mutateAsync({ songId: song.id, like: state }).then(() => refetch());
 			},
-			onPlay: () => navigation.navigate('Play', { songId: x.song.id }),
-		})) ?? [];
+			onPlay: () => navigation.navigate('Play', { songId: song.id }),
+		};
+	});
 
-	if (likedSongs.isLoading) {
+	if (isLoading) {
 		return <LoadingView />;
 	}
+
+	return <MusicList initialMusics={musics} musicsPerPage={25} />;
+};
+
+const FavoritesMusic = () => {
+	const likedSongs = useQuery(API.getLikedSongs(['artist', 'SongHistory', 'likedByUsers']));
+	const { colors } = useTheme();
+	const interaction = useInteractionState();
+
 	return (
 		<>
-			{/* <View style={{margin: 30}}>
+			<View style={{margin: 30}}>
+				<AnimatedLink text="coucou Je suis un link zosidjofsijdfosijfosifdjo" onPress={() => console.log("Je suis le lien !!!")}/>
+				<InteractiveBase {...interaction} style={{ marginTop: 20 }}>
+					<AnimatedBase
+						defaultStyle={{
+							backgroundColor: colors.primary[300],
+						}}
+						hoverStyle={{
+							backgroundColor: colors.primary[900],
+						}}
+						pressStyle={{
+							backgroundColor: colors.primary[100],
+						}}
+						currentState={interaction.state}
+					>
+						<Text>
+							Text
+						</Text>
+					</AnimatedBase>
+				</InteractiveBase>
 				<InteractiveCC
 					// duration={80}
 					styleContainer={{
@@ -88,28 +188,37 @@ export const FavoritesMusic = () => {
 					style={{ marginTop: 20 }}
 					type={'filled'}
 				/>
-			</View> */}
-			<MusicList
-				initialMusics={musics}
-				// musicsPerPage={7}
+			</View>
+			<MusicListCC
+				data={likedSongs.data?.map((x) => x.song)}
+				isLoading={likedSongs.isLoading}
+				refetch={likedSongs.refetch}
 			/>
 		</>
 	);
 };
 
-export const RecentlyPlayedMusic = () => {
+const RecentlyPlayedMusic = () => {
+	const playHistory = useQuery(API.getUserPlayHistory(['artist', 'SongHistory', 'likedByUsers']));
 	return (
-		<Center style={{ flex: 1 }}>
-			<Translate translationKey="recentlyPlayed" />
-		</Center>
+		<MusicListCC
+			data={
+				playHistory.data?.filter((x) => x.song !== undefined).map((x) => x.song) as Song[]
+			}
+			isLoading={playHistory.isLoading}
+			refetch={playHistory.refetch}
+		/>
 	);
 };
 
-export const StepUpMusic = () => {
+const StepUpMusic = () => {
+	const nextStep = useQuery(API.getSongSuggestions(['artist', 'SongHistory', 'likedByUsers']));
 	return (
-		<Center style={{ flex: 1 }}>
-			<Translate translationKey="musicTabStepUp" />
-		</Center>
+		<MusicListCC
+			data={nextStep.data ?? []}
+			isLoading={nextStep.isLoading}
+			refetch={nextStep.refetch}
+		/>
 	);
 };
 

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>
 	);
 };