diff --git a/src/components/micro_learning/MicroLearningContainer.jsx b/src/components/micro_learning/MicroLearningContainer.jsx index 97a320c..f19f640 100644 --- a/src/components/micro_learning/MicroLearningContainer.jsx +++ b/src/components/micro_learning/MicroLearningContainer.jsx @@ -1,9 +1,8 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import ConceptExplainer from './ConceptExplainer'; import ScenarioQuiz from './ScenarioQuiz'; import FlashcardSet from './FlashcardSet'; -import ReflectionPrompt from './ReflectionPrompt'; import { useMicroLearningCompletions } from '../../hooks/useMicroLearningCompletions'; export default function MicroLearningContainer({ microLearning, sessionWeek, onCompletedSuccessfully }) { @@ -42,8 +41,6 @@ export default function MicroLearningContainer({ microLearning, sessionWeek, onC return ; case 'flashcard_set': return ; - case 'reflection_prompt': - return ; default: return
Unknown micro learning type.
; } diff --git a/src/components/micro_learning/MicroLearningSelector.jsx b/src/components/micro_learning/MicroLearningSelector.jsx index 55821d7..18d7693 100644 --- a/src/components/micro_learning/MicroLearningSelector.jsx +++ b/src/components/micro_learning/MicroLearningSelector.jsx @@ -1,6 +1,7 @@ -import React, { useState } from 'react'; -import { Loader, BookOpen, Target, Layers, MessageCircle } from 'lucide-react'; +import { useEffect, useState } from 'react'; +import { Loader, BookOpen, Target, Layers, CheckCircle2 } from 'lucide-react'; import { useMicroLearnings } from '../../hooks/useMicroLearnings'; +import { getExistingTypesForTopic } from '../../lib/microLearningService'; import MicroLearningContainer from './MicroLearningContainer'; import Card from '../ui/Card'; @@ -23,12 +24,6 @@ const TYPES = [ description: 'Test your recall with a set of quick flashcards.', icon: Layers, }, - { - key: 'reflection_prompt', - label: 'Reflection Prompt', - description: 'Connect the topic to your own professional experience.', - icon: MessageCircle, - }, ]; export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCompleted }) { @@ -36,6 +31,15 @@ export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCom const [selectedML, setSelectedML] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); + const [availableTypes, setAvailableTypes] = useState(() => new Set()); + + useEffect(() => { + let cancelled = false; + getExistingTypesForTopic(topicId).then((set) => { + if (!cancelled) setAvailableTypes(set); + }); + return () => { cancelled = true; }; + }, [topicId, selectedML]); const handleSelection = async (type) => { setLoading(true); @@ -105,21 +109,36 @@ export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCom

Select how you want to engage with this topic.

- {TYPES.map(({ key, label, description, icon: Icon }) => ( -
handleSelection(key)} - > -
-
- + {TYPES.map(({ key, label, description, icon: Icon }) => { + const isAvailable = availableTypes.has(key); + return ( +
handleSelection(key)} + > + {isAvailable && ( + + Beschikbaar + + )} +
+
+ +
+

{label}

-

{label}

+

{description}

-

{description}

-
- ))} + ); + })}
); diff --git a/src/components/micro_learning/ReflectionPrompt.jsx b/src/components/micro_learning/ReflectionPrompt.jsx deleted file mode 100644 index af12411..0000000 --- a/src/components/micro_learning/ReflectionPrompt.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useState } from 'react'; -import Card from '../ui/Card'; -import Button from '../ui/Button'; - -export default function ReflectionPrompt({ content, onComplete }) { - const [response, setResponse] = useState(''); - const [submitted, setSubmitted] = useState(false); - - const handleSubmit = (e) => { - e.preventDefault(); - if (!response.trim() || submitted) return; - - setSubmitted(true); - onComplete(); - }; - - return ( - -
-

Reflection Prompt

-
-
-
-

{content?.prompt}

-
- - {!submitted ? ( -
-