From 2c24e374a331ab00192beb6939324ad7c0cccc25 Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Mon, 27 Jan 2020 00:25:19 +0500 Subject: [PATCH] refactoring --- apps/mobile/App.js | 250 ++++++++++++------ apps/mobile/src/components/Container/index.js | 29 +- apps/mobile/src/components/Menu/index.js | 6 + apps/mobile/src/components/SideMenu/index.js | 2 +- apps/mobile/src/components/header/index.js | 3 +- apps/mobile/src/views/Editor/index.js | 28 +- apps/mobile/src/views/Home/index.js | 11 +- 7 files changed, 227 insertions(+), 102 deletions(-) diff --git a/apps/mobile/App.js b/apps/mobile/App.js index 99d6fd875..8108feaf8 100644 --- a/apps/mobile/App.js +++ b/apps/mobile/App.js @@ -1,8 +1,8 @@ import Storage from 'notes-core/api/database'; import React, {useEffect, useState} from 'react'; -import {Platform, StatusBar, View} from 'react-native'; +import {Platform, StatusBar, View, Text} from 'react-native'; import * as Animatable from 'react-native-animatable'; -import {getColorScheme} from './src/common/common'; +import {getColorScheme, WEIGHT, SIZE} from './src/common/common'; import {DialogManager} from './src/components/DialogManager'; import {Menu} from './src/components/Menu'; import {ModalMenu} from './src/components/ModalMenu'; @@ -31,11 +31,12 @@ import Editor from './src/views/Editor'; export const DDS = new DeviceDetectionService(); export const db = new Storage(StorageInterface); +let overlayViewRef; let sideMenuRef; let editorRef; const App = () => { const [state, dispatch] = useTracked(); - const {colors} = state; + const {colors, loading} = state; const [init, setInit] = useState(false); const [fullscreen, setFullscreen] = useState(false); @@ -140,99 +141,186 @@ const App = () => { } return ( <> - + - {DDS.isTab ? ( - <> - + + notes + + + A safe plac + + + + + nook + + + e to write + + - - { - //setSidebar('0%'); - }} - /> - + {DDS.isTab ? ( + <> + - - { - NavigationService.setTopLevelNavigator(navigatorRef); - }} - /> - + + { + //setSidebar('0%'); + }} + /> + - (editorRef = ref)} - style={{ - width: '68%', - height: '100%', - backgroundColor: 'transparent', - }}> - - - - ) : ( - (sideMenuRef = ref)} - bounceBackOnOverdraw={false} - contentContainerStyle={{ - opacity: 0, - backgroundColor: colors.bg, - }} - menu={ - sideMenuRef.openMenu(!sideMenuRef.isOpen)} - /> - } - openMenuOffset={w / 1.3}> + { NavigationService.setTopLevelNavigator(navigatorRef); }} /> - - )} - - - + + + (editorRef = ref)} + style={{ + width: '68%', + height: '100%', + backgroundColor: 'transparent', + }}> + + + + ) : ( + (sideMenuRef = ref)} + bounceBackOnOverdraw={false} + contentContainerStyle={{ + opacity: 0, + backgroundColor: colors.bg, + }} + menu={ + sideMenuRef.openMenu(!sideMenuRef.isOpen)} + /> + } + openMenuOffset={w / 1.3}> + { + NavigationService.setTopLevelNavigator(navigatorRef); + }} + /> + + )} + + ); diff --git a/apps/mobile/src/components/Container/index.js b/apps/mobile/src/components/Container/index.js index ff2826bb4..925376f16 100644 --- a/apps/mobile/src/components/Container/index.js +++ b/apps/mobile/src/components/Container/index.js @@ -14,10 +14,11 @@ import {br, opacity, pv, SIZE, WEIGHT} from '../../common/common'; import {useTracked} from '../../provider'; import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager'; import {eScrollEvent} from '../../services/events'; -import {getElevation} from '../../utils/utils'; +import {getElevation, h, w} from '../../utils/utils'; import {Header} from '../header'; import {Search} from '../SearchInput'; import SelectionHeader from '../SelectionHeader'; +import {DDS} from '../../../App'; export const AnimatedSafeAreaView = Animatable.createAnimatableComponent( SafeAreaView, ); @@ -32,10 +33,19 @@ export const Container = ({ bottomButtonText, noBottomButton = false, data = [], + heading, + canGoBack = true, + menu, + customIcon, + verticalMenu = false, + preventDefaultMargins, + navigation = null, + isLoginNavigator, + placeholder = '', }) => { // State const [state, dispatch] = useTracked(); - const {colors, selectionMode, searchResults} = state; + const {colors, selectionMode, searchResults, loading} = state; const [text, setText] = useState(''); const [hideHeader, setHideHeader] = useState(false); @@ -160,18 +170,21 @@ export const Container = ({ width: '100%', }}>
{ setHideHeader(false); countUp = 0; countDown = 0; }} + navigation={navigation} colors={colors} - heading={'Home'} - canGoBack={false} - customIcon="menu" + isLoginNavigator={isLoginNavigator} + preventDefaultMargins={preventDefaultMargins} + heading={heading} + canGoBack={canGoBack} + customIcon={customIcon} /> {data[0] ? ( @@ -180,7 +193,7 @@ export const Container = ({ hide={hideHeader} onChangeText={onChangeText} onSubmitEditing={onSubmitEditing} - placeholder="Search your notes" + placeholder={placeholder} onBlur={onBlur} onFocus={onFocus} clearSearch={clearSearch} diff --git a/apps/mobile/src/components/Menu/index.js b/apps/mobile/src/components/Menu/index.js index 64592b5b2..2087f3c2e 100644 --- a/apps/mobile/src/components/Menu/index.js +++ b/apps/mobile/src/components/Menu/index.js @@ -192,6 +192,12 @@ export const Menu = ({ position: 'absolute', zIndex: 999, backgroundColor: colors.bg, + display: 'flex', + transform: [ + { + translateX: 0, + }, + ], }} /> )} diff --git a/apps/mobile/src/components/SideMenu/index.js b/apps/mobile/src/components/SideMenu/index.js index a3cba8413..b86770fb1 100644 --- a/apps/mobile/src/components/SideMenu/index.js +++ b/apps/mobile/src/components/SideMenu/index.js @@ -72,7 +72,7 @@ export default class SideMenu extends React.Component { ); } - componentWillMount() { + UNSAFE_componentWillMount() { this.responder = PanResponder.create({ onStartShouldSetResponderCapture: this.onStartShouldSetResponderCapture, onMoveShouldSetPanResponder: this.onMoveShouldSetPanResponder, diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js index ba0454c2c..0faa3ae4f 100644 --- a/apps/mobile/src/components/header/index.js +++ b/apps/mobile/src/components/header/index.js @@ -10,7 +10,7 @@ import {eCloseLoginDialog} from '../../services/events'; import NavigationService from '../../services/NavigationService'; import {SideMenuEvent} from '../../utils/utils'; import {moveNoteHideEvent} from '../DialogManager'; -let isOpen = false; + export const Header = ({ heading, canGoBack = true, @@ -18,7 +18,6 @@ export const Header = ({ showSearch, menu, verticalMenu = false, - sendHeight = e => {}, preventDefaultMargins, navigation = null, isLoginNavigator, diff --git a/apps/mobile/src/views/Editor/index.js b/apps/mobile/src/views/Editor/index.js index 47f91b12f..30079d280 100755 --- a/apps/mobile/src/views/Editor/index.js +++ b/apps/mobile/src/views/Editor/index.js @@ -70,10 +70,13 @@ const Editor = ({navigation, noMenu}) => { clearEditor(); } else { note = item; - dispatch({ - type: ACTIONS.CURRENT_EDITING_NOTE, - dateCreated: item.dateCreated, - }); + if (DDS.isTab) { + dispatch({ + type: ACTIONS.CURRENT_EDITING_NOTE, + dateCreated: item.dateCreated, + }); + } + updateEditor(); } }); @@ -83,10 +86,12 @@ const Editor = ({navigation, noMenu}) => { clearEditor(); } else { note = item; - dispatch({ - type: ACTIONS.CURRENT_EDITING_NOTE, - dateCreated: item.dateCreated, - }); + if (DDS.isTab) { + dispatch({ + type: ACTIONS.CURRENT_EDITING_NOTE, + dateCreated: item.dateCreated, + }); + } updateEditor(); } } @@ -167,7 +172,12 @@ const Editor = ({navigation, noMenu}) => { if (timestamp !== dateCreated) { timestamp = dateCreated; - dispatch({type: ACTIONS.CURRENT_EDITING_NOTE, dateCreated: timestamp}); + if (DDS.isTab) { + dispatch({ + type: ACTIONS.CURRENT_EDITING_NOTE, + dateCreated: timestamp, + }); + } } if (content.text.length < 200 || saveCounter < 2) { diff --git a/apps/mobile/src/views/Home/index.js b/apps/mobile/src/views/Home/index.js index 6e81e8aed..d374a6798 100755 --- a/apps/mobile/src/views/Home/index.js +++ b/apps/mobile/src/views/Home/index.js @@ -10,6 +10,7 @@ import {ACTIONS} from '../../provider/actions'; import {eSendEvent} from '../../services/eventManager'; import NavigationService from '../../services/NavigationService'; import {SideMenuEvent} from '../../utils/utils'; +import SelectionHeader from '../../components/SelectionHeader'; export const AnimatedSafeAreaView = Animatable.createAnimatableComponent( SafeAreaView, @@ -17,7 +18,7 @@ export const AnimatedSafeAreaView = Animatable.createAnimatableComponent( export const Home = ({navigation}) => { const [state, dispatch] = useTracked(); - const {notes} = state; + const {notes, colors, selectionMode, loading} = state; const isFocused = useIsFocused(); @@ -28,6 +29,12 @@ export const Home = ({navigation}) => { return ( { if (DDS.isTab) { eSendEvent(eOnLoadNote, {type: 'new'}); @@ -38,6 +45,8 @@ export const Home = ({navigation}) => { } }} data={notes ? notes : []}> + + );