From b6c5b1590010a1856b067ed07b885d18514de652 Mon Sep 17 00:00:00 2001
From: Philip Cheung <philip.cheung@nirons.com>
Date: Tue, 5 Nov 2024 23:06:48 +0800
Subject: [PATCH] fixed no images problem and no cache in fetchCourses

---
 components/CoursesSilder.tsx | 53 ++++++++++++++++++++++++------------
 utils/index.ts               |  7 +++--
 2 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/components/CoursesSilder.tsx b/components/CoursesSilder.tsx
index 4d617e0..6f6c7db 100644
--- a/components/CoursesSilder.tsx
+++ b/components/CoursesSilder.tsx
@@ -47,12 +47,22 @@ const CoursesSilder = ({ courses }: { courses: CoursesProps[] }) => {
                 <div key={index} className=" bg-[#F6E8E9] h-auto pt-30 transition-all justify-items-center duration-20">
                   <div className="hidden lg:grid lg:grid-cols-2 w-full mb-28">
                     <div className="flex col-span-1 h-auto justify-self-end mr-20">
-                      <img
-                        src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${course.images[0].image}`}
-                        alt="Course Image"
-                        className="w-[50vh] h-[70vh] object-cover object-center rounded-3xl shadow-md"
-                        style={{ aspectRatio: '1 / 1' }}
-                      />
+                      {course.images.length > 0 ? (
+                        <img
+                          src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${course.images[0].image}`}
+                          alt="Course Image"
+                          className="w-[50vh] h-[70vh] object-cover object-center rounded-3xl shadow-md"
+                          style={{ aspectRatio: '1 / 1' }}
+                        />
+                      ) : (
+                        <img
+                          src={"/images/piano1.jpg"}
+                          alt="Course Image"
+                          className="w-[50vh] h-[70vh] object-cover object-center rounded-3xl shadow-md"
+                          style={{ aspectRatio: '1 / 1' }}
+                        />
+                      )}
+
                     </div>
                     <div className="flex col-span-1  h-auto justify-start items-center ml-20">
                       <div className="flex flex-col items-start w-[50vh]">
@@ -76,11 +86,20 @@ const CoursesSilder = ({ courses }: { courses: CoursesProps[] }) => {
                   </div>
 
                   <div className=" relative w-[50vh] h-[70vh] max-sm:w-[85vw] max-sm:h-[60vh]  mt-20 mb-28 overflow-hidden rounded-3xl shadow-md sm:block md:block lg:hidden xl:hidden 2xl:hidden mx-auto">
-                    <img
-                      src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${course.images[0].image}`}
-                      alt="Course Image"
-                      className="absolute inset-0 w-full h-full object-cover object-center "
-                    />
+                    {course.images.length > 0 ? (
+                      <img
+                        src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${course.images[0].image}`}
+                        alt="Course Image"
+                          className="absolute inset-0 w-full h-full object-cover object-center "
+                      />
+                    ) : (
+                      <img
+                        src={"/images/piano1.jpg"}
+                        alt="Course Image"
+                          className="absolute inset-0 w-full h-full object-cover object-center "
+                      />
+                    )}
+                  
                     <div className="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-50 text-white p-6">
                       <p className="text-2xl text-center mb-4">
                         {course.title}
@@ -89,12 +108,12 @@ const CoursesSilder = ({ courses }: { courses: CoursesProps[] }) => {
                         {course.sort_description}
                       </p>
                       <Link
-                         href={`/courses/${course.id}`}
-                         className="flex items-center justify-center rounded-full bg-white h-12 w-28 text-sm text-black shadow-md shadow-gray-400/20 transition-all hover:shadow-lg hover:shadow-gray-500/40"
-                         data-ripple-light="true"
-                             >
-                            {"了解更多"}
-                     </Link>
+                        href={`/courses/${course.id}`}
+                        className="flex items-center justify-center rounded-full bg-white h-12 w-28 text-sm text-black shadow-md shadow-gray-400/20 transition-all hover:shadow-lg hover:shadow-gray-500/40"
+                        data-ripple-light="true"
+                      >
+                        {"了解更多"}
+                      </Link>
                     </div>
                   </div>
                 </div>
diff --git a/utils/index.ts b/utils/index.ts
index bd86b3b..330506e 100644
--- a/utils/index.ts
+++ b/utils/index.ts
@@ -92,7 +92,7 @@ export async function fetchCourses() {
     console.log('Fetching from URL:', url);
 
     try {
-        const response = await fetch(url, { headers });
+        const response = await fetch(url, { headers, cache: 'no-store', next: { revalidate: 0 } });
 
 
         const result = await response.json();
@@ -124,7 +124,10 @@ export async function fetchCourse(id: string) {
 
 
     try {
-        const response = await fetch(url, { headers });
+        const response = await fetch(url, {
+            headers, cache: 'no-store',
+            next: { revalidate: 0 }
+        });
 
 
         var result: CoursesProps = await response.json();