extras

qtify/package.json

@@ -6,6 +6,7 @@
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@mui/base": "^5.0.0-beta.40",
+    "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@testing-library/jest-dom": "^5.17.0",

qtify/src/App.css

@@ -36,3 +36,4 @@
     transform: rotate(360deg);
   }
 }
+

qtify/src/App.js

@@ -3,26 +3,39 @@ import Navbar from './components/Navbar/Navbar';
 
 import Hero from './components/Hero/Hero';
 import axios from 'axios';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Section from './components/Section/Section';
 import { Stack, Divider } from '@mui/material';
+import { MusicContext } from './MusicContext';
+import MusicBar from './components/MusicBar/MusicBar';
+
+import { Routes, Route } from 'react-router-dom';
+import AlbumDetails from './components/AlbumDetails/AlbumDetails';
+
+
+export const fetchData = async (type) => {
+  try {
+    let res = await axios.get('https://qtify-backend-labs.crio.do/' + type)
+
+    return res.data
+  } catch (e) {
+    console.log(e)
+  }
+}
 
 
 function App() {
   const [newData, setNewData] = useState([])
   const [topData, setTopData] = useState([])
   const [songData, setSongData] = useState([])
   const [genreData, setGenreData] = useState([])
+  const [faqData, setFaqData] = useState([])
+
+
+  const [selectedSong, setSelectedSong] = useState(null);
+
 
-  const fetchData = async (type) => {
-    try {
-      let res = await axios.get('https://qtify-backend-labs.crio.do/' + type)
 
-      return res.data
-    } catch (e) {
-      console.log(e)
-    }
-  }
 
   useEffect(() => {
     const getData = async () => {
@@ -34,6 +47,8 @@ function App() {
       await setSongData(data)
       data = await fetchData('genres')
       await setGenreData(data.data)
+      data = await fetchData('faq')
+      await setFaqData(data.data)
 
 
     }
@@ -42,17 +57,29 @@ function App() {
   }, [])
 
 
+
+
   return (
-    <div className="App">
-      <Navbar />
-      <Hero />
-      <Stack divider={<Divider flexItem sx={{ backgroundColor: 'var(--color-primary)' }} />}>
-        <Section title='Top' data={topData} />
-        <Section title='New' data={newData} />
-        <Section title='Songs' data={songData} songs={true} genres={genreData} />
-      </Stack>
-
-    </div>
+    <MusicContext.Provider value={{ selectedSong, setSelectedSong }}>
+      <div className="App">
+        <Navbar searchData={newData.concat(topData)} />
+        <Routes>
+          <Route path="/" element={
+            <>
+              <Hero />
+              <Stack divider={<Divider flexItem sx={{ backgroundColor: 'var(--color-primary)' }} />}>
+                <Section title='Top' data={{ data: topData, type: 'grid' }} />
+                <Section title='New' data={{ data: newData, type: 'grid' }} />
+                <Section title='Songs' data={{ data: songData, type: 'grid' }} songs={true} genres={genreData} />
+                <Section title='FAQs' data={{ data: faqData, type: 'faq' }} />
+              </Stack>
+              <MusicBar />
+            </>
+          } />
+          <Route path="/albumdetails/:id" element={<AlbumDetails />} />
+        </Routes>
+      </div>
+    </MusicContext.Provider>
   );
 }
 

qtify/src/MusicContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+
+
+export const MusicContext = React.createContext()

qtify/src/components/AlbumDetails/AlbumDetails.js

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import MusicBar from '../MusicBar/MusicBar';
+import axios from 'axios';
+import ArrowCircleLeftOutlinedIcon from '@mui/icons-material/ArrowCircleLeftOutlined';
+import { useNavigate } from 'react-router-dom';
+import { Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';
+import Pagination from '@mui/material/Pagination';
+
+import { MusicContext } from "../../MusicContext";
+
+function AlbumDetails() {
+
+    const { id } = useParams();
+    const [album, setAlbum] = useState(null);
+    const [page, setPage] = useState(1);
+
+    const navigate = useNavigate();
+    const { selectedSong, setSelectedSong } = React.useContext(MusicContext)
+
+    const fetchAlbumData = async () => {
+        try {
+            const newData = await axios.get('https://qtify-backend-labs.crio.do/albums/new');
+            const topData = await axios.get('https://qtify-backend-labs.crio.do/albums/top');
+            const allData = [...newData.data, ...topData.data];
+            const foundAlbum = allData.find(item => item.id === id);
+            setAlbum(foundAlbum);
+        } catch (error) {
+            console.error("Error fetching album data:", error);
+        }
+    };
+
+    useEffect(() => {
+        fetchAlbumData();
+    }, [id]);
+
+    const handleChange = (event, value) => {
+        setPage(value);
+    };
+
+    const songsPerPage = 13;
+    const startIndex = (page - 1) * songsPerPage;
+    const endIndex = startIndex + songsPerPage;
+    const currentSongs = album ? album.songs.slice(startIndex, endIndex) : [];
+
+    if (!album) {
+        return <div style={{ color: 'white' }}>Loading...</div>;
+    }
+
+    function totalDuration() {
+        let durationInMillis = album.songs.reduce((acc, curr) => curr.durationInMs + acc, 0);
+        const minutes = Math.floor(durationInMillis / 60000); // 1 minute = 60,000 milliseconds
+        return `${minutes} min`;
+    }
+
+    return (
+        <div style={{ color: 'white', textAlign: 'left' }}>
+
+            <Stack style={{ padding: '5%' }} spacing={2}>
+                <ArrowCircleLeftOutlinedIcon onClick={() => navigate('/')} style={{ cursor: 'pointer', height: '4%', width: '4%' }} />
+
+                <div style={{ display: 'flex', gap: 30, height: '30vh' }}>
+                    <img src={album.image} alt={album.title} style={{ width: '30vh', height: '100%', flex: 0.30, borderRadius: '20px' }} />
+                    <div style={{ flex: 1 }}>
+                        <h3>{album.title}</h3>
+                        <div style={{ color: 'grey', fontSize: '12px' }}>
+                            <p>{album.description}</p>
+                            <p>{album.songs.length} songs • {totalDuration()} • {album.follows} Follows</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div style={{ textAlign: 'right' }}>
+                    <Pagination
+                        count={Math.ceil(album.songs.length / songsPerPage)}
+                        page={page}
+                        onChange={handleChange}
+                        sx={{
+                            '& .MuiPaginationItem-root': {
+                                color: 'white',
+                            },
+                            '& .Mui-selected': {
+                                backgroundColor: 'var(--color-primary)',
+                                color: 'white',
+                            },
+                            '& .MuiPaginationItem-root.Mui-selected:hover': {
+                                backgroundColor: 'green',
+                                color: 'white',
+                            },
+                            display: 'inline-block',
+                        }}
+                        size="small"
+                    />
+                </div>
+
+                <TableContainer component={Paper} style={{ backgroundColor: 'var(--color-black)' }}>
+                    <Table>
+                        <TableHead>
+                            <TableRow>
+                                <TableCell style={{ color: 'white', border: 'none', textAlign: 'left', fontSize: '16px', fontWeight: 'bold' }}>Title</TableCell>
+                                <TableCell style={{ color: 'white', border: 'none', fontSize: '16px', fontWeight: 'bold' }}>Artist</TableCell>
+                                <TableCell style={{ color: 'white', border: 'none', textAlign: 'right', fontSize: '16px', fontWeight: 'bold' }}>Duration</TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {currentSongs.map((song, index) => (
+                                <TableRow key={index} onClick={() => setSelectedSong(song)} style={{ cursor: 'pointer' }}>
+                                    <TableCell style={{ color: 'white', display: 'flex', gap: '10px', alignItems: 'center', fontSize: '12px', borderBottom: '1px solid grey' }}>
+                                        <img src={song.image} alt={song.title} style={{ width: '40px', height: '40px' }} />
+                                        {song.title}
+                                    </TableCell>
+                                    <TableCell style={{ color: 'white', fontSize: '12px', borderBottom: '1px solid grey' }}>{song.artists.join(', ')}</TableCell>
+                                    <TableCell style={{ color: 'white', textAlign: 'right', fontSize: '12px', borderBottom: '1px solid grey' }}>{Math.ceil(song.durationInMs / 60000)} min</TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+
+
+            </Stack>
+            <MusicBar src='../../assets/music.mp3' />
+        </div>
+    );
+}
+
+export default AlbumDetails;

qtify/src/components/Button/Button.jsx

@@ -1,9 +1,9 @@
 import React from "react";
 import styles from "./Button.module.css";
 
-export default function Button({ children }) {
+export default function CustomButton({ children, onClick }) {
     return (
-        <button className={styles.button} style={{ cursor: 'pointer' }}>
+        <button className={styles.button} onClick={onClick} style={{ cursor: 'pointer' }}>
             {children}
         </button>
     )

qtify/src/components/Button/Button.module.css

@@ -3,7 +3,7 @@
   color: var(--color-primary);
   border-radius: 8px;
   font-weight: bold;
-  padding: 14px 20px;
+  padding: 10px 20px;
   border: none;
   font-size: var(--font-size-base);
   font-family: var(--font-family);