From 582cf4bf52e5cf84088590fdfcc65492655a2aca Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Sat, 25 Jan 2020 23:47:17 +0500 Subject: [PATCH] refactor --- apps/mobile/App.js | 50 +++---- apps/mobile/src/components/Container/index.js | 126 +++++++++++++++- apps/mobile/src/components/NotesList/index.js | 8 +- apps/mobile/src/services/events.js | 2 + apps/mobile/src/views/Home/index.js | 135 ++---------------- 5 files changed, 158 insertions(+), 163 deletions(-) diff --git a/apps/mobile/App.js b/apps/mobile/App.js index 2a7910214..99d6fd875 100644 --- a/apps/mobile/App.js +++ b/apps/mobile/App.js @@ -36,13 +36,10 @@ let editorRef; const App = () => { const [state, dispatch] = useTracked(); const {colors} = state; - // Local State const [init, setInit] = useState(false); const [fullscreen, setFullscreen] = useState(false); - // Effects - const openSidebar = () => { DDS.isTab ? null : sideMenuRef.openMenu(true); }; @@ -58,28 +55,6 @@ const App = () => { DDS.isTab ? null : sideMenuRef.setGestureEnabled(true); }; - useEffect(() => { - eSubscribeEvent(eOpenSideMenu, openSidebar); - eSubscribeEvent(eCloseSideMenu, closeSidebar); - - eSubscribeEvent(eDisableGestures, disableGestures); - eSubscribeEvent(eEnableGestures, enableGestures); - - eSubscribeEvent(eOpenFullscreenEditor, showFullScreenEditor); - eSubscribeEvent(eCloseFullscreenEditor, closeFullScreenEditor); - - return () => { - eUnSubscribeEvent(eOpenFullscreenEditor, showFullScreenEditor); - eUnSubscribeEvent(eCloseFullscreenEditor, closeFullScreenEditor); - - eUnSubscribeEvent(eOpenSideMenu, openSidebar); - eUnSubscribeEvent(eCloseSideMenu, closeSidebar); - - eUnSubscribeEvent(eDisableGestures, disableGestures); - eUnSubscribeEvent(eEnableGestures, enableGestures); - }; - }, []); - const showFullScreenEditor = () => { setFullscreen(true); editorRef.setNativeProps({ @@ -117,6 +92,28 @@ const App = () => { }; }, []); + useEffect(() => { + eSubscribeEvent(eOpenSideMenu, openSidebar); + eSubscribeEvent(eCloseSideMenu, closeSidebar); + + eSubscribeEvent(eDisableGestures, disableGestures); + eSubscribeEvent(eEnableGestures, enableGestures); + + eSubscribeEvent(eOpenFullscreenEditor, showFullScreenEditor); + eSubscribeEvent(eCloseFullscreenEditor, closeFullScreenEditor); + + return () => { + eUnSubscribeEvent(eOpenFullscreenEditor, showFullScreenEditor); + eUnSubscribeEvent(eCloseFullscreenEditor, closeFullScreenEditor); + + eUnSubscribeEvent(eOpenSideMenu, openSidebar); + eUnSubscribeEvent(eCloseSideMenu, closeSidebar); + + eUnSubscribeEvent(eDisableGestures, disableGestures); + eUnSubscribeEvent(eEnableGestures, enableGestures); + }; + }, []); + useEffect(() => { if (Platform.OS === 'android') { StatusBar.setBackgroundColor('transparent'); @@ -136,11 +133,8 @@ const App = () => { async function updateAppTheme(colors = colors) { let newColors = await getColorScheme(colors); dispatch({type: ACTIONS.THEME, colors: newColors}); - //setColors(newColors); } - // Render - if (!init) { return <>; } diff --git a/apps/mobile/src/components/Container/index.js b/apps/mobile/src/components/Container/index.js index 65f8b9254..a832efd1b 100644 --- a/apps/mobile/src/components/Container/index.js +++ b/apps/mobile/src/components/Container/index.js @@ -12,8 +12,12 @@ import * as Animatable from 'react-native-animatable'; import Icon from 'react-native-vector-icons/Feather'; import {br, opacity, pv, SIZE, WEIGHT} from '../../common/common'; import {useTracked} from '../../provider'; -import {getElevation, w} from '../../utils/utils'; -import {DDS} from '../../../App'; +import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager'; +import {eScrollEvent} from '../../services/events'; +import {getElevation} from '../../utils/utils'; +import {Header} from '../header'; +import {Search} from '../SearchInput'; +import SelectionHeader from '../SelectionHeader'; export const AnimatedSafeAreaView = Animatable.createAnimatableComponent( SafeAreaView, ); @@ -27,13 +31,71 @@ export const Container = ({ bottomButtonOnPress, bottomButtonText, noBottomButton = false, + data = [], }) => { // State const [state, dispatch] = useTracked(); - const {colors} = state; + const {colors, selectionMode, searchResults} = state; + const [text, setText] = useState(''); + const [hideHeader, setHideHeader] = useState(false); const [buttonHide, setButtonHide] = useState(false); + let offsetY = 0; + let countUp = 1; + let countDown = 0; + let searchResult = []; + + 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; + }; + + 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([...[]]); + }; + useEffect(() => { Keyboard.addListener('keyboardDidShow', () => { setTimeout(() => { @@ -58,6 +120,15 @@ export const Container = ({ }); }; }, []); + + useEffect(() => { + eSubscribeEvent(eScrollEvent, onScroll); + + return () => { + eUnSubscribeEvent(eScrollEvent, onScroll); + }; + }); + // Render return ( @@ -75,6 +146,55 @@ export const Container = ({ style={{ height: '100%', }}> + + + + +
{ + setHideHeader(false); + countUp = 0; + countDown = 0; + }} + colors={colors} + heading={'Home'} + canGoBack={false} + customIcon="menu" + /> + + {data[0] ? ( + setText('')} + hide={hideHeader} + onChangeText={onChangeText} + onSubmitEditing={onSubmitEditing} + placeholder="Search your notes" + onBlur={onBlur} + onFocus={onFocus} + clearSearch={clearSearch} + value={text} + /> + ) : null} + + + {children} {noBottomButton ? null : ( diff --git a/apps/mobile/src/components/NotesList/index.js b/apps/mobile/src/components/NotesList/index.js index e5639af53..cd96165a9 100644 --- a/apps/mobile/src/components/NotesList/index.js +++ b/apps/mobile/src/components/NotesList/index.js @@ -14,12 +14,10 @@ import {slideLeft, slideRight} from '../../utils/animations'; import {NotesPlaceHolder} from '../ListPlaceholders'; import NoteItem from '../NoteItem'; import SelectionWrapper from '../SelectionWrapper'; -let sectionListRef; + export const NotesList = ({ - onScroll, isSearch = false, isGrouped = false, - refresh = () => {}, searchResults, }) => { const [state, dispatch] = useTracked(); @@ -57,9 +55,9 @@ export const NotesList = ({ const _onScroll = event => { if (!event) return; - y = event.nativeEvent.contentOffset.y; - onScroll(y); + + eSendEvent(eScrollEvent, y); }; const _ListHeaderComponent = ( diff --git a/apps/mobile/src/services/events.js b/apps/mobile/src/services/events.js index beada764b..e37410517 100644 --- a/apps/mobile/src/services/events.js +++ b/apps/mobile/src/services/events.js @@ -53,3 +53,5 @@ export const eShowToast = '525'; export const eHideToast = '526'; export const eThemeUpdated = '527'; + +export const eScrollEvent = '528'; diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js index 674feb5c3..e47abe440 100755 --- a/apps/mobile/src/views/Home/index.js +++ b/apps/mobile/src/views/Home/index.js @@ -1,17 +1,15 @@ -import React, {useEffect, useState} from 'react'; -import {DeviceEventEmitter, SafeAreaView} from 'react-native'; +import React, {useEffect} from 'react'; +import {SafeAreaView} from 'react-native'; import * as Animatable from 'react-native-animatable'; import {useIsFocused} from 'react-navigation-hooks'; -import {db, DDS} from '../../../App'; +import {DDS} from '../../../App'; import Container from '../../components/Container'; -import {Header} from '../../components/header'; import {NotesList} from '../../components/NotesList'; -import {Search} from '../../components/SearchInput'; -import SelectionHeader from '../../components/SelectionHeader'; import {useTracked} from '../../provider'; import {ACTIONS} from '../../provider/actions'; +import {eSendEvent} from '../../services/eventManager'; import NavigationService from '../../services/NavigationService'; -import {SideMenuEvent, ToastEvent} from '../../utils/utils'; +import {SideMenuEvent} from '../../utils/utils'; export const AnimatedSafeAreaView = Animatable.createAnimatableComponent( SafeAreaView, @@ -20,89 +18,21 @@ export const AnimatedSafeAreaView = Animatable.createAnimatableComponent( export const Home = ({navigation}) => { // State const [state, dispatch] = useTracked(); - const {colors, selectionMode, notes} = state; - const [text, setText] = useState(''); - const [hideHeader, setHideHeader] = useState(false); - const [keyword, setKeyword] = useState(''); - const [searchResults, setSearchResults] = useState([]); - const [loading, setLoading] = useState([]); + const {notes, searchResults, keyword} = state; const isFocused = useIsFocused(); - // Variables - - let offsetY = 0; - let countUp = 1; - let countDown = 0; - let searchResult = null; // Effects useEffect(() => { dispatch({type: ACTIONS.NOTES}); - setTimeout(() => { - setLoading(false); - }, 2500); }, [isFocused]); - // 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 return ( { - dispatch({type: ACTIONS.NOTES}); - if (DDS.isTab) { eSendEvent(eOnLoadNote, {type: 'new'}); } else { @@ -110,59 +40,10 @@ export const Home = ({navigation}) => { SideMenuEvent.disable(); NavigationService.navigate('Editor'); } - }}> - - - - -
{ - setHideHeader(false); - countUp = 0; - countDown = 0; - }} - colors={colors} - heading={'Home'} - canGoBack={false} - customIcon="menu" - /> - - {notes[0] ? ( - setText('')} - hide={hideHeader} - onChangeText={onChangeText} - onSubmitEditing={onSubmitEditing} - placeholder="Search your notes" - onBlur={onBlur} - onFocus={onFocus} - clearSearch={clearSearch} - value={text} - /> - ) : null} - - - + }} + data={notes}> 0 ? true : false} searchResults={searchResults.length > 0 ? searchResults : null} keyword={keyword}