Merge pull request #195 from oss-slu/issue-193

Update The Theme Text Dynamically (issue #193)
oss-slu · Nov 9, 2024 · 91046a2 · 91046a2
2 parents 0683dde + a40c333
commit 91046a2
Show file tree

Hide file tree

Showing 6 changed files with 21,047 additions and 1,974 deletions.
diff --git a/__tests__/MoreScreen.test.tsx b/__tests__/MoreScreen.test.tsx
@@ -1,12 +1,11 @@
+import { fireEvent, render } from '@testing-library/react-native';
+import moxios from 'moxios';
 import React from 'react';
-import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import { Linking } from 'react-native';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
-import MorePage from '../lib/screens/MorePage';
-import moxios from 'moxios';
-import { User } from '../lib/models/user_class';
-import { Linking } from 'react-native';
 import { useTheme } from '../lib/components/ThemeProvider';
+import MorePage from '../lib/screens/MorePage';
 
 // Create a mock Redux store
 const mockStore = configureStore([]);
@@ -106,14 +105,69 @@ describe('MorePage', () => {
       "mailto:[email protected]?subject=Bug%20Report%20on%20'Where's%20Religion%3F'&body=Please%20provide%20details%20of%20your%20issue%20you%20are%20facing%20here."
     );
   });
-  it('renders the "Logout" button', () => {
-    const { getByText } = render(
+
+  it('displays correct theme text based on isDarkmode value', () => {
+    const { getByText, rerender } = render(
       <Provider store={store}>
         <MorePage />
       </Provider>
     );
+
+    // Check Light Mode text when isDarkmode is false
+    expect(getByText('Light Mode')).toBeTruthy();
+
+    // Update isDarkmode to true & renderer
+    useTheme.mockReturnValueOnce({
+      theme: {
+        primaryColor: '#ffffff',
+        text: '#ffffff',
+        secondaryColor: '#f0f0f0',
+        logout: '#ff0000',
+        logoutText: '#ffffff',
+      },
+      isDarkmode: true,
+      toggleDarkmode: jest.fn(),
+    });
+    rerender(
+      <Provider store={store}>
+        <MorePage />
+      </Provider>
+    );
+
+    expect(getByText('Dark Mode')).toBeTruthy();
+  });
 
-    // Check if the "Logout" button is rendered
-    expect(getByText('Logout')).toBeTruthy();
+  it('displays correct text color for theme text', () => {
+    const { getByText, rerender } = render(
+      <Provider store={store}>
+        <MorePage />
+      </Provider>
+    );
+
+    // Check that Light Mode text is black when isDarkmode is false
+    const lightModeText = getByText('Light Mode');
+    expect(lightModeText.props.style).toEqual(expect.arrayContaining([{ color: '#000000' }]));
+
+    // Update isDarkmode to true and rerender
+    useTheme.mockReturnValueOnce({
+      theme: {
+        primaryColor: '#ffffff',
+        text: '#ffffff',
+        secondaryColor: '#f0f0f0',
+        logout: '#ff0000',
+        logoutText: '#ffffff',
+      },
+      isDarkmode: true,
+      toggleDarkmode: jest.fn(),
+    });
+    rerender(
+      <Provider store={store}>
+        <MorePage />
+      </Provider>
+    );
+
+    // Check that Dark Mode text is white when isDarkmode is true
+    const darkModeText = getByText('Dark Mode');
+    expect(darkModeText.props.style).toEqual(expect.arrayContaining([{ color: '#ffffff' }]));
   });
 });
diff --git a/__tests__/__snapshots__/MoreScreen.test.tsx.snap b/__tests__/__snapshots__/MoreScreen.test.tsx.snap
@@ -581,7 +581,7 @@ exports[`MorePage renders correctly 1`] = `
                   ]
                 }
               >
-                Dark Mode
+                Light Mode
               </Text>
               <RCTSwitch
                 accessibilityRole="switch"

diff --git a/lib/screens/AddNoteScreen.tsx b/lib/screens/AddNoteScreen.tsx
@@ -1,32 +1,30 @@
-import React, { useEffect, useState, useRef } from "react";
+import { RichText, Toolbar, useEditorBridge } from "@10play/tentap-editor";
+import { Ionicons } from "@expo/vector-icons";
+import * as Location from 'expo-location';
+import React, { useEffect, useRef, useState } from "react";
 import {
   Alert,
-  View,
-  TextInput,
-  TouchableOpacity,
-  ScrollView,
-  SafeAreaView,
   KeyboardAvoidingView,
   Platform,
-  Keyboard,
+  SafeAreaView,
+  ScrollView,
+  TextInput,
+  TouchableOpacity,
+  View
 } from "react-native";
-import * as Location from 'expo-location';
 import ToastMessage from 'react-native-toast-message';
-import { Ionicons } from "@expo/vector-icons";
-import { Media, AudioType } from "../models/media_class";
-import { getThumbnail } from "../utils/S3_proxy";
-import { User } from "../models/user_class";
-import ApiService from "../utils/api_calls";
-import PhotoScroller from "../components/photoScroller";
+import NotePageStyles from "../../styles/pages/NoteStyles";
 import AudioContainer from "../components/audio";
-import TagWindow from "../components/tagging";
+import LoadingModal from "../components/LoadingModal";
 import LocationWindow from "../components/location";
-import TimeWindow from "../components/time";
-import { RichText, Toolbar, useEditorBridge } from "@10play/tentap-editor";
-import NotePageStyles from "../../styles/pages/NoteStyles";
+import PhotoScroller from "../components/photoScroller";
+import TagWindow from "../components/tagging";
 import { useTheme } from "../components/ThemeProvider";
-import LoadingModal from "../components/LoadingModal";
-import { TouchableWithoutFeedback } from "react-native";
+import TimeWindow from "../components/time";
+import { AudioType, Media } from "../models/media_class";
+import { User } from "../models/user_class";
+import ApiService from "../utils/api_calls";
+import { getThumbnail } from "../utils/S3_proxy";
 
 const user = User.getInstance();
 
@@ -53,9 +51,9 @@ const AddNoteScreen: React.FC<{ navigation: any, route: any }> = ({ navigation,
 
   // Add a guard check before calling editor.commands.focus()
   useEffect(() => {
-    if (editor?.commands?.focus) {
+    if (editor?.focus) {
       const timeout = setTimeout(() => {
-        editor.commands.focus();
+        editor.focus();
       }, 500);
       return () => clearTimeout(timeout);
     }
@@ -84,8 +82,9 @@ const AddNoteScreen: React.FC<{ navigation: any, route: any }> = ({ navigation,
   };
 
   const addImageToEditor = (imageUri: string) => {
-    const imgTag = `<img src="${imageUri}" style="max-width: 100%; height: auto;" />`;
-    editor.commands.setContent(editor.getHTML() + imgTag);
+    const imgTag = 
+    `<img src="${imageUri}" class="note-image" style="width: 100px !important; height: 100px !important; display: block; margin: 10px 0;" />`;
+    editor.setContent(editor.getHTML() + imgTag);
   };
 
   const addVideoToEditor = async (videoUri: string) => {
@@ -96,15 +95,15 @@ const AddNoteScreen: React.FC<{ navigation: any, route: any }> = ({ navigation,
           <source src="${videoUri}" type="video/mp4">
           Your browser does not support the video tag.
         </video>`;
-      editor.commands.setContent(editor.getHTML() + videoTag);
+      editor.setContent(editor.getHTML() + videoTag);
     } catch (error) {
       console.error("Error adding video: ", error);
     }
   };
 
   const insertAudioToEditor = (audioUri: string) => {
     const audioTag = `<audio controls src="${audioUri}"></audio>`;
-    editor.commands.setContent(editor.getHTML() + audioTag);
+    editor.setContent(editor.getHTML() + audioTag);
   };
 
   const handleShareButtonPress = () => {
@@ -158,11 +157,9 @@ const AddNoteScreen: React.FC<{ navigation: any, route: any }> = ({ navigation,
 
 
   return (
-
     <SafeAreaView style={{ flex: 1}}>
       <View style={{flex: 1}}>
       {/* Top Section with Buttons and Title */}
-
       <View style={[NotePageStyles().topContainer,]}>
         <View style={[NotePageStyles().topButtonsContainer]}>
           {/* Back Button */}
@@ -301,12 +298,12 @@ const AddNoteScreen: React.FC<{ navigation: any, route: any }> = ({ navigation,
         style={{ flex: 1 }}
         keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 0}
       >
-
           <View style={[NotePageStyles().richTextContainer]} testID="TenTapEditor">
           <RichText
             editor={editor}
             placeholder="Write something..."
             style={[NotePageStyles().editor, {backgroundColor: Platform.OS == "android" && "white"}]}
+
           />
 
           </View>

diff --git a/lib/screens/MorePage.tsx b/lib/screens/MorePage.tsx
@@ -1,20 +1,20 @@
-import React, { useState } from "react";
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
 import {
-  View,
-  Text,
-  ScrollView,
+  Dimensions,
   Image,
   Linking,
-  TouchableOpacity,
   SafeAreaView,
+  ScrollView,
   StyleSheet,
-  Dimensions,
-  Switch
+  Switch,
+  Text,
+  TouchableOpacity,
+  View
 } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { User } from "../models/user_class";
-import { useTheme } from "../components/ThemeProvider";
 import { useDispatch } from "react-redux";
+import { useTheme } from "../components/ThemeProvider";
+import { User } from "../models/user_class";
 
 
 
@@ -145,7 +145,8 @@ export default function MorePage() {
           <View style={styles.textContainer}>
             <View style={styles.buttonContainer}>
               <View style={[styles.switchContainer, { backgroundColor: theme.background }]}>
-                <Text style={[styles.switchText, { color: theme.text }]}>Dark Mode</Text>
+                <Text style={[styles.switchText, {color: theme.text}]}>{isDarkmode ? "Dark Mode" : "Light Mode"}</Text>
+                {/* Use theme object in theme.primaryColor to apply colors to the switch */}
                 <Switch
                   testID="dark-mode-switch"
                   trackColor={{
@@ -285,6 +286,12 @@ const styles = StyleSheet.create({
     height: undefined,
     resizeMode: "cover",
   },
+  lightModeText: {
+    color: '#000000', /* making sure color black is specified with color code */
+  },
+  darkModeText: {
+    color: '#ffffff', /* same with black */
+  }
 });