all_in_one
/
frondend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed no images problem and no cache in fetchCourses

This commit is contained in:
Philip Cheung 2024-11-05 23:06:48 +08:00
parent a00cd857f1
commit b6c5b15900
2 changed files with 41 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
components/CoursesSilder.tsx
View File

@ -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>

7
utils/index.ts
View File

@ -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();