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

refactor to single list

Browse Source
This commit is contained in:
ammarahm-ed
2020-03-09 20:15:00 +05:00
parent 9cdb89e476
commit 425e3c7f73
7 changed files with 327 additions and 995 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,6 +16,7 @@ const SimpleList = ({
focused,
refreshing,
placeholderText,
pinned = null,
}) => {
const [state, dispatch] = useTracked();
const {colors, selectionMode} = state;
@@ -104,8 +105,43 @@ const SimpleList = ({
: data[0] && !selectionMode
? 155
: 155 - 60,
}}>
{pinned && pinned.notebooks && pinned.notebooks.length > 0 ? (
<>
<FlatList
data={pinned.notebooks}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({item, index}) =>
item.type === 'notebook' ? (
<NotebookItem
hideMore={params.hideMore}
customStyle={{
backgroundColor: Platform.ios
? hexToRGBA(colors.accent + '19')
: hexToRGBA(colors.shade),
width: '100%',
paddingHorizontal: 12,
paddingTop: 20,
paddingRight: 18,
marginBottom: 10,
marginTop: 20,
borderBottomWidth: 0,
marginHorizontal: 0,
}}
isMove={params.isMove}
onLongPress={() => {}}
noteToMove={params.note}
item={item}
pinned={true}
index={index}
colors={colors}
/>
) : null
}
/>
</>
) : null}
</View>
);
const _ListEmptyComponent = (

163
apps/mobile/src/views/Favorites/index.js
View File

@@ -1,6 +1,5 @@
import React, {useEffect, useState} from 'react';
import {FlatList, Platform, Text, View, RefreshControl} from 'react-native';
import {SIZE, WEIGHT} from '../../common/common';
import {useIsFocused} from 'react-navigation-hooks';
import Container from '../../components/Container';
import {FavoritesPlaceHolder} from '../../components/ListPlaceholders';
import {NotebookItem} from '../../components/NotebookItem';
@@ -8,18 +7,14 @@ import NoteItem from '../../components/NoteItem';
import SelectionWrapper from '../../components/SelectionWrapper';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager';
import {eScrollEvent} from '../../services/events';
import {ToastEvent, w} from '../../utils/utils';
import {useIsFocused} from 'react-navigation-hooks';
import {inputRef} from '../../components/SearchInput';
import SimpleList from '../../components/SimpleList';
export const Favorites = ({navigation}) => {
const [state, dispatch] = useTracked();
const {colors, selectionMode, favorites} = state;
const [refreshing, setRefreshing] = useState(false);
const isFocused = useIsFocused();
const searchResults = {...state.searchResults};
useEffect(() => {
if (isFocused) {
@@ -31,29 +26,7 @@ export const Favorites = ({navigation}) => {
}
}, [isFocused]);
const onScroll = event => {
let y = event.nativeEvent.contentOffset.y;
eSendEvent(eScrollEvent, y);
};
return (
<Container
menu={true}
heading="Favorites"
placeholder="Search your notes"
canGoBack={false}
customIcon="menu"
data={favorites}
type="notes"
noBottomButton={true}>
<FlatList
keyExtractor={item => item.dateCreated.toString()}
refreshControl={
<RefreshControl
tintColor={colors.accent}
colors={[colors.accent]}
progressViewOffset={165}
onRefresh={async () => {
const _onRefresh = async () => {
setRefreshing(true);
try {
await db.sync();
@@ -66,111 +39,9 @@ export const Favorites = ({navigation}) => {
setRefreshing(false);
ToastEvent.show('Sync failed, network error', 'error');
}
}}
refreshing={refreshing}
/>
}
style={{
width: '100%',
alignSelf: 'center',
height: '100%',
}}
contentContainerStyle={{
height: '100%',
}}
ListHeaderComponent={
searchResults.type === 'notes' && searchResults.results.length > 0 ? (
<View
style={{
marginTop:
Platform.OS == 'ios'
? favorites[0]
? 135
: 135 - 60
: favorites[0]
? 155
: 155 - 60,
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={() => {
inputRef.current?.setNativeProps({
text: '',
});
dispatch({
type: ACTIONS.SEARCH_RESULTS,
results: {
results: [],
type: null,
keyword: null,
},
});
}}
style={{
fontFamily: WEIGHT.regular,
color: colors.errorText,
fontSize: SIZE.xs,
}}>
Clear
</Text>
</View>
) : (
<View
style={{
marginTop:
Platform.OS == 'ios'
? favorites[0]
? 135
: 135 - 60
: favorites[0]
? 155
: 155 - 60,
}}
/>
)
}
ListEmptyComponent={
<View
style={{
height: '80%',
width: '100%',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
opacity: 0.8,
}}>
<FavoritesPlaceHolder />
<Text
style={{
color: colors.icon,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
marginTop: 30,
}}>
Favorite notes & notebooks appear here.
</Text>
</View>
}
data={
searchResults.type === 'notes' &&
isFocused &&
searchResults.results.length > 0
? searchResults.results
: favorites
}
onScroll={onScroll}
renderItem={({item, index}) => (
};
const _renderItem = ({item, index}) => (
<SelectionWrapper item={item}>
{item.type === 'note' ? (
<NoteItem
@@ -221,7 +92,27 @@ export const Favorites = ({navigation}) => {
/>
)}
</SelectionWrapper>
)}
);
return (
<Container
menu={true}
heading="Favorites"
placeholder="Search your notes"
canGoBack={false}
customIcon="menu"
data={favorites}
type="notes"
noBottomButton={true}>
<SimpleList
data={favorites}
type="notes"
refreshing={refreshing}
focused={isFocused}
onRefresh={_onRefresh}
renderItem={_renderItem}
placeholder={<FavoritesPlaceHolder />}
placeholderText="Notes you favorite appear here"
/>
</Container>
);

225
apps/mobile/src/views/Folders/index.js
View File

@@ -22,6 +22,7 @@ import {eScrollEvent} from '../../services/events';
import {slideLeft, slideRight} from '../../utils/animations';
import {w, ToastEvent, hexToRGBA} from '../../utils/utils';
import {inputRef} from '../../components/SearchInput';
import SimpleList from '../../components/SimpleList';
export const Folders = ({navigation}) => {
const [state, dispatch] = useTracked();
@@ -71,36 +72,7 @@ export const Folders = ({navigation}) => {
const params = navigation.state.params;
const onScroll = event => {
let y = event.nativeEvent.contentOffset.y;
eSendEvent(eScrollEvent, y);
};
return (
<Container
bottomButtonText="Create a new notebook"
menu={params.canGoBack ? false : true}
preventDefaultMargins={preventDefaultMargins}
heading={params.title}
canGoBack={params.canGoBack}
navigation={navigation}
placeholder="Search all notebooks"
data={notebooks}
type="notebooks"
bottomButtonOnPress={() => {
AddNotebookEvent(null);
}}>
<FlatList
style={{
width: '100%',
}}
refreshControl={
<RefreshControl
tintColor={colors.accent}
colors={[colors.accent]}
progressViewOffset={165}
onRefresh={async () => {
const _onRefresh = async () => {
setRefreshing(true);
try {
await db.sync();
@@ -113,165 +85,9 @@ export const Folders = ({navigation}) => {
setRefreshing(false);
ToastEvent.show('Sync failed, network error', 'error');
}
}}
refreshing={refreshing}
/>
}
onScroll={onScroll}
ListHeaderComponent={
searchResults.type === 'notebooks' &&
searchResults.results.length > 0 ? (
<View
style={{
marginTop:
Platform.OS == 'ios'
? notebooks[0] && !selectionMode
? 135
: 135 - 60
: notebooks[0] && !selectionMode
? 155
: 155 - 60,
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={() => {
inputRef.current?.setNativeProps({
text: '',
});
dispatch({
type: ACTIONS.SEARCH_RESULTS,
results: {
results: [],
type: null,
keyword: null,
},
});
}}
style={{
fontFamily: WEIGHT.regular,
color: colors.errorText,
fontSize: SIZE.xs,
}}>
Clear
</Text>
</View>
) : (
<View
style={{
marginTop:
Platform.OS == 'ios'
? notebooks[0] && !selectionMode
? 135
: 135 - 60
: notebooks[0] && !selectionMode
? 155
: 155 - 60,
}}>
{pinned && pinned.notebooks && pinned.notebooks.length > 0 ? (
<>
<FlatList
data={pinned.notebooks}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({item, index}) =>
item.type === 'notebook' ? (
<NotebookItem
hideMore={params.hideMore}
customStyle={{
backgroundColor: Platform.ios
? hexToRGBA(colors.accent + '19')
: hexToRGBA(colors.shade),
width: '100%',
paddingHorizontal: 12,
paddingTop: 20,
paddingRight: 18,
marginBottom: 10,
marginTop: 20,
borderBottomWidth: 0,
marginHorizontal: 0,
}}
isMove={params.isMove}
onLongPress={() => {}}
noteToMove={params.note}
item={item}
pinned={true}
index={index}
colors={colors}
/>
) : null
}
/>
</>
) : null}
</View>
)
}
ListEmptyComponent={
<View
style={{
height: '80%',
width: DDS.isTab ? '70%' : '100%',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
opacity: 0.8,
}}>
<NotebookPlaceHolder animation={slideRight} colors={colors} />
<NotebookPlaceHolder animation={slideLeft} colors={colors} />
<NotebookPlaceHolder animation={slideRight} colors={colors} />
};
<Text
style={{
color: colors.icon,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
marginTop: 30,
}}>
Notebooks you add will appear here
</Text>
</View>
}
contentContainerStyle={{
width: '100%',
alignSelf: 'center',
minHeight: '100%',
}}
ListFooterComponent={
<View
style={{
height: 150,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
color: colors.navbg,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}>
- End -
</Text>
</View>
}
data={
searchResults &&
searchResults.results.length > 0 &&
searchResults.type === 'notebooks'
? searchResults.results
: notebooks
}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({item, index}) => (
const _renderItem = ({item, index}) => (
<SelectionWrapper item={item}>
<NotebookItem
hideMore={params.hideMore}
@@ -300,7 +116,38 @@ export const Folders = ({navigation}) => {
index={index}
/>
</SelectionWrapper>
)}
);
return (
<Container
bottomButtonText="Create a new notebook"
menu={params.canGoBack ? false : true}
preventDefaultMargins={preventDefaultMargins}
heading={params.title}
canGoBack={params.canGoBack}
navigation={navigation}
placeholder="Search all notebooks"
data={notebooks}
type="notebooks"
bottomButtonOnPress={() => {
AddNotebookEvent(null);
}}>
<SimpleList
data={notebooks}
type="notebooks"
refreshing={refreshing}
focused={isFocused}
onRefresh={_onRefresh}
renderItem={_renderItem}
placeholder={
<>
<NotebookPlaceHolder animation={slideRight} colors={colors} />
<NotebookPlaceHolder animation={slideLeft} colors={colors} />
<NotebookPlaceHolder animation={slideRight} colors={colors} />
</>
}
pinned={pinned}
placeholderText="Notebooks you add will appear here"
/>
</Container>
);

155
apps/mobile/src/views/Notebook/index.js
View File

@@ -1,13 +1,12 @@
import React, {useEffect, useState} from 'react';
import {FlatList, Platform, RefreshControl, Text, View} from 'react-native';
import {useIsFocused} from 'react-navigation-hooks';
import {db} from '../../../App';
import {SIZE, WEIGHT} from '../../common/common';
import Container from '../../components/Container';
import {AddTopicEvent} from '../../components/DialogManager';
import {NotebookItem} from '../../components/NotebookItem';
import SelectionWrapper from '../../components/SelectionWrapper';
import {useTracked} from '../../provider';
import {ACTIONS} from '../../provider/actions';
import {
eSendEvent,
eSubscribeEvent,
@@ -19,15 +18,15 @@ import {
eScrollEvent,
} from '../../services/events';
import {ToastEvent, w} from '../../utils/utils';
import {ACTIONS} from '../../provider/actions';
import {inputRef} from '../../components/SearchInput';
import SimpleList from '../../components/SimpleList';
import {NotebookPlaceHolder} from '../../components/ListPlaceholders';
export const Notebook = ({navigation}) => {
const [state, dispatch] = useTracked();
const {colors, selectionMode, preventDefaultMargins} = state;
const [topics, setTopics] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const searchResults = {...state.searchResults};
let params = navigation.state.params;
let notebook;
let isFocused = useIsFocused();
@@ -78,15 +77,7 @@ export const Notebook = ({navigation}) => {
};
}, []);
const onScroll = event => {
let y = event.nativeEvent.contentOffset.y;
eSendEvent(eScrollEvent, y);
};
const keyExtractor = (item, index) =>
item.dateCreated.toString() + index.toString();
const renderItem = ({item, index}) => (
const _renderItem = ({item, index}) => (
<SelectionWrapper item={item}>
<NotebookItem
hideMore={params.hideMore}
@@ -121,85 +112,20 @@ export const Notebook = ({navigation}) => {
</SelectionWrapper>
);
const ListFooterComponent = (
<View
style={{
height: 150,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
color: colors.navbg,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
}}>
- End -
</Text>
</View>
);
const _onRefresh = async () => {
setRefreshing(true);
try {
await db.sync();
const ListHeaderComponent =
searchResults.type === 'topics' && searchResults.results.length > 0 ? (
<View
style={{
marginTop:
Platform.OS == 'ios'
? topics[0] && !selectionMode
? 135
: 135 - 60
: topics[0] && !selectionMode
? 155
: 155 - 60,
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={() => {
inputRef.current?.setNativeProps({
text: '',
});
dispatch({
type: ACTIONS.SEARCH_RESULTS,
results: {
results: [],
type: null,
keyword: null,
},
});
}}
style={{
fontFamily: WEIGHT.regular,
color: colors.errorText,
fontSize: SIZE.xs,
}}>
Clear
</Text>
</View>
) : (
<View
style={{
marginTop:
Platform.OS == 'ios'
? topics[0] && !selectionMode
? 135
: 135 - 60
: topics[0] && !selectionMode
? 155
: 155 - 60,
}}
/>
);
onLoad();
dispatch({type: ACTIONS.USER});
setRefreshing(false);
ToastEvent.show('Sync Complete', 'success');
} catch (e) {
setRefreshing(false);
ToastEvent.show('Sync failed, network error', 'error');
}
};
return (
<Container
@@ -215,44 +141,15 @@ export const Notebook = ({navigation}) => {
let n = navigation.state.params.notebook;
AddTopicEvent(n);
}}>
<FlatList
refreshControl={
<RefreshControl
tintColor={colors.accent}
colors={[colors.accent]}
progressViewOffset={165}
onRefresh={async () => {
setRefreshing(true);
try {
await db.sync();
onLoad();
dispatch({type: ACTIONS.USER});
setRefreshing(false);
ToastEvent.show('Sync Complete', 'success');
} catch (e) {
setRefreshing(false);
ToastEvent.show('Sync failed, network error', 'error');
}
}}
<SimpleList
data={topics}
type="topics"
refreshing={refreshing}
/>
}
style={{
width: '100%',
}}
data={
searchResults.type === 'topics' &&
searchResults.results.length > 0 &&
isFocused
? searchResults.results
: topics
}
onScroll={onScroll}
ListHeaderComponent={ListHeaderComponent}
ListFooterComponent={ListFooterComponent}
keyExtractor={keyExtractor}
renderItem={renderItem}
focused={isFocused}
onRefresh={_onRefresh}
renderItem={_renderItem}
placeholder={<NotebookPlaceHolder colors={colors} />}
placeholderText="Topics added to notebook appear here."
/>
</Container>
);

190
apps/mobile/src/views/Notes/index.js
View File

@@ -29,6 +29,7 @@ import {NotesPlaceHolder} from '../../components/ListPlaceholders';
import {useIsFocused} from 'react-navigation-hooks';
import {openEditorAnimation} from '../../utils/animations';
import {inputRef} from '../../components/SearchInput';
import SimpleList from '../../components/SimpleList';
export const Notes = ({navigation}) => {
const [state, dispatch] = useTracked();
@@ -37,7 +38,6 @@ export const Notes = ({navigation}) => {
const [notes, setNotes] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const isFocused = useIsFocused();
const searchResults = {...state.searchResults};
let params = navigation.state ? navigation.state.params : null;
useEffect(() => {
@@ -129,118 +129,6 @@ export const Notes = ({navigation}) => {
</SelectionWrapper>
);
const _onScroll = event => {
if (!event) return;
let y = event.nativeEvent.contentOffset.y;
eSendEvent(eScrollEvent, y);
};
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 _ListHeaderComponent_S =
searchResults.type === 'notes' && searchResults.results.length > 0 ? (
<View
style={{
marginTop:
Platform.OS == 'ios'
? notes[0]
? 135
: 135 - 60
: notes[0]
? 155
: 155 - 60,
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={() => {
inputRef.current?.setNativeProps({
text: '',
});
dispatch({
type: ACTIONS.SEARCH_RESULTS,
results: {
results: [],
type: null,
keyword: null,
},
});
}}
style={{
fontFamily: WEIGHT.regular,
color: colors.errorText,
fontSize: SIZE.xs,
}}>
Clear
</Text>
</View>
) : (
<View
style={{
marginTop:
Platform.OS == 'ios'
? notes[0]
? 135
: 135 - 60
: notes[0]
? 155
: 155 - 60,
}}
/>
);
const _ListEmptyComponent = (
<View
style={{
height: '80%',
width: '100%',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
opacity: 0.8,
}}>
<>
<NotesPlaceHolder colors={colors} />
<Text
style={{
color: colors.icon,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
marginTop: 35,
}}>
Add some notes to this {params.type ? params.type : 'topic.'}
</Text>
</>
</View>
);
const _onRefresh = async () => {
setRefreshing(true);
try {
@@ -256,25 +144,7 @@ export const Notes = ({navigation}) => {
}
};
const _listKeyExtractor = (item, index) => item.dateCreated.toString();
return (
<Container
bottomButtonText="Create a new note"
canGoBack={false}
heading={
params.type == 'tag'
? '#' + params.title
: params.title.slice(0, 1).toUpperCase() + params.title.slice(1)
}
headerColor={params.type == 'color' ? params.title : null}
canGoBack={true}
data={notes}
type="notes"
placeholder={`Search in ${
params.type == 'tag' ? '#' + params.title : params.title
}`}
bottomButtonOnPress={() => {
const _bottomBottomOnPress = () => {
if (params.type === 'tag') {
editing.actionAfterFirstSave = {
type: 'tag',
@@ -301,38 +171,36 @@ export const Notes = ({navigation}) => {
eSendEvent(eOnLoadNote, {type: 'new'});
openEditorAnimation();
}
}}>
<FlatList
data={
searchResults.type === 'notes' &&
isFocused &&
searchResults.results.length > 0
? searchResults.results
: notes
};
return (
<Container
bottomButtonText="Create a new note"
canGoBack={false}
heading={
params.type == 'tag'
? '#' + params.title
: params.title.slice(0, 1).toUpperCase() + params.title.slice(1)
}
refreshControl={
<RefreshControl
tintColor={colors.accent}
colors={[colors.accent]}
progressViewOffset={165}
onRefresh={_onRefresh}
headerColor={params.type == 'color' ? params.title : null}
canGoBack={true}
data={notes}
type="notes"
placeholder={`Search in ${
params.type == 'tag' ? '#' + params.title : params.title
}`}
bottomButtonOnPress={_bottomBottomOnPress}>
<SimpleList
data={notes}
type="notes"
refreshing={refreshing}
/>
}
keyExtractor={_listKeyExtractor}
ListFooterComponent={_ListFooterComponent}
onScroll={_onScroll}
ListHeaderComponent={_ListHeaderComponent_S}
ListEmptyComponent={_ListEmptyComponent}
contentContainerStyle={{
width: '100%',
alignSelf: 'center',
minHeight: '100%',
}}
style={{
height: '100%',
}}
focused={isFocused}
onRefresh={_onRefresh}
renderItem={_renderItem}
placeholder={<NotesPlaceHolder colors={colors} />}
placeholderText={`Add some notes to this" ${
params.type ? params.type : 'topic.'
}`}
/>
</Container>
);

171
apps/mobile/src/views/Tags/index.js
View File

@@ -17,15 +17,15 @@ import NavigationService from '../../services/NavigationService';
import {ToastEvent} from '../../utils/utils';
import {useIsFocused} from 'react-navigation-hooks';
import {inputRef} from '../../components/SearchInput';
import SimpleList from '../../components/SimpleList';
const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;
export const Tags = ({navigation}) => {
const [state, dispatch] = useTracked();
const {colors, tags, selectionMode} = state;
const {colors, tags} = state;
const [refreshing, setRefreshing] = useState(false);
const isFocused = useIsFocused();
const searchResults = {...state.searchResults};
useEffect(() => {
if (isFocused) {
dispatch({type: ACTIONS.TAGS});
@@ -36,141 +36,11 @@ export const Tags = ({navigation}) => {
}
}, [isFocused]);
return (
<Container
canGoBack={false}
heading="Tags"
noBottomButton={true}
placeholder="Search for #tags"
data={tags}
type="tags"
menu>
<View
style={{
width: '100%',
alignSelf: 'center',
height: '100%',
paddingHorizontal: 12,
}}>
<FlatList
style={{
height: '100%',
}}
ListHeaderComponent={
searchResults.type === 'tags' &&
searchResults.results.length > 0 ? (
<View
style={{
marginTop:
Platform.OS == 'ios'
? tags[0] && !selectionMode
? 135
: 135 - 60 && !selectionMode
: tags[0]
? 155
: 155 - 60,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 0,
}}>
<Text
style={{
fontFamily: WEIGHT.bold,
color: colors.accent,
fontSize: SIZE.xs,
}}>
Search Results for {searchResults.keyword}
</Text>
<Text
onPress={() => {
inputRef.current?.setNativeProps({
text: '',
});
dispatch({
type: ACTIONS.SEARCH_RESULTS,
results: {
results: [],
type: null,
keyword: null,
},
});
}}
style={{
fontFamily: WEIGHT.regular,
color: colors.errorText,
fontSize: SIZE.xs,
}}>
Clear
</Text>
</View>
) : (
<View
style={{
marginTop:
Platform.OS == 'ios'
? tags[0] && !selectionMode
? 135
: 135 - 60
: tags[0] && !selectionMode
? 155
: 155 - 60,
}}
/>
)
}
refreshControl={
<RefreshControl
tintColor={colors.accent}
colors={[colors.accent]}
progressViewOffset={165}
onRefresh={async () => {
setRefreshing(true);
try {
await db.sync();
dispatch({type: ACTIONS.TAGS});
dispatch({type: ACTIONS.USER});
setRefreshing(false);
ToastEvent.show('Sync Complete', 'success');
} catch (e) {
setRefreshing(false);
ToastEvent.show('Sync failed, network error', 'error');
}
}}
refreshing={refreshing}
/>
}
contentContainerStyle={{
height: '100%',
}}
data={
searchResults.type === 'tags' &&
isFocused &&
searchResults.results.length > 0
? searchResults.results
: tags
}
ListEmptyComponent={
<View
style={{
height: '80%',
width: '100%',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
opacity: 0.8,
}}>
<TagsPlaceHolder colors={colors} />
<Text
style={{
fontSize: SIZE.sm,
color: colors.icon,
}}>
Tags added to notes appear here
</Text>
</View>
}
renderItem={({item, index}) => (
const _onRefresh = () => {
//Handle
};
const _renderItem = ({item, index}) => (
<TouchableOpacity
key={item.title}
onPress={() => {
@@ -216,7 +86,32 @@ export const Tags = ({navigation}) => {
</Text>
</Text>
</TouchableOpacity>
)}
);
return (
<Container
canGoBack={false}
heading="Tags"
noBottomButton={true}
placeholder="Search for #tags"
data={tags}
type="tags"
menu>
<View
style={{
paddingHorizontal: 12,
height: '100%',
width: '100%',
}}>
<SimpleList
data={tags}
type="tags"
refreshing={refreshing}
focused={isFocused}
onRefresh={_onRefresh}
renderItem={_renderItem}
placeholder={<TagsPlaceHolder colors={colors} />}
placeholderText="Tags added to notes appear here"
/>
</View>
</Container>

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

@@ -15,13 +15,13 @@ import {w, ToastEvent} from '../../utils/utils';
import SelectionWrapper from '../../components/SelectionWrapper';
import {useIsFocused} from 'react-navigation-hooks';
import {inputRef} from '../../components/SearchInput';
import SimpleList from '../../components/SimpleList';
export const Trash = ({navigation}) => {
const [state, dispatch] = useTracked();
const {colors, selectionMode, trash} = state;
const [refreshing, setRefreshing] = useState(false);
const isFocused = useIsFocused();
const searchResults = {...state.searchResults};
useEffect(() => {
if (isFocused) {
dispatch({
@@ -88,28 +88,20 @@ export const Trash = ({navigation}) => {
</SelectionWrapper>
);
const _ListEmptyComponent = (
<View
style={{
height: '80%',
width: '100%',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
opacity: 0.8,
}}>
<TrashPlaceHolder colors={colors} />
<Text
style={{
color: colors.icon,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
marginTop: 30,
}}>
Deleted notes & notebooks appear here.
</Text>
</View>
);
const _onRefresh = async () => {
setRefreshing(true);
try {
await db.sync();
dispatch({type: ACTIONS.TRASH});
dispatch({type: ACTIONS.USER});
setRefreshing(false);
ToastEvent.show('Sync Complete', 'success');
} catch (e) {
setRefreshing(false);
ToastEvent.show('Sync failed, network error', 'error');
}
};
return (
<Container
@@ -124,109 +116,15 @@ export const Trash = ({navigation}) => {
type="trash"
data={trash}
bottomButtonText="Clear all trash">
<FlatList
refreshControl={
<RefreshControl
tintColor={colors.accent}
colors={[colors.accent]}
progressViewOffset={165}
onRefresh={async () => {
setRefreshing(true);
try {
await db.sync();
dispatch({type: ACTIONS.TRASH});
dispatch({type: ACTIONS.USER});
setRefreshing(false);
ToastEvent.show('Sync Complete', 'success');
} catch (e) {
setRefreshing(false);
ToastEvent.show('Sync failed, network error', 'error');
}
}}
<SimpleList
data={trash}
type="trash"
refreshing={refreshing}
/>
}
ListHeaderComponent={
searchResults.type === 'trash' && searchResults.results.length > 0 ? (
<View
style={{
marginTop:
Platform.OS == 'ios'
? trash[0]
? 135
: 135 - 60
: trash[0]
? 155
: 155 - 60,
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={() => {
inputRef.current?.setNativeProps({
text: '',
});
dispatch({
type: ACTIONS.SEARCH_RESULTS,
results: {
results: [],
type: null,
keyword: null,
},
});
}}
style={{
fontFamily: WEIGHT.regular,
color: colors.errorText,
fontSize: SIZE.xs,
}}>
Clear
</Text>
</View>
) : (
<View
style={{
marginTop:
Platform.OS == 'ios'
? trash[0]
? 135
: 135 - 60
: trash[0]
? 155
: 155 - 60,
}}
/>
)
}
keyExtractor={item => item.dateCreated.toString()}
style={{
width: '100%',
alignSelf: 'center',
height: '100%',
}}
contentContainerStyle={{
height: '100%',
}}
data={
searchResults.type === 'trash' &&
searchResults.results.length > 0 &&
isFocused
? searchResults.results
: trash
}
ListEmptyComponent={_ListEmptyComponent}
focused={isFocused}
onRefresh={_onRefresh}
renderItem={_renderItem}
placeholder={<TrashPlaceHolder colors={colors} />}
placeholderText="Deleted notes & notebooks appear here."
/>
</Container>
);