mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-23 15:09:33 +01:00
fix: search and favorites
This commit is contained in:
ammarahm-ed
@@ -101,9 +101,8 @@ export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
|
||||
title,
|
||||
description,
|
||||
topics,
|
||||
timestamp: toEdit ? toEdit.dateCreated : null,
|
||||
timestamp: toEdit && toEdit.dateCreated ? toEdit.dateCreated : null,
|
||||
});
|
||||
console.log(title, description, topics, toEdit.dateCreated);
|
||||
|
||||
ToastEvent.show('New notebook added', 'success', 3000, () => {}, '');
|
||||
setTopics(['']);
|
||||
|
||||
@@ -283,7 +283,6 @@ export const NotebookItem = ({
|
||||
}}
|
||||
textStyle={{
|
||||
color: colors.pri,
|
||||
|
||||
fontFamily: WEIGHT.regular,
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
@@ -319,24 +318,18 @@ export const NotebookItem = ({
|
||||
Edit
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem
|
||||
textStyle={{
|
||||
color: colors.pri,
|
||||
|
||||
fontFamily: WEIGHT.regular,
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
Pin
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onPress={() => {
|
||||
hideMenu();
|
||||
db.pinItem(item.type, item.dateCreated);
|
||||
refresh();
|
||||
|
||||
ToastEvent.show(
|
||||
'Note added to favorites.',
|
||||
'success',
|
||||
`Notebook ${item.pinned ? 'unpinned' : 'pinned'}`,
|
||||
item.pinned ? 'error' : 'success',
|
||||
3000,
|
||||
() => {},
|
||||
'Ok',
|
||||
'',
|
||||
);
|
||||
}}
|
||||
textStyle={{
|
||||
@@ -345,7 +338,31 @@ export const NotebookItem = ({
|
||||
fontFamily: WEIGHT.regular,
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
Favorite
|
||||
{item.pinned ? 'Unpin' : 'Pin'}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onPress={() => {
|
||||
hideMenu();
|
||||
db.favoriteItem(item.type, item.dateCreated);
|
||||
|
||||
refresh();
|
||||
ToastEvent.show(
|
||||
`Notebook ${
|
||||
item.favorite ? 'removed' : 'added'
|
||||
} to favorites.`,
|
||||
item.favorite ? 'error' : 'success',
|
||||
3000,
|
||||
() => {},
|
||||
'',
|
||||
);
|
||||
}}
|
||||
textStyle={{
|
||||
color: colors.pri,
|
||||
|
||||
fontFamily: WEIGHT.regular,
|
||||
fontSize: SIZE.sm,
|
||||
}}>
|
||||
{item.favorite ? 'Unfavorite' : 'Favorite'}
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem
|
||||
|
||||
@@ -56,7 +56,7 @@ export const NotesList = ({
|
||||
setPinned([...pinnedItems]);
|
||||
}, [notes]);
|
||||
|
||||
return isGrouped ? (
|
||||
return isGrouped && !isSearch ? (
|
||||
<SectionList
|
||||
sections={notes}
|
||||
keyExtractor={(item, index) => item.dateCreated.toString()}
|
||||
@@ -352,7 +352,7 @@ export const NotesList = ({
|
||||
) : (
|
||||
<FlatList
|
||||
data={notes}
|
||||
keyExtractor={(item, index) => item.dateCreated.toString()}
|
||||
//keyExtractor={(item, index) => item.dateCreated.toString()}
|
||||
ListFooterComponent={
|
||||
<View
|
||||
style={{
|
||||
@@ -370,244 +370,6 @@ export const NotesList = ({
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
ListEmptyComponent={
|
||||
<View
|
||||
style={{
|
||||
height: '80%',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
justifyContent: 'center',
|
||||
opacity: 0.8,
|
||||
}}>
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={3000}
|
||||
iterationDelay={0}
|
||||
direction="alternate"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
backgroundColor: colors.shade,
|
||||
width: '50%',
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
{isFavorites ? (
|
||||
<Icon
|
||||
name="star"
|
||||
size={SIZE.xl}
|
||||
color={colors.accent}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 5,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<View
|
||||
style={{
|
||||
width: '90%',
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: 8,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '70%',
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: 8,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: '15%',
|
||||
height: 8,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.icon,
|
||||
marginRight: '5%',
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '15%',
|
||||
height: 8,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.icon,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
|
||||
<Animatable.View
|
||||
animation={slideLeft}
|
||||
iterationCount="infinite"
|
||||
duration={3000}
|
||||
iterationDelay={0}
|
||||
direction="alternate"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
backgroundColor: colors.shade,
|
||||
width: '50%',
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
{isFavorites ? (
|
||||
<Icon
|
||||
name="star"
|
||||
size={SIZE.xl}
|
||||
color={colors.accent}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 5,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<View
|
||||
style={{
|
||||
width: '90%',
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: 8,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '70%',
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: 8,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: '15%',
|
||||
height: 8,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.icon,
|
||||
marginRight: '5%',
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '15%',
|
||||
height: 8,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.icon,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
<Animatable.View
|
||||
animation={slideRight}
|
||||
iterationCount="infinite"
|
||||
duration={3000}
|
||||
iterationDelay={0}
|
||||
direction="alternate"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
backgroundColor: colors.shade,
|
||||
width: '50%',
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
{isFavorites ? (
|
||||
<Icon
|
||||
name="star"
|
||||
size={SIZE.xl}
|
||||
color={colors.accent}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 5,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<View
|
||||
style={{
|
||||
width: '90%',
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: 8,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '70%',
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.accent,
|
||||
marginBottom: 8,
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: '15%',
|
||||
height: 8,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.icon,
|
||||
marginRight: '5%',
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
width: '15%',
|
||||
height: 8,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.icon,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</Animatable.View>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
color: colors.pri,
|
||||
fontSize: SIZE.md,
|
||||
fontFamily: WEIGHT.regular,
|
||||
marginTop: 20,
|
||||
}}>
|
||||
{emptyPlaceholderText}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: SIZE.sm,
|
||||
color: colors.icon,
|
||||
marginTop: 20,
|
||||
}}>
|
||||
No Notes found
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
onScroll={event => {
|
||||
y = event.nativeEvent.contentOffset.y;
|
||||
onScroll(y);
|
||||
@@ -648,7 +410,12 @@ export const NotesList = ({
|
||||
</View>
|
||||
}
|
||||
renderItem={({item, index}) => (
|
||||
<NoteItem item={item} numColumns={numColumns} index={index} />
|
||||
<NoteItem
|
||||
item={item}
|
||||
refresh={() => refresh()}
|
||||
numColumns={numColumns}
|
||||
index={index}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {Dimensions, KeyboardAvoidingView} from 'react-native';
|
||||
import {
|
||||
Dimensions,
|
||||
KeyboardAvoidingView,
|
||||
View,
|
||||
Text,
|
||||
FlatList,
|
||||
Platform,
|
||||
} from 'react-native';
|
||||
|
||||
import {Header} from '../../components/header';
|
||||
import {AnimatedSafeAreaView} from '../Home';
|
||||
@@ -7,7 +14,10 @@ import {useAppContext} from '../../provider/useAppContext';
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import {Search} from '../../components/SearchInput';
|
||||
import {db} from '../../../App';
|
||||
import {NotesList} from '../../components/NotesList';
|
||||
import Icon from 'react-native-vector-icons/Feather';
|
||||
import {SIZE, WEIGHT} from '../../common/common';
|
||||
import NoteItem from '../../components/NoteItem';
|
||||
import {NotebookItem} from '../../components/NotebookItem';
|
||||
const w = Dimensions.get('window').width;
|
||||
const h = Dimensions.get('window').height;
|
||||
|
||||
@@ -38,6 +48,29 @@ export const Favorites = ({navigation}) => {
|
||||
setFavs([...favs]);
|
||||
};
|
||||
|
||||
const slideRight = {
|
||||
0: {
|
||||
transform: [{translateX: -4}],
|
||||
},
|
||||
0.5: {
|
||||
transform: [{translateX: 0}],
|
||||
},
|
||||
1: {
|
||||
transform: [{translateX: 4}],
|
||||
},
|
||||
};
|
||||
const slideLeft = {
|
||||
0: {
|
||||
transform: [{translateX: 4}],
|
||||
},
|
||||
0.5: {
|
||||
transform: [{translateX: 0}],
|
||||
},
|
||||
1: {
|
||||
transform: [{translateX: -4}],
|
||||
},
|
||||
};
|
||||
|
||||
// Effects
|
||||
|
||||
useEffect(() => {
|
||||
@@ -90,12 +123,114 @@ export const Favorites = ({navigation}) => {
|
||||
) : null}
|
||||
</Animatable.View>
|
||||
|
||||
<NotesList
|
||||
margin={margin}
|
||||
refresh={() => {
|
||||
fetchFavs();
|
||||
<FlatList
|
||||
//keyExtractor={item => item.dateCreated.toString()}
|
||||
style={{
|
||||
width: '100%',
|
||||
alignSelf: 'center',
|
||||
height: '100%',
|
||||
}}
|
||||
onScroll={y => {
|
||||
contentContainerStyle={{
|
||||
height: '100%',
|
||||
}}
|
||||
ListHeaderComponent={
|
||||
<View
|
||||
style={{
|
||||
marginTop:
|
||||
Platform.OS == 'ios'
|
||||
? favs[0]
|
||||
? 135
|
||||
: 135 - 60
|
||||
: favs[0]
|
||||
? 175
|
||||
: 175 - 60,
|
||||
}}></View>
|
||||
}
|
||||
ListEmptyComponent={
|
||||
<View
|
||||
style={{
|
||||
height: '80%',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
justifyContent: 'center',
|
||||
opacity: 0.8,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignSelf: 'center',
|
||||
justifyContent: 'space-around',
|
||||
}}>
|
||||
<Animatable.View
|
||||
animation={slideLeft}
|
||||
iterationCount="infinite"
|
||||
duration={3000}
|
||||
iterationDelay={0}
|
||||
direction="alternate"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
<Icon name="star" size={SIZE.xl} color="orange" />
|
||||
</Animatable.View>
|
||||
<Animatable.View
|
||||
animation={slideLeft}
|
||||
iterationCount="infinite"
|
||||
duration={3000}
|
||||
iterationDelay={0}
|
||||
direction="alternate"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
marginBottom: 10,
|
||||
marginTop: -30,
|
||||
}}>
|
||||
<Icon name="star" size={SIZE.xxl} color="orange" />
|
||||
</Animatable.View>
|
||||
<Animatable.View
|
||||
animation={slideLeft}
|
||||
iterationCount="infinite"
|
||||
duration={3000}
|
||||
iterationDelay={0}
|
||||
direction="alternate"
|
||||
easing="ease-in"
|
||||
useNativeDriver={true}
|
||||
style={{
|
||||
padding: 5,
|
||||
borderRadius: 5,
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
<Icon name="star" size={SIZE.xl} color="orange" />
|
||||
</Animatable.View>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.pri,
|
||||
fontSize: SIZE.md,
|
||||
fontFamily: WEIGHT.regular,
|
||||
marginTop: 20,
|
||||
}}>
|
||||
Favorite notes & notebooks appear here.
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: SIZE.sm,
|
||||
color: colors.icon,
|
||||
marginTop: 20,
|
||||
}}>
|
||||
Favorites are empty.
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
data={favs}
|
||||
onScroll={event => {
|
||||
let y = event.nativeEvent.contentOffset.y;
|
||||
if (buttonHide) return;
|
||||
if (y < 30) setHideHeader(false);
|
||||
if (y > offsetY) {
|
||||
@@ -111,11 +246,25 @@ export const Favorites = ({navigation}) => {
|
||||
}
|
||||
offsetY = y;
|
||||
}}
|
||||
isFavorites={true}
|
||||
isSearch={false}
|
||||
emptyPlaceholderText="Your favorite notes will appear here"
|
||||
notes={favs}
|
||||
keyword={''}
|
||||
renderItem={({item, index}) =>
|
||||
item.type === 'note' ? (
|
||||
<NoteItem
|
||||
item={item}
|
||||
refresh={() => {
|
||||
fetchFavs();
|
||||
}}
|
||||
index={index}
|
||||
/>
|
||||
) : (
|
||||
<NotebookItem
|
||||
item={item}
|
||||
refresh={() => {
|
||||
fetchFavs();
|
||||
}}
|
||||
index={index}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</KeyboardAvoidingView>
|
||||
</AnimatedSafeAreaView>
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
} from 'react-native';
|
||||
import {COLOR_SCHEME, opacity, pv, br, SIZE, WEIGHT} from '../../common/common';
|
||||
import {Search} from '../../components/SearchInput';
|
||||
import {w, h, SideMenuEvent, getElevation} from '../../utils/utils';
|
||||
import {w, h, SideMenuEvent, getElevation, ToastEvent} from '../../utils/utils';
|
||||
import {Header} from '../../components/header';
|
||||
import {NotesList} from '../../components/NotesList';
|
||||
import {db} from '../../../App';
|
||||
@@ -88,17 +88,18 @@ export const Home = ({navigation}) => {
|
||||
const onSubmitEditing = async () => {
|
||||
if (!text || text.length < 1) {
|
||||
setSearch(false);
|
||||
if (allNotes) {
|
||||
setNotes(allNotes);
|
||||
} else {
|
||||
fetchNotes();
|
||||
}
|
||||
|
||||
fetchNotes();
|
||||
} else {
|
||||
setSearch(true);
|
||||
setKeyword(text);
|
||||
searchResults = await db.searchNotes(text);
|
||||
if (searchResults) {
|
||||
setNotes(searchResults);
|
||||
console.log(searchResults, 'hello');
|
||||
if (searchResults && searchResults.length > 0) {
|
||||
setNotes([...[]]);
|
||||
setSearch(true);
|
||||
setNotes([...searchResults]);
|
||||
} else {
|
||||
ToastEvent.show('No search results found', 'error', 3000, () => {}, '');
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -106,11 +107,7 @@ export const Home = ({navigation}) => {
|
||||
const onBlur = () => {
|
||||
if (text && text.length < 2) {
|
||||
setSearch(false);
|
||||
if (allNotes) {
|
||||
setNotes(allNotes);
|
||||
} else {
|
||||
fetchNotes();
|
||||
}
|
||||
fetchNotes();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -121,11 +118,8 @@ export const Home = ({navigation}) => {
|
||||
const clearSearch = () => {
|
||||
searchResults = null;
|
||||
setSearch(false);
|
||||
if (allNotes) {
|
||||
setNotes(allNotes);
|
||||
} else {
|
||||
fetchNotes();
|
||||
}
|
||||
|
||||
fetchNotes();
|
||||
};
|
||||
|
||||
// Render
|
||||
|
||||
@@ -26,29 +26,6 @@ export const Trash = ({navigation}) => {
|
||||
setTrash([...allTrash]);
|
||||
}, []);
|
||||
|
||||
const slideRight = {
|
||||
0: {
|
||||
transform: [{translateX: -4}],
|
||||
},
|
||||
0.5: {
|
||||
transform: [{translateX: 0}],
|
||||
},
|
||||
1: {
|
||||
transform: [{translateX: 4}],
|
||||
},
|
||||
};
|
||||
const slideLeft = {
|
||||
0: {
|
||||
transform: [{translateX: 4}],
|
||||
},
|
||||
0.5: {
|
||||
transform: [{translateX: 0}],
|
||||
},
|
||||
1: {
|
||||
transform: [{translateX: -4}],
|
||||
},
|
||||
};
|
||||
|
||||
const rotate = {
|
||||
0: {
|
||||
transform: [{rotateZ: '0deg'}, {translateX: 0}, {translateY: 0}],
|
||||
|
||||
Reference in New Issue
Block a user