From 1766d3e8da93a3333a2401fb0cbb716935e5f8d2 Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Wed, 5 Jan 2022 12:59:32 +0500 Subject: [PATCH] make sure editor is always loaded off-screen --- apps/mobile/src/navigation/RootView.js | 11 +++- apps/mobile/src/views/Editor/EditorWrapper.js | 22 +++++++- apps/mobile/src/views/Editor/Functions.js | 55 +++++++++++-------- apps/mobile/src/views/Editor/index.js | 35 +++++++----- 4 files changed, 80 insertions(+), 43 deletions(-) diff --git a/apps/mobile/src/navigation/RootView.js b/apps/mobile/src/navigation/RootView.js index 321ff6df8..88492273f 100644 --- a/apps/mobile/src/navigation/RootView.js +++ b/apps/mobile/src/navigation/RootView.js @@ -29,7 +29,7 @@ import { import { editorRef, tabBarRef } from '../utils/Refs'; import { sleep } from '../utils/TimeUtils'; import { EditorWrapper } from '../views/Editor/EditorWrapper'; -import { EditorWebView, getNote } from '../views/Editor/Functions'; +import { checkStatus, EditorWebView, getNote } from '../views/Editor/Functions'; import tiny from '../views/Editor/tiny/tiny'; import { NavigatorStack } from './NavigatorStack'; let layoutTimer = null; @@ -285,8 +285,8 @@ const NativeStack = React.memo( const widths = { mobile: { a: dimensions.width * 0.75, - b: dimensions.width, - c: dimensions.width + b: dimensions.width - 1, + c: dimensions.width + 1 }, smallTablet: { a: valueLimiter(dimensions.width * 0.3, 300, 350), @@ -354,6 +354,11 @@ const NativeStack = React.memo( style={{ zIndex: 1 }} + onDrawerStateChange={state => { + if (state === false) { + checkStatus(); + } + }} initialIndex={ deviceMode === 'smallTablet' || deviceMode === 'tablet' ? 0 : 1 } diff --git a/apps/mobile/src/views/Editor/EditorWrapper.js b/apps/mobile/src/views/Editor/EditorWrapper.js index df9675509..d24bcc11d 100644 --- a/apps/mobile/src/views/Editor/EditorWrapper.js +++ b/apps/mobile/src/views/Editor/EditorWrapper.js @@ -1,5 +1,6 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { + AppState, KeyboardAvoidingView, LayoutAnimation, Platform, @@ -16,7 +17,7 @@ import {DDS} from '../../services/DeviceDetection'; import {editorRef} from '../../utils/Refs'; import useIsFloatingKeyboard from '../../utils/use-is-floating-keyboard'; import EditorOverlay from './EditorOverlay'; -import {textInput} from './Functions'; +import {checkStatus, textInput} from './Functions'; export const EditorWrapper = ({width, dimensions}) => { const [state] = useTracked(); @@ -26,6 +27,21 @@ export const EditorWrapper = ({width, dimensions}) => { const insets = useSafeAreaInsets(); const floating = useIsFloatingKeyboard(); + const onAppStateChanged = async state => { + if (state === 'active') { + console.log('ACTIVE STATE'); + await checkStatus(false); + } + }; + + useEffect(() => { + if (loading) return; + AppState.addEventListener('change', onAppStateChanged); + return () => { + AppState.removeEventListener('change', onAppStateChanged); + }; + }, [loading]); + return ( { width: width[deviceMode].c, height: '100%', backgroundColor: state.colors.bg, - borderLeftWidth: 1, + borderLeftWidth: DDS.isTab ? 1 : 0, borderLeftColor: DDS.isTab ? colors.nav : 'transparent' // paddingTop: Platform.OS === 'ios' ? insets.top : 0, // paddingBottom: Platform.OS === 'ios' ? insets.bottom : 0 diff --git a/apps/mobile/src/views/Editor/Functions.js b/apps/mobile/src/views/Editor/Functions.js index 7ee86fdb1..197bfda9c 100644 --- a/apps/mobile/src/views/Editor/Functions.js +++ b/apps/mobile/src/views/Editor/Functions.js @@ -158,6 +158,7 @@ export const CHECK_STATUS = `(function() { const request_content = `(function() { if (window.ReactNativeWebView) { + if (!editor) return; editor.getHTML().then(function(html) { window.ReactNativeWebView.postMessage( JSON.stringify({ @@ -167,7 +168,7 @@ const request_content = `(function() { sessionId:sessionId }) ); - }) + }).catch(console.log) } })();`; @@ -363,7 +364,7 @@ export const loadNote = async item => { loading_note = false; }; -const checkStatus = async noreset => { +export const checkStatus = async noreset => { return new Promise(resolve => { webviewOK = false; console.log('checking status of webview'); @@ -402,15 +403,15 @@ const checkStatus = async noreset => { function updateSessionStatus() { tiny.call( EditorWebView, - `(function() { - sessionId = "${sessionId}"; + `(function () { + sessionId = '${sessionId}'; let msg = JSON.stringify({ data: true, type: 'status', - sessionId:sessionId + sessionId: sessionId }); - window.ReactNativeWebView.postMessage(msg) -})();` + window.ReactNativeWebView.postMessage(msg); + })();` ); } @@ -429,24 +430,30 @@ function isContentInvalid(content) { function check_session_status() { tiny.call( EditorWebView, - `(function() { - if (window.ReactNativeWebView) { - if (!editor) { - return; + `(function () { + if (window.ReactNativeWebView) { + if (!editor) return; + + editor.getHTML().then(function (value) { + let status = + !value || + value === '' || + value.trim() === '' || + value === '

' || + value === '


' || + value === '

 

' || + value === '


'; + + window.ReactNativeWebView.postMessage( + JSON.stringify({ + type: 'content_not_loaded', + value: status, + sessionId: sessionId + }) + ); + }).catch(console.log) } - editor.getHTML().then(function(value) { - let status = !value || value === '' || value.trim() === "" || value === '

' || value === '


' || value === '

 

' || value === '


'; - - window.ReactNativeWebView.postMessage( - JSON.stringify({ - type: 'content_not_loaded', - value:status, - sessionId:sessionId - }) - ); - }) - } - })();` + })();` ); } diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js index c5fdec182..52fd4edcb 100755 --- a/apps/mobile/src/views/Editor/index.js +++ b/apps/mobile/src/views/Editor/index.js @@ -1,6 +1,5 @@ import React, {useEffect, useState} from 'react'; -import {Platform, View} from 'react-native'; -import { TextInput } from 'react-native-gesture-handler'; +import {AppState, Platform, View} from 'react-native'; import WebView from 'react-native-webview'; import {notesnook} from '../../../e2e/test.ids'; import {useEditorStore, useUserStore} from '../../provider/stores'; @@ -11,9 +10,11 @@ import { } from '../../services/EventManager'; import {getCurrentColors} from '../../utils/Colors'; import {eOnLoadNote} from '../../utils/Events'; +import { tabBarRef } from '../../utils/Refs'; import {sleep} from '../../utils/TimeUtils'; import EditorHeader from './EditorHeader'; import { + checkStatus, EditorWebView, getNote, onWebViewLoad, @@ -50,18 +51,23 @@ const Editor = React.memo( }, [premiumUser]); const onResetRequested = async noload => { - setResetting(true); - await sleep(30); - setResetting(false); - eSendEvent( - eOnLoadNote, - getNote() ? {...getNote(), forced: true} : {type: 'new'} - ); - console.log('resetting editor'); if (!getNote()) { - await sleep(10); eSendEvent('loadingNote', null); } + setResetting(true); + await sleep(10); + setResetting(false); + if (tabBarRef.current?.scrollOffset === 0 ) { + console.log('Editor out of bounds'); + return; + } + if (getNote()) { + eSendEvent( + eOnLoadNote, + {...getNote(), forced: true} + ); + } + console.log('resetting editor'); }; useEffect(() => { @@ -78,7 +84,7 @@ const Editor = React.memo( width: '100%', backgroundColor: 'transparent', flexGrow: 1, - flex: 1 + flex: 1, }}> { onResetRequested(); }} + onError={event => { + onResetRequested(); + }} injectedJavaScript={` sessionId="${sessionId}"; console.log(sessionId); @@ -122,7 +131,7 @@ const Editor = React.memo( allowUniversalAccessFromFileURLs={true} originWhitelist={['*']} source={source} - // source={{uri:"http://192.168.10.4:3000/index.html"}} + //source={{uri: 'http://192.168.10.7:3000/index.html'}} style={style} autoManageStatusBarEnabled={false} onMessage={_onMessage}