71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import { IntroPageProps } from '@/types/page';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { useEffect, useState } from 'react';
|
|
import { useSectionEditor } from '../../context';
|
|
import Categories from './categories';
|
|
import Courses from './courses';
|
|
import Instructors from './instructors';
|
|
|
|
interface Props {
|
|
field: PropertyField;
|
|
section_slug: string;
|
|
onChange?: (value: any) => void;
|
|
}
|
|
|
|
const Contents = ({ field, section_slug, onChange }: Props) => {
|
|
const { props } = usePage<IntroPageProps>();
|
|
const { courses, categories, instructors } = props;
|
|
const { section } = useSectionEditor();
|
|
const [contentList, setContentList] = useState<number[]>(section.properties?.contents ? section.properties?.contents : []);
|
|
|
|
useEffect(() => {
|
|
if (field.type === 'contents' && Array.isArray(field.value)) {
|
|
setContentList(field.value);
|
|
}
|
|
}, [field.value, field.type]);
|
|
|
|
const onSelectChange = (id: number) => {
|
|
let updatedContents: number[];
|
|
|
|
// If ID already exists, remove it (deselect)
|
|
if (contentList.includes(id)) {
|
|
updatedContents = contentList.filter((item) => item !== id);
|
|
} else {
|
|
// If ID doesn't exist, add it (select)
|
|
updatedContents = [...contentList, id];
|
|
}
|
|
|
|
// Update local state
|
|
setContentList(updatedContents);
|
|
|
|
// Update parent component via onChange - pass only the array value
|
|
onChange?.(updatedContents);
|
|
};
|
|
|
|
const renderField = () => {
|
|
switch (section_slug) {
|
|
case 'hero':
|
|
case 'top_course':
|
|
case 'top_courses':
|
|
case 'new_courses':
|
|
return <Courses courses={courses as Pagination<Course>} selectedIds={contentList} onCourseSelect={onSelectChange} />;
|
|
case 'top_categories':
|
|
case 'category_courses':
|
|
return <Categories categories={categories as Pagination<CourseCategory>} selectedIds={contentList} onCourseSelect={onSelectChange} />;
|
|
|
|
case 'top_instructors':
|
|
return <Instructors instructors={instructors as Pagination<Instructor>} selectedIds={contentList} onCourseSelect={onSelectChange} />;
|
|
|
|
case 'blogs':
|
|
return <h1>Blogs</h1>;
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return <div className="rounded-md border">{renderField()}</div>;
|
|
};
|
|
|
|
export default Contents;
|