push changes

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

@@ -1,4 +1,4 @@
-import React, {useState, createRef} from 'react';
+import React, {useState, createRef, useEffect} from 'react';
 import {
   View,
   Text,
@@ -17,7 +17,7 @@ import {useAppContext} from '../../provider/useAppContext';
 
 let refs = [];
 
-export const AddNotebookDialog = ({visible, close}) => {
+export const AddNotebookDialog = ({visible, close, toEdit = null}) => {
   const {colors} = useAppContext();
   const [topics, setTopics] = useState(['']);
   const [title, setTitle] = useState(null);
@@ -26,7 +26,7 @@ export const AddNotebookDialog = ({visible, close}) => {
   let prevItem = null;
   let prevIndex = null;
   let currentSelectedInput = null;
-
+  let timestamp = null;
   let description = 'my first notebook';
   const onSubmit = (text, index, willFocus = true) => {
     let prevTopics = topics;
@@ -103,7 +103,10 @@ export const AddNotebookDialog = ({visible, close}) => {
       title,
       description,
       topics,
+      timestamp: toEdit ? toEdit.dateCreated : null,
     });
+    console.log(title, description, topics, toEdit.dateCreated);
+
     ToastEvent.show('New notebook added', 'success', 3000, () => {}, '');
     setTopics(['']);
     prevIndex = null;
@@ -119,6 +122,23 @@ export const AddNotebookDialog = ({visible, close}) => {
       transparent={true}
       animated
       animationType="fade"
+      onShow={() => {
+        if (toEdit !== null) {
+          let topicsList = [];
+          toEdit.topics.forEach(item => {
+            if (item.title !== 'General') {
+              topicsList.push(item.title);
+            }
+          });
+          topicsList.push('');
+          setTopics([...topicsList]);
+          setTitle(toEdit.title);
+          timestamp = toEdit.dateCreated;
+          setTimeout(() => {
+            console.log(timestamp, title, topics);
+          }, 400);
+        }
+      }}
       onRequestClose={() => (refs = [])}>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : null}
@@ -154,7 +174,7 @@ export const AddNotebookDialog = ({visible, close}) => {
                 marginLeft: 5,
                 fontSize: SIZE.md,
               }}>
-              New Notebook
+              {toEdit ? 'Edit Notebook' : 'New Notebook'}
             </Text>
           </View>
 
@@ -171,6 +191,7 @@ export const AddNotebookDialog = ({visible, close}) => {
               marginTop: 20,
               marginBottom: 10,
             }}
+            defaultValue={toEdit ? toEdit.title : null}
             onChangeText={value => {
               setTitle(value);
             }}
@@ -200,6 +221,7 @@ export const AddNotebookDialog = ({visible, close}) => {
             renderItem={({item, index}) => (
               <TopicItem
                 item={item}
+                toEdit={toEdit ? true : false}
                 index={index}
                 colors={colors}
                 onSubmit={onSubmit}
@@ -288,6 +310,7 @@ const TopicItem = ({
   onDelete,
   onChange,
   colors,
+  toEdit,
 }) => {
   const [focus, setFocus] = useState(true);
   const topicRef = ref => (refs[index] = ref);
@@ -318,7 +341,6 @@ const TopicItem = ({
         }}
         onChangeText={value => {
           onChange(value, index);
-
           text = value;
         }}
         onSubmit={() => onSubmit(text, index, true)}
@@ -332,6 +354,7 @@ const TopicItem = ({
           width: '90%',
           maxWidth: '90%',
         }}
+        defaultValue={item}
         placeholder="Add a topic"
         placeholderTextColor={colors.icon}
       />

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

@@ -39,11 +39,15 @@ import {useAppContext} from '../../provider/useAppContext';
 
 let tagsInputRef;
 
-export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
+export const EditorMenu = ({
-  const {colors} = useAppContext();
+  close = () => {},
-  const forceUpdate = useForceUpdate();
+  hide,
-  const [tags, setTags] = useState([]);
+  update = () => {},
-  const [selectedColor, setSelectedColor] = useState([]);
+  updateProps = () => {},
+  noteProps,
+}) => {
+  const {colors, changeColorScheme} = useAppContext();
+
   let tagToAdd = null;
   let backPressCount = 0;
 
@@ -84,13 +88,13 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
                         'theme',
                         JSON.stringify(COLOR_SCHEME_DARK),
                       );
-                      setColorScheme(COLOR_SCHEME_DARK);
+                      changeColorScheme(COLOR_SCHEME_DARK);
                     } else {
                       AsyncStorage.setItem(
                         'theme',
                         JSON.stringify(COLOR_SCHEME_LIGHT),
                       );
-                      setColorScheme(COLOR_SCHEME_LIGHT);
+                      changeColorScheme(COLOR_SCHEME_LIGHT);
                     }
                   },
                   switch: true,
@@ -100,46 +104,53 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
                 {
                   name: 'Pinned',
                   icon: 'tag',
-                  func: () => NavigationService.push('Home'),
+                  func: () => {
-                  close: true,
+                    let props = {...noteProps};
+                    props.pinned = !noteProps.pinned;
+
+                    updateProps(props);
+                  },
+                  close: false,
                   check: true,
-                  on: true,
+                  on: noteProps.pinned,
                 },
 
                 {
                   name: 'Add to Favorites',
                   icon: 'star',
-                  func: () =>
+                  func: () => {
-                    NavigationService.push('Folders', {
+                    let props = {...noteProps};
-                      title: 'Notebooks',
+                    props.favorite = !noteProps.favorite;
-                    }),
+
-                  close: true,
+                    updateProps(props);
+                  },
+                  close: false,
                   check: true,
-                  on: false,
+                  on: noteProps.favorite,
                 },
                 {
                   name: 'Share ',
                   icon: 'share',
-                  func: () => NavigationService.push('Lists'),
+                  func: () => {},
                   close: true,
                 },
                 {
                   name: 'Move to Notebook',
                   icon: 'arrow-right',
-                  func: () => NavigationService.push('Favorites'),
+                  func: () => {},
                   close: true,
                 },
 
                 {
                   name: 'Delete',
                   icon: 'trash',
-                  func: () => NavigationService.push('Trash'),
+                  func: () => {},
                   close: true,
                 },
                 {
                   name: 'Locked',
                   icon: 'lock',
-                  func: () => NavigationService.push('Settings'),
+                  func: () => {},
                   close: true,
                   check: true,
                   on: false,
@@ -263,7 +274,7 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
                 borderRadius: 5,
                 backgroundColor: colors.nav,
               }}>
-              {tags.map(item => (
+              {noteProps.tags.map(item => (
                 <TouchableOpacity
                   style={{
                     flexDirection: 'row',
@@ -312,17 +323,18 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
                     if (backPressCount === 1 && !tagToAdd) {
                       backPressCount = 0;
 
-                      let tagInputValue = tags[tags.length - 1];
+                      let tagInputValue =
-                      let allTags = tags;
+                        noteProps.tags[noteProps.tags.length - 1];
+                      let oldProps = {...noteProps};
                       if (allTags.length === 1) return;
 
-                      allTags.splice(allTags.length - 1);
+                      oldProps.tags.splice(allTags.length - 1);
 
-                      setTags(allTags);
+                      updateProps(oldProps);
                       tagsInputRef.setNativeProps({
                         text: tagInputValue,
                       });
-                      forceUpdate();
+
                       setTimeout(() => {
                         tagsInputRef.focus();
                       }, 300);
@@ -339,12 +351,12 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
                   if (tag.includes(' ')) {
                     tag = tag.replace(' ', '_');
                   }
-                  let allTags = [...tags];
+                  let oldProps = {...noteProps};
-                  allTags.push(tag);
+                  oldProps.tags.push(tag);
                   tagsInputRef.setNativeProps({
                     text: '#',
                   });
-                  setTags(allTags);
+                  updateProps(oldProps);
                   tagToAdd = '';
                   setTimeout(() => {
                     tagsInputRef.focus();
@@ -354,10 +366,6 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
             </ScrollView>
 
             <TouchableOpacity
-              onPress={() => {
-                close();
-                NavigationService.navigate('Tags');
-              }}
               style={{
                 width: '100%',
                 alignSelf: 'center',
@@ -411,7 +419,14 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
               ].map(item => (
                 <TouchableOpacity
                   onPress={() => {
-                    setSelectedColor(item);
+                    let props = {...noteProps};
+                    if (props.colors.includes(item)) {
+                      props.colors.splice(props.colors.indexOf(item), 1);
+                    } else {
+                      props.colors.push(item);
+                    }
+
+                    updateProps(props);
                   }}
                   style={{
                     flexDirection: 'row',
@@ -422,8 +437,9 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
                     borderWidth: 1.5,
                     borderRadius: 100,
                     padding: 3,
-                    borderColor:
+                    borderColor: noteProps.colors.includes(item)
-                      selectedColor === item ? colors.pri : colors.navbg,
+                      ? colors.pri
+                      : colors.navbg,
                   }}>
                   <View
                     style={{
@@ -434,7 +450,7 @@ export const EditorMenu = ({close = () => {}, hide, update = () => {}}) => {
                       justifyContent: 'center',
                       alignItems: 'center',
                     }}>
-                    {selectedColor === item ? (
+                    {noteProps.colors.includes(item) ? (
                       <Icon name="check" color="white" size={SIZE.md} />
                     ) : null}
                   </View>

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

@@ -4,7 +4,12 @@ import {View, Text, TouchableOpacity, Dimensions} from 'react-native';
 import {COLOR_SCHEME, SIZE, br, ph, pv, WEIGHT} from '../../common/common';
 
 import Icon from 'react-native-vector-icons/Feather';
-import {timeSince, ToastEvent, SideMenuEvent} from '../../utils/utils';
+import {
+  timeSince,
+  ToastEvent,
+  SideMenuEvent,
+  getElevation,
+} from '../../utils/utils';
 import NavigationService from '../../services/NavigationService';
 import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
 import {Dialog} from '../Dialog';
@@ -53,19 +58,22 @@ const NoteItem = props => {
   };
   return (
     <View
-      style={{
+      style={[
+        {
           marginHorizontal: '5%',
           paddingVertical: pv,
-        borderRadius: br,
           justifyContent: 'flex-start',
           alignItems: 'center',
           flexDirection: 'row',
-        paddingHorizontal: ph,
+          paddingHorizontal: 0,
-        width: '100%',
+          width: DDS.isTab ? '95%' : '90%',
+          marginHorizontal: '5%',
           alignSelf: 'center',
           borderBottomWidth: 1,
           borderBottomColor: colors.nav,
-      }}>
+        },
+        props.customStyle ? props.customStyle : {},
+      ]}>
       <Dialog
         visible={visible}
         title="Delete note"
@@ -78,6 +86,30 @@ const NoteItem = props => {
         }}
       />
       <VaultDialog visible={vaultDialog} />
+      {props.pinned ? (
+        <View
+          style={{
+            ...getElevation(3),
+            width: 30,
+            height: 30,
+            backgroundColor: colors.accent,
+            borderRadius: 100,
+            position: 'absolute',
+            left: 20,
+            top: -15,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <View
+            style={{
+              width: 5,
+              height: 5,
+              backgroundColor: 'white',
+              borderRadius: 100,
+            }}
+          />
+        </View>
+      ) : null}
 
       <TouchableOpacity
         activeOpacity={1}
@@ -131,6 +163,8 @@ const NoteItem = props => {
                 justifyContent: 'flex-start',
                 alignItems: 'center',
               }}>
+              {!props.isTrash ? (
+                <>
                   <Icon
                     style={{width: 30}}
                     name="lock"
@@ -146,13 +180,40 @@ const NoteItem = props => {
 
                   <Text
                     style={{
-                  color: colors.accent,
+                      color: colors.icon,
-                  fontSize: SIZE.xxs,
+                      fontSize: SIZE.xs - 1,
                       textAlignVertical: 'center',
                       fontFamily: WEIGHT.regular,
                     }}>
                     {timeSince(item.dateCreated) + '  '}
                   </Text>
+                </>
+              ) : null}
+
+              {props.isTrash ? (
+                <>
+                  <Text
+                    style={{
+                      color: colors.icon,
+                      fontSize: SIZE.xs - 1,
+                      textAlignVertical: 'center',
+                      fontFamily: WEIGHT.regular,
+                    }}>
+                    {'Deleted on: ' +
+                      new Date(item.dateDeleted).toISOString().slice(0, 10) +
+                      '   '}
+                  </Text>
+                  <Text
+                    style={{
+                      color: colors.accent,
+                      fontSize: SIZE.xs - 1,
+                      textAlignVertical: 'center',
+                      fontFamily: WEIGHT.regular,
+                    }}>
+                    {item.type[0].toUpperCase() + item.type.slice(1) + '  '}
+                  </Text>
+                </>
+              ) : null}
             </View>
           </View>
         </>
@@ -185,6 +246,39 @@ const NoteItem = props => {
               <Icon name="more-vertical" size={SIZE.lg} color={colors.icon} />
             </TouchableOpacity>
           }>
+          {props.isTrash ? (
+            <>
+              <MenuItem
+                onPress={() => {
+                  show = 'topic';
+                  hideMenu();
+                }}
+                textStyle={{
+                  color: colors.pri,
+
+                  fontFamily: WEIGHT.regular,
+                  fontSize: SIZE.sm,
+                }}>
+                <Icon name="arrow-left" size={SIZE.sm} color={colors.icon} />
+                {'  '}Restore
+              </MenuItem>
+              <MenuItem
+                onPress={() => {
+                  show = 'topic';
+                  hideMenu();
+                }}
+                textStyle={{
+                  color: colors.pri,
+
+                  fontFamily: WEIGHT.regular,
+                  fontSize: SIZE.sm,
+                }}>
+                <Icon name="trash" size={SIZE.sm} color={colors.icon} />
+                {'  '}Remove
+              </MenuItem>
+            </>
+          ) : (
+            <>
               <MenuItem
                 style={{
                   height: 35,
@@ -340,8 +434,11 @@ const NoteItem = props => {
                   height: 35,
                   paddingBottom: 10,
                 }}>
-            Created on: {new Date(item.dateCreated).toISOString().slice(0, 10)}
+                Created on:{' '}
+                {new Date(item.dateCreated).toISOString().slice(0, 10)}
               </MenuItem>
+            </>
+          )}
         </Menu>
       </View>
     </View>

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

@@ -17,6 +17,7 @@ import {db} from '../../../App';
 import {Dialog} from '../Dialog';
 import {AddTopicDialog} from '../AddTopicDialog';
 import {useAppContext} from '../../provider/useAppContext';
+import {AddNotebookDialog} from '../AddNotebookDialog';
 export const NotebookItem = ({
   item,
   index,
@@ -27,11 +28,13 @@ export const NotebookItem = ({
   noteToMove = null,
   notebookID,
   numColumns,
+  isTrash,
   refresh = () => {},
 }) => {
   const {colors} = useAppContext();
   const [isVisible, setVisible] = useState(false);
   const [addTopic, setAddTopic] = useState(false);
+  const [addNotebook, setAddNotebook] = useState(false);
   let setMenuRef = {};
   let show = null;
 
@@ -69,8 +72,7 @@ export const NotebookItem = ({
         setVisible(true);
         show = null;
       } else if (show === 'topic') {
-        setAddTopic(true);
+        isTopic ? setAddTopic(true) : setAddNotebook(true);
-        show = null;
       }
     }
   };
@@ -91,7 +93,7 @@ export const NotebookItem = ({
         justifyContent: 'flex-start',
         alignItems: 'center',
         flexDirection: 'row',
-        paddingHorizontal: ph,
+        paddingHorizontal: 0,
         width: '100%',
         alignSelf: 'center',
         borderBottomWidth: 1,
@@ -113,6 +115,13 @@ export const NotebookItem = ({
         toEdit={item}
         close={() => setAddTopic(false)}
       />
+      <AddNotebookDialog
+        visible={addNotebook}
+        toEdit={item}
+        close={() => {
+          setAddNotebook(false);
+        }}
+      />
 
       <View
         style={{
@@ -181,7 +190,37 @@ export const NotebookItem = ({
             </View>
           )}
 
-          {isTopic ? null : (
+          {isTrash ? (
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                marginTop: 5,
+              }}>
+              <Text
+                style={{
+                  color: colors.icon,
+                  fontSize: SIZE.xs - 1,
+                  textAlignVertical: 'center',
+                  fontFamily: WEIGHT.regular,
+                }}>
+                {'Deleted on: ' +
+                  new Date(item.dateDeleted).toISOString().slice(0, 10) +
+                  '   '}
+              </Text>
+              <Text
+                style={{
+                  color: colors.accent,
+                  fontSize: SIZE.xs - 1,
+                  textAlignVertical: 'center',
+                  fontFamily: WEIGHT.regular,
+                }}>
+                {item.type[0].toUpperCase() + item.type.slice(1) + '  '}
+              </Text>
+            </View>
+          ) : null}
+
+          {isTopic || isTrash ? null : (
             <View
               style={{
                 flexDirection: 'row',
@@ -235,6 +274,39 @@ export const NotebookItem = ({
                 <Icon name="more-vertical" size={SIZE.lg} color={colors.icon} />
               </TouchableOpacity>
             }>
+            {isTrash ? (
+              <>
+                <MenuItem
+                  onPress={() => {
+                    show = 'topic';
+                    hideMenu();
+                  }}
+                  textStyle={{
+                    color: colors.pri,
+
+                    fontFamily: WEIGHT.regular,
+                    fontSize: SIZE.sm,
+                  }}>
+                  <Icon name="arrow-left" size={SIZE.sm} color={colors.icon} />
+                  {'  '}Restore
+                </MenuItem>
+                <MenuItem
+                  onPress={() => {
+                    show = 'topic';
+                    hideMenu();
+                  }}
+                  textStyle={{
+                    color: colors.pri,
+
+                    fontFamily: WEIGHT.regular,
+                    fontSize: SIZE.sm,
+                  }}>
+                  <Icon name="trash" size={SIZE.sm} color={colors.icon} />
+                  {'  '}Remove
+                </MenuItem>
+              </>
+            ) : (
+              <>
                 <MenuItem
                   onPress={() => {
                     show = 'topic';
@@ -295,6 +367,9 @@ export const NotebookItem = ({
                   <Icon name="trash" size={SIZE.sm} color={colors.icon} />
                   {'  '}Delete
                 </MenuItem>
+              </>
+            )}
+
             <MenuDivider />
           </Menu>
         )}

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

@@ -8,7 +8,7 @@ import {
   SectionList,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
-import {COLOR_SCHEME, SIZE, WEIGHT, ph} from '../../common/common';
+import {COLOR_SCHEME, SIZE, WEIGHT, ph, pv} from '../../common/common';
 import * as Animatable from 'react-native-animatable';
 import NoteItem from '../NoteItem';
 import {DDS} from '../../../App';
@@ -20,10 +20,121 @@ export const NotesList = ({
   margin,
   onScroll,
   isSearch = false,
+  isGrouped = false,
+  refresh = () => {},
 }) => {
   const {colors} = useAppContext();
   const [numColumns, setNumColumns] = useState(1);
-  return (
+  return isGrouped ? (
+    <SectionList
+      sections={notes}
+      keyExtractor={(item, index) => item.dateCreated.toString()}
+      ListFooterComponent={
+        <View
+          style={{
+            height: 150,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+          <Text
+            style={{
+              color: colors.navbg,
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.regular,
+            }}>
+            - End -
+          </Text>
+        </View>
+      }
+      renderSectionHeader={({section: {title}}) => (
+        <Text
+          style={{
+            fontFamily: WEIGHT.bold,
+            fontSize: SIZE.sm,
+            color: colors.accent,
+            width: DDS.isTab ? '95%' : '90%',
+            alignSelf: 'center',
+            paddingBottom: 5,
+          }}>
+          {title}
+        </Text>
+      )}
+      onScroll={event => {
+        y = event.nativeEvent.contentOffset.y;
+        onScroll(y);
+      }}
+      ListHeaderComponent={
+        <View
+          style={{
+            marginTop: Platform.OS == 'ios' ? 145 : 185,
+          }}>
+          {notes[0] ? (
+            <>
+              <NoteItem
+                customStyle={{
+                  backgroundColor: colors.navbg,
+                  width: '100%',
+                  paddingHorizontal: '5%',
+                  paddingTop: 20,
+                  marginBottom: 10,
+                  marginTop: 20,
+                  borderBottomWidth: 0,
+                }}
+                pinned={true}
+                item={notes[0].data[0]}
+                numColumns={1}
+                index={0}
+              />
+              <NoteItem
+                customStyle={{
+                  backgroundColor: colors.navbg,
+                  width: '100%',
+                  paddingHorizontal: '5%',
+                  paddingTop: 20,
+                  marginBottom: 10,
+                  marginTop: 20,
+                  borderBottomWidth: 0,
+                }}
+                pinned={true}
+                item={notes[0].data[1]}
+                numColumns={1}
+                index={0}
+              />
+            </>
+          ) : null}
+        </View>
+      }
+      contentContainerStyle={{
+        width: '100%',
+        alignSelf: 'center',
+      }}
+      ListFooterComponent={
+        <View
+          style={{
+            height: 150,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+          <Text
+            style={{
+              color: colors.navbg,
+              fontSize: SIZE.sm,
+              fontFamily: WEIGHT.regular,
+            }}>
+            - End -
+          </Text>
+        </View>
+      }
+      renderItem={({item, index}) => (
+        <NoteItem
+          item={item}
+          refresh={() => refresh()}
+          numColumns={numColumns}
+          index={index}
+        />
+      )}
+    />
+  ) : (
     <FlatList
       data={notes}
       keyExtractor={(item, index) => item.dateCreated.toString()}
@@ -51,25 +162,9 @@ export const NotesList = ({
       ListHeaderComponent={
         <View
           style={{
-            marginTop: margin,
+            marginTop: Platform.OS == 'ios' ? 145 : 185,
           }}></View>
       }
-      numColumns={numColumns}
-      key={numColumns}
-      columnWrapperStyle={
-        numColumns === 1
-          ? null
-          : {
-              width:
-                notes.length === 1
-                  ? DDS.isTab
-                    ? '95%'
-                    : '90%'
-                  : DDS.isTab
-                  ? '45%'
-                  : '42.5%',
-            }
-      }
       contentContainerStyle={{
         width:
           numColumns === 2
@@ -134,7 +229,7 @@ export const NotesList = ({
       ListHeaderComponent={
         <View
           style={{
-            marginTop: margin,
+            marginTop: 185,
           }}></View>
       }
       numColumns={numColumns}

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

@@ -22,21 +22,16 @@ export const Search = props => {
   const inputRef = createRef();
   return (
     <Animatable.View
-      onLayout={e => {
+      transition={['marginTop', 'borderWidth', 'marginBottom', 'opacity']}
-        props.sendHeight(e.nativeEvent.layout.height);
-      }}
-      transition="opacity"
       duration={200}
       style={{
         opacity: props.hide ? 0 : 1,
+        height: 60,
+        justifyContent: 'center',
+        marginTop: props.hide ? -65 : 0,
       }}>
       <Animatable.View
-        transition={[
+        transition={['borderWidth']}
-          'marginTop',
-          'borderWidth',
-          'marginBottom',
-          'paddingVertical',
-        ]}
         duration={300}
         style={{
           flexDirection: 'row',
@@ -45,16 +40,10 @@ export const Search = props => {
           width: DDS.isTab ? '95%' : '90%',
           alignSelf: 'center',
           borderRadius: br,
+          height: '90%',
           borderWidth: props.hide ? 0 : 1.5,
           paddingHorizontal: ph,
-          paddingVertical: props.hide
-            ? 0
-            : Platform.OS == 'ios'
-            ? pv - 1
-            : pv - 8,
-          marginBottom: props.hide ? 0 : 10,
           borderColor: focus ? colors.accent : colors.nav,
-          marginTop: props.hide ? -60 : 0,
         }}>
         <TextInput
           ref={inputRef}

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

@@ -20,26 +20,17 @@ export const Header = ({
 
   return (
     <Animatable.View
-      onLayout={e => {
-        if (sendHeight) {
-          sendHeight(e.nativeEvent.layout.height);
-        }
-      }}
       transition={['minHeight', 'marginBottom']}
       duration={250}
       style={{
-        minHeight: hide ? 50 : 50,
         flexDirection: 'row',
         zIndex: 10,
+        height: 50,
+        marginTop: Platform.OS === 'ios' ? 10 : 45,
+        marginBottom: 10,
         justifyContent: 'space-between',
         alignItems: 'center',
         paddingHorizontal: DDS.isTab ? '2.5%' : '5%',
-        paddingTop: Platform.OS == 'ios' ? h * 0.02 : h * 0.06,
-        marginBottom: hide
-          ? h * 0.03
-          : Platform.OS == 'ios'
-          ? h * 0.04
-          : h * 0.04,
       }}>
       <View
         style={{
@@ -65,7 +56,7 @@ export const Header = ({
               }}
               color={colors.pri}
               name={'chevron-left'}
-              size={SIZE.xl}
+              size={SIZE.xxxl}
             />
           </TouchableOpacity>
         ) : (
@@ -87,24 +78,23 @@ export const Header = ({
               justifyContent: 'center',
               alignItems: 'flex-start',
               height: 40,
-              width: 45,
+              marginTop: 2.5,
+              width: 40,
             }}>
-            <Icon color={colors.pri} name={'menu'} size={SIZE.xl} />
+            <Icon color={colors.pri} name={'menu'} size={SIZE.xxxl - 3} />
           </TouchableOpacity>
         ) : (
           undefined
         )}
 
-        <Animatable.Text
+        <Text
-          transition="fontSize"
-          duration={300}
           style={{
-            fontSize: hide ? SIZE.xl : SIZE.xl,
+            fontSize: SIZE.xl,
             color: colors.pri,
             fontFamily: WEIGHT.bold,
           }}>
           {heading}
-        </Animatable.Text>
+        </Text>
       </View>
       <Animatable.View
         transition="opacity"

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

@@ -41,8 +41,16 @@ const Editor = ({navigation}) => {
   const [dialog, setDialog] = useState(false);
   const [isOpen, setOpen] = useState(false);
   const [sidebar, setSidebar] = useState(DDS.isTab ? true : false);
+  const [noteProps, setNoteProps] = useState({
+    tags: [],
+    locked: false,
+    pinned: false,
+    favorite: false,
+    colors: [],
+  });
   // VARIABLES
   let updateInterval = null;
+
   // FUNCTIONS
 
   const post = value => EditorWebView.postMessage(value);
@@ -53,7 +61,7 @@ const Editor = ({navigation}) => {
     }
   };
 
-  const saveNote = async () => {
+  const saveNote = async (noteProps = {}) => {
     if (!content) {
       content = {
         text: '',
@@ -62,6 +70,11 @@ const Editor = ({navigation}) => {
     }
 
     timestamp = await db.addNote({
+      tags: noteProps.tags,
+      colors: noteProps.colors,
+      pinned: noteProps.pinned,
+      favorite: noteProps.favorite,
+      locked: noteProps.locked,
       title,
       content,
       dateCreated: timestamp,
@@ -76,9 +89,20 @@ const Editor = ({navigation}) => {
         text: note.title,
       });
       title = note.title;
+
       timestamp = note.dateCreated;
       post(JSON.stringify(note.content.delta));
+      let props = {
+        tags: note.tags,
+        colors: note.colors,
+        pinned: note.pinned,
+        favorite: note.favorite,
+        locked: note.locked,
+      };
+      setNoteProps({...props});
+      console.log(note);
     }
+
     if (content && content.delta) {
       post(JSON.stringify(content.delta));
     }
@@ -212,18 +236,13 @@ const Editor = ({navigation}) => {
     );
   };
 
-  handleBackEvent = () => {
-    setDialog(true);
-    return true;
-  };
-
   // EFFECTS
 
   useEffect(() => {
-    let handleBack = BackHandler.addEventListener(
+    let handleBack = BackHandler.addEventListener('hardwareBackPress', () => {
-      'hardwareBackPress',
+      setDialog(true);
-      handleBackEvent,
+      return true;
-    );
+    });
     return () => {
       title = null;
       timestamp = null;
@@ -235,14 +254,14 @@ const Editor = ({navigation}) => {
 
   useEffect(() => {
     updateInterval = setInterval(async function() {
-      await saveNote();
+      await saveNote(noteProps);
     }, 2000);
     return () => {
-      saveNote();
+      saveNote(noteProps);
       clearInterval(updateInterval);
       updateInterval = null;
     };
-  }, []);
+  }, [noteProps]);
 
   useEffect(() => {
     return () => {
@@ -311,6 +330,12 @@ const Editor = ({navigation}) => {
       menu={
         <EditorMenu
           hide={false}
+          noteProps={noteProps}
+          updateProps={props => {
+            setNoteProps(props);
+
+            console.log(props, noteProps);
+          }}
           close={() => {
             setTimeout(() => {
               setOpen(args);

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

@@ -1,41 +1,51 @@
 import React, {useEffect, useState} from 'react';
-import {
+import {Dimensions, KeyboardAvoidingView} from 'react-native';
-  ScrollView,
+
-  View,
-  Text,
-  TouchableOpacity,
-  Dimensions,
-  Image,
-  SafeAreaView,
-  Platform,
-} from 'react-native';
-import NavigationService from '../../services/NavigationService';
-import {
-  COLOR_SCHEME,
-  SIZE,
-  br,
-  ph,
-  pv,
-  opacity,
-  FONT,
-  WEIGHT,
-  onThemeUpdate,
-  clearThemeUpdateListener,
-} from '../../common/common';
-import Icon from 'react-native-vector-icons/Ionicons';
-import {Reminder} from '../../components/Reminder';
-import {ListItem} from '../../components/ListItem';
 import {Header} from '../../components/header';
-import {useForceUpdate} from '../ListsEditor';
 import {AnimatedSafeAreaView} from '../Home';
 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';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Favorites = ({navigation}) => {
+  // Global State
+
   const {colors} = useAppContext();
 
+  // Local State
+
+  const [text, setText] = useState('');
+  const [margin, setMargin] = useState(185);
+  const [hideHeader, setHideHeader] = useState(false);
+  const [favs, setFavs] = useState([]);
+  const [buttonHide, setButtonHide] = useState(false);
+
+  // Variables
+
+  let offsetY = 0;
+  let countUp = 1;
+  let countDown = 0;
+
+  // Functions
+
+  const fetchFavs = () => {
+    let favs = db.getFavorites();
+    if (!favs) return;
+    setFavs([...favs]);
+  };
+
+  // Effects
+
+  useEffect(() => {
+    fetchFavs();
+  }, []);
+
+  // Render
+
   return (
     <AnimatedSafeAreaView
       transition="backgroundColor"
@@ -44,7 +54,66 @@ export const Favorites = ({navigation}) => {
         height: '100%',
         backgroundColor: colors.bg,
       }}>
-      <Header colors={colors} heading="Favorites" canGoBack={false} />
+      <KeyboardAvoidingView
+        style={{
+          height: '100%',
+        }}>
+        <Animatable.View
+          transition="backgroundColor"
+          duration={300}
+          style={{
+            position: 'absolute',
+            backgroundColor: colors.night ? colors.bg : colors.bg,
+            zIndex: 10,
+            width: '100%',
+          }}>
+          <Header
+            menu={true}
+            hide={hideHeader}
+            showSearch={() => {
+              setHideHeader(false);
+              countUp = 0;
+              countDown = 0;
+            }}
+            colors={colors}
+            heading="Favorites"
+            canGoBack={false}
+            customIcon="menu"
+          />
+          <Search
+            clear={() => setText('')}
+            hide={hideHeader}
+            placeholder="Search your notes"
+            value={text}
+          />
+        </Animatable.View>
+
+        <NotesList
+          margin={margin}
+          refresh={() => {
+            fetchFavs();
+          }}
+          onScroll={y => {
+            if (buttonHide) return;
+            if (y < 30) setHideHeader(false);
+            if (y > offsetY) {
+              if (y - offsetY < 150 || countDown > 0) return;
+              countDown = 1;
+              countUp = 0;
+              setHideHeader(true);
+            } else {
+              if (offsetY - y < 150 || countUp > 0) return;
+              countDown = 0;
+              countUp = 1;
+              setHideHeader(false);
+            }
+            offsetY = y;
+          }}
+          isSearch={false}
+          notes={favs}
+          keyword={''}
+        />
+      </KeyboardAvoidingView>
     </AnimatedSafeAreaView>
   );
 };

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

@@ -46,7 +46,7 @@ export const Folders = ({navigation}) => {
   const [notebooks, setNotebooks] = useState([]);
   const [hideHeader, setHideHeader] = useState(false);
   const [buttonHide, setButtonHide] = useState(false);
-  const [margin, setMargin] = useState(190);
+  const [margin, setMargin] = useState(180);
   const [numColumns, setNumColumns] = useState(1);
 
   const params = navigation.state.params;
@@ -158,7 +158,7 @@ export const Folders = ({navigation}) => {
           ListHeaderComponent={
             <View
               style={{
-                marginTop: margin,
+                marginTop: Platform.OS == 'ios' ? 145 : 185,
               }}
             />
           }

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

@@ -33,7 +33,7 @@ export const Home = ({navigation}) => {
   const [text, setText] = useState('');
   const [update, setUpdate] = useState(0);
   const [hideHeader, setHideHeader] = useState(false);
-  const [margin, setMargin] = useState(190);
+  const [margin, setMargin] = useState(180);
   const [buttonHide, setButtonHide] = useState(false);
   const [notes, setNotes] = useState([]);
   const [keyword, setKeyword] = useState('');
@@ -56,12 +56,13 @@ export const Home = ({navigation}) => {
 
   useEffect(() => {
     if (!isFocused) return;
+
     fetchNotes();
   }, [isFocused]);
 
   const fetchNotes = () => {
-    allNotes = db.getNotes();
+    allNotes = db.groupNotes();
-    setNotes(allNotes);
+    setNotes([...allNotes]);
   };
 
   useEffect(() => {
@@ -133,20 +134,6 @@ export const Home = ({navigation}) => {
     }
   };
 
-  const setMarginTop = () => {
-    return;
-    if (headerHeight < 30 || searchHeight < 30) {
-      return;
-    }
-    let toAdd = h * 0.06;
-    if (marginSet) return;
-    let a = headerHeight + searchHeight + toAdd;
-    setMargin(a);
-    headerHeight = 0;
-    searchHeight = 0;
-    marginSet = true;
-  };
-
   // Render
 
   return (
@@ -176,10 +163,6 @@ export const Home = ({navigation}) => {
             width: '100%',
           }}>
           <Header
-            sendHeight={height => {
-              headerHeight = height;
-              setMarginTop();
-            }}
             menu={true}
             hide={hideHeader}
             showSearch={() => {
@@ -194,10 +177,6 @@ export const Home = ({navigation}) => {
           />
 
           <Search
-            sendHeight={height => {
-              searchHeight = height;
-              setMarginTop();
-            }}
             clear={() => setText('')}
             hide={hideHeader}
             onChangeText={onChangeText}
@@ -212,7 +191,10 @@ export const Home = ({navigation}) => {
 
         <NotesList
           margin={margin}
-          numOfColumns={DDS.isTab ? 2 : 1}
+          isGrouped={true}
+          refresh={() => {
+            fetchNotes();
+          }}
           onScroll={y => {
             if (buttonHide) return;
             if (y < 30) setHideHeader(false);

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

@@ -48,7 +48,7 @@ export const Notebook = ({navigation}) => {
   const {colors} = useAppContext();
   const params = navigation.state.params;
   const [hideHeader, setHideHeader] = useState(false);
-  const [margin, setMargin] = useState(190);
+  const [margin, setMargin] = useState(180);
   const [buttonHide, setButtonHide] = useState(false);
   const [numColumns, setNumColumns] = useState(1);
   const [addTopic, setAddTopic] = useState(false);
@@ -161,7 +161,7 @@ export const Notebook = ({navigation}) => {
           ListHeaderComponent={
             <>
               {params.hideMore ? (
-                <View style={{marginTop: margin}} />
+                <View style={{marginTop: Platform.OS == 'ios' ? 145 : 185}} />
               ) : (
                 <AnimatedTouchableOpacity
                   transition="marginTop"
@@ -173,7 +173,7 @@ export const Notebook = ({navigation}) => {
                   style={{
                     borderWidth: 1,
                     borderRadius: 5,
-                    marginTop: margin,
+                    marginTop: Platform.OS == 'ios' ? 145 : 185,
                     width: '90%',
                     marginHorizontal: '5%',
                     paddingHorizontal: ph,
@@ -199,7 +199,7 @@ export const Notebook = ({navigation}) => {
           ListHeaderComponent={
             <View
               style={{
-                marginTop: margin + 20,
+                marginTop: Platform.OS == 'ios' ? 145 : 185 + 20,
                 flexDirection: 'row',
                 justifyContent: 'space-between',
                 width:

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

@@ -30,41 +30,43 @@ import {Header} from '../../components/header';
 import NoteItem from '../../components/NoteItem';
 import {useForceUpdate} from '../ListsEditor';
 import {useAppContext} from '../../provider/useAppContext';
+import {db, DDS} from '../../../App';
+import {NotebookItem} from '../../components/NotebookItem';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Trash = ({navigation}) => {
   const {colors} = useAppContext();
+  const [trash, setTrash] = useState([]);
+  useEffect(() => {
+    let allTrash = db.getTrash();
+
+    setTrash([...allTrash]);
+    console.log(allTrash);
+  }, []);
+
   return (
     <SafeAreaView
       style={{
         backgroundColor: colors.bg,
         height: '100%',
       }}>
-      <Header colors={colors} heading="Trash" canGoBack={false} />
+      <Header colors={colors} heading="Trash" canGoBack={false} menu={true} />
       <FlatList
-        numColumns={2}
+        numColumns={1}
-        columnWrapperStyle={{
-          width: '45%',
-          marginHorizontal: '2.5%',
-        }}
         style={{
-          width: '100%',
+          width: DDS.isTab ? '95%' : '90%',
+          alignSelf: 'center',
         }}
-        data={[
+        data={trash}
-          {
+        renderItem={({item, index}) =>
-            title: 'my note',
+          item.type === 'note' ? (
-            headline: 'my simple not that i just deleted. please restore.',
+            <NoteItem item={item} index={index} isTrash={true} />
-            dateCreated: Date.now(),
+          ) : (
-          },
+            <NotebookItem item={item} isTrash={true} index={index} />
-          {
+          )
-            title: 'my note',
+        }
-            headline: 'my simple not that i just deleted. please restore.',
-            dateCreated: Date.now(),
-          },
-        ]}
-        renderItem={({item, index}) => <NoteItem item={item} />}
       />
       <TouchableOpacity
         activeOpacity={opacity}
@@ -87,7 +89,7 @@ export const Trash = ({navigation}) => {
         <Text
           style={{
             fontSize: SIZE.md,
-            fontFamily: WEIGHT.semibold,
+            fontFamily: WEIGHT.regular,
             color: 'white',
           }}>
           {'  '}Clear all Trash