diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js index c89939c2e..526b31848 100755 --- a/apps/mobile/src/views/Editor/index.js +++ b/apps/mobile/src/views/Editor/index.js @@ -27,6 +27,7 @@ import ActionSheet from '../../components/ActionSheet'; import {ActionSheetComponent} from '../../components/ActionSheetComponent'; import {VaultDialog} from '../../components/VaultDialog'; import NavigationService from '../../services/NavigationService'; +import {useIsFocused} from 'react-navigation-hooks'; const w = Dimensions.get('window').width; const h = Dimensions.get('window').height; @@ -39,291 +40,292 @@ let timer = null; let note = {}; const Editor = ({navigation}) => { + // Global State + const {colors} = useAppContext(); + + // Local State + + const [dialog, setDialog] = useState(false); + const [isOpen, setOpen] = useState(false); + const [sidebar, setSidebar] = useState(DDS.isTab ? true : false); + const [vaultDialog, setVaultDialog] = useState(false); + const [unlock, setUnlock] = useState(false); + const [visible, setVisible] = useState(false); + const [noteProps, setNoteProps] = useState({ + tags: [], + locked: false, + pinned: false, + favorite: false, + colors: [], + }); + + // VARIABLES + + let willRefresh = false; + let customNote = null; + let actionSheet; + let show; + const isFocused = useIsFocused(); + // FUNCTIONS + + const post = value => EditorWebView.postMessage(value); + + const onChange = data => { + if (data !== '') { + content = JSON.parse(data); + } + }; + + const saveNote = async (noteProps = {}, lockNote = true) => { + if (!content) { + content = { + text: '', + delta: null, + }; + } + + timestamp = await db.addNote({ + ...noteProps, + title, + content: { + text: content.text, + delta: content.delta, + }, + dateCreated: timestamp, + }); + + if (lockNote && noteProps.locked) { + db.lockNote(timestamp, 'password'); + } + }; + + const onWebViewLoad = () => { + post(JSON.stringify(colors)); + if (navigation.state.params && navigation.state.params.note) { + note = navigation.state.params.note; + updateEditor(); + } + }; + + const updateEditor = () => { + let props = { + tags: note.tags, + colors: note.colors, + pinned: note.pinned, + favorite: note.favorite, + locked: note.locked, + }; + setNoteProps({...props}); + + post(JSON.stringify(note.content.delta)); + setTimeout(() => { + title = note.title; + titleRef.setNativeProps({ + text: title, + }); + timestamp = note.dateCreated; + content = note.content; + }, 200); + }; + + const onTitleTextChange = value => { + title = value; + }; + + const onMenuHide = () => { + if (show) { + if (show === 'lock') { + if (unlock) { + setUnlock(false); + } + setVaultDialog(true); + } else if (show === 'unlock') { + setUnlock(true); + setVaultDialog(true); + } else if (show == 'delete') { + setVisible(true); + } + } + }; + + const deleteItem = async () => { + await db.deleteNotes([note]); + ToastEvent.show('Note moved to trash', 'success', 3000); + setVisible(false); + navigation.goBack(); + }; + + const _renderEditor = () => { + return ( + + + + { + setDialog(true); + }} + style={{ + width: '12.5%', + height: 40, + justifyContent: 'center', + alignItems: 'flex-start', + }}> + + + + (titleRef = ref)} + placeholderTextColor={colors.icon} + defaultValue={note && note.title ? note.title : title} + style={{ + width: '75%', + fontFamily: WEIGHT.bold, + fontSize: SIZE.xl, + color: colors.pri, + maxWidth: '75%', + paddingVertical: 0, + paddingHorizontal: 0, + }} + onChangeText={onTitleTextChange} + onSubmitEditing={saveNote} + /> + + { + DDS.isTab + ? setSidebar(!sidebar) + : actionSheet._setModalVisible(); + }} + style={{ + width: '12.5%', + height: 40, + justifyContent: 'center', + alignItems: 'flex-end', + }}> + + + + + (EditorWebView = ref)} + onError={error => console.log(error)} + onLoad={onWebViewLoad} + javaScriptEnabled + onShouldStartLoadWithRequest={request => { + if (request.url.includes('https')) { + Linking.openURL(request.url); + return false; + } else { + return true; + } + }} + renderLoading={() => ( + + )} + cacheEnabled={true} + cacheMode="LOAD_CACHE_ELSE_NETWORK" + domStorageEnabled + scrollEnabled={false} + bounces={true} + scalesPageToFit={true} + source={ + Platform.OS === 'ios' + ? require('./web/texteditor.html') + : { + uri: 'file:///android_asset/texteditor.html', + baseUrl: 'baseUrl:"file:///android_asset/', + } + } + style={{ + height: '100%', + maxHeight: '100%', + backgroundColor: 'transparent', + }} + onMessage={evt => { + if (evt.nativeEvent.data !== '') { + clearTimeout(timer); + timer = null; + onChange(evt.nativeEvent.data); + timer = setTimeout(() => { + saveNote(noteProps, true); + console.log('saved'); + }, 1000); + } + }} + /> + + + ); + }; + + // EFFECTS + + useEffect(() => { + let handleBack = BackHandler.addEventListener('hardwareBackPress', () => { + setDialog(true); + return true; + }); + return () => { + handleBack.remove(); + handleBack = null; + title = null; + content = null; + timer = null; + timestamp = null; + }; + }, []); + + useEffect(() => { + SideMenuEvent.close(); + SideMenuEvent.disable(); + return () => { + DDS.isTab ? SideMenuEvent.open() : null; + SideMenuEvent.enable(); + }; + }); + + useEffect(() => { + EditorWebView.reload(); + }, [colors]); + if (!isFocused) { console.log('block rerender'); return <>; } else { - // Global State - const {colors} = useAppContext(); - - // Local State - - const [dialog, setDialog] = useState(false); - const [isOpen, setOpen] = useState(false); - const [sidebar, setSidebar] = useState(DDS.isTab ? true : false); - const [vaultDialog, setVaultDialog] = useState(false); - const [unlock, setUnlock] = useState(false); - const [visible, setVisible] = useState(false); - const [noteProps, setNoteProps] = useState({ - tags: [], - locked: false, - pinned: false, - favorite: false, - colors: [], - }); - - // VARIABLES - - let willRefresh = false; - let customNote = null; - let actionSheet; - let show; - // FUNCTIONS - - const post = value => EditorWebView.postMessage(value); - - const onChange = data => { - if (data !== '') { - content = JSON.parse(data); - } - }; - - const saveNote = async (noteProps = {}, lockNote = true) => { - if (!content) { - content = { - text: '', - delta: null, - }; - } - - timestamp = await db.addNote({ - ...noteProps, - title, - content: { - text: content.text, - delta: content.delta, - }, - dateCreated: timestamp, - }); - - if (lockNote && noteProps.locked) { - db.lockNote(timestamp, 'password'); - } - }; - - const onWebViewLoad = () => { - post(JSON.stringify(colors)); - if (navigation.state.params && navigation.state.params.note) { - note = navigation.state.params.note; - updateEditor(); - } - }; - - const updateEditor = () => { - let props = { - tags: note.tags, - colors: note.colors, - pinned: note.pinned, - favorite: note.favorite, - locked: note.locked, - }; - setNoteProps({...props}); - - post(JSON.stringify(note.content.delta)); - setTimeout(() => { - title = note.title; - titleRef.setNativeProps({ - text: title, - }); - timestamp = note.dateCreated; - content = note.content; - }, 200); - }; - - const onTitleTextChange = value => { - title = value; - }; - - const onMenuHide = () => { - if (show) { - if (show === 'lock') { - if (unlock) { - setUnlock(false); - } - setVaultDialog(true); - } else if (show === 'unlock') { - setUnlock(true); - setVaultDialog(true); - } else if (show == 'delete') { - setVisible(true); - } - } - }; - - const deleteItem = async () => { - await db.deleteNotes([note]); - ToastEvent.show('Note moved to trash', 'success', 3000); - setVisible(false); - navigation.goBack(); - }; - - const _renderEditor = () => { - return ( - - - - { - setDialog(true); - }} - style={{ - width: '12.5%', - height: 40, - justifyContent: 'center', - alignItems: 'flex-start', - }}> - - - - (titleRef = ref)} - placeholderTextColor={colors.icon} - defaultValue={note && note.title ? note.title : title} - style={{ - width: '75%', - fontFamily: WEIGHT.bold, - fontSize: SIZE.xl, - color: colors.pri, - maxWidth: '75%', - paddingVertical: 0, - paddingHorizontal: 0, - }} - onChangeText={onTitleTextChange} - onSubmitEditing={saveNote} - /> - - { - DDS.isTab - ? setSidebar(!sidebar) - : actionSheet._setModalVisible(); - }} - style={{ - width: '12.5%', - height: 40, - justifyContent: 'center', - alignItems: 'flex-end', - }}> - - - - - (EditorWebView = ref)} - onError={error => console.log(error)} - onLoad={onWebViewLoad} - javaScriptEnabled - onShouldStartLoadWithRequest={request => { - if (request.url.includes('https')) { - Linking.openURL(request.url); - return false; - } else { - return true; - } - }} - renderLoading={() => ( - - )} - cacheEnabled={true} - cacheMode="LOAD_CACHE_ELSE_NETWORK" - domStorageEnabled - scrollEnabled={false} - bounces={true} - scalesPageToFit={true} - source={ - Platform.OS === 'ios' - ? require('./web/texteditor.html') - : { - uri: 'file:///android_asset/texteditor.html', - baseUrl: 'baseUrl:"file:///android_asset/', - } - } - style={{ - height: '100%', - maxHeight: '100%', - backgroundColor: 'transparent', - }} - onMessage={evt => { - if (evt.nativeEvent.data !== '') { - clearTimeout(timer); - timer = null; - onChange(evt.nativeEvent.data); - timer = setTimeout(() => { - saveNote(noteProps, true); - console.log('saved'); - }, 1000); - } - }} - /> - - - ); - }; - - // EFFECTS - - useEffect(() => { - let handleBack = BackHandler.addEventListener('hardwareBackPress', () => { - setDialog(true); - return true; - }); - return () => { - handleBack.remove(); - handleBack = null; - title = null; - content = null; - timer = null; - timestamp = null; - }; - }, []); - - useEffect(() => { - SideMenuEvent.close(); - SideMenuEvent.disable(); - return () => { - DDS.isTab ? SideMenuEvent.open() : null; - SideMenuEvent.enable(); - }; - }); - - useEffect(() => { - EditorWebView.reload(); - }, [colors]); - return DDS.isTab ? ( { // Global State @@ -29,36 +30,35 @@ export const Favorites = ({navigation}) => { // Variables let isFocused = useIsFocused(); + let offsetY = 0; + let countUp = 1; + let countDown = 0; + + // Functions + + // Effects + const onScroll = event => { + let y = event.nativeEvent.contentOffset.y; + if (buttonHide) return; + if (y < 30) setHideHeader(false); + if (y > offsetY) { + if (y - offsetY < 150 || countDown > 0) return; + countDown = 1; + countUp = 0; + setHideHeader(true); + } else { + if (offsetY - y < 150 || countUp > 0) return; + countDown = 0; + countUp = 1; + setHideHeader(false); + } + offsetY = y; + }; + // Render if (!isFocused) { console.log('block rerender'); return <>; } else { - let offsetY = 0; - let countUp = 1; - let countDown = 0; - - // Functions - - // Effects - const onScroll = event => { - let y = event.nativeEvent.contentOffset.y; - if (buttonHide) return; - if (y < 30) setHideHeader(false); - if (y > offsetY) { - if (y - offsetY < 150 || countDown > 0) return; - countDown = 1; - countUp = 0; - setHideHeader(true); - } else { - if (offsetY - y < 150 || countUp > 0) return; - countDown = 0; - countUp = 1; - setHideHeader(false); - } - offsetY = y; - }; - // Render - return ( { const { @@ -29,33 +30,33 @@ export const Folders = ({navigation}) => { let isFocused = useIsFocused(); + const params = navigation.state.params; + let offsetY = 0; + let countUp = 0; + let countDown = 0; + + const onScroll = event => { + y = event.nativeEvent.contentOffset.y; + if (y < 30) setHideHeader(false); + //if (buttonHide) return; + if (y > offsetY) { + if (y - offsetY < 150 || countDown > 0) return; + countDown = 1; + countUp = 0; + setHideHeader(true); + } else { + if (offsetY - y < 150 || countUp > 0) return; + countDown = 0; + countUp = 1; + setHideHeader(false); + } + offsetY = y; + }; + if (!isFocused) { console.log('block rerender'); return <>; } else { - const params = navigation.state.params; - let offsetY = 0; - let countUp = 0; - let countDown = 0; - - const onScroll = event => { - y = event.nativeEvent.contentOffset.y; - if (y < 30) setHideHeader(false); - //if (buttonHide) return; - if (y > offsetY) { - if (y - offsetY < 150 || countDown > 0) return; - countDown = 1; - countUp = 0; - setHideHeader(true); - } else { - if (offsetY - y < 150 || countUp > 0) return; - countDown = 0; - countUp = 1; - setHideHeader(false); - } - offsetY = y; - }; - console.log('rerendering folders'); return ( { // Variables let isFocused = useIsFocused(); + let offsetY = 0; + let countUp = 1; + let countDown = 0; + let searchResult = null; + + // Effects + + useEffect(() => { + DDS.isTab ? setMenuOpen() : null; + }, []); + + // Functions + + const onChangeText = value => { + setText(value); + }; + const onSubmitEditing = async () => { + if (!text || text.length < 1) { + clearSearch(); + } else { + setKeyword(text); + searchResult = await db.searchNotes(text); + + if (searchResult && searchResult.length > 0) { + setSearchResults([...searchResult]); + } else { + ToastEvent.show('No search results found', 'error', 3000, () => {}, ''); + } + } + }; + + const onBlur = () => { + if (text && text.length < 1) { + clearSearch(); + } + }; + + const onFocus = () => { + //setSearch(false); + }; + + const clearSearch = () => { + searchResult = null; + setSearchResults([...[]]); + }; + + const onScroll = y => { + if (searchResults.length > 0) return; + if (y < 30) setHideHeader(false); + if (y > offsetY) { + if (y - offsetY < 150 || countDown > 0) return; + countDown = 1; + countUp = 0; + setHideHeader(true); + } else { + if (offsetY - y < 150 || countUp > 0) return; + countDown = 0; + countUp = 1; + setHideHeader(false); + } + offsetY = y; + }; + if (!isFocused) { console.log('block rerender'); return <>; } else { - let offsetY = 0; - let countUp = 1; - let countDown = 0; - let searchResult = null; - - // Effects - - useEffect(() => { - DDS.isTab ? setMenuOpen() : null; - }, []); - - // Functions - - const onChangeText = value => { - setText(value); - }; - const onSubmitEditing = async () => { - if (!text || text.length < 1) { - clearSearch(); - } else { - setKeyword(text); - searchResult = await db.searchNotes(text); - - if (searchResult && searchResult.length > 0) { - setSearchResults([...searchResult]); - } else { - ToastEvent.show( - 'No search results found', - 'error', - 3000, - () => {}, - '', - ); - } - } - }; - - const onBlur = () => { - if (text && text.length < 1) { - clearSearch(); - } - }; - - const onFocus = () => { - //setSearch(false); - }; - - const clearSearch = () => { - searchResult = null; - setSearchResults([...[]]); - }; - - const onScroll = y => { - if (searchResults.length > 0) return; - if (y < 30) setHideHeader(false); - if (y > offsetY) { - if (y - offsetY < 150 || countDown > 0) return; - countDown = 1; - countUp = 0; - setHideHeader(true); - } else { - if (offsetY - y < 150 || countUp > 0) return; - countDown = 0; - countUp = 1; - setHideHeader(false); - } - offsetY = y; - }; - // Render console.log('rerendering home'); return ( diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js index b89e0b999..755557866 100644 --- a/apps/mobile/src/views/Notebook/index.js +++ b/apps/mobile/src/views/Notebook/index.js @@ -19,21 +19,21 @@ export const Notebook = ({navigation}) => { let isFocused = useIsFocused(); + // State + + // Variables + let offsetY = 0; + let countUp = 0; + let countDown = 0; + + // Effects + + // Functions + if (!isFocused) { console.log('block rerender'); return <>; } else { - // State - - // Variables - let offsetY = 0; - let countUp = 0; - let countDown = 0; - - // Effects - - // Functions - // Render return ( { const {colors} = useAppContext(); @@ -32,47 +14,35 @@ export const Notes = ({navigation}) => { const [margin, setMargin] = useState(200); const [buttonHide, setButtonHide] = useState(false); const [notes, setNotes] = useState([]); - const forceUpdate = useForceUpdate(); let isFocused = useIsFocused(); + let params = navigation.state ? navigation.state.params : null; + let offsetY = 0; + let countUp = 0; + let countDown = 0; + let headerHeight = 0; + let searchHeight = 0; + let marginSet = false; + + useEffect(() => { + if (!params) { + params = { + heading: 'Notes', + }; + } + }, []); + + useEffect(() => { + let allNotes = db.getTopic(params.notebookID, params.title); + if (allNotes && allNotes.length > 0) { + setNotes(allNotes); + } + }, []); if (!isFocused) { console.log('block rerender'); return <>; } else { - let params = navigation.state ? navigation.state.params : null; - let offsetY = 0; - let countUp = 0; - let countDown = 0; - let headerHeight = 0; - let searchHeight = 0; - let marginSet = false; - useEffect(() => { - onThemeUpdate(() => { - forceUpdate(); - }); - return () => { - clearThemeUpdateListener(() => { - forceUpdate(); - }); - }; - }, []); - - useEffect(() => { - if (!params) { - params = { - heading: 'Notes', - }; - } - }, []); - - useEffect(() => { - let allNotes = db.getTopic(params.notebookID, params.title); - if (allNotes && allNotes.length > 0) { - setNotes(allNotes); - } - }, []); - return ( { const {