From bdc9f1c184f0d242733f58cb9127adf0427fef8f Mon Sep 17 00:00:00 2001
From: Janice2024 <yuchenjiang2022@gmail.com>
Date: Tue, 29 Oct 2024 18:54:12 -0400
Subject: [PATCH 1/5] text reading page with changing font size

---
 src/Screens/CurriculumText/defaultCSS.tsx | 97 +++++++++++++++++++++++
 src/Screens/CurriculumText/index.tsx      | 86 ++++++++++++++++++++
 src/Screens/Home/index.tsx                |  2 +
 src/Screens/PersonalPage/index.tsx        |  2 +-
 4 files changed, 186 insertions(+), 1 deletion(-)
 create mode 100644 src/Screens/CurriculumText/defaultCSS.tsx
 create mode 100644 src/Screens/CurriculumText/index.tsx

diff --git a/src/Screens/CurriculumText/defaultCSS.tsx b/src/Screens/CurriculumText/defaultCSS.tsx
new file mode 100644
index 0000000..fe66d07
--- /dev/null
+++ b/src/Screens/CurriculumText/defaultCSS.tsx
@@ -0,0 +1,97 @@
+import { StyleSheet } from 'react-native';
+import styles from '../../Styles/defaultCSS';
+
+const stylesheet = StyleSheet.create({
+    container: {
+        height: '100%',
+        width: '100%'
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        padding: 0,
+        marginTop: 5,
+      },
+    button:{
+        padding: 0,
+        borderRadius: 10,
+        alignItems: 'center',
+        margin: 5,
+    },
+    buttonText: {
+        fontSize: 20, // Default font size for other buttons
+        // color: '#fff',
+        fontWeight: 'bold',
+    },
+    scrollContainer: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+        marginTop:0,
+    },
+    centerContent: {
+        flex: 3,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 10,
+        // marginBottom:20,
+    },
+    text: {
+        textAlign: 'justify',
+        lineHeight: 30,
+        // fontSize: 20,
+    },
+
+    textNormal: { ...styles.textNormal },
+    header: {
+        ...styles.defaultText,
+        textAlign: 'center',
+        padding: 10,
+        fontSize: 33,
+        fontWeight: 'bold'
+    },
+    subheader: {
+        ...styles.subheaderText
+    },
+    row: {
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+        justifyContent: 'space-around',
+        gap: 15,
+        flexGrow: 1
+    },
+    itemTitle: {
+        fontWeight: 'bold',
+        fontSize: 20,
+        padding: 5,
+        paddingHorizontal: 30,
+        textAlign: 'center',
+        ...styles.defaultText,
+    },
+    itemText: {
+        fontSize: 16,
+        padding: 5,
+        textAlign: 'center',
+        ...styles.content
+    },
+    rowItem: {
+        borderColor: styles.defaultColor,
+        borderWidth: .5,
+        borderBottomLeftRadius: 12,
+        borderBottomRightRadius: 12,
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+        flex: 1,
+        padding: 15,
+        alignItems: 'center',
+        textAlign: 'center',
+    },
+    section:
+    {
+        rowGap: 15,
+        padding: 30,
+
+    }
+});
+export default stylesheet;
\ No newline at end of file
diff --git a/src/Screens/CurriculumText/index.tsx b/src/Screens/CurriculumText/index.tsx
new file mode 100644
index 0000000..7b3e5b0
--- /dev/null
+++ b/src/Screens/CurriculumText/index.tsx
@@ -0,0 +1,86 @@
+// import { Image, View, } from 'react-native';
+import { TouchableOpacity, Image, ScrollView, View, StyleSheet } from 'react-native';
+import BackgroundWrapper from '../../Components/BackgroundWrapper';
+import Button from '../../Components/Button';
+import Text from '../../Components/Text';
+import styles from './defaultCSS';
+import PracticeSession from '../../Assets/svg/practice_session.svg';
+import AssignTasks from '../../Assets/svg/assign_tasks.svg';
+import { Appbar } from 'react-native-paper';
+
+import React, { useState } from 'react';
+
+// import React from 'react';
+// import { ScrollView, View, StyleSheet } from 'react-native';
+
+
+const Index = ({ navigation }) => {
+  const [fontSize, setFontSize] = useState(20); // Initial font size
+  const [eyeProtectMode, setEyeProtectMode] = useState(false); // Eye protect mode state
+  const longText = `
+    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
+   
+    This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text.
+  `;
+
+  const increaseFontSize = () => setFontSize(fontSize + 2);
+  const decreaseFontSize = () => setFontSize(fontSize > 10 ? fontSize - 2 : fontSize);
+  const toggleEyeProtectMode = () => setEyeProtectMode(!eyeProtectMode); // Toggle eye protect mode
+
+
+//<Text style={[styles.text, { fontSize }]}></Text>
+  return (
+    <BackgroundWrapper colors={{ backgroundColor: eyeProtectMode ? '#333' : '#FFF' }}>
+      <Appbar.BackAction onPress={() => navigation.navigate('Login')} />
+      <Text style={styles.header}>
+        Reading for Today
+      </Text>
+
+
+      <View style={styles.buttonContainer}>
+        {/* <Button onPress={increaseFontSize} style={styles.button} title="Increase Font Size" /> */}
+        <TouchableOpacity onPress={increaseFontSize} style={styles.button}>
+        <Text style={{...styles.buttonText, ...{ fontSize: 25, fontWeight: 'bold'}}}>A</Text>
+        </TouchableOpacity>
+
+        {/* <Button onPress={decreaseFontSize} title="Decrease Font Size" /> */}
+        <TouchableOpacity onPress={decreaseFontSize} style={styles.button}>
+          <Text style={styles.buttonText}>A</Text>
+        </TouchableOpacity>
+        {/* <TouchableOpacity onPress={toggleEyeProtectMode} style={styles.button}>
+          <Text style={styles.buttonText}>Light</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={toggleEyeProtectMode} style={styles.button}>
+          <Text style={styles.buttonText}>Dark</Text>
+        </TouchableOpacity> */}
+        <TouchableOpacity onPress={() => navigation.navigate('Login')} style={styles.button}>
+          <Text style={styles.buttonText}>Back</Text>
+        </TouchableOpacity>
+        {/* <Button title='A' icon="night" onPress={() => navigation.navigate('CurriculumText')} /> */}
+      </View>
+
+
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
+        <View style={styles.centerContent}>
+          
+          <Text style={{...styles.text, ...{fontSize}}}>
+            {longText}
+          </Text>
+        </View>
+      </ScrollView>
+            {/* Buttons to adjust the font size */}
+    </BackgroundWrapper>
+  );
+};
+
+
+
+export default Index;
\ No newline at end of file
diff --git a/src/Screens/Home/index.tsx b/src/Screens/Home/index.tsx
index 693497f..87fe1f3 100644
--- a/src/Screens/Home/index.tsx
+++ b/src/Screens/Home/index.tsx
@@ -5,6 +5,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import WelcomeToSeal from '../WelcomeToSeal';
 import Login from '../Login';
 import PersonalPage from '../PersonalPage';
