fix: search and favorites

apps/mobile/src/components/AddNotebookDialog/index.js

@@ -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(['']);

apps/mobile/src/components/NotebookItem/index.js

@@ -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.',
+                      `Notebook ${item.pinned ? 'unpinned' : 'pinned'}`,
-                      'success',
+                      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

apps/mobile/src/components/NotesList/index.js

@@ -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}
+        />
       )}
     />
   );

apps/mobile/src/views/Favorites/index.js

@@ -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
+        <FlatList
-          margin={margin}
+          //keyExtractor={item => item.dateCreated.toString()}
-          refresh={() => {
+          style={{
-            fetchFavs();
+            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}
+          renderItem={({item, index}) =>
-          isSearch={false}
+            item.type === 'note' ? (
-          emptyPlaceholderText="Your favorite notes will appear here"
+              <NoteItem
-          notes={favs}
+                item={item}
-          keyword={''}
+                refresh={() => {
+                  fetchFavs();
+                }}
+                index={index}
+              />
+            ) : (
+              <NotebookItem
+                item={item}
+                refresh={() => {
+                  fetchFavs();
+                }}
+                index={index}
+              />
+            )
+          }
         />
       </KeyboardAvoidingView>
     </AnimatedSafeAreaView>

apps/mobile/src/views/Home/index.js

@@ -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);
+      fetchNotes();
-      } else {
-        fetchNotes();
-      }
     } else {
-      setSearch(true);
       setKeyword(text);
       searchResults = await db.searchNotes(text);
-      if (searchResults) {
+      console.log(searchResults, 'hello');
-        setNotes(searchResults);
+      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) {
+      fetchNotes();
-        setNotes(allNotes);
-      } else {
-        fetchNotes();
-      }
     }
   };
 
@@ -121,11 +118,8 @@ export const Home = ({navigation}) => {
   const clearSearch = () => {
     searchResults = null;
     setSearch(false);
-    if (allNotes) {
+
-      setNotes(allNotes);
+    fetchNotes();
-    } else {
-      fetchNotes();
-    }
   };
 
   // Render

apps/mobile/src/views/Trash/index.js

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