From 37ce38135857b4a811d3ad121a5e57ed96d83b5a Mon Sep 17 00:00:00 2001
From: ddusichka <78527291+ddusichka@users.noreply.github.com>
Date: Tue, 3 Dec 2024 23:04:53 -0500
Subject: [PATCH] minor updates

---
 .../components/search/AlbumSearchCard.tsx     | 21 +-------
 frontend/components/search/Filter.tsx         |  2 +-
 frontend/components/search/ProfileChip.tsx    |  2 -
 frontend/components/search/SearchResults.tsx  | 54 +++++--------------
 frontend/components/search/SongChip.tsx       |  6 +--
 5 files changed, 18 insertions(+), 67 deletions(-)

diff --git a/frontend/components/search/AlbumSearchCard.tsx b/frontend/components/search/AlbumSearchCard.tsx
index 0c6e24e8..298a4fb7 100644
--- a/frontend/components/search/AlbumSearchCard.tsx
+++ b/frontend/components/search/AlbumSearchCard.tsx
@@ -28,17 +28,14 @@ const AlbumSearchCard: React.FC<AlbumSearchCardProps> = ({
         router.push({
           pathname: "/MediaPage",
           params: {
-            mediaType: type === "Song" ? "track" : "album",
+            mediaType: type,
             mediaId: id,
           },
         })
       }
     >
       <View style={styles.albumContainer}>
-        {/* Rank */}
-        <Text style={styles.rank}>{rank !== undefined ? `${rank}. ` : ""}</Text>
-
-        {/* Album Cover */}
+        <Text style={styles.rank}>{rank ? `${rank}. ` : ""}</Text>
         <View style={styles.coverContainer}>
           <Image
             source={{ uri: cover || placeholderImage }}
@@ -56,25 +53,11 @@ const AlbumSearchCard: React.FC<AlbumSearchCardProps> = ({
 
       <Text style={styles.albumName}>{album_name}</Text>
       <Text style={styles.artistName}>{artist_name}</Text>
-      {type && (
-        <Text style={styles.type}>
-          {type === "album" ? "Album" : type === "Song" ? "Song" : ""}
-        </Text>
-      )}
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
-  type: {
-    fontSize: 15,
-    color: "#9E9E9E",
-    marginTop: 2,
-    textAlign: "left",
-    marginLeft: 24,
-    fontStyle: "italic",
-  },
-
   cardContainer: {
     alignItems: "flex-start",
     marginRight: 25,
diff --git a/frontend/components/search/Filter.tsx b/frontend/components/search/Filter.tsx
index f67779ba..dcb0e3dd 100644
--- a/frontend/components/search/Filter.tsx
+++ b/frontend/components/search/Filter.tsx
@@ -15,7 +15,7 @@ const Filter: React.FC<FilterProps> = ({
   return (
     <View style={styles.container}>
       <View style={styles.buttonsRow}>
-        {filterOptions.map((filter) => (
+        {filterOptions.map((filter: FilterOption) => (
           <TouchableOpacity
             key={filter}
             onPress={() => onFilterChange(filter)}
diff --git a/frontend/components/search/ProfileChip.tsx b/frontend/components/search/ProfileChip.tsx
index 6ff5e08d..cd90c9d4 100644
--- a/frontend/components/search/ProfileChip.tsx
+++ b/frontend/components/search/ProfileChip.tsx
@@ -34,9 +34,7 @@ const ProfileChip: React.FC<ProfileChipProps> = ({
           style={styles.recordImage}
         />
         <View style={styles.profileImageContainer}>
-          console.log(profile_picture)
           <Image
-            // source={{ uri: profile_picture }}
             source={{ uri: profile_picture }}
             style={styles.profileImage}
             resizeMode="cover"
diff --git a/frontend/components/search/SearchResults.tsx b/frontend/components/search/SearchResults.tsx
index e0577002..160aee4e 100644
--- a/frontend/components/search/SearchResults.tsx
+++ b/frontend/components/search/SearchResults.tsx
@@ -20,8 +20,6 @@ interface SearchResultsProps {
   filter: "all" | "songs" | "albums" | "profile";
 }
 
-type FilterOption = "all" | "songs" | "albums" | "profile";
-
 const SearchResults: React.FC<SearchResultsProps> = ({
   songs,
   albums,
@@ -36,6 +34,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({
     return <Text style={styles.noResults}>No results found</Text>;
   }
 
+  const filterOptions: FilterOption[] = ["all", "songs", "albums", "profile"];
   const [selectedFilter, setSelectedFilter] = useState<FilterOption>("all");
 
   const handleFilterChange = (filter: FilterOption) => {
@@ -46,7 +45,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({
     <View style={styles.container}>
       <Filter
         currentFilter={selectedFilter}
-        filterOptions={["all", "songs", "albums", "profile"]}
+        filterOptions={filterOptions}
         onFilterChange={handleFilterChange}
       />
       <View style={styles.resultGrid}>
@@ -56,7 +55,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({
               {selectedFilter === "all" ? (
                 <TouchableOpacity onPress={() => setSelectedFilter("profile")}>
                   <Text style={styles.title}>
-                    Profiles <AntDesign name="right" size={24} color="black" />
+                    Profiles <AntDesign name="right" size={18} color="black" />
                   </Text>
                 </TouchableOpacity>
               ) : (
@@ -96,7 +95,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({
               {selectedFilter === "all" ? (
                 <TouchableOpacity onPress={() => setSelectedFilter("songs")}>
                   <Text style={styles.title}>
-                    Songs <AntDesign name="right" size={24} color="black" />
+                    Songs <AntDesign name="right" size={18} color="black" />
                   </Text>
                 </TouchableOpacity>
               ) : (
@@ -110,13 +109,13 @@ const SearchResults: React.FC<SearchResultsProps> = ({
                     flexDirection: "row",
                     flexWrap: "wrap",
                     justifyContent: "space-between",
-                    paddingHorizontal: 16,
                   }}
                 >
                   {songs?.map((song, idx) => (
                     <View style={{ width: "48%", marginBottom: 16 }}>
                       <AlbumSearchCard
-                        type={"Song"}
+                        rank={idx + 1}
+                        type={song.media_type}
                         key={idx}
                         id={song.id}
                         artist_name={song.artist_name}
@@ -131,13 +130,13 @@ const SearchResults: React.FC<SearchResultsProps> = ({
                   <View
                     style={{
                       flexDirection: "row",
-                      paddingHorizontal: 16,
                     }}
                   >
                     <View style={styles.gridContainer}>
                       {songs?.slice(0, 9).map((song, idx) => (
                         <View style={styles.gridItem}>
                           <SongChip
+                            rank={idx + 1}
                             key={idx}
                             id={song.id}
                             title={song.title}
@@ -157,7 +156,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({
               {selectedFilter === "all" ? (
                 <TouchableOpacity onPress={() => setSelectedFilter("albums")}>
                   <Text style={styles.title}>
-                    Albums <AntDesign name="right" size={24} color="black" />
+                    Albums <AntDesign name="right" size={18} color="black" />
                   </Text>
                 </TouchableOpacity>
               ) : (
@@ -168,7 +167,6 @@ const SearchResults: React.FC<SearchResultsProps> = ({
                   flexDirection: "row",
                   flexWrap: "wrap",
                   justifyContent: "space-between",
-                  paddingHorizontal: 16,
                 }}
               >
                 {songs.length === 0 ? (
@@ -178,6 +176,7 @@ const SearchResults: React.FC<SearchResultsProps> = ({
                     (album, idx) => (
                       <View style={styles.albumsList}>
                         <AlbumSearchCard
+                          rank={idx + 1}
                           type={"album"}
                           key={idx}
                           id={album.id}
@@ -207,40 +206,17 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 24,
     fontWeight: "bold",
-    padding: 16,
+    paddingVertical: 16,
   },
   container: {
     flex: 1,
-    paddingHorizontal: 16,
-  },
-  headerContainer: {
-    marginTop: 10,
-    marginBottom: 20,
-    fontSize: 16,
-    textAlign: "center",
-    fontWeight: "600",
-    color: "#000000",
-  },
-  section: {
-    marginTop: 20,
-  },
-  sectionTitle: {
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 10,
-    color: "#434343",
+    paddingHorizontal: 24,
   },
   loadingText: {
     textAlign: "center",
     marginTop: 20,
     color: "#666666",
   },
-  twoColumnList: {
-    flex: 1,
-    flexDirection: "row",
-    flexWrap: "wrap",
-    justifyContent: "space-between",
-  },
   resultGrid: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -251,12 +227,8 @@ const styles = StyleSheet.create({
     width: "100%",
   },
   albumsList: {
-    width: "48%",
+    width: "50%",
     marginBottom: 16,
-    paddingHorizontal: 4,
-  },
-  wrapper: {
-    width: "100%",
   },
   gridContainer: {
     flexDirection: "row",
@@ -269,7 +241,7 @@ const styles = StyleSheet.create({
   },
   noResults: {
     textAlign: "center",
-    marginTop: 20,
+    marginTop: 6,
     color: "#666666",
   },
 });
diff --git a/frontend/components/search/SongChip.tsx b/frontend/components/search/SongChip.tsx
index fb78a8fc..83df0b28 100644
--- a/frontend/components/search/SongChip.tsx
+++ b/frontend/components/search/SongChip.tsx
@@ -7,7 +7,7 @@ interface SongChipProps {
   title: string;
   artist_name: string;
   cover: string;
-  rank?: number;
+  rank: number;
 }
 
 const SongChip: React.FC<SongChipProps> = ({
@@ -30,9 +30,7 @@ const SongChip: React.FC<SongChipProps> = ({
         })
       }
     >
-      {rank !== undefined && (
-        <Text style={styles.rank}>{rank !== undefined ? `${rank}. ` : ""}</Text>
-      )}
+      {rank && <Text style={styles.rank}>{`${rank}. `}</Text>}
       <Image style={styles.cover} source={{ uri: cover }} />
       <View style={[styles.textContainer, !rank && styles.noRankTextContainer]}>
         <Text style={styles.title} numberOfLines={1}>