125 lines
4.9 KiB
TypeScript
125 lines
4.9 KiB
TypeScript
"use client"
|
|
import React from 'react'
|
|
import Collapse from './Collapse'
|
|
import ScheduleCollapse from './ScheduleCollapse'
|
|
import { CoursesProps, ScheduleProps, RerganizedScheduleProps } from '@/types'
|
|
|
|
|
|
async function reorganizedSchedule(schedule: ScheduleProps[]) {
|
|
|
|
const sortedSchedule = schedule.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
|
|
|
|
// Then, reorganize the sorted schedule
|
|
const reorganizedSchedule = sortedSchedule.reduce<Record<string, { yearAndMonth: string; schedule: ScheduleProps[] }>>((acc, item) => {
|
|
const date = new Date(item.date);
|
|
const yearMonth = `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月`;
|
|
|
|
if (!acc[yearMonth]) {
|
|
acc[yearMonth] = {
|
|
yearAndMonth: yearMonth,
|
|
schedule: []
|
|
};
|
|
}
|
|
|
|
acc[yearMonth].schedule.push(item);
|
|
|
|
return acc;
|
|
}, {});
|
|
|
|
return Object.values(reorganizedSchedule);
|
|
}
|
|
|
|
|
|
|
|
const Accordion = async ({ courseData }: { courseData: CoursesProps }) => {
|
|
const newSchedule = await reorganizedSchedule(courseData.schedule)
|
|
|
|
const fakeData = [
|
|
{
|
|
"yearAndMonth": "2024年10月",
|
|
"schedule": [
|
|
{
|
|
"info2": "A room, 14F, Sha Tin Market, N.T.",
|
|
"info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
|
|
"id": "e19a7934-82fe-4027-aca6-57a419e9623e",
|
|
"title": "A班",
|
|
"date": "2024-10-05T01:30:00Z",
|
|
"course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
|
|
},
|
|
{
|
|
"info2": "Room B, Sheung Shui Village, N.T.",
|
|
"info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
|
|
"id": "dc49a1b6-1c1f-44d6-bc52-b757aeba7b5b",
|
|
"title": "B班",
|
|
"date": "2024-10-05T01:31:00Z",
|
|
"course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
|
|
},
|
|
{
|
|
"info2": "Room B, Sheung Shui Village, N.T.",
|
|
"info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
|
|
"id": "d4785a90-311b-4a91-8fb7-beb077245f4f",
|
|
"title": "A班",
|
|
"date": "2024-10-06T01:31:00Z",
|
|
"course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"yearAndMonth": "2024年11月",
|
|
"schedule": [
|
|
{
|
|
"info2": "Room B, Sheung Shui Village, N.T.",
|
|
"info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
|
|
"id": "5c88b2a7-6b4d-455f-b341-1fec3173d208",
|
|
"title": "A班",
|
|
"date": "2024-11-06T01:31:00Z",
|
|
"course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"yearAndMonth": "2025年01月",
|
|
"schedule": [
|
|
{
|
|
"info2": "Room B, Sheung Shui Village, N.T.",
|
|
"info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
|
|
"id": "8a30dec2-63ed-4237-8f5b-177c42f29dda",
|
|
"title": "B班",
|
|
"date": "2025-01-04T01:31:00Z",
|
|
"course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
|
|
},
|
|
{
|
|
"info2": "Room B, Sheung Shui Village, N.T.",
|
|
"info1": "11:00-12:00, 13:00-14:00, 15:00-16:00, 17:00-18:00",
|
|
"id": "86ddf906-499b-4dbd-967d-cc4dddd9f27b",
|
|
"title": "A班",
|
|
"date": "2025-01-05T01:31:00Z",
|
|
"course_id": "29ab193d-2927-459d-9277-5520771b2dd6"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
console.log(newSchedule)
|
|
return (
|
|
<div className='relative flex flex-col w-full h-auto items-center pb-60'>
|
|
<Collapse title='課程資訊' children={courseData.information} />
|
|
<Collapse title='課程內容' children={courseData.contant} info={true} info_images={courseData.info_images} />
|
|
<Collapse title='備註' children={courseData.remark} />
|
|
<p className='text-5xl text-center mt-48'>
|
|
{"課程時間表"}
|
|
</p>
|
|
{
|
|
fakeData.map((item, index) => {
|
|
return (
|
|
<ScheduleCollapse key={index} title={item.yearAndMonth} rerganizedSchedule={{ yearAndMonth: item.yearAndMonth, schedules: item.schedule }} />
|
|
)
|
|
})
|
|
}
|
|
<div className="bg-[url('/images/014.png')] absolute bottom-0 inset-0 h-auto w-full bg-contain bg-bottom bg-no-repeat -z-10"></div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Accordion
|