+import CurriculumText from '../CurriculumText';
 import AccountSignUp from '../AccountSignUp';
 import HowSealWorks from '../HowSEALWorks';
 import WebCamFeed from '../../Components/WebCamFeed';
@@ -22,6 +23,7 @@ const Index = () => {
         <Stack.Screen name="Login" component={Login}  />
         <Stack.Screen name="Personal" component={PersonalPage}  />
         <Stack.Screen name="AccountSignUp" component={AccountSignUp}  />
+        <Stack.Screen name="CurriculumText" component={CurriculumText}  />
         {/* the "Main "screen below renders the bottom Nav which wraps the relevant pages it is included on */}
         <Stack.Screen name="Main" component={BottomNav}  />
         <Stack.Screen name="HowSealWorks" component={HowSealWorks}  />
diff --git a/src/Screens/PersonalPage/index.tsx b/src/Screens/PersonalPage/index.tsx
index ee2a7f2..b4f38a3 100644
--- a/src/Screens/PersonalPage/index.tsx
+++ b/src/Screens/PersonalPage/index.tsx
@@ -43,7 +43,7 @@ const Index = ({ navigation }) => {
           </View>
         </View>
         <View style={styles.section}>
-          <Button title='Eye contact practice' icon="eye" onPress={() => navigation.navigate('Welcome')} />
+          <Button title='Eye contact practice' icon="eye" onPress={() => navigation.navigate('CurriculumText')} />
           <Button light title='Achievements' icon="trophy" onPress={() => navigation.navigate('Achievements')} />
         </View>
       </View>

From 2d1c3d546cd96db79ebb4f1e1faf404172ef1e7b Mon Sep 17 00:00:00 2001
From: Janice2024 <yuchenjiang2022@gmail.com>
Date: Tue, 5 Nov 2024 18:47:05 -0500
Subject: [PATCH 2/5] enable color change for reading page

---
 Database/dbInitialization.js                  | 45 ++++++++++++++
 .../MulticolorBackground/defaultCSS.tsx       | 22 +++++++
 src/Components/MulticolorBackground/index.tsx | 21 +++++++
 src/Screens/CurriculumText/defaultCSS.tsx     | 15 ++++-
 src/Screens/CurriculumText/index.tsx          | 58 ++++++++-----------
 src/Styles/defaultCSS.tsx                     | 11 ++++
 6 files changed, 136 insertions(+), 36 deletions(-)
 create mode 100644 src/Components/MulticolorBackground/defaultCSS.tsx
 create mode 100644 src/Components/MulticolorBackground/index.tsx

diff --git a/Database/dbInitialization.js b/Database/dbInitialization.js
index 1aaa73f..19159eb 100644
--- a/Database/dbInitialization.js
+++ b/Database/dbInitialization.js
@@ -102,6 +102,8 @@ const initializeDatabase = async () => {
     });
   };
 
