@defikitdotnet/education-module-ai
Version:
AI Education Module using Agent Framework
93 lines (92 loc) • 6.24 kB
JavaScript
;
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CourseContentContainer = exports.CourseListContainer = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
/**
* Container components for the Education Module
* These components handle data fetching and state management
*/
var react_1 = __importDefault(require("react"));
var useCourses_1 = require("../hooks/useCourses");
var useCourseContent_1 = require("../hooks/useCourseContent");
var CourseCard_1 = require("../components/CourseCard");
/**
* Container component that fetches and displays a list of courses
*/
var CourseListContainer = function (_a) {
var agentId = _a.agentId, onCourseClick = _a.onCourseClick, limit = _a.limit, _b = _a.showEnrolled, showEnrolled = _b === void 0 ? false : _b, _c = _a.showPublic, showPublic = _c === void 0 ? true : _c, className = _a.className;
// Adapt to the actual API of useCourses
var _d = (0, useCourses_1.useCourses)(), courses = _d.courses, loading = _d.isLoading, error = _d.error;
// Filter courses based on props
var filteredCourses = react_1.default.useMemo(function () {
var result = __spreadArray([], courses, true);
if (agentId) {
result = result.filter(function (course) { return course.teacherId === agentId; });
}
// Filter based on visibility/public status
// Assuming there's a property like isPrivate or similar
if (!showPublic) {
result = result.filter(function (course) { return course.visibility !== 'public'; });
}
// Add more filtering logic as needed based on showEnrolled, etc.
return result;
}, [courses, agentId, showPublic, showEnrolled]);
if (loading)
return (0, jsx_runtime_1.jsx)("div", { children: "Loading courses..." });
if (error)
return (0, jsx_runtime_1.jsxs)("div", { children: ["Error loading courses: ", error] });
// Limit the number of courses if specified
var displayCourses = limit ? filteredCourses.slice(0, limit) : filteredCourses;
return ((0, jsx_runtime_1.jsxs)("div", { className: className || "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [displayCourses.map(function (course) { return ((0, jsx_runtime_1.jsx)(CourseCard_1.CourseCard, { course: course, onClick: function () { return onCourseClick && onCourseClick(course.id); } }, course.id)); }), displayCourses.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "col-span-full text-center py-8 text-gray-500", children: "No courses found" }))] }));
};
exports.CourseListContainer = CourseListContainer;
/**
* Container component that fetches and displays course content (sections and lectures)
*/
var CourseContentContainer = function (_a) {
var courseId = _a.courseId, onSectionClick = _a.onSectionClick, onLectureClick = _a.onLectureClick, className = _a.className;
// Adapt to the actual API of useCourseContent
var _b = (0, useCourseContent_1.useCourseContent)(courseId), content = _b.content, loading = _b.isLoading, error = _b.error;
// Extract course info and content from the API response
var courseInfo = content === null || content === void 0 ? void 0 : content.content;
// This is a simplified approach - in a real implementation,
// you would probably destructure the content object based on its actual structure
var course = courseInfo ? {
id: courseId,
title: courseInfo.title || "Untitled Course",
description: courseInfo.description || "No description available"
} : null;
// For sections and lectures, extract from appropriate content structure
// This is placeholder code - adapt to your actual data structure
var sections = ((courseInfo === null || courseInfo === void 0 ? void 0 : courseInfo.sections) || []).map(function (section) { return ({
id: section.id,
title: section.title
}); });
var lectures = ((courseInfo === null || courseInfo === void 0 ? void 0 : courseInfo.lectures) || []).map(function (lecture) { return ({
id: lecture.id,
title: lecture.title,
sectionId: lecture.sectionId
}); });
if (loading)
return (0, jsx_runtime_1.jsx)("div", { children: "Loading course content..." });
if (error)
return (0, jsx_runtime_1.jsxs)("div", { children: ["Error loading course content: ", error] });
if (!course)
return (0, jsx_runtime_1.jsx)("div", { children: "Course not found" });
return ((0, jsx_runtime_1.jsxs)("div", { className: className || "space-y-4", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold", children: course.title }), (0, jsx_runtime_1.jsx)("p", { children: course.description }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-4 mt-6", children: sections.map(function (section) { return ((0, jsx_runtime_1.jsxs)("div", { className: "border rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold cursor-pointer hover:text-primary-500", onClick: function () { return onSectionClick && onSectionClick(section.id); }, children: section.title }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2 space-y-2", children: lectures
.filter(function (lecture) { return lecture.sectionId === section.id; })
.map(function (lecture) { return ((0, jsx_runtime_1.jsx)("div", { className: "pl-4 py-2 border-l-2 cursor-pointer hover:bg-gray-50", onClick: function () { return onLectureClick && onLectureClick(lecture.id); }, children: lecture.title }, lecture.id)); }) })] }, section.id)); }) })] }));
};
exports.CourseContentContainer = CourseContentContainer;