react-native-elearn-ui 0.1.9 → 0.1.10

package/src/screens/PearlReaderScreen.tsx

@@ -0,0 +1,304 @@
+import React, { useState } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  StatusBar,
+} from 'react-native';
+import { useTheme } from '../context/ThemeContext';
+import { Typography, Icon } from '../components';
+import { MOCK_PEARLS_TOPICS } from './pearlsMockData';
+import type { PearlTopic, PearlChapter } from '../types';
+
+interface PearlReaderScreenProps {
+  topic?: PearlTopic;
+  topicId?: string;
+  chapter?: PearlChapter;
+  chapterId?: string;
+  onBack: () => void;
+  hideHeader?: boolean;
+}
+
+export const PearlReaderScreen: React.FC<PearlReaderScreenProps> = ({
+  topic,
+  topicId,
+  chapter,
+  chapterId,
+  onBack,
+  hideHeader = false,
+}) => {
+  const theme = useTheme();
+
+  const activeTopic = topic || MOCK_PEARLS_TOPICS.find((t) => t.id === topicId);
+
+  // Flatten chapters for reader mode navigation
+  const flattenedChapters: PearlChapter[] = [];
+  if (activeTopic && activeTopic.sections) {
+    Object.keys(activeTopic.sections).forEach((sectionName) => {
+      const sectionChapters = activeTopic.sections?.[sectionName] || [];
+      flattenedChapters.push(...sectionChapters);
+    });
+  }
+
+  const initialIndex = chapterId
+    ? flattenedChapters.findIndex((c) => c.id === chapterId)
+    : chapter
+      ? flattenedChapters.findIndex((c) => c.id === chapter.id)
+      : 0;
+
+  const [activeChapterIndex, setActiveChapterIndex] = useState<number>(initialIndex >= 0 ? initialIndex : 0);
+  const [isCompleted, setIsCompleted] = useState(false);
+
+  const activeChapter = flattenedChapters[activeChapterIndex];
+
+  if (!activeChapter) {
+    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 }}>Chapter 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>
+    );
+  }
+
+  const handlePrevChapter = () => {
+    if (activeChapterIndex > 0) {
+      setActiveChapterIndex(activeChapterIndex - 1);
+      setIsCompleted(false);
+    }
+  };
+
+  const handleNextChapter = () => {
+    if (activeChapterIndex < flattenedChapters.length - 1) {
+      setActiveChapterIndex(activeChapterIndex + 1);
+      setIsCompleted(false);
+    }
+  };
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+      <StatusBar barStyle="dark-content" />
+
+      {/* Header */}
+      {!hideHeader && (
+        <View style={styles.header}>
+          <TouchableOpacity onPress={onBack} style={styles.backButton}>
+            <Icon name="arrow-left" size={20} color={theme.textPrimary} />
+          </TouchableOpacity>
+
+          <Typography variant="h2" bold style={styles.headerTitle}>
+            Pearls
+          </Typography>
+
+          <View style={styles.headerRightPlaceholder} />
+        </View>
+      )}
+
+      {/* Reader Container */}
+      <View style={styles.readerContainer}>
+        {/* Subheader progress banner */}
+        <View style={styles.readerSubHeader}>
+          <Typography variant="body" bold color={theme.textPrimary} style={styles.readerSubTitle}>
+            {activeChapter.title.split('.')[0] || activeChapter.title}
+          </Typography>
+          <Typography variant="body" bold color={theme.textSecondary}>
+            {activeChapterIndex + 1}/{flattenedChapters.length}
+          </Typography>
+        </View>
+
+        <ScrollView contentContainerStyle={styles.readerScroll} showsVerticalScrollIndicator={false}>
+          {activeChapter.bullets.map((bullet, idx) => {
+            const parts = bullet.split(':');
+            const boldPart = parts[0];
+            const rest = parts.slice(1).join(':');
+
+            return (
+              <View key={idx} style={styles.bulletRow}>
+                <Typography variant="body" color={theme.textPrimary} style={styles.bulletPointDot}>
+                  •
+                </Typography>
+                <Typography variant="body" color={theme.textPrimary} style={styles.bulletText}>
+                  {rest ? (
+                    <>
+                      <Typography variant="body" bold>{boldPart}:</Typography>
+                      {rest}
+                    </>
+                  ) : (
+                    bullet
+                  )}
+                </Typography>
+              </View>
+            );
+          })}
+        </ScrollView>
+
+        {/* Checkbox status bar */}
+        <View style={styles.checkboxBar}>
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => setIsCompleted(!isCompleted)}
+            style={styles.checkboxRow}
+          >
+            <View style={[
+              styles.checkboxBox,
+              { borderColor: theme.border },
+              isCompleted && { backgroundColor: theme.primary, borderColor: theme.primary }
+            ]}>
+              {isCompleted && <View style={styles.checkboxInner} />}
+            </View>
+            <Typography variant="body" bold color={theme.textPrimary}>
+              Mark as Complete
+            </Typography>
+          </TouchableOpacity>
+        </View>
+
+        {/* Navigation bottom buttons */}
+        <View style={styles.footerRow}>
+          <TouchableOpacity
+            onPress={handlePrevChapter}
+            disabled={activeChapterIndex === 0}
+            style={[styles.footerBtn, activeChapterIndex === 0 && { opacity: 0.4 }]}
+          >
+            <Typography variant="body" bold color={theme.textPrimary}>
+              Prev
+            </Typography>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={handleNextChapter}
+            disabled={activeChapterIndex === flattenedChapters.length - 1}
+            style={[
+              styles.nextActionBtn,
+              { backgroundColor: theme.primary },
+              activeChapterIndex === flattenedChapters.length - 1 && { opacity: 0.4 }
+            ]}
+          >
+            <Typography variant="body" bold color="#FFFFFF">
+              Next
+            </Typography>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  backButton: {
+    padding: 6,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  headerRightPlaceholder: {
+    width: 32,
+  },
+  readerContainer: {
+    flex: 1,
+  },
+  readerSubHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+  },
+  readerSubTitle: {
+    flex: 1,
+    fontSize: 14,
+    marginRight: 16,
+  },
+  readerScroll: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+  },
+  bulletRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 16,
+  },
+  bulletPointDot: {
+    fontSize: 18,
+    marginRight: 10,
+    lineHeight: 20,
+  },
+  bulletText: {
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  checkboxBar: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+  checkboxRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkboxBox: {
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderRadius: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  checkboxInner: {
+    width: 10,
+    height: 10,
+    borderRadius: 2,
+    backgroundColor: '#FFFFFF',
+  },
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF',
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    justifyContent: 'space-between',
+  },
+  footerBtn: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  nextActionBtn: {
+    paddingHorizontal: 24,
+    paddingVertical: 10,
+    borderRadius: 8,
+    minWidth: 80,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});