+  //session: for user data flow
+
   const imgdpTableQuery = `
     CREATE TABLE IF NOT EXISTS imgdp (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -144,11 +146,23 @@ const initializeDatabase = async () => {
       FOREIGN KEY (user_id) REFERENCES users(id)
     )`;
 
+    // curriculumResponseTable stores curriculum input
+    // and responsiveness 
+    // calculated from our own mathematical function
+    // accounts for how each of the emotions are a factor in overall performance
+    const curriculumResponseTableQuery = `
+    CREATE TABLE IF NOT EXISTS achievements (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      type INTEGER,
+      responsiveness INTEGER
+    )`;
+
   return Promise.all([
     createTable(imgdpTableQuery, 'imgdp'),
     createTable(curriculumTableQuery, 'curriculum'),
     createTable(usersTableQuery, 'users'),
     createTable(achievementsTableQuery, 'achievements'),
+    createTable(curriculumResponseTableQuery, 'curriculumResponse')
   ])
   .then(() => {
     console.log('All tables created successfully.');
@@ -161,6 +175,36 @@ const initializeDatabase = async () => {
   });
 };
 
+
+//Input: image, either be a URI, or a base64 string
+//runs it through the computer vision models
+//get the responsiveness from and stores it in the db. 
+
+//todo: connect to cv model, and curriculumn optimize algorithms
+//todo: create index
+// preprocessed
+
+const insertCurriculumResponseData = async (imageInput,responsiveness) => {
+
+  return new Promise((resolve, reject) => {
+    db.transaction(tx => {
+      tx.executeSql(
+        'INSERT INTO  (imageInput, responsiveness) VALUES (?, ?)',
+        [imageInput, responsiveness],
+        (_, result) => {
+          console.log(`A row has been inserted with rowid ${result.insertId}`);
+          resolve(result);
+        },
+        (tx, error) => {
+          console.error('Error inserting data', error);
+          reject(error);
+        },
+      );
+    });
+  });
+};
+
+
 // Insert a new row into the imgdp table
 const insertImageData = async (b64str, input, output) => {
   return new Promise((resolve, reject) => {
@@ -690,6 +734,7 @@ testDb();
 
 // Export functions
 export {
+  insertCurriculumResponseData,
   createCombosTable,
   insertComboData,
   updateComboData,
diff --git a/src/Components/MulticolorBackground/defaultCSS.tsx b/src/Components/MulticolorBackground/defaultCSS.tsx
new file mode 100644
index 0000000..78ae444
--- /dev/null
+++ b/src/Components/MulticolorBackground/defaultCSS.tsx
@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import styles from '../../Styles/defaultCSS';
+
+
+const stylesheet = StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    background:{
+      opacity: 1,
+      colorList: styles.colorList
+    },
+    darkground:{
+      opacity: 0.9,
+      colorList: styles.darkColor
+    },
+    image: {
+      flex: 1,
+      justifyContent: 'center',
+    }
+  });
+export default stylesheet;
diff --git a/src/Components/MulticolorBackground/index.tsx b/src/Components/MulticolorBackground/index.tsx
new file mode 100644
index 0000000..61d1969
--- /dev/null
+++ b/src/Components/MulticolorBackground/index.tsx
@@ -0,0 +1,21 @@
+import { View, ScrollView } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import styles from './defaultCSS';
+
+const Index = ({ children, dark }) => {
+    return (
+        <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+            <View style={styles.container}>
+                {/* <LinearGradient style={styles.background} useAngle={true} angle={45} angleCenter={{ x: 0.5, y: 0.35 }} end={{ x: 1, y: 0 }} colors={styles.background.colorList}> */}
+                <LinearGradient style={dark?styles.darkground:styles.background} useAngle={true} angle={45} angleCenter={{ x: 0.5, y: 0.35 }} end={{ x: 1, y: 0 }} colors={dark?styles.darkground.colorList:styles.background.colorList}>
+                    <View>
+                        {children}
+                    </View>
+                </LinearGradient>
+            </View>
+        </ScrollView>
+    );
+};
+
+
+export default Index;
diff --git a/src/Screens/CurriculumText/defaultCSS.tsx b/src/Screens/CurriculumText/defaultCSS.tsx
index fe66d07..eccc062 100644
--- a/src/Screens/CurriculumText/defaultCSS.tsx
+++ b/src/Screens/CurriculumText/defaultCSS.tsx
@@ -6,7 +6,17 @@ const stylesheet = StyleSheet.create({
         height: '100%',
         width: '100%'
     },
+    buttonGroup: {
+        flex: 0.15,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginHorizontal: 0, // Adjust to reduce or increase space
+        marginBottom: 0,
+      },
     buttonContainer: {
+        paddingBottom: 0,
+        paddingTop: 0,
         flexDirection: 'row',
         justifyContent: 'space-around',
         padding: 0,
@@ -34,8 +44,9 @@ const stylesheet = StyleSheet.create({
         flex: 3,
         justifyContent: 'center',
         alignItems: 'center',
-        padding: 10,
-        // marginBottom:20,
+        paddingHorizontal: 20,
+        paddingVertical: 0,
+        marginTop:0,
     },
     text: {
         textAlign: 'justify',
diff --git a/src/Screens/CurriculumText/index.tsx b/src/Screens/CurriculumText/index.tsx
index 7b3e5b0..b0a9457 100644
--- a/src/Screens/CurriculumText/index.tsx
+++ b/src/Screens/CurriculumText/index.tsx
@@ -1,6 +1,6 @@
 // import { Image, View, } from 'react-native';
 import { TouchableOpacity, Image, ScrollView, View, StyleSheet } from 'react-native';
-import BackgroundWrapper from '../../Components/BackgroundWrapper';
+import MulticolorBackground from '../../Components/MulticolorBackground';
 import Button from '../../Components/Button';
 import Text from '../../Components/Text';
 import styles from './defaultCSS';
@@ -23,61 +23,51 @@ const Index = ({ navigation }) => {
     This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
     This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
     This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
-   
-    This is a sample text. This is a sample text.
-    This is a sample text. This is a sample text.
-    This is a sample text. This is a sample text.
-    This is a sample text. This is a sample text.
-    This is a sample text. This is a sample text.
   `;
 
   const increaseFontSize = () => setFontSize(fontSize + 2);
   const decreaseFontSize = () => setFontSize(fontSize > 10 ? fontSize - 2 : fontSize);
-  const toggleEyeProtectMode = () => setEyeProtectMode(!eyeProtectMode); // Toggle eye protect mode
+  const changeMode = () => setEyeProtectMode(!eyeProtectMode); // Toggle eye protect mode
+
 
 
 //<Text style={[styles.text, { fontSize }]}></Text>
   return (
-    <BackgroundWrapper colors={{ backgroundColor: eyeProtectMode ? '#333' : '#FFF' }}>
+    <MulticolorBackground dark = {eyeProtectMode}>
       <Appbar.BackAction onPress={() => navigation.navigate('Login')} />
-      <Text style={styles.header}>
+      <Text style={{...styles.header, }}>
+      {/* <Text style={{...styles.header, ...{color:eyeProtectMode?'#FFFFFF':'#305070'}}}> */}
         Reading for Today
       </Text>
 
 
       <View style={styles.buttonContainer}>
-        {/* <Button onPress={increaseFontSize} style={styles.button} title="Increase Font Size" /> */}
-        <TouchableOpacity onPress={increaseFontSize} style={styles.button}>
-        <Text style={{...styles.buttonText, ...{ fontSize: 25, fontWeight: 'bold'}}}>A</Text>
-        </TouchableOpacity>
-
-        {/* <Button onPress={decreaseFontSize} title="Decrease Font Size" /> */}
-        <TouchableOpacity onPress={decreaseFontSize} style={styles.button}>
-          <Text style={styles.buttonText}>A</Text>
-        </TouchableOpacity>
-        {/* <TouchableOpacity onPress={toggleEyeProtectMode} style={styles.button}>
-          <Text style={styles.buttonText}>Light</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={toggleEyeProtectMode} style={styles.button}>
-          <Text style={styles.buttonText}>Dark</Text>
-        </TouchableOpacity> */}
-        <TouchableOpacity onPress={() => navigation.navigate('Login')} style={styles.button}>
-          <Text style={styles.buttonText}>Back</Text>
-        </TouchableOpacity>
-        {/* <Button title='A' icon="night" onPress={() => navigation.navigate('CurriculumText')} /> */}
+      <View style={styles.buttonGroup}>
+          <TouchableOpacity onPress={increaseFontSize} style={styles.button}>
+            <Text style={{ ...styles.buttonText, fontSize: 25, fontWeight: 'bold' }}>A</Text>
+          </TouchableOpacity>
+          
+          <TouchableOpacity onPress={decreaseFontSize} style={styles.button}>
+            <Text style={styles.buttonText}>A</Text>
+          </TouchableOpacity>
+        </View>
+
+        <Button title='🌛' onPress={changeMode} />
+
       </View>
 
 
-      <ScrollView contentContainerStyle={styles.scrollContainer}>
+      {/* <ScrollView contentContainerStyle={styles.scrollContainer}> */}
         <View style={styles.centerContent}>
           
-          <Text style={{...styles.text, ...{fontSize}}}>
+          <Text style={{...styles.text, ...{fontSize},...{padding: 20}}}>
             {longText}
           </Text>
         </View>
-      </ScrollView>
-            {/* Buttons to adjust the font size */}
-    </BackgroundWrapper>
+        <Button title='Done' onPress={() => navigation.navigate('Main')} />
+      {/* </ScrollView> */}
+
+    </MulticolorBackground>
   );
 };
 
diff --git a/src/Styles/defaultCSS.tsx b/src/Styles/defaultCSS.tsx
index 65d8170..abf5ed4 100644
--- a/src/Styles/defaultCSS.tsx
+++ b/src/Styles/defaultCSS.tsx
@@ -17,6 +17,16 @@ const background = {
     colorList: Object.values(colorRange).slice(-4)
 }
 
+const darkground = {
+    // darkColor: Object.values(colorRange).slice(6,9)
+    darkColor: [
+        colorRange.VerySoftBlue,
+        colorRange.LightGrayishBlue,
+        colorRange.DarkModerateBlue
+        // colorRange. DarkModerateCyan
+    ]
+}
+
 const stylesheet = StyleSheet.create({
     container: {
         height: '100%',
@@ -26,6 +36,7 @@ const stylesheet = StyleSheet.create({
     },
     ...colorRange,
     ...background,
+    ...darkground,
     defaultColor: colorRange.VeryDarkDesaturatedBlue,
     defaultText: {
         fontFamily: 'sans-serif-condensed',

From 49c7187025f0073bdad84c2faf0f176c5c624a20 Mon Sep 17 00:00:00 2001
From: Janice2024 <yuchenjiang2022@gmail.com>
Date: Tue, 31 Dec 2024 20:36:53 -0500
Subject: [PATCH 3/5] fetch text from db (to-do: initialize text in the db)

---
 src/Screens/CurriculumText/data.js   | 12 ++++++++++++
 src/Screens/CurriculumText/index.tsx | 24 +++++++++++++++++++-----
 2 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 src/Screens/CurriculumText/data.js

diff --git a/src/Screens/CurriculumText/data.js b/src/Screens/CurriculumText/data.js
new file mode 100644
index 0000000..330fb92
--- /dev/null
+++ b/src/Screens/CurriculumText/data.js
@@ -0,0 +1,12 @@
+import { specificTextContent } from '../../../Database/dbInitialization';
+
+// Function to fetch text
+export const fetchLongText = async (textId) => {
+  try {
+    const longText = await specificTextContent(textId);
+    return longText;
+  } catch (error) {
+    console.error('Failed to fetch text:', error);
+    throw error;
+  }
+};
diff --git a/src/Screens/CurriculumText/index.tsx b/src/Screens/CurriculumText/index.tsx
index b0a9457..b1797fb 100644
--- a/src/Screens/CurriculumText/index.tsx
+++ b/src/Screens/CurriculumText/index.tsx
@@ -8,22 +8,36 @@ import PracticeSession from '../../Assets/svg/practice_session.svg';
 import AssignTasks from '../../Assets/svg/assign_tasks.svg';
 import { Appbar } from 'react-native-paper';
 
-import React, { useState } from 'react';
-
-// import React from 'react';
-// import { ScrollView, View, StyleSheet } from 'react-native';
+import React, { useEffect,useState } from 'react';
+import { fetchLongText } from './data';
 
 
 const Index = ({ navigation }) => {
   const [fontSize, setFontSize] = useState(20); // Initial font size
   const [eyeProtectMode, setEyeProtectMode] = useState(false); // Eye protect mode state
-  const longText = `
+  const sampleText = `
     This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
     This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
     This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
     This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
     This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
   `;
+  const [longText, setLongText] = useState(sampleText); // text content from curriculum table
+
+  useEffect(() => {
+    const loadLongText = async () => {
+      try {
+        const textId = 1; // Replace with the actual user ID of logged in user
+        const textContent = await fetchLongText(textId);
+        setLongText(textContent);
+      } catch (error) {
+        console.error('Failed to fetch achievements:', error);
+      }
+    };
+
+    loadLongText();
+  }, []);
+
 
   const increaseFontSize = () => setFontSize(fontSize + 2);
   const decreaseFontSize = () => setFontSize(fontSize > 10 ? fontSize - 2 : fontSize);

From e56c2b1c2d36a62174b65a0123169a6ed1bff82f Mon Sep 17 00:00:00 2001
From: Janice2024 <yuchenjiang2022@gmail.com>
Date: Thu, 2 Jan 2025 16:07:36 -0500
Subject: [PATCH 4/5] Reading page successfully fetched initialized text in db.
 (to-do:  Fix broken background when text is short.)

---
 Database/dbInitialization.js         | 22 +++++++++++++++++++++-
 src/Screens/CurriculumText/data.js   |  2 ++
 src/Screens/CurriculumText/index.tsx |  5 +++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/Database/dbInitialization.js b/Database/dbInitialization.js
index 19159eb..88361f4 100644
--- a/Database/dbInitialization.js
+++ b/Database/dbInitialization.js
@@ -302,7 +302,7 @@ const insertCurriculumData = (input_output, sequence, content) => {
     tx.executeSql(
       'INSERT INTO curriculum (input_output, sequence, content) VALUES (?, ?, ?)',
       [input_output, sequence, content],
-      (_, result) => { console.log(`A row has been inserted with rowid ${result.insertId}`);
+      (_, result) => { console.log(`A curriculumData row has been inserted with rowid ${result.insertId}`);
       resolve(result);
     },
       (tx, error) => { console.error('Error inserting data', error);
@@ -600,6 +600,23 @@ const updateAchievement = (name, description, points, user_id) => {
   });
 };
 
+const specificTextContent = (id) => {
+  return new Promise((resolve, reject) => {
+    db.transaction(tx => {
+      tx.executeSql(
+        'SELECT * FROM curriculum WHERE input_output = ?',
+        [id],
+        (_, result) => { resolve(result.rows.raw()); 
+          console.log('Successfully fetched text content from db.');
+        },
+        (_, error) => { reject(error); }
+      );
+    });
+  });
+};
+
+
+
 const allUserAchievements = (id) => {
   return new Promise((resolve, reject) => {
     db.transaction(tx => {
@@ -645,6 +662,8 @@ const testDb = async () => {
 
   await insertCurriculumData(0, 5, "Testing curriculum");
 
+  await insertCurriculumData(1, 6, "This is a sample text fetched from db.");
+
   await printCurriculumFirstRow();
 
   // User tests
@@ -758,4 +777,5 @@ export {
   allUserAchievements,
   deleteAchievement,
   testDb,
+  specificTextContent,
 };
diff --git a/src/Screens/CurriculumText/data.js b/src/Screens/CurriculumText/data.js
index 330fb92..5218dcc 100644
--- a/src/Screens/CurriculumText/data.js
+++ b/src/Screens/CurriculumText/data.js
@@ -3,6 +3,8 @@ import { specificTextContent } from '../../../Database/dbInitialization';
 // Function to fetch text
 export const fetchLongText = async (textId) => {
   try {
+    // To fix: Here we got three identical rows 
+    // // even though in dbInitialization.js we only inserted the row once.
     const longText = await specificTextContent(textId);
     return longText;
   } catch (error) {
diff --git a/src/Screens/CurriculumText/index.tsx b/src/Screens/CurriculumText/index.tsx
index b1797fb..e38d456 100644
--- a/src/Screens/CurriculumText/index.tsx
+++ b/src/Screens/CurriculumText/index.tsx
@@ -27,8 +27,9 @@ const Index = ({ navigation }) => {
   useEffect(() => {
     const loadLongText = async () => {
       try {
-        const textId = 1; // Replace with the actual user ID of logged in user
-        const textContent = await fetchLongText(textId);
+        const textId = 1; // Replace with the actual text ID
+        const text = await fetchLongText(textId);
+        const textContent = text[0].content; // The fetched row is wrapped in an array
         setLongText(textContent);
       } catch (error) {
         console.error('Failed to fetch achievements:', error);

From d0ff8f8d8274f543c9615eb2e7ab38cbd8c6edbb Mon Sep 17 00:00:00 2001
From: Janice2024 <yuchenjiang2022@gmail.com>
Date: Thu, 2 Jan 2025 22:09:41 -0500
Subject: [PATCH 5/5] fix broken bg color. now flexible for diff length of
 text.

---
 src/Screens/CurriculumText/index.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/Screens/CurriculumText/index.tsx b/src/Screens/CurriculumText/index.tsx
index e38d456..0112e62 100644
--- a/src/Screens/CurriculumText/index.tsx
+++ b/src/Screens/CurriculumText/index.tsx
@@ -54,8 +54,7 @@ const Index = ({ navigation }) => {
       {/* <Text style={{...styles.header, ...{color:eyeProtectMode?'#FFFFFF':'#305070'}}}> */}
         Reading for Today
       </Text>
-
-
+      <ScrollView style={styles.container}>
       <View style={styles.buttonContainer}>
       <View style={styles.buttonGroup}>
           <TouchableOpacity onPress={increaseFontSize} style={styles.button}>
@@ -76,11 +75,13 @@ const Index = ({ navigation }) => {
         <View style={styles.centerContent}>
           
           <Text style={{...styles.text, ...{fontSize},...{padding: 20}}}>
-            {longText}
+            {sampleText}
           </Text>
         </View>
-        <Button title='Done' onPress={() => navigation.navigate('Main')} />
-      {/* </ScrollView> */}
+        <View style={{ width: 150, alignSelf: 'center' }}>
+          <Button title='Done' onPress={() => navigation.navigate('Main')} />
+        </View>
+      </ScrollView>
 
     </MulticolorBackground>
   );