From 185f5fd1d74bc81ac676447a3099961969f127b7 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Mon, 14 Oct 2024 17:23:38 -0500 Subject: [PATCH 01/13] New library --- lib/screens/EditNoteScreen.tsx | 61 ++++++++++++---------------------- 1 file changed, 22 insertions(+), 39 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index 6ad2faa..b20b251 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -30,6 +30,8 @@ import ToastMessage from 'react-native-toast-message'; import { useTheme } from "../components/ThemeProvider"; import LoadingModal from "../components/LoadingModal"; import * as Location from 'expo-location'; +import { RichText, Toolbar, useEditorBridge } from "@10play/tentap-editor"; + const user = User.getInstance(); @@ -63,6 +65,9 @@ const EditNoteScreen: React.FC = ({ const richTextRef = useRef(null); const [isTime, setIsTime] = useState(false); const [isUpdating, setIsUpdating] = useState(false); + const [bodyText, setBodyText] = useState(""); + const editor = useEditorBridge({ initialContent: bodyText || "", autofocus: true }); + let [location, setLocation] = useState<{ latitude: number; longitude: number; @@ -363,26 +368,7 @@ const EditNoteScreen: React.FC = ({ )} {isTime && } - - - + {tags.length > 0 && ( = ({ style={{ flex: 1 }} ref={scrollViewRef} > - (richTextRef.current = r)} - style={[NotePageStyles().editor, {flex: 1, minHeight: 650 }]} - editorStyle={ - { - contentCSSText: ` - position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - `, - backgroundColor: theme.primaryColor, - color: theme.text, - }} - autoCorrect={true} - placeholder="Write your note here" - onChange={(text) => setText(text)} - initialContentHTML={text} - onCursorPosition={handleScroll} - disabled={!owner} - /> + + + + + {/* Toolbar placed at the bottom */} + + + From 2f8f9b79e1e2b35bfe52d2522407cb3f1658e8b2 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Sun, 20 Oct 2024 14:10:10 -0500 Subject: [PATCH 02/13] Toolbar adjustment, theme on text solved --- lib/screens/EditNoteScreen.tsx | 44 ++++++++++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 5 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index b20b251..284f748 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -66,8 +66,26 @@ const EditNoteScreen: React.FC = ({ const [isTime, setIsTime] = useState(false); const [isUpdating, setIsUpdating] = useState(false); const [bodyText, setBodyText] = useState(""); + const { isDarkmode, toggleDarkmode, theme } = useTheme(); const editor = useEditorBridge({ initialContent: bodyText || "", autofocus: true }); + // Define the dynamic CSS for text color based on isDarkmode + const textColorCSS = ` + p, span, div { + color: ${theme.text} !important; + } + * { + color: ${theme.text} !important; + } + `; + + // Inject and update the CSS in the editor whenever dark mode changes + useEffect(() => { + if (editor) { + editor.injectCSS(textColorCSS, 'text-color-style'); + } + }, [isDarkmode, editor]); + let [location, setLocation] = useState<{ latitude: number; longitude: number; @@ -82,7 +100,6 @@ const EditNoteScreen: React.FC = ({ console.log(note.latitude); console.log(note.longitude); const { height, width } = useWindowDimensions(); - const { theme } = useTheme(); useEffect(() => { const keyboardDidShowListener = Keyboard.addListener( @@ -450,8 +467,9 @@ const EditNoteScreen: React.FC = ({ style={[NotePageStyles().editor, {backgroundColor: Platform.OS == "android" && "white"}]} /> - - {/* Toolbar placed at the bottom */} + + + = ({ actions={['bold', 'italic', 'underline', 'bullet_list', 'blockquote', 'indent', 'outdent', 'close_keyboard' ]} /> - - ); }; +const styles = ({ + + richTextContainer: { + flex: 1, + }, + editor: { + flex: 1, + padding: 10, // Adjust padding as needed + }, + toolbarContainer: { + borderTopWidth: 1, // Add border at the top to separate from the editor + borderTopColor: '#ccc', + backgroundColor: 'white', // Or use theme.background for dynamic background + }, + toolbar: { + height: 600, // Adjust height as needed + }, +}); export default EditNoteScreen; \ No newline at end of file From 602cc901c71f1e77fed5537686953ba7958a2845 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Mon, 21 Oct 2024 09:37:28 -0500 Subject: [PATCH 03/13] Editted test that was testing on previous editor changed to tentap. --- __tests__/AddNoteScreen.test.tsx | 2 +- lib/screens/AddNoteScreen.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/__tests__/AddNoteScreen.test.tsx b/__tests__/AddNoteScreen.test.tsx index 00cf76d..737c84e 100644 --- a/__tests__/AddNoteScreen.test.tsx +++ b/__tests__/AddNoteScreen.test.tsx @@ -60,7 +60,7 @@ describe('AddNoteScreen', () => { const { getByTestId } = render(); // Check if the RichEditor is rendered - expect(getByTestId('RichEditor')).toBeTruthy(); + expect(getByTestId('TenTapEditor')).toBeTruthy(); }); diff --git a/lib/screens/AddNoteScreen.tsx b/lib/screens/AddNoteScreen.tsx index 0f2b018..cbdf7aa 100644 --- a/lib/screens/AddNoteScreen.tsx +++ b/lib/screens/AddNoteScreen.tsx @@ -302,12 +302,13 @@ const AddNoteScreen: React.FC<{ navigation: any, route: any }> = ({ navigation, keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 0} > - + + {/* Toolbar placed at the bottom */} From 601f1a8ead60ca4fa66475baa58c2b5897063970 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Mon, 21 Oct 2024 20:16:21 -0500 Subject: [PATCH 04/13] Textbox takes on full screen --- lib/screens/EditNoteScreen.tsx | 95 +++++++++++++++++++--------------- 1 file changed, 54 insertions(+), 41 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index 284f748..1c499d4 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -12,6 +12,8 @@ import { SafeAreaView, Dimensions } from "react-native"; +import { StyleSheet } from "react-native"; + import { Ionicons } from "@expo/vector-icons"; import { Note } from "../../types"; import PhotoScroller from "../components/photoScroller"; @@ -78,6 +80,45 @@ const EditNoteScreen: React.FC = ({ color: ${theme.text} !important; } `; + const exampleStyles = StyleSheet.create({ + fullScreen: { + flex: 1, + backgroundColor: theme.primaryColor, // Match the background color of your screen + }, + richTextContainer: { + flex: 1, // Use full available height for RichText component + justifyContent: 'center', + paddingHorizontal: 10, // Add some padding horizontally + backgroundColor: theme.primaryColor, // Apply black background to the entire container + color : theme.tertiaryColor, + }, + richText: { + flex: 1, + minHeight: '100%', // Ensure it takes full height available + padding: 10, + borderWidth: 1, + borderColor: theme.tertiaryColor, + color: theme.tertiaryColor, // Set text color to white for dark mode + }, + editor: { + backgroundColor: theme.tertiaryColor, + marginBottom: 4, + width: "100%", + minHeight: 200, // Adjust for better visibility + color: theme.text, // Ensure text is visible + padding: 10, // Add padding for better input experience + }, + editorContainer: { + marginBottom: 4, + width: "100%", + backgroundColor: theme.primaryColor, // Ensure it matches the overall theme + }, + toolbar: { + height: 50, // Fixed height for the toolbar at the bottom + backgroundColor: '#333', // Ensure the toolbar has a background color + }, + }); + // Inject and update the CSS in the editor whenever dark mode changes useEffect(() => { @@ -449,56 +490,28 @@ const EditNoteScreen: React.FC = ({ + - - - - + - - - - - - + + ); }; -const styles = ({ - - richTextContainer: { - flex: 1, - }, - editor: { - flex: 1, - padding: 10, // Adjust padding as needed - }, - toolbarContainer: { - borderTopWidth: 1, // Add border at the top to separate from the editor - borderTopColor: '#ccc', - backgroundColor: 'white', // Or use theme.background for dynamic background - }, - toolbar: { - height: 600, // Adjust height as needed - }, -}); + + + + export default EditNoteScreen; \ No newline at end of file From 84d290defa31568312312553cb571b131b44ae96 Mon Sep 17 00:00:00 2001 From: AmarHadzic Date: Sun, 27 Oct 2024 13:30:27 -0500 Subject: [PATCH 05/13] Added search toggle function --- __tests__/HomeScreen.test.tsx | 3 +- .../__snapshots__/MoreScreen.test.tsx.snap | 435 +++++++++++------- __tests__/__snapshots__/SetTime.test.tsx.snap | 4 +- lib/screens/HomeScreen.tsx | 27 +- 4 files changed, 305 insertions(+), 164 deletions(-) diff --git a/__tests__/HomeScreen.test.tsx b/__tests__/HomeScreen.test.tsx index d4311ba..08b1fad 100644 --- a/__tests__/HomeScreen.test.tsx +++ b/__tests__/HomeScreen.test.tsx @@ -49,4 +49,5 @@ describe('HomeScreen', () => { expect(getByTestId('searchBar')).toBeTruthy(); }); -}); \ No newline at end of file +}); + diff --git a/__tests__/__snapshots__/MoreScreen.test.tsx.snap b/__tests__/__snapshots__/MoreScreen.test.tsx.snap index 9a1d9f9..caed6c5 100644 --- a/__tests__/__snapshots__/MoreScreen.test.tsx.snap +++ b/__tests__/__snapshots__/MoreScreen.test.tsx.snap @@ -4,23 +4,33 @@ exports[`MorePage renders correctly 1`] = ` [ Where's Religion @@ -60,12 +70,17 @@ exports[`MorePage renders correctly 1`] = ` Resources @@ -106,12 +121,17 @@ exports[`MorePage renders correctly 1`] = ` > Our Website @@ -153,12 +173,17 @@ exports[`MorePage renders correctly 1`] = ` > Guide to Ethnography @@ -200,12 +225,17 @@ exports[`MorePage renders correctly 1`] = ` > Guide to Coding @@ -247,12 +277,17 @@ exports[`MorePage renders correctly 1`] = ` > Report a Bug @@ -260,48 +295,68 @@ exports[`MorePage renders correctly 1`] = ` Meet our Team Insert Team Photo Insert Team Message Frequently Asked Questions @@ -309,120 +364,170 @@ exports[`MorePage renders correctly 1`] = ` What can users do? Explore religious traditions, find places of worship, engage in meaningful discussions. Who is it for? Scholars, students, believers, and the curious about the world's religions. What's unique? Provides a modern method to capture experiences using the devices that are with us every day. Our Mission Connect people of diverse religious backgrounds, beliefs, and practices. Why use 'Where's Religion?' Explore religious traditions, find places of worship, engage in meaningful discussions. @@ -445,25 +550,35 @@ exports[`MorePage renders correctly 1`] = ` > Dark Mode @@ -490,11 +605,16 @@ exports[`MorePage renders correctly 1`] = ` Logout diff --git a/__tests__/__snapshots__/SetTime.test.tsx.snap b/__tests__/__snapshots__/SetTime.test.tsx.snap index 8270432..851a93e 100644 --- a/__tests__/__snapshots__/SetTime.test.tsx.snap +++ b/__tests__/__snapshots__/SetTime.test.tsx.snap @@ -38,8 +38,8 @@ exports[`LocationWindow renders without crashing 1`] = ` } } > - 10/8/2024 -11:33 PM + 10/27/2024 +01:29 PM = ({ navigation, route }) => { const [items, setItems] = useState(initialItems); const [selectedNote, setSelectedNote] = useState(undefined); const [isModalVisible, setModalVisible] = useState(false); + const [isSearchVisible, setIsSearchVisible] = useState(false); const { theme } = useTheme(); @@ -161,6 +162,10 @@ const HomeScreen: React.FC = ({ navigation, route }) => { }); return maxNumber + 1; }; + + const toggleSearchBar = () => { + setIsSearchVisible(!isSearchVisible); +}; const styles = StyleSheet.create({ @@ -332,7 +337,7 @@ const HomeScreen: React.FC = ({ navigation, route }) => { padding: 10, alignSelf: "center", }, - seachBar:{ + searchBar:{ backgroundColor: theme.homeColor, borderRadius: 20, fontSize: 18, @@ -589,7 +594,14 @@ const HomeScreen: React.FC = ({ navigation, route }) => { > {userInitials} - + + setIsSearchVisible(!isSearchVisible)}> + + @@ -634,12 +646,15 @@ const HomeScreen: React.FC = ({ navigation, route }) => { showArrowIcon={true} /> + {isSearchVisible && ( + )} + {rendering ? : renderList(notes)} From b396e8562c08e0af624e9c671fb53d456b7424bb Mon Sep 17 00:00:00 2001 From: AmarHadzic Date: Sun, 27 Oct 2024 13:48:17 -0500 Subject: [PATCH 06/13] fixed tests --- __tests__/HomeScreen.test.tsx | 17 ++++++++++++++--- lib/screens/HomeScreen.tsx | 1 + 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/__tests__/HomeScreen.test.tsx b/__tests__/HomeScreen.test.tsx index 08b1fad..7fb8617 100644 --- a/__tests__/HomeScreen.test.tsx +++ b/__tests__/HomeScreen.test.tsx @@ -41,12 +41,23 @@ afterEach(() => { }); describe('HomeScreen', () => { - it('renders without crashing', () => { + it('renders toggle search bar', async () => { const routeMock = { params: { untitledNumber: 1 } }; const { getByTestId } = render(); + + const toggleButton = await waitFor(() => getByTestId('searchButton')); + expect(toggleButton).toBeTruthy(); + }); - // Check if the RichEditor is rendered - expect(getByTestId('searchBar')).toBeTruthy(); + it('toggle search bar visibility', async () => { + const routeMock = { params: { untitledNumber: 1 } }; + const { getByTestId } = render(); + + const toggleButton = await waitFor(() => getByTestId('searchButton')); + fireEvent.press(toggleButton); + + const searchBar = await waitFor(() => getByTestId('searchBar')); + expect(searchBar).toBeTruthy(); }); }); diff --git a/lib/screens/HomeScreen.tsx b/lib/screens/HomeScreen.tsx index 671d29b..59f13ca 100644 --- a/lib/screens/HomeScreen.tsx +++ b/lib/screens/HomeScreen.tsx @@ -597,6 +597,7 @@ const HomeScreen: React.FC = ({ navigation, route }) => { setIsSearchVisible(!isSearchVisible)}> Date: Sun, 27 Oct 2024 13:54:21 -0500 Subject: [PATCH 07/13] removed unused function --- lib/screens/HomeScreen.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/lib/screens/HomeScreen.tsx b/lib/screens/HomeScreen.tsx index 59f13ca..2472134 100644 --- a/lib/screens/HomeScreen.tsx +++ b/lib/screens/HomeScreen.tsx @@ -163,11 +163,6 @@ const HomeScreen: React.FC = ({ navigation, route }) => { return maxNumber + 1; }; - const toggleSearchBar = () => { - setIsSearchVisible(!isSearchVisible); -}; - - const styles = StyleSheet.create({ container: { paddingTop: Constants.statusBarHeight - 20, From 7c0be26b8baa42264f9ced264e725ea23e93b092 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Sun, 27 Oct 2024 14:12:26 -0500 Subject: [PATCH 08/13] android coloring --- lib/screens/EditNoteScreen.tsx | 125 ++++++++++++++++++++++++++------- 1 file changed, 101 insertions(+), 24 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index 1c499d4..a461526 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -32,7 +32,7 @@ import ToastMessage from 'react-native-toast-message'; import { useTheme } from "../components/ThemeProvider"; import LoadingModal from "../components/LoadingModal"; import * as Location from 'expo-location'; -import { RichText, Toolbar, useEditorBridge } from "@10play/tentap-editor"; +import { DEFAULT_TOOLBAR_ITEMS, RichText, Toolbar, useEditorBridge } from "@10play/tentap-editor"; @@ -69,7 +69,16 @@ const EditNoteScreen: React.FC = ({ const [isUpdating, setIsUpdating] = useState(false); const [bodyText, setBodyText] = useState(""); const { isDarkmode, toggleDarkmode, theme } = useTheme(); - const editor = useEditorBridge({ initialContent: bodyText || "", autofocus: true }); + const [refreshEditor, setRefreshEditor] = useState(false); + + // Pass the appropriate theme based on dark mode status + const editor = useEditorBridge({ + initialContent: bodyText || "", + autofocus: true, + }); + + + // Define the dynamic CSS for text color based on isDarkmode const textColorCSS = ` @@ -80,52 +89,112 @@ const EditNoteScreen: React.FC = ({ color: ${theme.text} !important; } `; + + const exampleStyles = StyleSheet.create({ fullScreen: { - flex: 1, - backgroundColor: theme.primaryColor, // Match the background color of your screen + ...Platform.select({ + android: { + flex: 1, + backgroundColor: theme.tertiaryColor, // Match the background color of your screen + }, + ios: { + flex: 1, + backgroundColor: theme.tertiaryColor, // Match the background color of your screen + }, + }), }, richTextContainer: { flex: 1, // Use full available height for RichText component justifyContent: 'center', paddingHorizontal: 10, // Add some padding horizontally backgroundColor: theme.primaryColor, // Apply black background to the entire container - color : theme.tertiaryColor, + color: theme.tertiaryColor, + ...Platform.select({ + android: { + flex: 1, // Use full available height for RichText component + justifyContent: 'center', + paddingHorizontal: 10, // Add some padding horizontally + backgroundColor: theme.primaryColor, // Apply black background to the entire container + color: theme.tertiaryColor, + }, + + }), }, - richText: { + richText: { + flex: 1, minHeight: '100%', // Ensure it takes full height available padding: 10, borderWidth: 1, - borderColor: theme.tertiaryColor, - color: theme.tertiaryColor, // Set text color to white for dark mode + borderColor: theme.primaryColor, + color: theme.text, // Set text color to white for dark mode + ...Platform.select({ + android: { + flex: 1, + minHeight: '100%', // Ensure it takes full height available + padding: 2, + borderWidth: 1, + borderColor: theme.primaryColor, + color: theme.primaryColor, // Set text color to white for dark mode + }, + + }), }, - editor: { - backgroundColor: theme.tertiaryColor, - marginBottom: 4, - width: "100%", - minHeight: 200, // Adjust for better visibility - color: theme.text, // Ensure text is visible - padding: 10, // Add padding for better input experience + editor: { + backgroundColor: theme.primaryColor, + marginBottom: 4, + width: "100%", + minHeight: 200, // Adjust for better visibility + color: theme.text, // Ensure text is visible + padding: 10, // Add padding for better input experience + ...Platform.select({ + android: { + backgroundColor: theme.primaryColor, // Ensure consistent background color on Android + color: theme.text, // Ensure consistent text color on Android + marginBottom: 4, + width: "100%", + minHeight: 200, // Adjust for better visibility + padding: 10, // Add padding for better input experience + }, + }), }, editorContainer: { - marginBottom: 4, + backgroundColor: theme.primaryColor, // Ensure consistent background color on iOS + marginBottom: 1, width: "100%", - backgroundColor: theme.primaryColor, // Ensure it matches the overall theme + ...Platform.select({ + android: { + backgroundColor: theme.primaryColor, // Ensure consistent background color on Android + marginBottom: 1, + width: "100%", + }, + }), }, toolbar: { height: 50, // Fixed height for the toolbar at the bottom backgroundColor: '#333', // Ensure the toolbar has a background color + + ...Platform.select({ + android: { + height: 80, // Fixed height for the toolbar at the bottom + backgroundColor: '#333', // Ensure the toolbar has a background color + }, + ios: { + height: 50, // Fixed height for the toolbar at the bottom + backgroundColor: '#333', // Ensure the toolbar has a background color + }, + }), }, }); - - - // Inject and update the CSS in the editor whenever dark mode changes + useEffect(() => { if (editor) { editor.injectCSS(textColorCSS, 'text-color-style'); + console.log("text color will be: " , theme.text); } - }, [isDarkmode, editor]); + }, [isDarkmode, editor, theme]); + let [location, setLocation] = useState<{ latitude: number; @@ -356,6 +425,11 @@ const EditNoteScreen: React.FC = ({ } }; + if (isDarkmode && editor) { + editor.injectCSS(textColorCSS, 'text-color-style'); + console.log("text color will be: #F7F8F9 from IF state"); + } + return ( @@ -492,17 +566,19 @@ const EditNoteScreen: React.FC = ({ + + + - + @@ -514,4 +590,5 @@ const EditNoteScreen: React.FC = ({ + export default EditNoteScreen; \ No newline at end of file From 2b20f9c561cecf176a417d00e050a22d69dfa275 Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Sun, 27 Oct 2024 15:39:38 -0500 Subject: [PATCH 09/13] Coloring issue of Textbox across plattform --- lib/screens/EditNoteScreen.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index a461526..caf6511 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -574,12 +574,14 @@ const EditNoteScreen: React.FC = ({ - + + + From 3e0c13afd53c14d5586f6033e45c01e4210843be Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Sun, 27 Oct 2024 18:04:40 -0500 Subject: [PATCH 10/13] toolbar visibility --- lib/screens/EditNoteScreen.tsx | 52 ++++++++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 12 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index caf6511..bdaddb9 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -96,11 +96,11 @@ const EditNoteScreen: React.FC = ({ ...Platform.select({ android: { flex: 1, - backgroundColor: theme.tertiaryColor, // Match the background color of your screen + backgroundColor: theme.primaryColor, // Match the background color of your screen }, ios: { flex: 1, - backgroundColor: theme.tertiaryColor, // Match the background color of your screen + backgroundColor: theme.primaryColor, // Match the background color of your screen }, }), }, @@ -177,8 +177,8 @@ const EditNoteScreen: React.FC = ({ ...Platform.select({ android: { - height: 80, // Fixed height for the toolbar at the bottom - backgroundColor: '#333', // Ensure the toolbar has a background color + height: 60, // Fixed height for the toolbar at the bottom + backgroundColor: theme.tertiaryColor, // Ensure the toolbar has a background color }, ios: { height: 50, // Fixed height for the toolbar at the bottom @@ -429,6 +429,21 @@ const EditNoteScreen: React.FC = ({ editor.injectCSS(textColorCSS, 'text-color-style'); console.log("text color will be: #F7F8F9 from IF state"); } + const [isKeyboardVisible, setIsKeyboardVisible] = useState(false); + useEffect(() => { + const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => { + setIsKeyboardVisible(true); + }); + const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => { + setIsKeyboardVisible(false); + }); + + return () => { + keyboardDidShowListener.remove(); + keyboardDidHideListener.remove(); + }; + }, []); + return ( @@ -566,20 +581,33 @@ const EditNoteScreen: React.FC = ({ - - + > - - - + + + + + + + From ced5e258ca42dc19fdf641c2694656cfbb4c7e3d Mon Sep 17 00:00:00 2001 From: AmarHadzic Date: Tue, 29 Oct 2024 13:12:33 -0500 Subject: [PATCH 11/13] fixed issues --- lib/screens/HomeScreen.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/lib/screens/HomeScreen.tsx b/lib/screens/HomeScreen.tsx index 2472134..1cff282 100644 --- a/lib/screens/HomeScreen.tsx +++ b/lib/screens/HomeScreen.tsx @@ -50,6 +50,7 @@ const HomeScreen: React.FC = ({ navigation, route }) => { const [selectedNote, setSelectedNote] = useState(undefined); const [isModalVisible, setModalVisible] = useState(false); const [isSearchVisible, setIsSearchVisible] = useState(false); + const [searchQuery, setSearchQuery] = useState(""); const { theme } = useTheme(); @@ -539,12 +540,10 @@ const HomeScreen: React.FC = ({ navigation, route }) => { ); }; - //Part of searchbar: - const [searchQuery, setSearchQuery] = useState(""); - const handleSearch = (query: string) => { setSearchQuery(query); }; + const formatDate = (date: Date) => { const day = date.getDate().toString(); const month = (date.getMonth() + 1).toString(); // Months are zero-based @@ -562,10 +561,14 @@ const HomeScreen: React.FC = ({ navigation, route }) => { }); }, [notes, searchQuery]); - + // Reset search query when toggling search visibility + const resetSearchQuery = () => { + if(isSearchVisible){ + setSearchQuery(''); + } + }; return ( - = ({ navigation, route }) => { {userInitials} - setIsSearchVisible(!isSearchVisible)}> + { + setIsSearchVisible(!isSearchVisible); + resetSearchQuery(); // Reset search query when toggling search visibility + }} + > From 39ca926b6962dd5781ce0ca940c15808973482ef Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Tue, 29 Oct 2024 13:18:43 -0500 Subject: [PATCH 12/13] Toolbar on IOS --- lib/screens/EditNoteScreen.tsx | 34 +++++++++++++++++----------------- styles/pages/NoteStyles.tsx | 2 +- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index bdaddb9..f7b4be1 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -172,17 +172,22 @@ const EditNoteScreen: React.FC = ({ }), }, toolbar: { - height: 50, // Fixed height for the toolbar at the bottom + height: 40, // Fixed height for the toolbar at the bottom backgroundColor: '#333', // Ensure the toolbar has a background color ...Platform.select({ android: { - height: 60, // Fixed height for the toolbar at the bottom + height: 70, // Fixed height for the toolbar at the bottom backgroundColor: theme.tertiaryColor, // Ensure the toolbar has a background color + overflow: 'hidden', // Ensure no extra space + marginTop: 50 }, ios: { height: 50, // Fixed height for the toolbar at the bottom - backgroundColor: '#333', // Ensure the toolbar has a background color + backgroundColor: theme.primaryColor, + overflow: 'hidden', // Ensure no extra space + marginTop: 50 + }, }), }, @@ -591,25 +596,20 @@ const EditNoteScreen: React.FC = ({ /> + + + + - - - + + diff --git a/styles/pages/NoteStyles.tsx b/styles/pages/NoteStyles.tsx index 4c754d9..1c9fdf6 100644 --- a/styles/pages/NoteStyles.tsx +++ b/styles/pages/NoteStyles.tsx @@ -112,7 +112,7 @@ const NotePageStyles = () => { }, //tool bar styles toolBar: { - height: 50 + height: 100 }, closeKeyboardButton: { padding: 10, From 5d4333c88302aebb552286860a7e021eb1bfa90d Mon Sep 17 00:00:00 2001 From: Adem Durakovic Date: Sun, 3 Nov 2024 19:40:08 -0600 Subject: [PATCH 13/13] duplicate toolbars --- lib/screens/EditNoteScreen.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/lib/screens/EditNoteScreen.tsx b/lib/screens/EditNoteScreen.tsx index f7b4be1..e798fbe 100644 --- a/lib/screens/EditNoteScreen.tsx +++ b/lib/screens/EditNoteScreen.tsx @@ -53,7 +53,7 @@ const EditNoteScreen: React.FC = ({ const [isPublished, setIsPublished] = useState(note.published); const [creator, setCreator] = useState(note.creator); const [owner, setOwner] = useState(false); - const scrollViewRef = useRef(null); + //const scrollViewRef = useRef(null); const [viewMedia, setViewMedia] = useState(false); const [viewAudio, setViewAudio] = useState(false); const [isTagging, setIsTagging] = useState(false); @@ -178,7 +178,7 @@ const EditNoteScreen: React.FC = ({ ...Platform.select({ android: { height: 70, // Fixed height for the toolbar at the bottom - backgroundColor: theme.tertiaryColor, // Ensure the toolbar has a background color + backgroundColor: theme.primaryColor, // Ensure the toolbar has a background color overflow: 'hidden', // Ensure no extra space marginTop: 50 }, @@ -196,7 +196,6 @@ const EditNoteScreen: React.FC = ({ useEffect(() => { if (editor) { editor.injectCSS(textColorCSS, 'text-color-style'); - console.log("text color will be: " , theme.text); } }, [isDarkmode, editor, theme]); @@ -244,7 +243,7 @@ const EditNoteScreen: React.FC = ({ }; checkOwner(); }, [creator]); - +/* const handleScroll = (position) => { if (keyboardOpen && scrollViewRef.current) { const viewportHeight = Dimensions.get('window').height - keyboardHeight; @@ -259,7 +258,7 @@ const EditNoteScreen: React.FC = ({ } } }; - +*/ const [latitude, setLatitude] = useState( location?.latitude?.toString() || "" ); @@ -432,7 +431,6 @@ const EditNoteScreen: React.FC = ({ if (isDarkmode && editor) { editor.injectCSS(textColorCSS, 'text-color-style'); - console.log("text color will be: #F7F8F9 from IF state"); } const [isKeyboardVisible, setIsKeyboardVisible] = useState(false); useEffect(() => { @@ -603,10 +601,13 @@ const EditNoteScreen: React.FC = ({ items={DEFAULT_TOOLBAR_ITEMS} /> - - - + {Platform.OS === 'ios' && ( + + )}