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

refactor

Browse Source
This commit is contained in:
ammarahm-ed
2020-04-20 10:54:58 +05:00
parent f9131b8032
commit cbb5577b97
6 changed files with 186 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/mobile/App.js
View File

@@ -46,7 +46,6 @@ const App = () => {
db.init().then(async () => { db.init().then(async () => {
let user = await db.user.get(); let user = await db.user.get();
dispatch({type: ACTIONS.USER, user: user}); dispatch({type: ACTIONS.USER, user: user});
setInit(true); setInit(true);
}); });
}); });
@@ -78,6 +77,7 @@ const App = () => {
dispatch({type: ACTIONS.SETTINGS, settings: {...s}}); dispatch({type: ACTIONS.SETTINGS, settings: {...s}});
} }
dispatch({type: ACTIONS.THEME, colors: newColors}); dispatch({type: ACTIONS.THEME, colors: newColors});
} }

310
apps/mobile/src/components/NotesList/index.js
View File

@@ -1,310 +0,0 @@
import React, {useEffect, useState, createRef} from 'react';
import {
ActivityIndicator,
FlatList,
Platform,
RefreshControl,
SectionList,
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 {eScrollEvent, eClearSearch} from '../../services/events';
import {ToastEvent, hexToRGBA, DDS, db} from '../../utils/utils';
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}) => {
const [state, dispatch] = useTracked();
const {colors, selectionMode, currentEditingNote, loading, notes} = state;
const isFocused = useIsFocused();
const [refreshing, setRefreshing] = useState(false);
const searchResults = {...state.searchResults};
const insets = useSafeArea();
const _renderItem = ({item, index}) => (
<SelectionWrapper
index={index}
currentEditingNote={
currentEditingNote === item.id ? currentEditingNote : null
}
item={item}>
<NoteItem
colors={colors}
customStyle={{
width: selectionMode ? '90%' : '100%',
marginHorizontal: 0,
}}
currentEditingNote={
currentEditingNote === item.id ? currentEditingNote : null
}
selectionMode={selectionMode}
onLongPress={() => {
if (!selectionMode) {
dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
}
dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
}}
update={() => {
dispatch({type: ACTIONS.NOTES});
}}
item={item}
index={index}
/>
</SelectionWrapper>
);
const _onScroll = event => {
if (!event) return;
let y = event.nativeEvent.contentOffset.y;
eSendEvent(eScrollEvent, y);
};
const _ListHeaderComponent = (
<View
style={{
marginTop:
Platform.OS == 'ios'
? notes[0] && !selectionMode
? 135
: 135 - 60
: notes[0] && !selectionMode
? 135
: 135 - 60 - insets.top,
}}>
<PinnedItems />
</View>
);
const _ListFooterComponent = notes[0] ? (
<View
style={{
height: 150,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
color: colors.navbg,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}>
- End -
</Text>
</View>
) : null;
const _ListEmptyComponent = (
<View
style={{
height: '80%',
width: '100%',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
opacity: 0.8,
}}>
{loading ? (
<ActivityIndicator size={SIZE.xl} color={colors.accent} />
) : (
<>
<NotesPlaceHolder colors={colors} />
<Text
style={{
color: colors.icon,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
marginTop: 35,
}}>
Notes you write will appear here.
</Text>
</>
)}
</View>
);
const _renderSectionHeader = ({section: {title}}) => (
<Text
style={{
fontFamily: WEIGHT.bold,
fontSize: SIZE.xs + 1,
color: colors.accent,
paddingHorizontal: 12,
width: '100%',
alignSelf: 'center',
marginTop: 15,
paddingBottom: 5,
}}>
{title}
</Text>
);
const _ListHeaderComponent_S = (
<View
style={{
marginTop:
Platform.OS == 'ios'
? notes[0] && !selectionMode
? 135
: 135 - 60
: notes[0] && !selectionMode
? 135
: 135 - 60 - insets.top,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 12,
}}>
<Text
style={{
fontFamily: WEIGHT.bold,
color: colors.accent,
fontSize: SIZE.xs,
}}>
Search Results for {searchResults.keyword}
</Text>
<Text
onPress={() => {
eSendEvent(eClearSearch);
}}
style={{
fontFamily: WEIGHT.regular,
color: colors.errorText,
fontSize: SIZE.xs,
}}>
Clear
</Text>
</View>
);
const _listKeyExtractor = (item, index) => item.id.toString();
return searchResults.type !== 'notes' && isFocused ? (
<SectionList
ref={sectionListRef}
sections={notes}
refreshControl={
<RefreshControl
tintColor={colors.accent}
colors={[colors.accent]}
progressViewOffset={165}
onRefresh={async () => {
setRefreshing(true);
try {
await db.sync();
setRefreshing(false);
ToastEvent.show('Sync Complete', 'success');
} catch (e) {
setRefreshing(false);
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}
/>
}
keyExtractor={_listKeyExtractor}
renderSectionHeader={_renderSectionHeader}
onScroll={_onScroll}
ListEmptyComponent={_ListEmptyComponent}
ListHeaderComponent={_ListHeaderComponent}
contentContainerStyle={{
width: '100%',
alignSelf: 'center',
minHeight: '100%',
}}
style={{
height: '100%',
}}
removeClippedSubviews={true}
ListFooterComponent={_ListFooterComponent}
renderItem={_renderItem}
/>
) : (
<FlatList
data={searchResults.type === 'notes' ? searchResults.results : []}
keyExtractor={_listKeyExtractor}
ListFooterComponent={_ListFooterComponent}
onScroll={_onScroll}
ListHeaderComponent={_ListHeaderComponent_S}
contentContainerStyle={{
width: '100%',
alignSelf: 'center',
minHeight: '100%',
}}
style={{
height: '100%',
}}
renderItem={_renderItem}
/>
);
};
const PinnedItems = () => {
const [state, dispatch] = useTracked();
const {pinned, colors, selectionMode} = state;
useEffect(() => {
dispatch({type: ACTIONS.PINNED});
}, []);
return (
<>
<FlatList
data={pinned.notes}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({item, index}) =>
item.type === 'note' ? (
<SelectionWrapper
index={index}
currentEditingNote={false}
pinned={true}
background={
Platform.ios
? hexToRGBA(colors.accent + '19')
: hexToRGBA(colors.shade)
}
item={item}>
<NoteItem
colors={colors}
customStyle={{
width: selectionMode ? '90%' : '100%',
marginHorizontal: 0,
paddingTop: 15,
paddingRight: 18,
marginBottom: 10,
marginTop: 15,
borderBottomWidth: 0,
}}
currentEditingNote={false}
pinned={true}
selectionMode={selectionMode}
onLongPress={() => {
if (!selectionMode) {
dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
}
dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
}}
update={() => {
dispatch({type: ACTIONS.NOTES});
}}
item={item}
index={index}
/>
</SelectionWrapper>
) : null
}
/>
</>
);
};

114
apps/mobile/src/components/SimpleList/index.js
View File

@@ -1,5 +1,12 @@
import React from 'react'; import React, {createRef} from 'react';
import {FlatList, Platform, RefreshControl, Text, View} from 'react-native'; import {
FlatList,
Platform,
RefreshControl,
Text,
View,
SectionList,
} from 'react-native';
import {SIZE, WEIGHT} from '../../common/common'; import {SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider'; import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions'; import {ACTIONS} from '../../provider/actions';
@@ -9,7 +16,8 @@ import {hexToRGBA} from '../../utils/utils';
import {NotebookItem} from '../NotebookItem'; import {NotebookItem} from '../NotebookItem';
import SelectionWrapper from '../SelectionWrapper'; import SelectionWrapper from '../SelectionWrapper';
import {useSafeArea} from 'react-native-safe-area-context'; import {useSafeArea} from 'react-native-safe-area-context';
import NoteItem from '../NoteItem';
const sectionListRef = createRef();
const SimpleList = ({ const SimpleList = ({
data, data,
type, type,
@@ -23,6 +31,7 @@ const SimpleList = ({
isMove, isMove,
hideMore, hideMore,
noteToMove, noteToMove,
isHome = false,
}) => { }) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
const {colors, selectionMode} = state; const {colors, selectionMode} = state;
@@ -53,6 +62,22 @@ const SimpleList = ({
</View> </View>
) : null; ) : null;
const _renderSectionHeader = ({section: {title}}) => (
<Text
style={{
fontFamily: WEIGHT.bold,
fontSize: SIZE.xs + 1,
color: colors.accent,
paddingHorizontal: 12,
width: '100%',
alignSelf: 'center',
marginTop: 15,
paddingBottom: 5,
}}>
{title}
</Text>
);
const _ListHeaderComponent_S = const _ListHeaderComponent_S =
searchResults.type === type && searchResults.results.length > 0 ? ( searchResults.type === type && searchResults.results.length > 0 ? (
<View <View
@@ -63,8 +88,8 @@ const SimpleList = ({
? 135 ? 135
: 135 - 60 : 135 - 60
: data[0] && !selectionMode : data[0] && !selectionMode
? 135 - insets.top ? 155 - insets.top
: 135 - insets.top - 60, : 155 - insets.top - 60,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
@@ -99,8 +124,8 @@ const SimpleList = ({
? 135 ? 135
: 135 - 60 : 135 - 60
: data[0] && !selectionMode : data[0] && !selectionMode
? 155 ? 155 - insets.top
: 155 - 60, : 155 - 60 - insets.top,
}}> }}>
{pinned && pinned.notebooks && pinned.notebooks.length > 0 ? ( {pinned && pinned.notebooks && pinned.notebooks.length > 0 ? (
<> <>
@@ -148,7 +173,48 @@ const SimpleList = ({
colors={colors} colors={colors}
/> />
</SelectionWrapper> </SelectionWrapper>
) : null ) : (
<SelectionWrapper
index={index}
currentEditingNote={false}
pinned={true}
background={
Platform.ios
? hexToRGBA(colors.accent + '19')
: hexToRGBA(colors.shade)
}
item={item}>
<NoteItem
colors={colors}
customStyle={{
width: selectionMode ? '90%' : '100%',
marginHorizontal: 0,
paddingTop: 15,
paddingRight: 18,
marginBottom: 10,
marginTop: 15,
borderBottomWidth: 0,
}}
currentEditingNote={false}
pinned={true}
selectionMode={selectionMode}
onLongPress={() => {
if (!selectionMode) {
dispatch({
type: ACTIONS.SELECTION_MODE,
enabled: true,
});
}
dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
}}
update={() => {
dispatch({type: ACTIONS.NOTES});
}}
item={item}
index={index}
/>
</SelectionWrapper>
)
} }
/> />
</> </>
@@ -184,7 +250,37 @@ const SimpleList = ({
const _listKeyExtractor = (item, index) => const _listKeyExtractor = (item, index) =>
item.id.toString() + index.toString(); item.id.toString() + index.toString();
return ( return isHome && searchResults.type !== 'notes' ? (
<SectionList
ref={sectionListRef}
sections={data}
refreshControl={
<RefreshControl
tintColor={colors.accent}
colors={[colors.accent]}
progressViewOffset={165}
onRefresh={onRefresh}
refreshing={refreshing}
/>
}
keyExtractor={_listKeyExtractor}
renderSectionHeader={_renderSectionHeader}
onScroll={_onScroll}
ListEmptyComponent={_ListEmptyComponent}
ListHeaderComponent={_ListHeaderComponent_S}
contentContainerStyle={{
width: '100%',
alignSelf: 'center',
minHeight: '100%',
}}
style={{
height: '100%',
}}
removeClippedSubviews={true}
ListFooterComponent={_ListFooterComponent}
renderItem={renderItem}
/>
) : (
<FlatList <FlatList
data={ data={
searchResults.type === type && searchResults.type === type &&

6
apps/mobile/src/provider/reducer.js
View File

@@ -32,13 +32,13 @@ export const reducer = (state, action) => {
trash: [], trash: [],
pinned: { pinned: {
notes: [], notes: [],
notebooks: [] notebooks: [],
}, },
tags: [], tags: [],
favorites: [], favorites: [],
colorNotes: [], colorNotes: [],
user: null user: null,
} };
} }
case ACTIONS.NOTES: case ACTIONS.NOTES:
let notes; let notes;

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

@@ -1,7 +1,6 @@
import React, {useEffect} from 'react'; import React, {useEffect, useState} from 'react';
import {useIsFocused} from 'react-navigation-hooks'; import {useIsFocused} from 'react-navigation-hooks';
import Container from '../../components/Container'; import Container from '../../components/Container';
import {NotesList} from '../../components/NotesList';
import SelectionHeader from '../../components/SelectionHeader'; import SelectionHeader from '../../components/SelectionHeader';
import {useTracked} from '../../provider'; import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions'; import {ACTIONS} from '../../provider/actions';
@@ -10,11 +9,16 @@ import {DDS} from '../../utils/utils';
import {eScrollEvent, eOnLoadNote} from '../../services/events'; import {eScrollEvent, eOnLoadNote} from '../../services/events';
import {openEditorAnimation} from '../../utils/animations'; import {openEditorAnimation} from '../../utils/animations';
import {sideMenuRef} from '../../utils/refs'; import {sideMenuRef} from '../../utils/refs';
import SimpleList from '../../components/SimpleList';
import {NotesPlaceHolder} from '../../components/ListPlaceholders';
import SelectionWrapper from '../../components/SelectionWrapper';
import NoteItem from '../../components/NoteItem';
let count = 0; let count = 0;
export const Home = ({navigation}) => { export const Home = ({navigation}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
const {notes} = state; const [refreshing, setRefreshing] = useState(false);
const {colors, selectionMode, currentEditingNote, loading, notes} = state;
const isFocused = useIsFocused(); const isFocused = useIsFocused();
useEffect(() => { useEffect(() => {
@@ -30,6 +34,54 @@ export const Home = ({navigation}) => {
dispatch({type: ACTIONS.NOTES}); dispatch({type: ACTIONS.NOTES});
}, [isFocused]); }, [isFocused]);
const _onRefresh = async () => {
setRefreshing(true);
try {
await db.sync();
setRefreshing(false);
ToastEvent.show('Sync Complete', 'success');
} catch (e) {
setRefreshing(false);
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});
};
const _renderItem = ({item, index}) => (
<SelectionWrapper
index={index}
currentEditingNote={
currentEditingNote === item.id ? currentEditingNote : null
}
item={item}>
<NoteItem
colors={colors}
customStyle={{
width: selectionMode ? '90%' : '100%',
marginHorizontal: 0,
}}
currentEditingNote={
currentEditingNote === item.id ? currentEditingNote : null
}
selectionMode={selectionMode}
onLongPress={() => {
if (!selectionMode) {
dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
}
dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
}}
update={() => {
dispatch({type: ACTIONS.NOTES});
}}
item={item}
index={index}
/>
</SelectionWrapper>
);
return ( return (
<Container <Container
bottomButtonText="Create a new note" bottomButtonText="Create a new note"
@@ -53,7 +105,17 @@ export const Home = ({navigation}) => {
data={notes ? notes : []}> data={notes ? notes : []}>
<SelectionHeader /> <SelectionHeader />
<NotesList /> <SimpleList
data={notes}
type="notes"
isHome={true}
refreshing={refreshing}
focused={isFocused}
onRefresh={_onRefresh}
renderItem={_renderItem}
placeholder={<NotesPlaceHolder colors={colors} />}
placeholderText={`Notes you write appear here`}
/>
</Container> </Container>
); );
}; };

9
apps/mobile/src/views/Trash/index.js
View File

@@ -14,8 +14,10 @@ import {TEMPLATE_EMPTY_TRASH} from '../../components/DialogManager/templates';
export const Trash = ({navigation}) => { export const Trash = ({navigation}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
const {colors, selectionMode, trash} = state; const {colors, selectionMode} = state;
const trash = [...trash];
const [refreshing, setRefreshing] = useState(false); const [refreshing, setRefreshing] = useState(false);
const isFocused = useIsFocused(); const isFocused = useIsFocused();
useEffect(() => { useEffect(() => {
if (isFocused) { if (isFocused) {
@@ -87,15 +89,14 @@ export const Trash = ({navigation}) => {
setRefreshing(true); setRefreshing(true);
try { try {
await db.sync(); await db.sync();
dispatch({type: ACTIONS.TRASH});
dispatch({type: ACTIONS.USER});
setRefreshing(false); setRefreshing(false);
ToastEvent.show('Sync Complete', 'success'); ToastEvent.show('Sync Complete', 'success');
} catch (e) { } catch (e) {
setRefreshing(false); setRefreshing(false);
ToastEvent.show('Sync failed, network error', 'error'); ToastEvent.show('Sync failed, network error', 'error');
} }
dispatch({type: ACTIONS.TRASH});
dispatch({type: ACTIONS.USER});
}; };
return ( return (