65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import { useCallback, useEffect, useState } from "react";
|
|
import useExamEditorStore from "@/stores/examEditor";
|
|
import ExamEditorStore, { Generating } from "@/stores/examEditor/types";
|
|
import Header from "../../Shared/Header";
|
|
import { Module } from "@/interfaces";
|
|
import GenLoader from "../../Exercises/Shared/GenLoader";
|
|
|
|
interface Props {
|
|
sectionId: number;
|
|
title: string;
|
|
description: string;
|
|
editing: boolean;
|
|
renderContent: (editing: boolean, listeningSection?: number) => React.ReactNode;
|
|
mode?: "edit" | "delete";
|
|
onSave: () => void;
|
|
onDiscard: () => void;
|
|
onEdit?: () => void;
|
|
module: Module;
|
|
listeningSection?: number;
|
|
context: Generating;
|
|
}
|
|
|
|
const SectionContext: React.FC<Props> = ({ sectionId, title, description, renderContent, editing, onSave, onDiscard, onEdit, mode = "edit", module, context, listeningSection }) => {
|
|
const { currentModule } = useExamEditorStore();
|
|
const { generating, levelGenerating } = useExamEditorStore(
|
|
(state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
|
|
);
|
|
|
|
const [loading, setLoading] = useState(generating && generating === context);
|
|
|
|
useEffect(() => {
|
|
const gen = module === "level" ? levelGenerating.find(g => g === context) !== undefined : generating && generating === context;
|
|
if (loading !== gen) {
|
|
setLoading(gen);
|
|
}
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [generating, levelGenerating]);
|
|
|
|
return (
|
|
<div className="p-8 shadow-inner border border-gray-200 bg-gray-50 rounded-xl">
|
|
<div className='relative pb-4'>
|
|
<Header
|
|
title={title}
|
|
description={description}
|
|
editing={editing}
|
|
handleSave={onSave}
|
|
handleDiscard={onDiscard}
|
|
handleEdit={onEdit}
|
|
module={module}
|
|
/>
|
|
</div>
|
|
<div className="mt-4">
|
|
{loading ? (
|
|
<GenLoader module={module} />
|
|
) : (
|
|
renderContent(editing, listeningSection)
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SectionContext;
|