Skip to content

Commit

Permalink
minor updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@ddusichka
ddusichka committed Dec 4, 2024
1 parent b1cebaa commit 37ce381
Show file tree
Hide file tree
Showing 5 changed files with 18 additions and 67 deletions.
21 changes: 2 additions & 19 deletions frontend/components/search/AlbumSearchCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion frontend/components/search/Filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
2 changes: 0 additions & 2 deletions frontend/components/search/ProfileChip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
54 changes: 13 additions & 41 deletions frontend/components/search/SearchResults.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ interface SearchResultsProps {
filter: "all" | "songs" | "albums" | "profile";
}

type FilterOption = "all" | "songs" | "albums" | "profile";

const SearchResults: React.FC<SearchResultsProps> = ({
songs,
albums,
Expand All @@ -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) => {
Expand All @@ -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}>
Expand All @@ -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>
) : (
Expand Down Expand Up @@ -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>
) : (
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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>
) : (
Expand All @@ -168,7 +167,6 @@ const SearchResults: React.FC<SearchResultsProps> = ({
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-between",
paddingHorizontal: 16,
}}
>
{songs.length === 0 ? (
Expand All @@ -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}
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -269,7 +241,7 @@ const styles = StyleSheet.create({
},
noResults: {
textAlign: "center",
marginTop: 20,
marginTop: 6,
color: "#666666",
},
});
Expand Down
6 changes: 2 additions & 4 deletions frontend/components/search/SongChip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ interface SongChipProps {
title: string;
artist_name: string;
cover: string;
rank?: number;
rank: number;
}

const SongChip: React.FC<SongChipProps> = ({
Expand All @@ -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}>
Expand Down

0 comments on commit 37ce381

Please sign in to comment.