updating the mood in the profile section

README.md

@@ -43,6 +43,19 @@ Had help from:
 - [HTML color picker](https://htmlcolorcodes.com/color-picker/) to pick color for Figma. Was not helpful honestly.
 - Google Fonts
 
+## Music Player
+Music player was built using:
+- Audio element and react component
+- Redux for storing current time
+
+## If I had more time
+If I had more time I would have worked on:
+- Better music player by using the "new Audio(src)" with custom UI instead of the audio element. 
+- More sections in the landing page and more responsive transition sections
+- Dynamic music source in Ranking when browsing mobile
+- Improving the mood in the profile
+- More accessibility features based on accessibility chrome extensions
+
 ## How to Install
 Probably not possible because of the custom .env file which requires Giphy Api key and the Firebase Config ¯\_(ツ)_/¯
 

src/Pages/Profile.jsx

@@ -5,7 +5,7 @@ import { Navigate } from "react-router-dom";
 import { useCookies } from "react-cookie";
 import { useSelector } from "react-redux";
 
-import { collection, doc, getDocs, where, query, orderBy, limit, deleteDoc } from "firebase/firestore";
+import { collection, doc, getDoc, getDocs, where, query, orderBy, limit, deleteDoc, updateDoc } from "firebase/firestore";
 import { db } from '../../firebase'
 
 import Player from "@/Components/Player";
@@ -29,23 +29,23 @@ export default function Profile(){
 
 	const key = import.meta.env.VITE_keyGIF //process.env.keyGIF
 	let [query, setQuery] = useState(`find me`)
-	let url = `https://api.giphy.com/v1/gifs/translate?api_key=${key}&s=${query}`
 	let [embedURL, setEmbedURL] = useState('')
-	let [alt_text, setAltText] = useState('')
+	//let [alt_text, setAltText] = useState('')
 	let [playlist, setPlaylist] = useState([])
 	let [latest, setLatest] = useState("")
 	let [favGenre, setFavGenre] = useState("")
 	let [favArtist, setFavArtist] = useState("")	
 	const { currentTrack } = useSelector((state) => state.player)
-
+
+	let url = `https://api.giphy.com/v1/gifs/translate?api_key=${key}&s=${query}`
+
 	useEffect(() => {	
 		document.title = `Profile`
 
 		async function getGIF(){
 			let result = await fetch(url, { mode: 'cors' })
 			result = await result.json()
 			setEmbedURL(result.data.images.downsized_medium.url)
-			setAltText()
 		}
 
 		getGIF()
@@ -71,8 +71,23 @@ export default function Profile(){
 			setPlaylist(songSnap)
 		}
 
+		async function readMood(){
+			const docRef = doc(db, "user", userCookie.user)
+			const docSnap = await getDoc(docRef)
+			if(docSnap.exists()){
+				const mood = docSnap.data().mood
+				console.log(mood)
+				setQuery(mood)
+				url = `https://api.giphy.com/v1/gifs/translate?api_key=${key}&s=${query}`
+			}
+		}
+
 		getPlaylist(db)
 
+		readMood()
+
+
+
 
 	}, [])
 
@@ -141,9 +156,17 @@ export default function Profile(){
 
 	}, [playlist])
 
-	function updateQuery(event){
-		setQuery(event.target.value)
+	async function updateQuery(event){
+		const newMood = event.target.value
+		setQuery(newMood)
 		url = `https://api.giphy.com/v1/gifs/translate?api_key=${key}&s=${query}`
+
+		const ref = doc(db, "user", userCookie.user)
+		//console.log(userCookie.user)
+
+		await updateDoc(ref, { mood: newMood })
+
+
 	}
 
 	async function removeSong(event){