\n
\n );\n}\n\nexport default HitPreview;","import \"./Spinner.css\";\n\nfunction Spinner() {\n return (\n Title: {props.hit.title}
\nArtist: {props.hit.primary_artist.name}
\n \n \n \n\n
\n );\n}\n\nexport default Spinner;\n","import { useState, useEffect, useContext, useRef, useCallback } from \"react\";\nimport ContextSearch from \"../store/ContextSearch\";\nimport HitPreview from \"./HitPreview\";\nimport styles from \"./HitsList.module.css\";\nimport Spinner from \"../layout/Spinner\";\nimport DuckIcon from \"../icon/DuckIcon\";\n\nfunction LyricsList() {\n const contextSearchResult = useContext(ContextSearch);\n const [hitsList, setHitsList] = useState(\"\");\n const [isLoadingMore, setIsLoadingMore] = useState(false);\n\n const observerLast = useRef();\n const lastSongElementRef = useCallback(\n (node) => {\n let options = {\n root: null,\n rootMargin: '0px 0px 300px 0px',\n threshold: 0\n }\n if (observerLast.current) observerLast.current.disconnect();\n observerLast.current = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.intersectionRatio > 0) {\n setIsLoadingMore(true)\n }\n })\n\n }, options)\n if (node) observerLast.current.observe(node)\n }, [])\n\n useEffect(() => {\n if (!isLoadingMore) return\n if (!contextSearchResult.isLastPage){\n contextSearchResult.loadMore();\n }\n setIsLoadingMore(false);\n \n }, [isLoadingMore, contextSearchResult])\n // Using the context component, add the songs to HitsList the first time the component render, and Load more songs when the user gets to the end of the page.\n useEffect(() => {\n setHitsList(contextSearchResult.songs.trackList);\n }, [contextSearchResult]);\n\n if (hitsList) {\n return (\n \n
\n - \n \n \n \n \n
\n
\n );\n } else {\n return \n {hitsList.map((hit, index) => {\n if (index === hitsList.length - 1) {\n return (\n
\n \n
\n );\n } else {\n return \n {contextSearchResult.isLoading ? (\n
\n \n ...Loading More songs
\n ) : (\n \n )}\n {contextSearchResult.isLastPage ? (\n No More songs Found ;-;
\n ) : (\n \n )} \n \n
\n );\n } else {\n return {songData.title}
\n\n
\n {youtuberLinkEmbed ? (\n - \n
- \n Title: {songData?.title} \n \n
- \n Album: {songData.album?.name} \n \n
- \n Release: {songData?.release_date_for_display} \n \n
- \n Artist: {songData.primary_artist?.name} \n \n
- \n \n \n
\n \n
\n ) : (\n null\n )}\n {albumTrackList?\n :null}\n \n
\n Lyrics
\n {duckTranslation ? (\n \n ) : (\n \n )}\n {lyrics ? (\n {lyrics} \n ) : (\n \n Loading Lyrics...
\n )}\n \n
\n );\n}\n\nexport default About;","import { useState, useEffect } from \"react\";\nimport { useParams } from \"react-router-dom\";\nimport Spinner from \"../layout/Spinner\";\nimport styles from \"./ArtistPage.module.css\";\n\nconst ArtistPage = () => {\n const [artistData, setArtistData] = useState(\"\");\n const { id } = useParams();\n const acessToken =\n \"4nc-gD-74q1PZMHoTTYG9dqxnPNcqsYmLAvnv7D6NrurElCBikEwrEKcIWXIU2qD\";\n // Fetch data after the page is render.\n useEffect(() => {\n // Get Artist information\n fetch(\n `https://api.genius.com/artists/${id}?access_token=${acessToken}&text_format=plain`\n )\n .then((res) => {\n return res.json();\n })\n .then((res) => {\n // Update Artist Data\n setArtistData(res.response.artist);\n })\n .catch((err) => console.log(err));\n }, [id]);\n\n if (artistData) {\n return (\n About this Website
\nIt's a website where you can search for songs. You can also translate the lyrics to Duck Language(Even though you are not going to understant a lot).
The information in this site came from the Genius API, and this site was build using React.
\n\n This site was made by Denny Rodrigues do Carmo. You can see others os my\n projects in my GitHub repository\n
\n\n
\n );\n } else {\n return {artistData.name}
\n\n 
\n
\n \n
\n About
\n{artistData.description.plain}\n