added a mobile view for the artist page and made some more filters an…

…d sorts

README.md

@@ -37,6 +37,12 @@ Third Party Tools and Libraries:
 - iTunes API
 - Giphy API
 
+## Assists
+Had help from:
+- Used [Box-Shadow](https://www.cssmatic.com/box-shadow) to preview box shadow values.
+- [HTML color picker](https://htmlcolorcodes.com/color-picker/) to pick color for Figma. Was not helpful honestly.
+- Google Fonts
+
 ## How to Install
 Probably not possible because of the custom .env file which requires Giphy Api key and the Firebase Config ¯\_(ツ)_/¯
 

src/Components/Header.jsx

@@ -21,7 +21,7 @@ function Header(){
 		check = profilePage
 
 	return(<>
-		<div className="Header">
+		<div aria-label="Header navigation to different parts of the website" className="Header">
 			<div aria-label="navigate to the charts" role="navigation"><NavLink to="/charts">Charts</NavLink></div>
 			<div aria-label="navigate to the search page" role="navigation"><NavLink to="/">Search</NavLink></div>
 			<div aria-label="navigate to the about us" role="navigation"><NavLink to="/landing">Landing</NavLink></div>

src/Pages/Album.jsx

@@ -130,6 +130,8 @@ export default function Album(){
             artistURL : song.artistId,
             genre: song.primaryGenreName,
             length: convertTime(song.trackTimeMillis),
+            musicSrc: song.previewUrl,
+            albumID: song.collectionId,
             user: userCookie.user
             //timeAdded: new Date().now(),
         }

src/Pages/Artist.jsx

@@ -7,7 +7,8 @@ import Header from "../Components/Header"
 import Player from "@/Components/Player"
 
 //import "./CSS/artist.css"
-import styles from "./CSS/artist.module.css"
+import "./CSS/artist.css"
+import "./CSS/artist_mobile.css"
 
 function Artist(){
 	const params = useParams()
@@ -17,6 +18,8 @@ function Artist(){
 	let [artistInfo, setAristInfo] = useState({})
 	let [dataResult, setDataResults] = useState([])
 	let [orderDate, setOrderDate] = useState("desc")
+	let [orderName, setOrderName] = useState("desc")
+
 
 	useEffect(()=>{
 		const artistID = params['id']
@@ -86,7 +89,6 @@ function Artist(){
 
 	function sortDate(){
 		let albumSorted = albums.sort((a, b) => {
-
 			const firstDate = new Date(a.releaseDate.slice(0, 10)) 
 			const seconDate = new Date(b.releaseDate.slice(0, 10)) 
 
@@ -107,6 +109,19 @@ function Artist(){
 
 	}
 
+	function sortName(specific = "desc"){
+		let albumSorted = []
+		if(orderName == "asc"){
+			albumSorted = albums.slice().sort((a, b) => a.collectionName.localeCompare(b.collectionName))
+			setOrderName("desc")
+		} else {
+			albumSorted = albums.slice().sort((a, b) => b.collectionName.localeCompare(a.collectionName))
+			setOrderName("asc")
+		}
+
+		setAlbums(albumSorted)
+	}
+
 	function getSingles(){
 		let albumFiltered = dataResult.filter((album) => {
 			let albumName = album.collectionName.toLowerCase()
@@ -127,45 +142,112 @@ function Artist(){
 		setAlbums(alb)
 	}
 
+	function selectExplicitness(event){
+		const selectedOption = event.target.value
+
+		if(selectedOption == "default"){
+			setDefault()
+			return
+		}
+		let albumFiltered = []
+
+		albumFiltered = dataResult.filter((album)=> album.collectionExplicitness == selectedOption)
+
+		/*
+		if(albums.length == 0)
+			albumFiltered = dataResult.filter((album)=> album.collectionExplicitness == selectedOption)
+		else
+			albumFiltered = albums.filter((album)=> album.collectionExplicitness == selectedOption)
+		*/
+
+		setAlbums(albumFiltered)
+
+
+	}
+
+	function hoverAlbum(event){
+		const id = event.target.getAttribute("id")
+		const target = albums[id]
+		//console.log(target)
+
+		let details = document.querySelector(".details-about-the-album")
+		details.innerHTML = ""
+
+		for(let key in target){
+			let node = document.createElement("p")
+
+			let inputText = ""
+			if(typeof target[key] == "string")
+				inputText = `${key} : ${ target[key].length < 50 ? target[key] : "too long" }`
+			else
+				inputText = `${key} : ${target[key]}`
+
+			if(inputText.includes("too long"))
+				continue
+
+
+
+			node.innerHTML = inputText
+			//details.appendChild(node)
+
+		}
+	}
+
 	return(<>
 		<Header></Header>
 
-		<div role="contentinfo" className={styles.artistSection}>
+		<div role="contentinfo" className="artistSection desktop-only">
 			<p>Artist Name: {artistInfo.artistName}</p>
 			<p>Primary Genre: {artistInfo.primaryGenreName}</p>
 
 			{artistInfo.artistType != "Artist" ? <p>Artist Type: {artistInfo.artistType}</p> : ""}
 
 			<a href={artistInfo.artistLinkUrl}>iTunes</a>
 
-			<form action="">
-				<input type="text" name="filter-albums" id="filter-albums" onChange={filterAlbums}/>
-				<button type="button" onClick={sortDate} >Sort by Date</button>
-				<button type="button" onClick={getSingles} > Singles Only </button>
-				<button type="button" onClick={setDefault} > Default </button>
+			<div className="artist-filter">
+				<p>Filtering and Sorting</p>
+				<input type="text" name="filter-albums" id="filter-albums" placeholder="filter albums here" onChange={filterAlbums}/>
+				<button type="button" onClick={ sortDate } >Sort by Date</button>
+				<button type="button" onClick={ sortName } >Sort by Name</button>
+				<button type="button" onClick={ getSingles } > Singles Only </button>
+				<button type="button" onClick={ setDefault } > Default </button>
 
+				<select name="explicitness" id="explicitness" onChange={selectExplicitness} >
+					<option value="default">Choose Explicitness</option>
+					<option value="explicit" >Explicit</option>
+					<option value="notExplicit">Not Explicit</option>
+					<option value="cleaned" >Clean</option>
+				</select>
+			</div>
+
+			<div className="details-about-the-album">
 
-			</form>
+
+			</div>
 
 
 		</div>
 
-		<div role="main" className={styles.albums}>
+		<div className="artist-info mobile-only">
+			<p>{artistInfo.artistName}</p>
+			<input type="text" name="filter-albums" id="filter-albums" placeholder="filter albums here" onChange={filterAlbums}/>
+
+
+		</div>
+
+		<div aria-label="list of albums" role="main" className="artist-albums">
 			{albums.map((value, index)=> {
 				const altText = `album cover for "${ value.collectionName }"`
 				const albumUrl = `/album/${ value.collectionId }`
 				return (
-					<Link key={index} to={albumUrl}>
-						<img className={ styles["artist-album-cover"] } alt={altText} src={ value.albumCover } /> 
+					<Link key={index} id={index} onMouseEnter={hoverAlbum} to={albumUrl}>
+						<img className="artist-album-cover" alt={ altText } src={ value.albumCover } /> 
 
 						<div>
-							<p role="definition" > { value.collectionName }</p>
-							<p>{ value.releaseDate.slice(0, 10) }</p>
-							<p>{ value.trackCount } { value.trackCount == 1 ? "Song" : "Songs" }</p>
-							<p>{  value.collectionExplicitness }</p>
-
-
-
+							<p aria-label="album name" role="definition" > { value.collectionName }</p>
+							<p aria-label="how release date">{ value.releaseDate.slice(0, 10) }</p>
+							<p aria-label="number of songs">{ value.trackCount } { value.trackCount == 1 ? "Song" : "Songs" }</p>
+							<p aria-label="how naughty the album is">{  value.collectionExplicitness }</p>
 						</div>
 
 
@@ -178,7 +260,8 @@ function Artist(){
 
 		<Helmet>
 			<title> Artist: { artistInfo.artistName ? artistInfo.artistName : "Loading" } </title>
-			<meta name="description" content="Browse Artist" />
+			<meta name="description" content={ `Music Catalogue for the Artist: "${artistInfo.artistName ? artistInfo.artistName : "Loading"}". Their entire discography available right here.` } />
+			<meta name="keywords" content={ `Music, iTunes, Apple, ${ artistInfo.artistName ? artistInfo.artistName + ", " + dataResult.slice(0, 10).map((a) => a.collectionName) : "Loading" }`} />
 
 		</Helmet>
 

src/Pages/CSS/artist.css

@@ -0,0 +1,71 @@
+@media screen and (min-width: 600px) {
+	.mobile-only {
+		display: none;
+	}
+}
+
+h1 {
+	text-align: center;
+}
+
+.artistSection {
+	position: fixed;
+	padding: 1vh 1vw;
+
+}
+
+/************albums************/
+.artist-albums {
+	margin-top: 1vh;
+	margin-left: 40vw;
+	display: flex;
+	flex-direction: column;
+}
+
+.artist-albums > a {
+	padding: 1vh 0;
+	color: black;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 1vw;
+}
+
+.artist-albums > a:nth-child(even) {
+	background-color: #eeeeee;
+}
+
+.artist-album-cover {
+	width: 10vw;
+	transition: width 1s;
+}
+
+.artist-album-cover:hover {
+	width: 15vw;
+}
+
+/************filtering************/
+.artist-filter {
+	display: flex;
+	flex-direction: column;
+	padding: 1vh 0;
+}
+
+.artist-filter > p {
+	text-align: center;
+	font-weight: 600;
+}
+
+.artist-filter > input {
+	border: 1px solid black;
+}
+
+.artist-filter > button {
+	border: 1px solid black;
+}
+
+.artist-filter > button:hover {
+	background-color: #eeeeee;
+}
+

src/Pages/CSS/artist_mobile.css

@@ -0,0 +1,63 @@
+@media screen and (max-width: 600px) {
+	/* Your mobile-specific styles here */
+	.desktop-only {
+		display: none;
+	}
+
+	.artist-albums {
+		margin-left: 0;
+
+		display: flex;
+		align-items: center;
+
+	}
+
+	.artist-albums > a {
+		padding: 3vw;
+		margin: 2vh 0;
+		width: 90vw;
+
+		border: 1px solid black;
+		border-radius: 1.11vw;
+
+		font-size: 3vw;
+	}
+
+	.artist-album-cover {
+		width: 22vw;
+		border-radius: 0.66vw;
+	}
+
+	.artist-album-cover:hover {
+		width: 35vw;
+	}
+
+	.artist-info {
+		position: fixed;
+		width: 100%;
+		background-color: #000000cc;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.artist-info > p {
+		text-align: center;
+		font-size: 5vw;
+		color: white;
+	}
+
+	.artist-info > input {
+		width: 83vw;
+		height: 3.75vh;
+		margin: 1.875vh 0;
+
+		border-radius: 32px;
+		text-align: center;
+
+		-webkit-box-shadow: inset 10px 10px 18px -6px rgba(33,33,33,1);
+		-moz-box-shadow: inset 10px 10px 18px -6px rgba(33,33,33,1);
+		box-shadow: inset 10px 10px 18px -6px rgba(33,33,33,1);
+	}
+  }