detailed page created

app/categorys/[category]/page.jsx

@@ -17,18 +17,22 @@ const page = () => {
     setArticle(jsonData);
   }, []);
 
+  const imageUrl = article.multimedia && article.multimedia.length > 0
+  ? "https://www.nytimes.com/" + article.multimedia[0].url
+  : "";
+
   return (
     <div className="my-4">
       <Container>
         <div className="h-[500px]">
           <img
             className="object-cover h-full w-full rounded"
-            src={article.image}
+            src={imageUrl}
             alt=""
           />
         </div>
         <div className="my-3">
-          <p className="text-3xl font-bold text-red-500">{article.title}</p>
+          <p className="text-3xl font-bold text-red-500">{article.abstract}</p>
           {/* <p className="text-xl">
             Author:
             {article.authors.map((auth) => (
@@ -38,14 +42,14 @@ const page = () => {
             ))}
           </p> */}
           <p className="text-xl mt-2">
-            Published At : <span className="font-bold rounded p-1 text-white bg-red-500">{article.date}</span>{" "}
+            Published At : <span className="font-bold rounded p-1 text-white bg-red-500">{article.pub_date}</span>{" "}
           </p>
-          <p className="text-sm italic mt-4">{article.body} </p>
+          <p className="text-sm italic mt-4">{article.lead_paragraph} </p>
 
           <p className="mt-3">
             For more information visit :{" "}
-            <a href={article.url} className="text-blue-500 underline">
-              {article.url}
+            <a href={article.uri} className="text-blue-500 underline">
+              {article.uri}
             </a>
           </p>
         </div>

app/components/BusinessCareer.jsx

@@ -29,14 +29,15 @@ const BusinessCareer = () => {
         console.log("inside try")
         const response = await getSpecificQueryNews("career");
         const business = await getSpecificQueryNews("business");
-        setData(response.docs);
-        console.log("response got",response)
-        setLoading(false);
-
+
+        console.log("response got", response.docs)
         console.log("business", business);
         console.log("response", response);
+
+        setData(response.docs);
         setBusiness(business.docs);
-        // response store in firestore so wher user is offline we got data from there
+
+        // response store in firestore so when user is offline we got data from there
         if (response.docs && business.docs) {
           try {
             response.docs.forEach(async (article) => {
@@ -50,23 +51,30 @@ const BusinessCareer = () => {
             console.log("error in store db", error);
           }
         }
+
+        setLoading(false);
         setBusinessLoading(false);
       } catch (error) {
         console.log(error);
       }
-    }
-    // else getting data from cache(firestore)
-    else {
+    } else {
+      // else getting data from cache(firestore)
       const careerData = await getDocs(collection(db, "career"));
+      const careerDocs = [];
       careerData.forEach((doc) => {
         console.log(doc.id, " => ", doc.data());
-        data.push(doc.data());
+        careerDocs.push(doc.data());
       });
+      setData(careerDocs);
+
       const businessData = await getDocs(collection(db, "business"));
+      const businessDocs = [];
       businessData.forEach((doc) => {
         console.log(doc.id, " => ", doc.data());
-        business.push(doc.data());
+        businessDocs.push(doc.data());
       });
+      setBusiness(businessDocs);
+
       setLoading(false);
       setBusinessLoading(false);
     }

app/components/HorizontalCard.jsx

@@ -37,7 +37,7 @@ const HorizontalCard = ({ data, profilePage }) => {
         const isAlreadyLiked = favItems.some(
           (item) => item.title === data.title
         );
-        // check whether artiley is already in fav or not
+        // check whether article is already in fav or not
         if (isAlreadyLiked) {
           toast.error("Article already in favorites");
         } else {
@@ -56,17 +56,15 @@ const HorizontalCard = ({ data, profilePage }) => {
     <div>
       {data.slice(0, 5).map((article) => {
         // to display ... after certain characters
-        const truncatedBody =
-          article.body.length > 300
-            ? `${article.lead_paragraph.substring(0, 300)}...`
-            : article.body;
+        const imageUrl = article.multimedia && article.multimedia.length > 0
+          ? "https://www.nytimes.com/" + article.multimedia[0].url
+          : "";
+
         return (
-          <>
+          <div key={article.title}>
             {/* if it doesn't a profile page than only this add fav btn visible */}
             {!profilePage ? (
-              <div
-                className={`like absolute ml-2 mt-2 border bg-white rounded-full`}
-              >
+              <div className="like absolute ml-2 mt-2 border bg-white rounded-full">
                 <IconButton onClick={() => addToLike(article)}>
                   <FavoriteBorder />
                 </IconButton>
@@ -75,8 +73,7 @@ const HorizontalCard = ({ data, profilePage }) => {
               ""
             )}
             <Link
-              key={article.title}
-              href={"/categorys/" + slugify(article.title).toLowerCase()}
+              href={"/categorys/" + slugify(article.abstract).toLowerCase()}
               onClick={() => saveDetails(article)}
             >
               <Card
@@ -89,7 +86,7 @@ const HorizontalCard = ({ data, profilePage }) => {
                     className="h-full"
                   >
                     <img
-                      src={article.image}
+                      src={imageUrl}
                       alt=""
                       className="object-cover h-full"
                       height={"100%"}
@@ -103,13 +100,13 @@ const HorizontalCard = ({ data, profilePage }) => {
                       {article.abstract}
                     </h1>
                     <h1 className="hover:text-red-300 text-sm">
-                      {truncatedBody}
+                      {article.lead_paragraph}
                     </h1>
                     <h1 className="hover:text-red-400 text-sm">
                       Date: {article.pub_date}
                     </h1>
                     {article.author ? (
-                      <h1 className="text-sm mt-1 ">
+                      <h1 className="text-sm mt-1">
                         Discovered By:{" "}
                         <span className="bg-red-500 w-max p-1 hover:text-white rounded">
                           {article.news_desk}
@@ -122,7 +119,7 @@ const HorizontalCard = ({ data, profilePage }) => {
                 </CardContent>
               </Card>
             </Link>
-            {/* inside profile page we give remove fav btn that remove any article from favoritesF */}
+            {/* inside profile page we give remove fav btn that remove any article from favorites */}
             {profilePage ? (
               <div className="flex justify-end mr-2 -mt-14">
                 <button
@@ -135,7 +132,7 @@ const HorizontalCard = ({ data, profilePage }) => {
             ) : (
               ""
             )}
-          </>
+          </div>
         );
       })}
     </div>

app/components/NewsSwiperSlide.jsx

@@ -9,6 +9,10 @@ const NewsSwiperSlide = ({ article }) => {
     localStorage.setItem("details", JSON.stringify(art));
   };
 
+  const imageUrl = article.multimedia && article.multimedia.length > 0
+  ? "https://www.nytimes.com/" + article.multimedia[0].url
+  : "";
+
   return (
     <div className="h-full">
       <Link
@@ -17,7 +21,7 @@ const NewsSwiperSlide = ({ article }) => {
       >
         <img
           className="object-cover h-full w-full"
-          src={article.media[0] ? article.media[0]["media-metadata"][2].url: ""}
+          src={imageUrl}
           alt=""
         />
         <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4">

app/components/Swiper.jsx

@@ -13,6 +13,7 @@ import NewsSwiperSlide from "./NewsSwiperSlide";
 import { SwiperSkeleton } from "./Skeleton";
 import { db } from "../firebaseConfig";
 import { collection, getDocs } from "firebase/firestore";
+import { getSpecificQueryNews } from "../Services/getAllNews";
 
 const SwiperSection = () => {
   const [data, setData] = useState([]);
@@ -26,8 +27,8 @@ const SwiperSection = () => {
     // if user is online then send req to api
     if (isOnline) {
       try {
-        const response = await getHeadlines();
-        setData(response);
+        const response = await getSpecificQueryNews("trending");
+        setData(response.docs);
         setLoading(false);
       } catch (error) {
         console.log(error);

app/components/SwiperCard.jsx

@@ -63,6 +63,10 @@ const newsCard = (article) => {
     }
   }
 
+  const imageUrl = article.multimedia && article.multimedia.length > 0
+  ? "https://www.nytimes.com/" + article.multimedia[0].url
+  : "";
+
   return (
     <div className="px-3 py-1" key={article.url}>
       <div className={`like absolute ml-2 mt-2 border bg-white rounded-full`}>
@@ -86,7 +90,7 @@ const newsCard = (article) => {
         <div className="h-[200px] rounded overflow-hidden">
           <img
             className="object-cover h-full w-full hover:h-[220px]"
-            src={article.media[0] ? article.media[0]["media-metadata"][2].url: ""}
+            src={imageUrl}
             alt=""
           />
           <div className="bottom-0 -mt-20 left-0 right-0 p-4">

app/config/config.js

@@ -21,7 +21,7 @@ export const categorys = [
 ];
 
 // key for api
-export const key = "g0KmbShfkmkI0Jy22BG0OH7A1p0w0bxO";
+export const key = "x1GDJ2YLEA54gjCw0NVcG0hmNWUKmxJ0";
 
 // title
 export const title = "ENews"