Merge pull request #2 from akhil-neoito/pokeapi-integration

feat: change api to newsdata.io

Author: akhil-neoito

src/lib/config.ts

@@ -1 +1 @@
-export const newsApiKey = 'f86040b77923411aa0e8a211627437ce';
+export const newsApiKey = 'pub_97975dc870625c92568f10bdbf1cb8a0f9a9';

src/pages/Articles/Articles.tsx

@@ -4,7 +4,7 @@ import { formatDate } from '@/lib/helper';
 import { useArticlesQuery } from '@/services/queries/article.query';
 import type { Article } from '@/types/article';
 
-export type Filter = { page: number; pageSize: number; search?: string };
+export type Filter = { page: number; search?: string };
 
 export interface ArticleListProps {
   articles: Article[];
@@ -19,31 +19,48 @@ const ArticleList: React.FC<ArticleListProps> = ({ articles }) => {
     <>
       {articles.map((article) => (
         <div
-          key={article.url}
+          key={article.link}
           className="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3"
         >
           <article className="overflow-hidden rounded-lg shadow-lg">
-            <a href={article.url} target="_blank" rel="noreferrer">
-              <img
-                alt="Placeholder"
-                className="block h-auto w-full"
-                src={article.urlToImage}
-              />
+            <a href={article.link} target="_blank" rel="noreferrer">
+              {article.image_url ? (
+                <img
+                  alt="Placeholder"
+                  className="block h-auto w-full"
+                  src={article.image_url}
+                />
+              ) : (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-[215px] w-[370px] bg-gray-100"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+              )}
             </a>
 
             <header className="flex items-center justify-between leading-tight p-2 md:p-4">
               <h1 className="text-lg">
                 <a
                   className="no-underline hover:underline text-black"
-                  href={article.url}
+                  href={article.link}
                   target="_blank"
                   rel="noreferrer"
                 >
                   {article.title}
                 </a>
               </h1>
               <p className="text-grey-darker text-sm">
-                {formatDate(article.publishedAt)}
+                {formatDate(article.pubDate)}
               </p>
             </header>
 
@@ -107,7 +124,7 @@ const Articles = () => {
         {isLoading ? (
           <div>Loading...</div>
         ) : (
-          <ArticleList articles={data?.articles ?? []} />
+          <ArticleList articles={data?.results ?? []} />
         )}
       </div>
     </div>

src/services/api/article.service.ts

@@ -5,9 +5,9 @@ import type { GetArticlesProps, GetArticleResponse } from '@/types/article';
 export const getArticles = async (
   params: GetArticlesProps
 ): Promise<GetArticleResponse> => {
-  const { search, page, pageSize } = params;
+  const { search, page } = params;
   const { data } = await axios.get<GetArticleResponse>(
-    `https://newsapi.org/v2/everything?q=${search}&page=${page}&pageSize=${pageSize}&apiKey=${newsApiKey}`
+    `https://newsdata.io/api/1/news?q=${search}&page=${page}&apiKey=${newsApiKey}`
   );
   return data;
 };

src/types/article.ts

@@ -1,27 +1,26 @@
 export interface GetArticleResponse {
   status: string;
   totalResults: number;
-  articles: Article[];
+  results: Article[];
+  nextPage?: number;
 }
 
 export interface GetArticlesProps {
   search?: string;
   page: number;
-  pageSize: number;
 }
 
 export interface Article {
-  source: Source;
-  author: string;
   title: string;
+  link: string;
+  keywords: string[];
+  creator: string[];
+  video_url?: string;
   description: string;
-  url: string;
-  urlToImage: string;
-  publishedAt: string;
   content: string;
-}
-
-export interface Source {
-  id?: null;
-  name: string;
+  pubDate: string;
+  image_url?: string;
+  source_id: string;
+  country: string[];
+  category: string[];
 }