WIP: type issue fixes

Author: pawan-live

src/app/[category]/[subcategory]/[article]/page.tsx

@@ -1,4 +1,3 @@
-// import ArticleCard from "@/app/components/Articles/ArticleCard";
 import { API_ENDPOINTS } from "@/config/endpoints";
 import { getData } from "@/lib/helpers/dataFetchHelper";
 import { ApiResponse, Article } from "@/types/CommonTypes";
@@ -8,16 +7,14 @@ import Link from "next/link";
 export default async function Page({
   params,
 }: {
-  params: { article: string; category: string; subcategory: string };
+  params: Promise<{ article: string; category: string; subcategory: string }>;
 }) {
-  const { category, subcategory } = await params;
-
-  const articleSlug = (await params).article;
+  const { article, category, subcategory } = await params;
 
   const response: ApiResponse<Article> = await getData(
-    `${API_ENDPOINTS.ARTICLES}?filters[slug][$eq]=${articleSlug}`
+    `${API_ENDPOINTS.ARTICLES}?filters[slug][$eq]=${article}`
   );
-  const [{ title, publishedAt, description }] = response.data; // select first object in array, and destructure properties
+  const [{ title, publishedAt, description }] = response.data;
 
   const publishedDate = new Date(publishedAt).toLocaleDateString("en-US", {
     year: "numeric",
@@ -40,8 +37,7 @@ export default async function Page({
             <li>
               <Link
                 href={`/${category}/${subcategory}`}
-                className="hover:text-blue-600"
-              >
+                className="hover:text-blue-600">
                 {subcategory}
               </Link>
             </li>
@@ -65,15 +61,13 @@ export default async function Page({
             </p>
             <button
               className=" flex items-center gap-2 text-white text-lg px-3 py-1 rounded-md shadow hover:brightness-110 transition"
-              style={{ backgroundColor: "#2F7CC4" }}
-            >
+              style={{ backgroundColor: "#2F7CC4" }}>
               English
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 fill="currentColor"
-                className="size-6"
-              >
+                className="size-6">
                 <path
                   fillRule="evenodd"
                   d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"
@@ -103,15 +97,13 @@ export default async function Page({
           </h1>
           <button
             className=" flex gap-2 text-white text-lg px-8 py-3 rounded-md shadow hover:brightness-110 transition"
-            style={{ backgroundColor: "#2F7CC4" }}
-          >
+            style={{ backgroundColor: "#2F7CC4" }}>
             Download PDF
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
               fill="currentColor"
-              className="size-6"
-            >
+              className="size-6">
               <path
                 fillRule="evenodd"
                 d="M12 2.25a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V3a.75.75 0 0 1 .75-.75Zm-9 13.5a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z"

src/app/[category]/[subcategory]/page.tsx

@@ -6,10 +6,14 @@ import { ApiResponse, SubcategoryType } from "@/types/CommonTypes";
 export default async function Page({
   params,
 }: {
-  params: { category: string; subcategory: string };
+  params: Promise<{ category: string; subcategory: string }>;
 }) {
   const response: ApiResponse<SubcategoryType> = await getData(
-    `${API_ENDPOINTS.SUBCATEGORIES}?filters[slug][$eq]=${params.subcategory}&populate=articles`
+    `${API_ENDPOINTS.SUBCATEGORIES}?filters[slug][$eq]=${
+      (
+        await params
+      ).subcategory
+    }&populate=articles`
   );
 
   const [{ name, subtitle, articles }] = response.data;
@@ -20,8 +24,7 @@ export default async function Page({
     id: article.id,
     title: article.title,
     description: article.description,
-    content: article.content || "No content available", // Matches the expected `content` field
-    imageUrl: article.image?.url || "/placeholder.png", // Matches the expected `imageUrl` field
+    imageUrl: article?.thumbnailImage?.url, // Matches the expected `imageUrl` field
     slug: article.slug,
   }));
 
@@ -34,8 +37,8 @@ export default async function Page({
 
       <ArticleCard
         articles={transformedArticles}
-        categorySlug={params.category}
-        subcategorySlug={params.subcategory}
+        categorySlug={(await params).category}
+        subcategorySlug={(await params).subcategory}
       />
     </>
   );

src/app/[category]/page.tsx

@@ -6,7 +6,7 @@ import SubCategories from "../components/Subcategories/Subcategories";
 export default async function Page({
   params,
 }: {
-  params: { category: string };
+  params: Promise<{ category: string }>;
 }) {
   const categorySlug = (await params).category;
   const response: ApiResponse<Category> = await getData(

src/app/components/Articles/ArticleCard.tsx

@@ -8,7 +8,6 @@ interface ArticleCardProps {
     description: string;
     id: number;
     title: string;
-    content: string;
     imageUrl: string;
     slug: string;
   }>;

src/types/CommonTypes.ts

@@ -63,6 +63,7 @@ export interface Article {
   category: string;
   subcategory: string;
   thumbnailImage: ImageType;
+  publishedAt: string;
 }
 
 export interface Subcategory {