albums done

qtify/src/App.jsx

@@ -3,12 +3,13 @@
 import React, { useEffect, useState } from "react";
 import Navbar from "./components/Navbar/Navbar";
 import HeroSection from "./components/HeroSection/HeroSection";
-import { fetchTopAlbumsData } from "./components/api/api";
+import { fetchTopAlbumsData , fetchNewAlbumsData} from "./components/api/api";
 import Section from "./components/Section/Section";
 import styles from "./App.module.css"
 
 const App = () => {
   const [albumsData, setAlbumsData] = useState([]);
+  const [newAlbumsData, setNewAlbumsData] = useState([]);
 
   const generateTopAlbums = async () => {
     try {
@@ -19,8 +20,18 @@ const App = () => {
     }
   };
 
+  const generateNewAlbums = async () => {
+    try {
+      const data = await fetchNewAlbumsData();
+      setNewAlbumsData(data);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   useEffect(() => {
     generateTopAlbums();
+    generateNewAlbums()
   }, []);
 
   return (
@@ -35,6 +46,7 @@ const App = () => {
       {/* instead of mappibg card data for every section, lets create a section component and render it directly here */}
       <div className={styles.sectionWrapper}>
       <Section data={albumsData} title="Top Albums" type="album" />
+      <Section data={newAlbumsData} title="New Albums" type="album" />
       </div>
     </div>
   );

qtify/src/components/Carousel/CarouselLeftNavigation.jsx

@@ -2,8 +2,7 @@
 import React, { useEffect, useState } from "react";
 import { useSwiper } from "swiper/react";
 import LeftArrow from "../../assets/leftarrow.svg";
-import styles from "./Carousel.module.css"
-
+import styles from "./Carousel.module.css";
 
 const CarouselLeftNavigation = () => {
   const swiper = useSwiper();
@@ -13,19 +12,20 @@ const CarouselLeftNavigation = () => {
       setIsBeginning(swiper.isBeginning);
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isBeginning]);
 
   return (
     <div >
-      {!isBeginning ?(
-        <button className={styles.leftNavigation} 
-        onClick={() => {
-          swiper.slidePrev();
-        }}><img src={LeftArrow}
-
-      /></button>
-
-      ): null}
+      {!isBeginning ? (
+        <button className={styles.leftNavigation}
+
+          onClick={() => {
+            swiper.slidePrev();
+          }}
+        >
+          <img src={LeftArrow} />
+        </button>
+      ) : null}
     </div>
   );
 };

qtify/src/components/api/api.js

@@ -10,4 +10,14 @@ export const fetchTopAlbumsData=async ()=>{
   }catch(e){
     console.log(e)
   }
+}
+
+export const fetchNewAlbumsData=async ()=>{
+  try{
+    const response=await axios.get(`${BackendEndpoint}/albums/new`);
+    console.log(response);
+    return response.data;
+  }catch(e){
+    console.log(e)
+  }
 }