devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Forgot to stage it

Browse Source
This commit is contained in:
Carlos-Mesquita
2024-11-09 06:53:17 +00:00
parent 50481a836e
commit c507eae507
12 changed files with 887 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/components/ExamEditor/Exercises/Speaking/index.tsx
View File

@@ -7,6 +7,9 @@ import Header from "../../Shared/Header";
import GenLoader from "../Shared/GenLoader";
import { Card, CardContent } from "@/components/ui/card";
import AutoExpandingTextArea from "@/components/Low/AutoExpandingTextarea";
import Speaking2 from "./Speaking2";
import InteractiveSpeaking from "./InteractiveSpeaking";
import Speaking1 from "./Speaking1";
interface Props {
sectionId: number;
@@ -14,176 +17,24 @@ interface Props {
}
const Speaking: React.FC<Props> = ({ sectionId, exercise }) => {
const { currentModule, dispatch } = useExamEditorStore();
const { generating, genResult } = useExamEditorStore(
const { currentModule } = useExamEditorStore();
const { state } = useExamEditorStore(
(state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
);
const { edit } = useExamEditorStore((store) => store.modules[currentModule]);
const [local, setLocal] = useState(exercise);
const [loading, setLoading] = useState(generating === "context");
const [questions, setQuestions] = useState(() => {
if (sectionId === 1) {
if ((exercise as SpeakingExercise).prompts.length > 0) {
return (exercise as SpeakingExercise).prompts;
}
return Array(5).fill("");
} else if (sectionId === 2) {
if ((exercise as SpeakingExercise).text && (exercise as SpeakingExercise).prompts.length > 0) {
return (exercise as SpeakingExercise).prompts;
}
return Array(3).fill("");
} else {
if ((exercise as InteractiveSpeakingExercise).prompts.length > 0) {
return (exercise as InteractiveSpeakingExercise).prompts?.map(p => p.text);
}
return Array(5).fill("");
}
});
const updateModule = useCallback((updates: Partial<ModuleState>) => {
dispatch({ type: 'UPDATE_MODULE', payload: { updates } });
}, [dispatch]);
const { editing, setEditing, handleSave, handleDiscard, modeHandle } = useSectionEdit({
sectionId,
mode: "edit",
onSave: () => {
let newExercise;
if (sectionId === 1) {
newExercise = {
...local,
prompts: questions
} as SpeakingExercise;
} else if (sectionId === 2) {
newExercise = {
...local,
text: questions[0],
prompts: questions.slice(1),
} as SpeakingExercise;
} else {
newExercise = {
...local,
prompts: questions.map(text => ({
text,
video_url: (local as InteractiveSpeakingExercise).prompts?.[0]?.video_url || ""
}))
} as InteractiveSpeakingExercise;
}
setEditing(false);
dispatch({
type: "UPDATE_SECTION_STATE",
payload: {
sectionId: sectionId,
update: newExercise
}
});
},
onDiscard: () => {
setLocal(exercise);
},
onMode: () => {
setLocal(exercise);
if (sectionId === 1) {
setQuestions(Array(5).fill(""));
} else if (sectionId === 2) {
setQuestions(Array(3).fill(""));
} else {
setQuestions(Array(5).fill(""));
}
},
});
useEffect(() => {
const isLoading = generating === "context";
setLoading(isLoading);
if (isLoading) {
updateModule({ edit: Array.from(new Set([...edit, sectionId])) });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [generating, sectionId]);
useEffect(() => {
if (genResult && generating === "context") {
setEditing(true);
if (sectionId === 1) {
setQuestions(genResult[0].questions);
} else if (sectionId === 2) {
setQuestions([genResult[0].question, ...genResult[0].prompts]);
} else {
setQuestions(genResult[0].questions);
}
dispatch({
type: "UPDATE_SECTION_SINGLE_FIELD",
payload: {
sectionId,
module: currentModule,
field: "genResult",
value: undefined
}
});
}
}, [genResult, generating, dispatch, sectionId, setEditing, currentModule]);
const handleQuestionChange = (index: number, value: string) => {
setQuestions(prev => {
const newQuestions = [...prev];
newQuestions[index] = value;
return newQuestions;
});
};
const getQuestionLabel = (index: number) => {
if (sectionId === 2 && index === 0) {
return "Main Question";
} else if (sectionId === 2) {
return `Prompt ${index}`;
} else {
return `Question ${index + 1}`;
}
};
return (
<>
<div className='relative pb-4'>
<Header
title={`Speaking ${sectionId} Script`}
description='Generate or write the script for the video.'
editing={editing}
handleSave={handleSave}
modeHandle={modeHandle}
handleDiscard={handleDiscard}
/>
</div>
{loading ? (
<GenLoader module={currentModule} />
) : (
<div className="mx-auto p-3 space-y-6">
<Card>
<CardContent>
<div className="p-4">
<div className="flex flex-col space-y-6">
{questions.map((question: string, index: number) => (
<div key={index} className="flex flex-col">
<h2 className="font-semibold my-2">{getQuestionLabel(index)}</h2>
<AutoExpandingTextArea
value={question}
onChange={(text) => handleQuestionChange(index, text)}
className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent min-h-[80px] transition-all"
placeholder={`Enter ${getQuestionLabel(index).toLowerCase()}`}
/>
</div>
))}
</div>
</div>
</CardContent>
</Card>
<div className="mx-auto p-3 space-y-6">
<div className="p-4">
<div className="flex flex-col space-y-6">
{sectionId === 1 && <Speaking1 sectionId={sectionId} exercise={state as InteractiveSpeakingExercise} />}
{sectionId === 2 && <Speaking2 sectionId={sectionId} exercise={state as SpeakingExercise} />}
{sectionId === 3 && <InteractiveSpeaking sectionId={sectionId} exercise={state as InteractiveSpeakingExercise} />}
</div>
</div>
)}
</div>
</>
);
};
export default Speaking;
export default Speaking;