diff --git a/apps/mobile/App.js b/apps/mobile/App.js index 9491e4197..f837db41a 100644 --- a/apps/mobile/App.js +++ b/apps/mobile/App.js @@ -151,6 +151,17 @@ const App = () => { } }, []); + useEffect(() => { + onThemeUpdate(() => { + StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content'); + }); + return () => { + clearThemeUpdateListener(() => { + StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content'); + }); + }; + }, []); + return ( {}, hide, update = () => {}}) => { let tagToAdd = null; let backPressCount = 0; - useEffect(() => { - console.log(tagsInputRef.current); - }, [tagsInputRef]); - useEffect(() => { onThemeUpdate(() => { forceUpdate(); @@ -62,7 +58,7 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => { return ( {}, hide, update = () => {}}) => { if (tag.includes(' ')) { tag = tag.replace(' ', '_'); } - let allTags = tags; + let allTags = [...tags]; allTags.push(tag); - setTags(allTags); tagsInputRef.setNativeProps({ text: '#', }); - forceUpdate(); + setTags(allTags); tagToAdd = ''; setTimeout(() => { tagsInputRef.focus(); diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js index 60c6ad974..34ed32fd2 100644 --- a/apps/mobile/src/components/Menu/index.js +++ b/apps/mobile/src/components/Menu/index.js @@ -57,21 +57,20 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => { opacity: hide ? 0 : 1, backgroundColor: colors.night ? colors.navbg : colors.navbg, }}> + - { isTopic - ? NavigationService.navigate('Notes', item) + ? NavigationService.navigate('Notes', { + ...item, + notebookID, + }) : NavigationService.navigate('Notebook', { notebook: item, note: noteToMove, + title: hideMore ? 'Choose topic' : item.title, isMove: isMove ? true : false, hideMore: hideMore ? true : false, @@ -281,8 +276,8 @@ export const NotebookItem = ({ {hideMore && isTopic ? ( { - storage.addNoteToTopic( + onPress={async () => { + await storage.addNoteToTopic( notebookID, item.title, noteToMove.dateCreated, diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js index 7e1e580fa..c1a312c81 100644 --- a/apps/mobile/src/components/NotesList/index.js +++ b/apps/mobile/src/components/NotesList/index.js @@ -1,31 +1,9 @@ -import React, {useState, useEffect} from 'react'; -import { - View, - Text, - TouchableOpacity, - ScrollView, - Dimensions, - FlatList, - Platform, -} from 'react-native'; +import React, {useState} from 'react'; +import {View, Text, FlatList, Platform} from 'react-native'; -import { - COLOR_SCHEME, - SIZE, - br, - ph, - pv, - opacity, - FONT, - WEIGHT, -} from '../../common/common'; +import {COLOR_SCHEME, SIZE, WEIGHT} from '../../common/common'; -import Icon from 'react-native-vector-icons/Ionicons'; -import {Reminder} from '../Reminder'; -import {getElevation} from '../../utils/utils'; import NoteItem from '../NoteItem'; -import NavigationService from '../../services/NavigationService'; -import {storage} from '../../../App'; export const NotesList = ({ keyword = null, @@ -37,75 +15,73 @@ export const NotesList = ({ const [colors, setColors] = useState(COLOR_SCHEME); return ( - <> - item.dateCreated.toString()} - ListFooterComponent={ - item.dateCreated.toString()} + ListFooterComponent={ + + + - End - + + + } + onScroll={event => { + y = event.nativeEvent.contentOffset.y; + onScroll(y); + }} + ListHeaderComponent={ + <> + {isSearch ? ( - - End - - - - } - onScroll={event => { - y = event.nativeEvent.contentOffset.y; - onScroll(y); - }} - ListHeaderComponent={ - <> - {isSearch ? ( + Search Results for{' '} - Search Results for{' '} - - {keyword}{' '} - + {keyword}{' '} - ) : ( - - )} - - } - ListFooterComponent={ - - - - End - - - } - renderItem={({item, index}) => } - /> - + ) : ( + + )} + + } + ListFooterComponent={ + + + - End - + + + } + renderItem={({item, index}) => } + /> ); }; diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js index 9b9850c92..eca998083 100755 --- a/apps/mobile/src/views/Editor/index.js +++ b/apps/mobile/src/views/Editor/index.js @@ -11,6 +11,7 @@ import { Dimensions, TextInput, BackHandler, + TouchableOpacity, } from 'react-native'; import { COLOR_SCHEME, @@ -31,7 +32,7 @@ import {NavigationEvents} from 'react-navigation'; import {storage} from '../../../App'; import {SideMenuEvent} from '../../utils/utils'; import {Dialog} from '../../components/Dialog'; -import {TouchableOpacity} from 'react-native-gesture-handler'; + import * as Animatable from 'react-native-animatable'; import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu'; import SideMenu from 'react-native-side-menu'; @@ -60,7 +61,7 @@ const Editor = ({navigation}) => { const [resize, setResize] = useState(false); const [sidebar, setSidebar] = useState('30%'); const [isOpen, setOpen] = useState(false); - + const [hide, setHide] = useState(true); // VARIABLES let updateInterval = null; @@ -74,6 +75,9 @@ const Editor = ({navigation}) => { const _keyboardDidShow = e => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setKeyboardHeight(e.endCoordinates.height); + if (!isOpen) { + setHide(true); + } }; const post = value => EditorWebView.postMessage(value); @@ -81,23 +85,30 @@ const Editor = ({navigation}) => { const _keyboardDidHide = () => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); setKeyboardHeight(0); + setTimeout(() => { + setHide(false); + }, 2000); }; - async function onChange(data) { + const onChange = data => { if (data !== '') { content = JSON.parse(data); } - } + }; const saveNote = async () => { - console.log(await storage.getNotes()); - if (title || content) { - timestamp = await storage.addNote({ - title, - content, - dateCreated: timestamp, - }); + if (!content) { + content = { + text: '', + delta: null, + }; } + + timestamp = await storage.addNote({ + title, + content, + dateCreated: timestamp, + }); }; const onWebViewLoad = () => { @@ -117,11 +128,6 @@ const Editor = ({navigation}) => { }; const onTitleTextChange = value => { title = value; - if (title.length > 12) { - setResize(true); - } else if (title.length < 12) { - setResize(false); - } }; const _renderEditor = () => { @@ -163,15 +169,15 @@ const Editor = ({navigation}) => { /> - (titleRef = ref)} placeholderTextColor={colors.icon} + defaultValue={title} style={{ width: '80%', fontFamily: WEIGHT.bold, - fontSize: resize ? SIZE.xl : SIZE.xxl, + fontSize: SIZE.xxl, color: colors.pri, maxWidth: '90%', paddingVertical: 0, @@ -196,7 +202,7 @@ const Editor = ({navigation}) => { }}> @@ -254,18 +260,27 @@ const Editor = ({navigation}) => { ); }; + handleBackEvent = () => { + setDialog(true); + return true; + }; + // EFFECTS - useEffect(() => { - (timestamp = null), (content = null); - title = null; - }, []); useEffect(() => { - BackHandler.addEventListener('hardwareBackPress', () => { - setDialog(true); - return true; - }); - }); + let handleBack = BackHandler.addEventListener( + 'hardwareBackPress', + handleBackEvent, + ); + return () => { + title = null; + timestamp = null; + content = null; + + handleBack.remove(); + handleBack = null; + }; + }, []); useEffect(() => { keyboardDidShowListener = Keyboard.addListener( @@ -308,7 +323,7 @@ const Editor = ({navigation}) => { SideMenuEvent.open(); SideMenuEvent.enable(); }; - }, []); + }); useEffect(() => { onThemeUpdate(() => { @@ -326,6 +341,12 @@ const Editor = ({navigation}) => { EditorWebView.reload(); }, [colors.bg]); + useEffect(() => { + setTimeout(() => { + setHide(false); + }, 1000); + }, []); + return ( { }} menu={ { setOpen(false); }} diff --git a/apps/mobile/src/views/Folders/index.js b/apps/mobile/src/views/Folders/index.js index 0901d2cc0..fe838ad53 100644 --- a/apps/mobile/src/views/Folders/index.js +++ b/apps/mobile/src/views/Folders/index.js @@ -44,7 +44,7 @@ export const Folders = ({navigation}) => { const [notebooks, setNotebooks] = useState([]); const [hideHeader, setHideHeader] = useState(false); const [buttonHide, setButtonHide] = useState(false); - const [margin, setMargin] = useState(150); + const [margin, setMargin] = useState(190); const forceUpdate = useForceUpdate(); const params = navigation.state.params; let offsetY = 0; @@ -55,18 +55,16 @@ export const Folders = ({navigation}) => { let marginSet = false; const setMarginTop = () => { - if (margin !== 150) return; - if (headerHeight == 0 || searchHeight == 0) { - let toAdd = h * 0.06; - - setTimeout(() => { - if (marginSet) return; - setMargin(headerHeight + searchHeight + toAdd); - headerHeight = 0; - searchHeight = 0; - marginSet = true; - }, 10); + if (headerHeight < 30 || searchHeight < 30) { + return; } + let toAdd = h * 0.06; + if (marginSet) return; + let a = headerHeight + searchHeight + toAdd; + setMargin(a); + headerHeight = 0; + searchHeight = 0; + marginSet = true; }; useEffect(() => { @@ -135,6 +133,7 @@ export const Folders = ({navigation}) => { { searchHeight = height; + console.log(searchHeight + '' + headerHeight); setMarginTop(); }} placeholder="Search your notebook" diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js index 51d3178a3..9b5de2582 100755 --- a/apps/mobile/src/views/Home/index.js +++ b/apps/mobile/src/views/Home/index.js @@ -1,4 +1,4 @@ -import React, {useEffect, useState, createRef} from 'react'; +import React, {useEffect, useState, createRef, useCallback} from 'react'; import { SafeAreaView, Platform, @@ -30,14 +30,13 @@ import Icon from 'react-native-vector-icons/Feather'; import NavigationService from '../../services/NavigationService'; import {useForceUpdate} from '../ListsEditor'; import * as Animatable from 'react-native-animatable'; - +import {useNavigationEvents, useIsFocused} from 'react-navigation-hooks'; export const AnimatedSafeAreaView = Animatable.createAnimatableComponent( SafeAreaView, ); export const Home = ({navigation}) => { // State - const [loading, setLoading] = useState(true); const [colors, setColors] = useState(COLOR_SCHEME); const [search, setSearch] = useState(false); const [text, setText] = useState(''); @@ -48,7 +47,7 @@ export const Home = ({navigation}) => { const [notes, setNotes] = useState([]); const [keyword, setKeyword] = useState(''); const forceUpdate = useForceUpdate(); - + const isFocused = useIsFocused(); // Variables let offsetY = 0; let countUp = 1; @@ -60,12 +59,10 @@ export const Home = ({navigation}) => { let allNotes = []; // Effects - useEffect(() => { - setTimeout(() => { - setLoading(false); - }, 1000); - }, []); + if (!isFocused) return; + fetchNotes(); + }, [isFocused]); useEffect(() => { onThemeUpdate(() => { @@ -78,9 +75,13 @@ export const Home = ({navigation}) => { }; }, []); - useEffect(() => { - fetchNotes(); - }, []); + const fetchNotes = () => { + setTimeout(() => { + allNotes = storage.getNotes(); + + setNotes(allNotes); + }, 0); + }; useEffect(() => { Keyboard.addListener('keyboardDidShow', () => { @@ -152,25 +153,16 @@ export const Home = ({navigation}) => { }; const setMarginTop = () => { - if (margin !== 150) return; - if (headerHeight == 0 || searchHeight == 0) { - let toAdd = h * 0.06; - - setTimeout(() => { - if (marginSet) return; - setMargin(headerHeight + searchHeight + toAdd); - headerHeight = 0; - searchHeight = 0; - marginSet = true; - }, 10); - } - }; - - const fetchNotes = async () => { - allNotes = await storage.getNotes(); - if (allNotes) { - setNotes(allNotes); + if (headerHeight < 30 || searchHeight < 30) { + return; } + let toAdd = h * 0.06; + if (marginSet) return; + let a = headerHeight + searchHeight + toAdd; + setMargin(a); + headerHeight = 0; + searchHeight = 0; + marginSet = true; }; // Render @@ -178,16 +170,6 @@ export const Home = ({navigation}) => { return Platform.isPad ? ( - { - DeviceEventEmitter.emit('openSidebar'); - setUpdate(update + 1); - }} - onDidBlur={() => { - marginSet = false; - }} - /> -
{ }} /> - {hidden ? : } + ) : ( diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js index fb11d4929..e3cc6a60f 100644 --- a/apps/mobile/src/views/Notebook/index.js +++ b/apps/mobile/src/views/Notebook/index.js @@ -70,18 +70,17 @@ export const Notebook = ({navigation}) => { // Functions const setMarginTop = () => { - if (margin !== 150) return; - if (headerHeight == 0 || searchHeight == 0) { - let toAdd = h * 0.06; - - setTimeout(() => { - if (marginSet) return; - setMargin(headerHeight + searchHeight + toAdd); - headerHeight = 0; - searchHeight = 0; - marginSet = true; - }, 50); + console.log(params.notebook); + if (headerHeight < 30 || searchHeight < 30) { + return; } + let toAdd = h * 0.06; + if (marginSet) return; + let a = headerHeight + searchHeight + toAdd; + setMargin(a); + headerHeight = 0; + searchHeight = 0; + marginSet = true; }; // Render diff --git a/apps/mobile/src/views/Notes/index.js b/apps/mobile/src/views/Notes/index.js index 1d077e093..0724fc477 100644 --- a/apps/mobile/src/views/Notes/index.js +++ b/apps/mobile/src/views/Notes/index.js @@ -39,7 +39,7 @@ const h = Dimensions.get('window').height; export const Notes = ({navigation}) => { const [colors, setColors] = useState(COLOR_SCHEME); const [hideHeader, setHideHeader] = useState(false); - const [margin, setMargin] = useState(150); + const [margin, setMargin] = useState(200); const [buttonHide, setButtonHide] = useState(false); const [notes, setNotes] = useState([]); const forceUpdate = useForceUpdate(); @@ -49,6 +49,7 @@ export const Notes = ({navigation}) => { let countDown = 0; let headerHeight = 0; let searchHeight = 0; + let marginSet = false; useEffect(() => { onThemeUpdate(() => { forceUpdate(); @@ -69,34 +70,12 @@ export const Notes = ({navigation}) => { }, []); useEffect(() => { - let allNotes = []; - - params.notes.forEach(note => { - let noteToAdd = storage.getNote(note); - if (noteToAdd) { - allNotes[notes.length] = noteToAdd; - } - }); - + let allNotes = storage.getTopic(params.notebookID, params.title); if (allNotes && allNotes.length > 0) { setNotes(allNotes); } }, []); - const setMarginTop = () => { - if (margin !== 150) return; - if (headerHeight == 0 || searchHeight == 0) { - let toAdd = h * 0.06; - - setTimeout(() => { - if (margin > headerHeight + searchHeight + toAdd) return; - setMargin(headerHeight + searchHeight + toAdd); - headerHeight = 0; - searchHeight = 0; - }, 10); - } - }; - return ( { { searchHeight = height; - setMarginTop(); }} placeholder={`Search in ${params.title}`} hide={hideHeader}