Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 23:19:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
ammarahm-ed
2020-01-27 00:25:19 +05:00
parent e4b473595c
commit 2c24e374a3
7 changed files with 227 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
apps/mobile/App.js
View File

@@ -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 (
<>
<Animatable.View animation="fadeIn" useNativeDriver={true} duration={600}>
<Animatable.View
transition="backgroundColor"
duration={300}
style={{
width: '100%',
height: '100%',
flexDirection: 'row',
backgroundColor: colors.bg,
}}>
<Animatable.View
transition="backgroundColor"
duration={300}
transition={['translateX']}
useNativeDriver={true}
duration={1000}
delay={2500}
style={{
width: '100%',
width: '50%',
left: 0,
height: '100%',
flexDirection: 'row',
backgroundColor: colors.bg,
position: 'absolute',
backgroundColor: colors.accent,
justifyContent: 'center',
alignItems: 'flex-end',
zIndex: 999,
transform: [
{
translateX: loading ? 0 : -w * 2,
},
],
}}>
{DDS.isTab ? (
<>
<ModalMenu colors={colors} />
<Animatable.Text
animation="fadeIn"
duration={300}
delay={150}
style={{
color: 'white',
fontFamily: WEIGHT.bold,
fontSize: SIZE.xxl,
}}>
notes
</Animatable.Text>
<Animatable.Text
animation="fadeIn"
duration={300}
delay={600}
style={{
color: 'white',
fontFamily: WEIGHT.regular,
fontSize: SIZE.md,
marginTop: 15,
}}>
A safe plac
</Animatable.Text>
</Animatable.View>
<Animatable.View
transition={['translateX']}
useNativeDriver={true}
duration={1000}
delay={2500}
style={{
width: '50%',
right: 0,
height: '100%',
position: 'absolute',
backgroundColor: colors.accent,
justifyContent: 'center',
alignItems: 'flex-start',
zIndex: 999,
transform: [
{
translateX: loading ? 0 : w * 2,
},
],
}}>
<Animatable.Text
animation="fadeIn"
duration={300}
delay={150}
style={{
color: 'white',
fontFamily: WEIGHT.bold,
fontSize: SIZE.xxl,
}}>
nook
</Animatable.Text>
<Animatable.Text
animation="fadeIn"
duration={300}
delay={600}
style={{
color: 'white',
fontFamily: WEIGHT.regular,
fontSize: SIZE.md,
marginTop: 15,
}}>
e to write
</Animatable.Text>
</Animatable.View>
<Animatable.View
animation="fadeIn"
useNativeDriver={true}
duration={500}
delay={450}
style={{
width: '4%',
}}>
<Menu
hide={false}
noTextMode={true}
colors={colors}
close={() => {
//setSidebar('0%');
}}
/>
</Animatable.View>
{DDS.isTab ? (
<>
<ModalMenu colors={colors} />
<Animatable.View
transition="backgroundColor"
duration={300}
style={{
width: '28%',
height: '100%',
borderRightColor: colors.nav,
borderRightWidth: 2,
}}>
<AppContainer
style={{
width: '100%',
height: '100%',
}}
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</Animatable.View>
<Animatable.View
animation="fadeIn"
useNativeDriver={true}
duration={500}
delay={450}
style={{
width: '4%',
}}>
<Menu
hide={false}
noTextMode={true}
colors={colors}
close={() => {
//setSidebar('0%');
}}
/>
</Animatable.View>
<View
ref={ref => (editorRef = ref)}
style={{
width: '68%',
height: '100%',
backgroundColor: 'transparent',
}}>
<Editor noMenu={fullscreen ? false : true} />
</View>
</>
) : (
<SideMenu
ref={ref => (sideMenuRef = ref)}
bounceBackOnOverdraw={false}
contentContainerStyle={{
opacity: 0,
backgroundColor: colors.bg,
}}
menu={
<Menu
hide={false}
colors={colors}
close={() => sideMenuRef.openMenu(!sideMenuRef.isOpen)}
/>
}
openMenuOffset={w / 1.3}>
<Animatable.View
transition="backgroundColor"
duration={300}
style={{
width: '28%',
height: '100%',
borderRightColor: colors.nav,
borderRightWidth: 2,
}}>
<AppContainer
style={{
width: DDS.isTab ? '70%' : '100%',
width: '100%',
height: '100%',
backgroundColor: colors.bg,
}}
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</SideMenu>
)}
<Toast />
<DialogManager colors={colors} />
</Animatable.View>
</Animatable.View>
<View
ref={ref => (editorRef = ref)}
style={{
width: '68%',
height: '100%',
backgroundColor: 'transparent',
}}>
<Editor noMenu={fullscreen ? false : true} />
</View>
</>
) : (
<SideMenu
ref={ref => (sideMenuRef = ref)}
bounceBackOnOverdraw={false}
contentContainerStyle={{
opacity: 0,
backgroundColor: colors.bg,
}}
menu={
<Menu
hide={false}
colors={colors}
close={() => sideMenuRef.openMenu(!sideMenuRef.isOpen)}
/>
}
openMenuOffset={w / 1.3}>
<AppContainer
style={{
width: DDS.isTab ? '70%' : '100%',
height: '100%',
backgroundColor: colors.bg,
}}
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</SideMenu>
)}
<Toast />
<DialogManager colors={colors} />
</Animatable.View>
</>
);

29
apps/mobile/src/components/Container/index.js
View File

@@ -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%',
}}>
<Header
menu
menu={menu}
hide={hideHeader}
verticalMenu
verticalMenu={verticalMenu}
showSearch={() => {
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}

6
apps/mobile/src/components/Menu/index.js
View File

@@ -192,6 +192,12 @@ export const Menu = ({
position: 'absolute',
zIndex: 999,
backgroundColor: colors.bg,
display: 'flex',
transform: [
{
translateX: 0,
},
],
}}
/>
)}

2
apps/mobile/src/components/SideMenu/index.js
View File

@@ -72,7 +72,7 @@ export default class SideMenu extends React.Component {
);
}
componentWillMount() {
UNSAFE_componentWillMount() {
this.responder = PanResponder.create({
onStartShouldSetResponderCapture: this.onStartShouldSetResponderCapture,
onMoveShouldSetPanResponder: this.onMoveShouldSetPanResponder,

3
apps/mobile/src/components/header/index.js
View File

@@ -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,

28
apps/mobile/src/views/Editor/index.js
View File

@@ -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) {

11
apps/mobile/src/views/Home/index.js
View File

@@ -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 (
<Container
bottomButtonText="Add a new note"
heading="Home"
customIcon="menu"
verticalMenu
menu
placeholder="Search your notes"
canGoBack={false}
bottomButtonOnPress={() => {
if (DDS.isTab) {
eSendEvent(eOnLoadNote, {type: 'new'});
@@ -38,6 +45,8 @@ export const Home = ({navigation}) => {
}
}}
data={notes ? notes : []}>
<SelectionHeader />
<NotesList isGrouped={true} />
</Container>
);