Reverted Level to only utas placement test exercises, Speaking, bug fixes, placeholder

src/components/ExamEditor/Exercises/Speaking/Speaking2.tsx

@@ -11,12 +11,14 @@ import { BsFileText } from 'react-icons/bs';
 import { AiOutlineUnorderedList } from 'react-icons/ai';
 import { BiQuestionMark, BiMessageRoundedDetail } from "react-icons/bi";
 import GenLoader from "../Shared/GenLoader";
+import { RiVideoLine } from 'react-icons/ri';
 
 interface Props {
     sectionId: number;
     exercise: SpeakingExercise;
 }
 
+
 const Speaking2: React.FC<Props> = ({ sectionId, exercise }) => {
     const { currentModule, dispatch } = useExamEditorStore();
     const [local, setLocal] = useState(exercise);
@@ -25,18 +27,12 @@ const Speaking2: React.FC<Props> = ({ sectionId, exercise }) => {
         (state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
     );
 
-
-    const updateTopic = (topic: string) => {
-        setLocal(prev => ({ ...prev, topic: topic }));
-        dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: { topic: topic } } });
-    };
-
-
     const { editing, setEditing, handleSave, handleDiscard, modeHandle } = useSectionEdit({
         sectionId,
         mode: "edit",
         onSave: () => {
             setEditing(false);
+            console.log(local);
             dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId: sectionId, update: local } });
         },
         onDiscard: () => {
@@ -69,6 +65,32 @@ const Speaking2: React.FC<Props> = ({ sectionId, exercise }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [genResult, generating]);
 
+    useEffect(() => {
+        if (genResult && generating === "media") {
+            setLocal({...local, video_url: genResult[0].video_url});
+            dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId, update: {...local, video_url: genResult[0].video_url} } });
+            dispatch({
+                type: "UPDATE_SECTION_SINGLE_FIELD",
+                payload: {
+                    sectionId,
+                    module: currentModule,
+                    field: "generating",
+                    value: undefined
+                }
+            });
+            dispatch({
+                type: "UPDATE_SECTION_SINGLE_FIELD",
+                payload: {
+                    sectionId,
+                    module: currentModule,
+                    field: "genResult",
+                    value: undefined
+                }
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [genResult, generating]);
+
     const addPrompt = () => {
         setLocal(prev => ({
             ...prev,
@@ -91,9 +113,9 @@ const Speaking2: React.FC<Props> = ({ sectionId, exercise }) => {
         });
     };
 
-    const isUnedited = local.text === "" || 
-                   (local.title === undefined || local.title === "") || 
-                   local.prompts.length === 0;
+    const isUnedited = local.text === "" ||
+        (local.title === undefined || local.title === "") ||
+        local.prompts.length === 0;
 
     const tooltipContent = `
         <div class='p-2 max-w-xs'>
@@ -122,7 +144,7 @@ const Speaking2: React.FC<Props> = ({ sectionId, exercise }) => {
                     module="speaking"
                 />
             </div>
-            {generating ? (
+            {generating && generating === "context" ? (
                 <GenLoader module={currentModule} />
             ) : (
                 <>
@@ -222,6 +244,25 @@ const Speaking2: React.FC<Props> = ({ sectionId, exercise }) => {
                         </p>
                     ) : (
                         <div className="space-y-6">
+                            {local.video_url && <Card>
+                                <CardContent className="pt-6">
+                                    <div className="flex flex-col items-start gap-3">
+                                        <div className="flex flex-row mb-3 gap-4">
+                                            <RiVideoLine className="h-5 w-5 text-amber-500 mt-1" />
+                                            <h3 className="font-semibold text-xl">Video</h3>
+                                        </div>
+                                        <div className="flex flex-col gap-4 w-full items-center">
+                                            <video controls className="w-full rounded-xl">
+                                                <source src={local.video_url } />
+                                            </video>
+                                        </div>
+                                    </div>
+                                </CardContent>
+                            </Card>
+                            }
+                            {generating && generating === "media" &&
+                                <GenLoader module={currentModule} custom="Generating the video ... This may take a while ..." />
+                            }
                             <Card>
                                 <CardContent className="pt-6">
                                     <div className="flex flex-col items-start gap-3">