Extend search page to support users too

Author: Advayp

frontend/app/main/(tabs)/search.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, SafeAreaView, ScrollView, Text } from 'react-native';
+import { StyleSheet, SafeAreaView, ScrollView, Text, View } from 'react-native';
 import { InputField } from '@/components/InputField';
 import CurveTextHeader from '@/components/CurveTextHeader';
 import { Button } from '@/components/Button';
@@ -11,35 +11,61 @@ import TrackCard from '@/components/TrackCard';
 export default function SearchScreen() {
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<Song[]>([]);
-
-  const router = useRouter();
+  const [queryTarget, setQueryTarget] = useState<'users' | 'songs'>('songs');
 
   const updateSearchResults = async (query: string) => {
-    const newSongs = await searchSongs(query);
-    setSearchResults(newSongs);
+    if (queryTarget === 'songs') {
+      const newSongs = await searchSongs(query);
+      setSearchResults(newSongs);
+    }
   };
 
   const handleSearch = (query: string) => {
     setSearchQuery(query);
-    updateSearchResults(query);
   };
 
   return (
     <SafeAreaView style={styles.container}>
       <CurveTextHeader additionalStyles={{ borderBottomWidth: 0 }} />
       <InputField
         label=""
-        placeholder="Search songs..."
+        placeholder={`Search ${queryTarget}...`}
         onChange={handleSearch}
         style={{ marginTop: 10, width: '90%' }}
       />
-      <Button
-        title="Liked Songs"
-        style={{ width: '90%', marginTop: 5, marginBottom: 10 }}
-        onPress={() => {
-          router.push('/likedSongs');
+      <View
+        style={{
+          flexDirection: 'row',
+          width: '90%',
+          gap: 5,
+          marginBottom: 3,
         }}
-      />
+      >
+        <Button
+          title="Users"
+          style={{
+            width: '49%',
+            borderWidth: queryTarget === 'users' ? 0 : 1,
+            borderColor: 'white',
+          }}
+          kind={queryTarget === 'users' ? 'primary' : 'secondary'}
+          onPress={() => {
+            setQueryTarget('users');
+          }}
+        />
+        <Button
+          title="Songs"
+          style={{
+            width: '49%',
+            borderWidth: queryTarget === 'songs' ? 0 : 1,
+            borderColor: 'white',
+          }}
+          kind={queryTarget === 'songs' ? 'primary' : 'secondary'}
+          onPress={() => {
+            setQueryTarget('songs');
+          }}
+        />
+      </View>
       <ScrollView style={{ width: '90%', backgroundColor: 'black' }}>
         {searchResults.map((song) => {
           return <TrackCard rawTrack={song} key={song.trackID} />;