react-native-elearn-ui 0.1.5 → 0.1.6

package/src/screens/TopicListScreen.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   View,
   ScrollView,
@@ -7,10 +7,10 @@ import {
   SafeAreaView,
   StatusBar,
 } from 'react-native';
-import type { Course } from '../types';
+import type { Course, Topic } from '../types';
 import { useElearnConfig } from '../context/ElearnConfigContext';
 import { useTheme } from '../context/ThemeContext';
-import { Typography, Card, ProgressBar, Icon } from '../components';
+import { Typography, Card, Icon } from '../components';
 
 interface TopicListScreenProps {
   course: Course;
@@ -23,9 +23,28 @@ export const TopicListScreen: React.FC<TopicListScreenProps> = ({
   onBack,
   hideHeader = false,
 }) => {
-  const { callbacks, getString } = useElearnConfig();
+  const { callbacks } = useElearnConfig();
   const theme = useTheme();
 
+  // Active filter tab
+  const [activeTab, setActiveTab] = useState('All');
+  const tabs = ['All', 'New', 'Completed', 'Paused', 'Not Started'];
+
+  // Group topics by category
+  const categoriesMap: { [key: string]: Topic[] } = {};
+  course.topics.forEach((topic) => {
+    const cat = topic.category || 'GENERAL';
+    if (!categoriesMap[cat]) {
+      categoriesMap[cat] = [];
+    }
+    categoriesMap[cat].push(topic);
+  });
+
+  const categories = Object.keys(categoriesMap);
+
+  // Keep a global sequential counter for the timeline nodes
+  let globalIndex = 0;
+
   return (
     <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
       <StatusBar barStyle="dark-content" />
@@ -33,83 +52,148 @@ export const TopicListScreen: React.FC<TopicListScreenProps> = ({
       {/* Header */}
       {!hideHeader && (
         <View style={styles.header}>
-          <TouchableOpacity
-            onPress={onBack}
-            style={[styles.backButton, { borderColor: theme.border }]}
-          >
+          <TouchableOpacity onPress={onBack} style={styles.backButton}>
             <Icon name="arrow-left" size={20} color={theme.textPrimary} />
           </TouchableOpacity>
-          <Typography variant="h3" bold style={styles.headerTitle} numberOfLines={1}>
-            {course.title}
+          <Typography variant="h2" bold style={styles.headerTitle}>
+            QBank
           </Typography>
-          <View style={styles.headerRightPlaceholder} />
+          <TouchableOpacity style={styles.searchButton}>
+            <Icon name="search" size={20} color={theme.textPrimary} />
+          </TouchableOpacity>
         </View>
       )}
 
       <ScrollView contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
         
-        {/* Subject Summary Card */}
-        <Card style={[styles.summaryCard, { backgroundColor: theme.primary }]}>
-          <Typography variant="h2" bold color="#FFFFFF">
+        {/* Subject Header Suffix */}
+        <View style={styles.subjectHeader}>
+          <Typography variant="h1" bold color={theme.textPrimary} style={styles.subjectTitle}>
             {course.title}
           </Typography>
-          {course.description && (
-            <Typography variant="caption" color="rgba(255, 255, 255, 0.8)" style={styles.summaryDesc}>
-              {course.description}
-            </Typography>
-          )}
-          <View style={styles.progressSummaryContainer}>
-            <View style={styles.progressSummaryText}>
-              <Typography variant="caption" color="#FFFFFF">
-                Overall Subject Progress
-              </Typography>
-              <Typography variant="label" bold color="#FFFFFF">
-                {course.completedQuestions}/{course.totalQuestions} Questions answered
-              </Typography>
-            </View>
-            <Typography variant="h2" bold color="#FFFFFF">
-              {Math.round(course.progress * 100)}%
-            </Typography>
-          </View>
-          <ProgressBar progress={course.progress} color="#FFFFFF" style={styles.summaryProgressBar} />
-        </Card>
-
-        {/* List of Topics */}
-        <View style={styles.sectionHeader}>
-          <Typography variant="h2" bold color={theme.textPrimary}>
-            {getString('topicsLabel')} ({course.topics.length})
+          <Typography variant="body" color={theme.textSecondary}>
+            {course.topics.length} Modules
           </Typography>
         </View>
 
-        <View style={styles.topicsList}>
-          {course.topics.map((topic) => {
-            const pct = Math.round(topic.progress * 100);
+        {/* Horizontal Filters Tabs Bar */}
+        <View style={styles.tabsContainer}>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tabsScroll}>
+            {tabs.map((tab) => {
+              const isActive = activeTab === tab;
+              return (
+                <TouchableOpacity
+                  key={tab}
+                  onPress={() => setActiveTab(tab)}
+                  style={[
+                    styles.tabButton,
+                    isActive
+                      ? { backgroundColor: theme.textPrimary }
+                      : { borderColor: theme.border, borderWidth: 1 }
+                  ]}
+                >
+                  <Typography
+                    variant="caption"
+                    bold
+                    color={isActive ? '#FFFFFF' : theme.textSecondary}
+                  >
+                    {tab}
+                  </Typography>
+                </TouchableOpacity>
+              );
+            })}
+          </ScrollView>
+        </View>
 
+        {/* Timeline of Chapters Categories */}
+        <View style={styles.listContainer}>
+          {categories.map((category) => {
+            const list = categoriesMap[category] || [];
+            
             return (
-              <TouchableOpacity
-                key={topic.id}
-                activeOpacity={0.8}
-                onPress={() => callbacks.onSelectTopic?.(course, topic)}
-              >
-                <Card bordered style={styles.topicCard}>
-                  <View style={styles.topicCardHeader}>
-                    <View style={styles.topicTitleSection}>
-                      <Typography variant="h3" bold color={theme.textPrimary}>
-                        {topic.title}
-                      </Typography>
-                      <Typography variant="caption" color={theme.textSecondary}>
-                        {topic.completedQuestions}/{topic.totalQuestions} {getString('questionsCountLabel')}
-                      </Typography>
-                    </View>
-                    <View style={styles.pctBadge}>
-                      <Typography variant="caption" bold color={theme.primary}>
-                        {pct}%
-                      </Typography>
-                    </View>
-                  </View>
-                  <ProgressBar progress={topic.progress} style={styles.topicProgressBar} />
-                </Card>
-              </TouchableOpacity>
+              <View key={category} style={styles.categoryBlock}>
+                {/* Category Section Title */}
+                <Typography variant="caption" bold color={theme.textSecondary} style={styles.categoryTitle}>
+                  {category.toUpperCase()}
+                </Typography>
+                
+                {/* Timeline Items */}
+                <View style={styles.categoryItems}>
+                  {list.map((topic) => {
+                    globalIndex++;
+                    const currentIndex = globalIndex;
+                    const isLastInCourse = currentIndex === course.topics.length;
+                    
+                    return (
+                      <View key={topic.id} style={styles.timelineItemRow}>
+                        
+                        {/* Left Side Timeline Connectors */}
+                        <View style={styles.timelineLeftColumn}>
+                          {/* Top Line connector */}
+                          {currentIndex > 1 && <View style={[styles.timelineLine, { height: '50%', top: 0 }]} />}
+                          
+                          {/* Bottom Line connector */}
+                          {!isLastInCourse && <View style={[styles.timelineLine, { height: '100%', top: 16 }]} />}
+                          
+                          {/* Sequential Number Circle */}
+                          <View style={[styles.numberNode, { backgroundColor: '#8C9BAB' }]}>
+                            <Typography variant="caption" bold color="#FFFFFF" style={styles.nodeText}>
+                              {currentIndex}
+                            </Typography>
+                          </View>
+                        </View>
+
+                        {/* Right Side Info Card */}
+                        <TouchableOpacity
+                          activeOpacity={0.8}
+                          onPress={() => callbacks.onSelectTopic?.(course, topic)}
+                          style={styles.cardTouchable}
+                        >
+                          <Card bordered style={styles.topicCard}>
+                            <View style={styles.cardMainRow}>
+                              
+                              {/* Left Text details */}
+                              <View style={styles.cardInfoCol}>
+                                <Typography variant="h3" bold color={theme.textPrimary} style={styles.cardTitle}>
+                                  {topic.title}
+                                </Typography>
+                                
+                                <View style={styles.ratingRow}>
+                                  <Icon name="star" size={14} color="#EAB308" />
+                                  <Typography variant="caption" bold color={theme.textPrimary} style={styles.ratingVal}>
+                                    {topic.rating || '4.5'}
+                                  </Typography>
+                                  <View style={styles.bulletSeparator} />
+                                  <Typography variant="caption" color={theme.textSecondary}>
+                                    {topic.totalQuestions} Questions
+                                  </Typography>
+                                </View>
+                              </View>
+                              
+                              {/* Right Badge / Lock option */}
+                              <View style={styles.cardBadgeCol}>
+                                {topic.isFree ? (
+                                  <View style={[styles.freeBadge, { borderColor: theme.primary }]}>
+                                    <Typography variant="caption" bold color={theme.primary} style={styles.freeBadgeText}>
+                                      FREE
+                                    </Typography>
+                                  </View>
+                                ) : topic.isLocked ? (
+                                  <View style={styles.lockContainer}>
+                                    <Icon name="lock" size={14} color={theme.textSecondary} />
+                                  </View>
+                                ) : null}
+                              </View>
+
+                            </View>
+                          </Card>
+                        </TouchableOpacity>
+
+                      </View>
+                    );
+                  })}
+                </View>
+              </View>
             );
           })}
         </View>
@@ -127,78 +211,145 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 20,
+    paddingHorizontal: 16,
     paddingVertical: 12,
   },
   backButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    borderWidth: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    padding: 6,
   },
   headerTitle: {
-    flex: 1,
-    textAlign: 'center',
-    marginHorizontal: 12,
+    fontSize: 18,
+    fontWeight: '700',
   },
-  headerRightPlaceholder: {
-    width: 40,
+  searchButton: {
+    padding: 6,
   },
   scrollContent: {
-    paddingHorizontal: 20,
-    paddingBottom: 24,
+    paddingHorizontal: 16,
+    paddingBottom: 32,
   },
-  summaryCard: {
-    padding: 20,
-    borderRadius: 20,
+  subjectHeader: {
     marginTop: 12,
+    marginBottom: 16,
   },
-  summaryDesc: {
-    marginTop: 6,
+  subjectTitle: {
+    fontSize: 22,
+    marginBottom: 2,
   },
-  progressSummaryContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-end',
-    marginTop: 20,
-    marginBottom: 8,
+  tabsContainer: {
+    marginBottom: 16,
   },
-  progressSummaryText: {
-    flex: 1,
+  tabsScroll: {
+    paddingVertical: 4,
+  },
+  tabButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    borderRadius: 20,
+    marginRight: 10,
+  },
+  listContainer: {
+    marginTop: 8,
+  },
+  categoryBlock: {
+    marginBottom: 24,
+  },
+  categoryTitle: {
+    fontSize: 11,
+    letterSpacing: 0.8,
+    marginBottom: 16,
   },
-  summaryProgressBar: {
-    backgroundColor: 'rgba(255, 255, 255, 0.25)',
+  categoryItems: {
+    marginTop: 2,
   },
-  sectionHeader: {
-    marginTop: 24,
+  timelineItemRow: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
     marginBottom: 12,
+    minHeight: 80,
+  },
+  timelineLeftColumn: {
+    width: 36,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    paddingTop: 12,
+    position: 'relative',
+  },
+  timelineLine: {
+    position: 'absolute',
+    left: 17, // center of the 36 width
+    width: 2,
+    backgroundColor: '#E2E8F0',
+    zIndex: -1,
+  },
+  numberNode: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1,
   },
-  topicsList: {
-    marginTop: 4,
+  nodeText: {
+    fontSize: 11,
+  },
+  cardTouchable: {
+    flex: 1,
   },
   topicCard: {
-    padding: 16,
-    marginBottom: 12,
+    padding: 12,
+    borderRadius: 12,
+    flex: 1,
   },
-  topicCardHeader: {
+  cardMainRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: 12,
+    flex: 1,
   },
-  topicTitleSection: {
+  cardInfoCol: {
     flex: 1,
-    paddingRight: 12,
+    paddingRight: 8,
   },
-  pctBadge: {
+  cardTitle: {
+    fontSize: 14,
+    lineHeight: 18,
+    marginBottom: 6,
+  },
+  ratingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  ratingVal: {
+    fontSize: 11,
+    marginLeft: 4,
+  },
+  bulletSeparator: {
+    width: 3,
+    height: 3,
+    borderRadius: 1.5,
+    backgroundColor: '#94A3B8',
+    marginHorizontal: 6,
+  },
+  cardBadgeCol: {
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  freeBadge: {
+    borderWidth: 1.5,
+    borderRadius: 6,
     paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 8,
-    backgroundColor: 'rgba(0, 122, 135, 0.1)', // Dynamic overlay of primary color
+    paddingVertical: 3,
   },
-  topicProgressBar: {
-    height: 6,
+  freeBadgeText: {
+    fontSize: 9,
+  },
+  lockContainer: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#F1F5F9',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 });

package/src/types/index.ts

@@ -72,6 +72,10 @@ export interface Topic {
   completedQuestions: number;
   progress: number; // 0 to 1
   questions?: Question[];
+  category?: string; // e.g. "NEURO ANATOMY"
+  rating?: number;   // e.g. 4.5
+  isFree?: boolean;
+  isLocked?: boolean;
 }
 
 export interface Course {