react-native-elearn-ui 0.1.7 → 0.1.9

package/src/screens/QbankScreen.tsx

@@ -12,17 +12,32 @@ import { useElearnConfig } from '../context/ElearnConfigContext';
 import { useTheme } from '../context/ThemeContext';
 import { Typography, Card, ProgressBar, Icon } from '../components';
 import type { IconName } from '../components';
+import type { Course } from '../types';
 
 interface QbankScreenProps {
   hideHeader?: boolean;
+  onBack?: () => void;
+  onSelectCourse?: (course: Course) => void;
 }
 
-export const QbankScreen: React.FC<QbankScreenProps> = ({ hideHeader = false }) => {
+export const QbankScreen: React.FC<QbankScreenProps> = ({
+  hideHeader = false,
+  onBack,
+  onSelectCourse,
+}) => {
   const { config, callbacks } = useElearnConfig();
   const theme = useTheme();
 
   const courses = config.courses || [];
 
+  const handleBack = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      callbacks.onBackToDashboard?.();
+    }
+  };
+
   return (
     <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
       <StatusBar barStyle="dark-content" />
@@ -31,7 +46,7 @@ export const QbankScreen: React.FC<QbankScreenProps> = ({ hideHeader = false })
       {!hideHeader && (
         <View style={styles.header}>
           <TouchableOpacity
-            onPress={() => callbacks.onBackToDashboard?.()}
+            onPress={handleBack}
             style={[styles.backButton, { borderColor: theme.border }]}
           >
             <Icon name="arrow-left" size={20} color={theme.textPrimary} />
@@ -145,7 +160,13 @@ export const QbankScreen: React.FC<QbankScreenProps> = ({ hideHeader = false })
               <Card
                 key={course.id}
                 bordered
-                onPress={() => callbacks.onSelectCourse?.(course)}
+                onPress={() => {
+                  if (onSelectCourse) {
+                    onSelectCourse(course);
+                  } else {
+                    callbacks.onSelectCourse?.(course);
+                  }
+                }}
                 style={styles.subjectCard}
               >
                 <View style={styles.subjectRow}>

package/src/screens/QuestionScreen.tsx

@@ -14,22 +14,32 @@ import { useTheme } from '../context/ThemeContext';
 import { Typography, Button, Icon } from '../components';
 
 interface QuestionScreenProps {
-  quizId: string;
-  questions: Question[];
-  title: string;
+  quizId?: string;
+  questions?: Question[];
+  title?: string;
+  topicId?: string;
   onClose: () => void;
+  onFinishQuiz?: (quizId: string, results: QuizResults) => void;
   hideHeader?: boolean;
 }
 
 export const QuestionScreen: React.FC<QuestionScreenProps> = ({
   quizId,
   questions,
+  title,
+  topicId,
   onClose,
+  onFinishQuiz,
   hideHeader = false,
 }) => {
-  const { callbacks } = useElearnConfig();
+  const { config, callbacks } = useElearnConfig();
   const theme = useTheme();
 
+  const activeTopic = topicId ? config.courses?.flatMap((c) => c.topics).find((t) => t.id === topicId) : undefined;
+  const activeQuestions = questions || activeTopic?.questions || [];
+  const activeTitle = title || activeTopic?.title || 'Quiz';
+  const activeQuizId = quizId || topicId || '';
+
   const [currentIndex, setCurrentIndex] = useState(0);
   const [selectedOption, setSelectedOption] = useState<number | null>(null);
   const [isAnswered, setIsAnswered] = useState(false);
@@ -38,7 +48,7 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
   const [startTime] = useState(Date.now());
   const [isPaused, setIsPaused] = useState(false);
 
-  if (!questions || questions.length === 0) {
+  if (!activeQuestions || activeQuestions.length === 0) {
     return (
       <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
         <View style={styles.errorContainer}>
@@ -49,7 +59,7 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
     );
   }
 
-  const currentQuestion = questions[currentIndex]!;
+  const currentQuestion = activeQuestions[currentIndex]!;
   const optionPrefixes = ['A', 'B', 'C', 'D', 'E', 'F'];
 
   const handleOptionPress = (index: number) => {
@@ -68,19 +78,19 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
   };
 
   const handleNext = () => {
-    if (currentIndex < questions.length - 1) {
+    if (currentIndex < activeQuestions.length - 1) {
       setCurrentIndex((prev) => prev + 1);
       setSelectedOption(null);
       setIsAnswered(false);
     } else {
       // Last question - finish quiz
       const totalTimeSeconds = Math.round((Date.now() - startTime) / 1000);
-      const wrongCount = questions.length - correctCount;
-      const accuracy = Math.round((correctCount / questions.length) * 100);
+      const wrongCount = activeQuestions.length - correctCount;
+      const accuracy = Math.round((correctCount / activeQuestions.length) * 100);
 
       const results: QuizResults = {
-        quizId,
-        totalQuestions: questions.length,
+        quizId: activeQuizId,
+        totalQuestions: activeQuestions.length,
         correctCount,
         wrongCount,
         skippedCount: 0,
@@ -89,7 +99,11 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
         userAnswers,
       };
 
-      callbacks.onFinishQuiz?.(quizId, results);
+      if (onFinishQuiz) {
+        onFinishQuiz(activeQuizId, results);
+      } else {
+        callbacks.onFinishQuiz?.(activeQuizId, results);
+      }
     }
   };
 
@@ -105,7 +119,7 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
           </TouchableOpacity>
           
           <Typography variant="h2" bold style={styles.headerTitle}>
-            QBank
+            {activeTitle || 'QBank'}
           </Typography>
 
           <TouchableOpacity style={styles.shareButton}>
@@ -119,7 +133,7 @@ export const QuestionScreen: React.FC<QuestionScreenProps> = ({
         {/* Question Header & Pause/Bookmark Actions Row */}
         <View style={styles.metaRow}>
           <Typography variant="caption" bold color={theme.textSecondary} style={styles.questionNumLabel}>
-            QUESTION {currentIndex + 1}/{questions.length}
+            QUESTION {currentIndex + 1}/{activeQuestions.length}
           </Typography>
           <View style={styles.metaActions}>
             <TouchableOpacity style={styles.metaActionBtn}>

package/src/screens/QuizStartScreen.tsx

@@ -6,32 +6,67 @@ import {
   SafeAreaView,
   StatusBar,
 } from 'react-native';
-import type { Topic, Course } from '../types';
+import type { Topic, Course, Question } from '../types';
 import { useElearnConfig } from '../context/ElearnConfigContext';
 import { useTheme } from '../context/ThemeContext';
 import { Typography, Card, Button, Icon } from '../components';
 
 interface QuizStartScreenProps {
-  course: Course;
-  topic: Topic;
+  course?: Course;
+  courseId?: string;
+  topic?: Topic;
+  topicId?: string;
   onBack: () => void;
   hideHeader?: boolean;
+  onStartQuiz?: (quizId: string, questions: Question[], title: string) => void;
 }
 
 export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
+  course,
+  courseId,
   topic,
+  topicId,
   onBack,
   hideHeader = false,
+  onStartQuiz,
 }) => {
-  const { callbacks } = useElearnConfig();
+  const { config, callbacks } = useElearnConfig();
   const theme = useTheme();
 
+  const activeCourse = course || config.courses?.find((c) => c.id === courseId);
+  const activeTopic = topic || activeCourse?.topics.find((t) => t.id === topicId) || config.courses?.flatMap((c) => c.topics).find((t) => t.id === topicId);
+
   const handleStart = () => {
-    if (callbacks.onStartQuiz && topic.questions) {
-      callbacks.onStartQuiz(topic.id, topic.questions, topic.title);
+    if (activeTopic && activeTopic.questions) {
+      if (onStartQuiz) {
+        onStartQuiz(activeTopic.id, activeTopic.questions, activeTopic.title);
+      } else {
+        callbacks.onStartQuiz?.(activeTopic.id, activeTopic.questions, activeTopic.title);
+      }
     }
   };
 
+  if (!activeTopic) {
+    return (
+      <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
+          <Typography variant="h2" bold style={{ marginBottom: 12 }}>Topic not found</Typography>
+          <TouchableOpacity
+            onPress={onBack}
+            style={{
+              paddingHorizontal: 20,
+              paddingVertical: 10,
+              borderRadius: 8,
+              backgroundColor: theme.primary,
+            }}
+          >
+            <Typography variant="body" bold color="#FFFFFF">Go Back</Typography>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
   // Mock list of glance topics matching mockup 3
   const glanceTopics = [
     'Cerebral Cortex',
@@ -67,7 +102,7 @@ export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
           
           {/* Section Category Title */}
           <Typography variant="h1" bold color={theme.textPrimary} style={styles.categoryTitle}>
-            {topic.category || 'Neuro Anatomy'}
+            {activeTopic.category || 'Neuro Anatomy'}
           </Typography>
 
           {/* Main Info Box */}
@@ -80,10 +115,10 @@ export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
               {/* Right details */}
               <View style={styles.topicHeaderDetails}>
                 <Typography variant="h2" bold color={theme.textPrimary} style={styles.topicMainTitle}>
-                  {topic.title}
+                  {activeTopic.title}
                 </Typography>
                 <Typography variant="caption" color={theme.textSecondary}>
-                  {topic.totalQuestions} Questions
+                  {activeTopic.totalQuestions} Questions
                 </Typography>
               </View>
             </View>
@@ -94,7 +129,7 @@ export const QuizStartScreen: React.FC<QuizStartScreenProps> = ({
               onPress={handleStart}
               variant="primary"
               style={[styles.startButton, { backgroundColor: theme.primary }]}
-              disabled={!topic.questions || topic.questions.length === 0}
+              disabled={!activeTopic.questions || activeTopic.questions.length === 0}
             />
           </Card>
 

package/src/screens/ResultScreen.tsx

@@ -15,7 +15,8 @@ import { Typography, Card, CircularProgress, Button, Icon } from '../components'
 
 interface ResultScreenProps {
   results: QuizResults;
-  questions: Question[];
+  questions?: Question[];
+  topicId?: string;
   onClose: () => void;
   onReviewAnswers?: () => void;
   hideHeader?: boolean;
@@ -24,12 +25,16 @@ interface ResultScreenProps {
 export const ResultScreen: React.FC<ResultScreenProps> = ({
   results,
   questions,
+  topicId,
   onClose,
   hideHeader = false,
 }) => {
-  const { getString } = useElearnConfig();
+  const { config, getString } = useElearnConfig();
   const theme = useTheme();
 
+  const activeTopic = topicId ? config.courses?.flatMap((c) => c.topics).find((t) => t.id === topicId) : undefined;
+  const activeQuestions = questions || activeTopic?.questions || [];
+
   // Selected question index for individual review
   const [selectedReviewIndex, setSelectedReviewIndex] = useState<number | null>(null);
 
@@ -51,14 +56,14 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
   };
 
   const handleNextReview = () => {
-    if (selectedReviewIndex !== null && selectedReviewIndex < questions.length - 1) {
+    if (selectedReviewIndex !== null && selectedReviewIndex < activeQuestions.length - 1) {
       setSelectedReviewIndex(selectedReviewIndex + 1);
     }
   };
 
   // --- Sub-View: Individual Question Detail Review ---
   if (selectedReviewIndex !== null) {
-    const currentReviewQuestion = questions[selectedReviewIndex]!;
+    const currentReviewQuestion = activeQuestions[selectedReviewIndex]!;
     const userAnswerIdx = results.userAnswers[currentReviewQuestion.id];
     // Removed unused isCorrect variable
 
@@ -88,7 +93,7 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
           {/* Question Index Meta */}
           <View style={styles.metaRow}>
             <Typography variant="caption" bold color={theme.textSecondary} style={styles.questionNumLabel}>
-              QUESTION {selectedReviewIndex + 1}/{questions.length}
+              QUESTION {selectedReviewIndex + 1}/{activeQuestions.length}
             </Typography>
             <View style={styles.metaActions}>
               <TouchableOpacity style={styles.metaActionBtn}>
@@ -211,11 +216,11 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
           {/* Next Button */}
           <TouchableOpacity
             onPress={handleNextReview}
-            disabled={selectedReviewIndex === questions.length - 1}
+            disabled={selectedReviewIndex === activeQuestions.length - 1}
             style={[
               styles.nextActionBtn,
               { backgroundColor: theme.primary },
-              selectedReviewIndex === questions.length - 1 && { opacity: 0.4 }
+              selectedReviewIndex === activeQuestions.length - 1 && { opacity: 0.4 }
             ]}
           >
             <Typography variant="body" bold color="#FFFFFF">
@@ -303,7 +308,7 @@ export const ResultScreen: React.FC<ResultScreenProps> = ({
         </View>
 
         <View style={styles.reviewList}>
-          {questions.map((question, idx) => {
+          {activeQuestions.map((question, idx) => {
             const userAnswerIdx = results.userAnswers[question.id];
             const isCorrect = userAnswerIdx === question.correctOptionIndex;
 

package/src/screens/TopicListScreen.tsx

@@ -13,26 +13,53 @@ import { useTheme } from '../context/ThemeContext';
 import { Typography, Card, Icon } from '../components';
 
 interface TopicListScreenProps {
-  course: Course;
+  course?: Course;
+  courseId?: string;
   onBack: () => void;
   hideHeader?: boolean;
+  onSelectTopic?: (course: Course, topic: Topic) => void;
 }
 
 export const TopicListScreen: React.FC<TopicListScreenProps> = ({
   course,
+  courseId,
   onBack,
   hideHeader = false,
+  onSelectTopic,
 }) => {
-  const { callbacks } = useElearnConfig();
+  const { config, callbacks } = useElearnConfig();
   const theme = useTheme();
 
+  const activeCourse = course || config.courses?.find((c) => c.id === courseId);
+
   // Active filter tab
   const [activeTab, setActiveTab] = useState('All');
   const tabs = ['All', 'New', 'Completed', 'Paused', 'Not Started'];
 
+  if (!activeCourse) {
+    return (
+      <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
+          <Typography variant="h2" bold style={{ marginBottom: 12 }}>Course not found</Typography>
+          <TouchableOpacity
+            onPress={onBack}
+            style={{
+              paddingHorizontal: 20,
+              paddingVertical: 10,
+              borderRadius: 8,
+              backgroundColor: theme.primary,
+            }}
+          >
+            <Typography variant="body" bold color="#FFFFFF">Go Back</Typography>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
   // Group topics by category
   const categoriesMap: { [key: string]: Topic[] } = {};
-  course.topics.forEach((topic) => {
+  activeCourse.topics.forEach((topic) => {
     const cat = topic.category || 'GENERAL';
     if (!categoriesMap[cat]) {
       categoriesMap[cat] = [];
@@ -69,10 +96,10 @@ export const TopicListScreen: React.FC<TopicListScreenProps> = ({
         {/* Subject Header Suffix */}
         <View style={styles.subjectHeader}>
           <Typography variant="h1" bold color={theme.textPrimary} style={styles.subjectTitle}>
-            {course.title}
+            {activeCourse.title}
           </Typography>
           <Typography variant="body" color={theme.textSecondary}>
-            {course.topics.length} Modules
+            {activeCourse.topics.length} Modules
           </Typography>
         </View>
 
@@ -122,7 +149,7 @@ export const TopicListScreen: React.FC<TopicListScreenProps> = ({
                   {list.map((topic) => {
                     globalIndex++;
                     const currentIndex = globalIndex;
-                    const isLastInCourse = currentIndex === course.topics.length;
+                    const isLastInCourse = currentIndex === activeCourse.topics.length;
                     
                     return (
                       <View key={topic.id} style={styles.timelineItemRow}>
@@ -146,7 +173,13 @@ export const TopicListScreen: React.FC<TopicListScreenProps> = ({
                         {/* Right Side Info Card */}
                         <TouchableOpacity
                           activeOpacity={0.8}
-                          onPress={() => callbacks.onSelectTopic?.(course, topic)}
+                          onPress={() => {
+                            if (onSelectTopic) {
+                              onSelectTopic(activeCourse, topic);
+                            } else {
+                              callbacks.onSelectTopic?.(activeCourse, topic);
+                            }
+                          }}
                           style={styles.cardTouchable}
                         >
                           <Card bordered style={styles.topicCard}>

package/src/screens/index.ts

@@ -4,3 +4,4 @@ export { TopicListScreen } from './TopicListScreen';
 export { QuizStartScreen } from './QuizStartScreen';
 export { QuestionScreen } from './QuestionScreen';
 export { ResultScreen } from './ResultScreen';
+export { PearlsScreen } from './PearlsScreen';