diff --git a/apps/mobile/App.js b/apps/mobile/App.js index 1446eb98f..4d371ce3c 100644 --- a/apps/mobile/App.js +++ b/apps/mobile/App.js @@ -9,9 +9,7 @@ import { defaultState } from './src/provider/defaultState'; import { eSubscribeEvent, eUnSubscribeEvent } from './src/services/eventManager'; import { eDispatchAction } from './src/services/events'; import { db, DDS } from './src/utils/utils'; -import { test } from './src/utils/storage'; - - +import { SafeAreaContext, SafeAreaProvider } from 'react-native-safe-area-context'; const App = () => { const [state, dispatch] = useTracked(); @@ -88,10 +86,15 @@ const App = () => { return <>; } return ( - <> - - - + + + + <> + + + + + ); }; diff --git a/apps/mobile/index.mobile.js b/apps/mobile/index.mobile.js index 7176ca97a..e80666748 100644 --- a/apps/mobile/index.mobile.js +++ b/apps/mobile/index.mobile.js @@ -11,6 +11,7 @@ import { useTracked } from './src/provider'; import { StatusBar, Platform } from 'react-native'; import { AppContainer } from './src/services/AppContainer'; import NavigationService from './src/services/NavigationService'; +import { useSafeArea } from 'react-native-safe-area-context'; const editorRef = createRef(); export const Initialize = () => { diff --git a/apps/mobile/src/components/Container/index.js b/apps/mobile/src/components/Container/index.js index c56161512..4b1d3c151 100644 --- a/apps/mobile/src/components/Container/index.js +++ b/apps/mobile/src/components/Container/index.js @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from 'react'; +import React, { useEffect, useState } from 'react'; import { Keyboard, KeyboardAvoidingView, @@ -10,18 +10,19 @@ import { } from 'react-native'; import * as Animatable from 'react-native-animatable'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -import {br, opacity, pv, SIZE, WEIGHT} from '../../common/common'; -import {useTracked} from '../../provider'; -import {ACTIONS} from '../../provider/actions'; -import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager'; -import {eScrollEvent, eClearSearch} from '../../services/events'; -import {db, getElevation, ToastEvent, DDS, selection} from '../../utils/utils'; -import {Header} from '../header'; -import {Search} from '../SearchInput'; +import { br, opacity, pv, SIZE, WEIGHT } from '../../common/common'; +import { useTracked } from '../../provider'; +import { ACTIONS } from '../../provider/actions'; +import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/eventManager'; +import { eScrollEvent, eClearSearch } from '../../services/events'; +import { db, getElevation, ToastEvent, DDS, selection } from '../../utils/utils'; +import { Header } from '../header'; +import { Search } from '../SearchInput'; import SelectionHeader from '../SelectionHeader'; -import {inputRef} from '../../utils/refs'; +import { inputRef } from '../../utils/refs'; +import { useSafeArea } from 'react-native-safe-area-context'; -const AnimatedSafeAreaView = Animatable.createAnimatableComponent(SafeAreaView); +const AnimatedKeyboardAvoidingView = Animatable.createAnimatableComponent(KeyboardAvoidingView); const AnimatedTouchableOpacity = Animatable.createAnimatableComponent( TouchableOpacity, @@ -49,11 +50,13 @@ export const Container = ({ }) => { // State const [state, dispatch] = useTracked(); - const {colors, selectionMode, searchResults, loading} = state; + const { colors, selectionMode, searchResults, loading } = state; const [text, setText] = useState(''); - const [hideHeader, setHideHeader] = useState(false); const [buttonHide, setButtonHide] = useState(false); + const insets = useSafeArea(); + + let offsetY = 0; let countUp = 1; @@ -182,123 +185,121 @@ export const Container = ({ // Render return ( - - + {noSelectionHeader ? null : } + + - {noSelectionHeader ? null : } +
{ + setHideHeader(false); + countUp = 0; + countDown = 0; + }} + headerColor={headerColor} + navigation={navigation} + colors={colors} + isLoginNavigator={isLoginNavigator} + preventDefaultMargins={preventDefaultMargins} + heading={heading} + canGoBack={canGoBack} + customIcon={customIcon} + /> - -
setText('')} hide={hideHeader} - verticalMenu={verticalMenu} - showSearch={() => { - setHideHeader(false); - countUp = 0; - countDown = 0; - }} + onChangeText={onChangeText} headerColor={headerColor} - navigation={navigation} - colors={colors} - isLoginNavigator={isLoginNavigator} - preventDefaultMargins={preventDefaultMargins} - heading={heading} - canGoBack={canGoBack} - customIcon={customIcon} + onSubmitEditing={onSubmitEditing} + placeholder={placeholder} + onBlur={onBlur} + onFocus={onFocus} + clearSearch={clearSearch} + value={text} /> + ) : null} + - {data[0] && !noSearch ? ( - setText('')} - hide={hideHeader} - onChangeText={onChangeText} - headerColor={headerColor} - onSubmitEditing={onSubmitEditing} - placeholder={placeholder} - onBlur={onBlur} - onFocus={onFocus} - clearSearch={clearSearch} - value={text} - /> - ) : null} - + {children} - {children} - - {noBottomButton ? null : ( - + - + - + - - - {' ' + bottomButtonText} - - - - - )} - - + {' ' + bottomButtonText} + + + + + )} + ); }; diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js index 44a9b99af..9b40a326d 100644 --- a/apps/mobile/src/components/NotesList/index.js +++ b/apps/mobile/src/components/NotesList/index.js @@ -18,6 +18,7 @@ import { NotesPlaceHolder } from '../ListPlaceholders'; import NoteItem from '../NoteItem'; import SelectionWrapper from '../SelectionWrapper'; import { useIsFocused } from 'react-navigation-hooks'; +import { useSafeArea } from 'react-native-safe-area-context'; const sectionListRef = createRef(); export const NotesList = ({ isGrouped = false }) => { @@ -26,7 +27,7 @@ export const NotesList = ({ isGrouped = false }) => { const isFocused = useIsFocused(); const [refreshing, setRefreshing] = useState(false); const searchResults = { ...state.searchResults }; - + const insets = useSafeArea(); const _renderItem = ({ item, index }) => ( { : 135 : 135 - 60 : notes[0] && !selectionMode - ? 155 - : 155 - 60, + ? 155 - insets.top + : (155 - 60) - insets.top, }}> @@ -202,22 +203,16 @@ export const NotesList = ({ isGrouped = false }) => { setRefreshing(true); try { await db.sync(); - dispatch({ type: ACTIONS.NOTES }); - dispatch({ type: ACTIONS.PINNED }); - let user = await db.user.get(); - dispatch({ type: ACTIONS.USER, user: user }); setRefreshing(false); ToastEvent.show('Sync Complete', 'success'); } catch (e) { setRefreshing(false); - dispatch({ type: ACTIONS.NOTES }); - dispatch({ type: ACTIONS.PINNED }); - let user = await db.user.get(); - dispatch({ type: ACTIONS.USER, user: user }); ToastEvent.show(e.message, 'error'); } - - + dispatch({ type: ACTIONS.NOTES }); + dispatch({ type: ACTIONS.PINNED }); + let user = await db.user.get(); + dispatch({ type: ACTIONS.USER, user: user }); }} refreshing={refreshing} /> diff --git a/apps/mobile/src/components/SearchInput/index.js b/apps/mobile/src/components/SearchInput/index.js index 2aa7b4f29..a3bbc3f8b 100644 --- a/apps/mobile/src/components/SearchInput/index.js +++ b/apps/mobile/src/components/SearchInput/index.js @@ -42,11 +42,11 @@ export const Search = props => { transition={['marginTop', 'opacity']} duration={200} style={{ - opacity: props.hide ? 0 : 1, + opacity: _opacity, height: 60, justifyContent: 'center', - marginTop: props.hide ? -65 : 0, - paddingHorizontal: 12, + marginTop: _marginAnim, + paddingHorizontal: 12 }}> { alignSelf: 'center', borderRadius: br, height: '90%', - borderWidth: props.hide ? 0 : 1.5, + borderWidth: _borderAnim, borderColor: focus ? props.headerColor ? props.headerColor diff --git a/apps/mobile/src/components/SimpleList/index.js b/apps/mobile/src/components/SimpleList/index.js index c22c68af9..e96c3a987 100644 --- a/apps/mobile/src/components/SimpleList/index.js +++ b/apps/mobile/src/components/SimpleList/index.js @@ -1,13 +1,14 @@ import React from 'react'; -import {FlatList, Platform, RefreshControl, Text, View} from 'react-native'; -import {SIZE, WEIGHT} from '../../common/common'; -import {useTracked} from '../../provider'; -import {ACTIONS} from '../../provider/actions'; -import {eSendEvent} from '../../services/eventManager'; -import {eClearSearch, eScrollEvent} from '../../services/events'; -import {hexToRGBA} from '../../utils/utils'; -import {NotebookItem} from '../NotebookItem'; +import { FlatList, Platform, RefreshControl, Text, View } from 'react-native'; +import { SIZE, WEIGHT } from '../../common/common'; +import { useTracked } from '../../provider'; +import { ACTIONS } from '../../provider/actions'; +import { eSendEvent } from '../../services/eventManager'; +import { eClearSearch, eScrollEvent } from '../../services/events'; +import { hexToRGBA } from '../../utils/utils'; +import { NotebookItem } from '../NotebookItem'; import SelectionWrapper from '../SelectionWrapper'; +import { useSafeArea } from 'react-native-safe-area-context'; const SimpleList = ({ data, @@ -24,9 +25,9 @@ const SimpleList = ({ noteToMove, }) => { const [state, dispatch] = useTracked(); - const {colors, selectionMode} = state; - const searchResults = {...state.searchResults}; - + const { colors, selectionMode } = state; + const searchResults = { ...state.searchResults }; + const insets = useSafeArea(); const _onScroll = event => { if (!event) return; let y = event.nativeEvent.contentOffset.y; @@ -62,8 +63,8 @@ const SimpleList = ({ ? 135 : 135 - 60 : data[0] && !selectionMode - ? 155 - : 155 - 60, + ? 155 - insets.top + : (155 - insets.top) - 60, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', @@ -90,70 +91,70 @@ const SimpleList = ({ ) : ( - - {pinned && pinned.notebooks && pinned.notebooks.length > 0 ? ( - <> - item.id.toString()} - renderItem={({item, index}) => - item.type === 'notebook' ? ( - - { - if (!selectionMode) { - dispatch({ - type: ACTIONS.SELECTION_MODE, - enabled: true, - }); - } - dispatch({type: ACTIONS.SELECTED_ITEMS, item: item}); - }} - noteToMove={noteToMove} - item={item} - pinned={true} + + {pinned && pinned.notebooks && pinned.notebooks.length > 0 ? ( + <> + item.id.toString()} + renderItem={({ item, index }) => + item.type === 'notebook' ? ( + - - ) : null - } - /> - - ) : null} - - ); + currentEditingNote={false} + pinned={true} + background={ + Platform.ios + ? hexToRGBA(colors.accent + '19') + : hexToRGBA(colors.shade) + } + item={item}> + { + if (!selectionMode) { + dispatch({ + type: ACTIONS.SELECTION_MODE, + enabled: true, + }); + } + dispatch({ type: ACTIONS.SELECTED_ITEMS, item: item }); + }} + noteToMove={noteToMove} + item={item} + pinned={true} + index={index} + colors={colors} + /> + + ) : null + } + /> + + ) : null} + + ); const _ListEmptyComponent = ( 0 + focused && + searchResults.results.length > 0 ? searchResults.results : data } diff --git a/apps/mobile/src/components/VaultDialog/index.js b/apps/mobile/src/components/VaultDialog/index.js index 49d38084f..60deaf4a0 100644 --- a/apps/mobile/src/components/VaultDialog/index.js +++ b/apps/mobile/src/components/VaultDialog/index.js @@ -322,7 +322,7 @@ export class VaultDialog extends Component { maxWidth: '90%', alignSelf: 'center', marginTop: 10, - marginBottom: 10 + marginBottom: 5 }}> {!novault ? 'Set a password to create vault' diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js index fe9903b4d..0918a6406 100644 --- a/apps/mobile/src/components/header/index.js +++ b/apps/mobile/src/components/header/index.js @@ -1,18 +1,19 @@ -import React, {createRef} from 'react'; -import {Platform, StatusBar, Text, TouchableOpacity, View} from 'react-native'; +import React, { createRef } from 'react'; +import { Platform, StatusBar, Text, TouchableOpacity, View } from 'react-native'; import * as Animatable from 'react-native-animatable'; -import {SIZE, WEIGHT} from '../../common/common'; -import {useTracked} from '../../provider'; -import {eSendEvent} from '../../services/eventManager'; -import {eCloseLoginDialog} from '../../services/events'; +import { SIZE, WEIGHT } from '../../common/common'; +import { useTracked } from '../../provider'; +import { eSendEvent } from '../../services/eventManager'; +import { eCloseLoginDialog } from '../../services/events'; import NavigationService from '../../services/NavigationService'; -import {DDS} from '../../utils/utils'; +import { DDS } from '../../utils/utils'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; -import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu'; -import {ACTIONS} from '../../provider/actions'; -import {sideMenuRef} from '../../utils/refs'; -import {moveNoteHideEvent} from '../DialogManager/recievers'; - +import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu'; +import { ACTIONS } from '../../provider/actions'; +import { sideMenuRef } from '../../utils/refs'; +import { moveNoteHideEvent } from '../DialogManager/recievers'; +import { useSafeArea } from 'react-native-safe-area-context'; +const menuRef = createRef(); export const Header = ({ heading, canGoBack = true, @@ -26,8 +27,9 @@ export const Header = ({ headerColor, }) => { const [state, dispatch] = useTracked(); - const {colors} = state; - const menuRef = createRef(); + const { colors } = state; + const insets = useSafeArea(); + return ( {canGoBack ? ( { if (navigation && preventDefaultMargins) { if (navigation.state.routeName === 'Folders') { @@ -88,11 +90,11 @@ export const Header = ({ /> ) : ( - undefined - )} + undefined + )} {menu && !DDS.isTab ? ( { sideMenuRef.current?.openMenu(true); }} @@ -105,8 +107,8 @@ export const Header = ({ ) : ( - undefined - )} + undefined + )} { - dispatch({type: ACTIONS.NOTES, sort: null}); + dispatch({ type: ACTIONS.NOTES, sort: null }); menuRef.current?.hide(); }}> Default @@ -194,7 +196,7 @@ export const Header = ({ color: colors.pri, }} onPress={() => { - dispatch({type: ACTIONS.NOTES, sort: 'abc'}); + dispatch({ type: ACTIONS.NOTES, sort: 'abc' }); menuRef.current?.hide(); }}> Alphabetical @@ -205,7 +207,7 @@ export const Header = ({ color: colors.pri, }} onPress={() => { - dispatch({type: ACTIONS.NOTES, sort: 'year'}); + dispatch({ type: ACTIONS.NOTES, sort: 'year' }); menuRef.current?.hide(); }}> By year @@ -216,7 +218,7 @@ export const Header = ({ color: colors.pri, }} onPress={() => { - dispatch({type: ACTIONS.NOTES, sort: 'month'}); + dispatch({ type: ACTIONS.NOTES, sort: 'month' }); menuRef.current?.hide(); }}> By month @@ -227,7 +229,7 @@ export const Header = ({ color: colors.pri, }} onPress={() => { - dispatch({type: ACTIONS.NOTES, sort: 'week'}); + dispatch({ type: ACTIONS.NOTES, sort: 'week' }); menuRef.current?.hide(); }}> By week diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js index ade3fe242..38c2c0e4a 100755 --- a/apps/mobile/src/views/Editor/index.js +++ b/apps/mobile/src/views/Editor/index.js @@ -38,6 +38,7 @@ import { import { exitEditorAnimation } from '../../utils/animations'; import { sideMenuRef } from '../../utils/refs'; import { db, DDS, editing, timeConverter, ToastEvent } from '../../utils/utils'; +import { useSafeArea } from 'react-native-safe-area-context'; const EditorWebView = createRef(); let note = {}; @@ -54,6 +55,7 @@ const Editor = ({ noMenu }) => { const { colors } = state; const [fullscreen, setFullscreen] = useState(false); const [dateEdited, setDateEdited] = useState(0); + const insets = useSafeArea(); // FUNCTIONS const post = message => @@ -520,7 +522,7 @@ const Editor = ({ noMenu }) => { position: 'absolute', left: 0, top: 0, - marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight, + marginTop: Platform.OS === 'ios' ? 0 : insets.top, paddingLeft: 12, zIndex: 800, }}> @@ -541,7 +543,7 @@ const Editor = ({ noMenu }) => { flexDirection: 'row', marginRight: 0, position: 'absolute', - marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight, + marginTop: Platform.OS === 'ios' ? 0 : insets.top, zIndex: 800, right: 0, top: 0, @@ -596,10 +598,10 @@ const Editor = ({ noMenu }) => { style={{ paddingHorizontal: 12, marginTop: - Platform.OS === 'ios' ? 45 : StatusBar.currentHeight + 45, + Platform.OS === 'ios' ? 45 : insets.top + 45, width: '100%', position: 'absolute', - justifyContent: 'space-between', + justifyContent: 'flex-start', flexDirection: 'row', alignItems: 'center', paddingLeft: noMenu ? 12 : 12 + 50, diff --git a/apps/mobile/src/views/Login/index.js b/apps/mobile/src/views/Login/index.js index cf9adc6be..d5a5406bc 100644 --- a/apps/mobile/src/views/Login/index.js +++ b/apps/mobile/src/views/Login/index.js @@ -71,7 +71,9 @@ export const Login = ({ navigation }) => { try { console.log('here reacched'); await db.user.login(username, password); + } catch (e) { + console.log(e, 'ERROR'); setTimeout(() => { diff --git a/apps/mobile/src/views/Settings/index.js b/apps/mobile/src/views/Settings/index.js index 93f53460c..061fd9917 100644 --- a/apps/mobile/src/views/Settings/index.js +++ b/apps/mobile/src/views/Settings/index.js @@ -21,23 +21,23 @@ import { WEIGHT, } from '../../common/common'; import Container from '../../components/Container'; -import {updateEvent} from '../../components/DialogManager/recievers'; -import {useTracked} from '../../provider'; -import {ACTIONS} from '../../provider/actions'; -import {eSendEvent} from '../../services/eventManager'; -import {eOpenLoginDialog} from '../../services/events'; +import { useTracked } from '../../provider'; +import { ACTIONS } from '../../provider/actions'; +import { eSendEvent } from '../../services/eventManager'; +import { eOpenLoginDialog } from '../../services/events'; import NavigationService from '../../services/NavigationService'; -import {hexToRGBA, w, DDS, setSetting, db, ToastEvent} from '../../utils/utils'; +import { hexToRGBA, w, DDS, setSetting, db, ToastEvent } from '../../utils/utils'; +import { useSafeArea } from 'react-native-safe-area-context'; -export const Settings = ({navigation}) => { +export const Settings = ({ navigation }) => { const [state, dispatch] = useTracked(); - const {colors, user, settings} = state; - + const { colors, user, settings } = state; + const insets = useSafeArea(); function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) { let newColors = setColorScheme(colors, accent); StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content'); - dispatch({type: ACTIONS.THEME, colors: newColors}); + dispatch({ type: ACTIONS.THEME, colors: newColors }); } function changeAccentColor(accentColor) { @@ -56,7 +56,7 @@ export const Settings = ({navigation}) => { noBottomButton={true}> @@ -143,27 +143,27 @@ export const Settings = ({navigation}) => { {[ { name: 'Backup my notes', - func: () => {}, + func: () => { }, }, { name: 'My vault', - func: () => {}, + func: () => { }, }, { name: 'Subscription status', - func: () => {}, + func: () => { }, }, { name: 'Change password', - func: () => {}, + func: () => { }, }, { name: 'Logout', func: async () => { await db.user.logout(); - dispatch({type: ACTIONS.USER, user: null}); - dispatch({type: ACTIONS.ALL}); + dispatch({ type: ACTIONS.USER, user: null }); + dispatch({ type: ACTIONS.CLEAR_ALL }); ToastEvent.show('Logged out, syncing disabled', 'success'); }, }, @@ -193,74 +193,74 @@ export const Settings = ({navigation}) => { ))} ) : ( - <> - { - DDS.isTab - ? eSendEvent(eOpenLoginDialog) - : NavigationService.navigate('Login'); - }} - activeOpacity={opacity / 2} - style={{ - paddingVertical: pv + 5, - marginBottom: pv + 5, - width: '100%', - flexDirection: 'row', - alignItems: 'center', - backgroundColor: colors.shade, - borderRadius: 5, - paddingHorizontal: 6, - }}> - + { + DDS.isTab + ? eSendEvent(eOpenLoginDialog) + : NavigationService.navigate('Login'); + }} + activeOpacity={opacity / 2} style={{ - width: 40, - backgroundColor: colors.accent, - height: 40, - borderRadius: 100, + paddingVertical: pv + 5, + marginBottom: pv + 5, + width: '100%', + flexDirection: 'row', alignItems: 'center', - justifyContent: 'center', + backgroundColor: colors.shade, + borderRadius: 5, + paddingHorizontal: 6, }}> - - - - - - You are not logged in - - - Login to sync notes. - - + + - - - - - - )} + + + You are not logged in + + + Login to sync notes. + + + + + + + + + )} { { if (!colors.night) { - MMKV.setStringAsync('theme', JSON.stringify({night: true})); + MMKV.setStringAsync('theme', JSON.stringify({ night: true })); changeColorScheme(COLOR_SCHEME_DARK); } else { - MMKV.setStringAsync('theme', JSON.stringify({night: false})); + MMKV.setStringAsync('theme', JSON.stringify({ night: false })); changeColorScheme(COLOR_SCHEME_LIGHT); } @@ -389,18 +389,18 @@ export const Settings = ({navigation}) => { scale === 1 ? (scale = 1.1) : scale === 1.1 - ? (scale = 1.2) - : scale === 1.2 - ? (scale = 1.3) - : scale === 1.3 - ? (scale = 1.4) - : scale === 1.4 - ? (scale = 1.5) - : scale === 1.5 - ? (scale = 0.8) - : scale === 0.8 - ? (scale = 0.9) - : (scale = 0.9 ? (scale = 1) : (scale = 1)); + ? (scale = 1.2) + : scale === 1.2 + ? (scale = 1.3) + : scale === 1.3 + ? (scale = 1.4) + : scale === 1.4 + ? (scale = 1.5) + : scale === 1.5 + ? (scale = 0.8) + : scale === 0.8 + ? (scale = 0.9) + : (scale = 0.9 ? (scale = 1) : (scale = 1)); await setSetting(settings, 'fontScale', scale); }} @@ -588,15 +588,15 @@ export const Settings = ({navigation}) => { {[ { name: 'Terms of Service', - func: () => {}, + func: () => { }, }, { name: 'Privacy Policy', - func: () => {}, + func: () => { }, }, { name: 'About', - func: () => {}, + func: () => { }, }, ].map(item => (