fix: improve sidebar performance

apps/mobile/App.js

@@ -11,6 +11,7 @@ import {
   Platform,
   Text,
   Keyboard,
+  Animated,
 } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import {
@@ -29,14 +30,16 @@ import {
 } from './src/common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
 import ActionButton from 'react-native-action-button';
-import Storage from 'notes-core/api/database';
-import StorageInterface from './src/utils/storage';
 import * as Animatable from 'react-native-animatable';
 import {h, w} from './src/utils/utils';
 import {Toast} from './src/components/Toast';
 import {Menu} from './src/components/Menu';
 import SideMenu from 'react-native-side-menu';
 import {useForceUpdate} from './src/views/ListsEditor';
+import Storage from 'notes-core/api/database';
+import StorageInterface from './src/utils/storage';
+export const db = new Storage(StorageInterface);
+
 const App = () => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const [fab, setFab] = useState(true);
@@ -44,6 +47,8 @@ const App = () => {
   const [isOpen, setOpen] = useState(false);
   const [disableGestures, setDisableGesture] = useState(false);
   const [buttonHide, setButtonHide] = useState(false);
+  const [isIntialized, setIsInitialized] = useState(false);
+
   useEffect(() => {
     let theme = COLOR_SCHEME_LIGHT;
     AsyncStorage.getItem('accentColor').then(accentColor => {
@@ -162,6 +167,15 @@ const App = () => {
     };
   }, []);
 
+  useEffect(() => {
+    db.init().then(() => {
+      setIsInitialized(true);
+    });
+  });
+
+  if (!isIntialized) {
+    return <View />;
+  }
   return (
     <View
       style={{
@@ -279,5 +293,3 @@ const App = () => {
 };
 
 export default App;
-
-export const storage = new Storage(StorageInterface);

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

@@ -26,7 +26,7 @@ import Icon from 'react-native-vector-icons/Feather';
 import {getElevation, h, w, timeSince, ToastEvent} from '../../utils/utils';
 import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {useForceUpdate} from '../../views/ListsEditor';
-import {storage} from '../../../App';
+import {db} from '../../../App';
 
 let refs = [];
 
@@ -102,7 +102,7 @@ export const AddNotebookDialog = ({visible, close}) => {
     if (!title)
       return ToastEvent.show('Title is required', 'error', 3000, () => {}, '');
 
-    await storage.addNotebook({
+    await db.addNotebook({
       title,
       description,
       topics,

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

@@ -26,7 +26,7 @@ import Icon from 'react-native-vector-icons/Feather';
 import {getElevation, h, w, timeSince, ToastEvent} from '../../utils/utils';
 import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {useForceUpdate} from '../../views/ListsEditor';
-import {storage} from '../../../App';
+import {db} from '../../../App';
 
 export const AddTopicDialog = ({
   visible,
@@ -44,7 +44,7 @@ export const AddTopicDialog = ({
     if (!title)
       return ToastEvent.show('Title is required', 'error', 3000, () => {}, '');
     console.log(notebookID, title);
-    storage.addTopicToNotebook(notebookID, title);
+    db.addTopicToNotebook(notebookID, title);
     ToastEvent.show('New topic added', 'success', 3000, () => {}, '');
     close(true);
   };

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

@@ -143,6 +143,7 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
                 activeOpacity={opacity}
                 onPress={() => {
                   item.close === false ? null : close();
+
                   item.func();
                 }}
                 style={{

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

@@ -28,7 +28,7 @@ import NavigationService from '../../services/NavigationService';
 import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
 import {Dialog} from '../Dialog';
 import {VaultDialog} from '../VaultDialog';
-import {storage} from '../../../App';
+import {db} from '../../../App';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -64,7 +64,7 @@ const NoteItem = props => {
   };
 
   const deleteItem = async () => {
-    await storage.deleteNotes([item]);
+    await db.deleteNotes([item]);
     ToastEvent.show('Note moved to trash', 'success', 3000);
     setVisible(false);
     props.refresh();

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

@@ -5,7 +5,7 @@ import Menu, {MenuItem, MenuDivider} from 'react-native-material-menu';
 import {COLOR_SCHEME, SIZE, ph, pv, opacity, WEIGHT} from '../../common/common';
 import Icon from 'react-native-vector-icons/Feather';
 import {w, ToastEvent} from '../../utils/utils';
-import {storage} from '../../../App';
+import {db} from '../../../App';
 import {Dialog} from '../Dialog';
 import {AddTopicDialog} from '../AddTopicDialog';
 export const NotebookItem = ({
@@ -27,10 +27,10 @@ export const NotebookItem = ({
 
   const deleteItem = async () => {
     if (isTopic) {
-      await storage.deleteTopicFromNotebook(notebookID, item.title);
+      await db.deleteTopicFromNotebook(notebookID, item.title);
       ToastEvent.show('Topic moved to trash', 'success', 3000);
     } else {
-      await storage.deleteNotebooks([item]);
+      await db.deleteNotebooks([item]);
       ToastEvent.show('Notebook moved to trash', 'success', 3000);
     }
     refresh();
@@ -277,7 +277,7 @@ export const NotebookItem = ({
           <TouchableOpacity
             activeOpacity={opacity}
             onPress={async () => {
-              await storage.addNoteToTopic(
+              await db.addNoteToTopic(
                 notebookID,
                 item.title,
                 noteToMove.dateCreated,

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

@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import {View, Text, FlatList, Platform} from 'react-native';
 
 import {COLOR_SCHEME, SIZE, WEIGHT} from '../../common/common';
-
+import * as Animatable from 'react-native-animatable';
 import NoteItem from '../NoteItem';
 
 export const NotesList = ({
@@ -43,6 +43,9 @@ export const NotesList = ({
         <>
           {isSearch ? (
             <Text
+              transition="marginTop"
+              delay={200}
+              duration={200}
               style={{
                 fontSize: SIZE.lg,
                 marginTop: margin,
@@ -60,7 +63,7 @@ export const NotesList = ({
               </Text>
             </Text>
           ) : (
-            <View style={{marginTop: margin}} />
+            <View style={{marginTop: margin}}></View>
           )}
         </>
       }

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

@@ -26,7 +26,7 @@ import Icon from 'react-native-vector-icons/Feather';
 import {getElevation, h, w, timeSince, ToastEvent} from '../../utils/utils';
 import {FlatList, TextInput} from 'react-native-gesture-handler';
 import {useForceUpdate} from '../../views/ListsEditor';
-import {storage} from '../../../App';
+import {db} from '../../../App';
 
 let refs = [];
 

apps/mobile/src/services/NavigationService.js

@@ -23,6 +23,25 @@ import Notebook from '../views/Notebook';
 import Move from '../views/Move';
 import AccountSettings from '../views/AccountSettings';
 
+const fade = props => {
+  const {position, scene} = props;
+
+  const index = scene.index;
+
+  const translateX = 0;
+  const translateY = 0;
+
+  const opacity = position.interpolate({
+    inputRange: [index - 0.7, index, index + 0.7],
+    outputRange: [0.3, 1, 0.3],
+  });
+
+  return {
+    opacity,
+    transform: [{translateX}, {translateY}],
+  };
+};
+
 const TopLevelNavigator = createStackNavigator(
   {
     Home: {
@@ -88,6 +107,11 @@ const TopLevelNavigator = createStackNavigator(
     defaultNavigationOptions: {
       gesturesEnabled: false,
     },
+    transitionConfig: () => ({
+      screenInterpolator: props => {
+        return fade(props);
+      },
+    }),
   },
 );
 

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

@@ -29,7 +29,7 @@ import WebView from 'react-native-webview';
 import Icon from 'react-native-vector-icons/Feather';
 import {useForceUpdate} from '../ListsEditor';
 import {NavigationEvents} from 'react-navigation';
-import {storage} from '../../../App';
+import {db} from '../../../App';
 import {SideMenuEvent} from '../../utils/utils';
 import {Dialog} from '../../components/Dialog';
 
@@ -104,7 +104,7 @@ const Editor = ({navigation}) => {
       };
     }
 
-    timestamp = await storage.addNote({
+    timestamp = await db.addNote({
       title,
       content,
       dateCreated: timestamp,

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

@@ -33,7 +33,7 @@ import {useForceUpdate} from '../ListsEditor';
 import {AddNotebookDialog} from '../../components/AddNotebookDialog';
 import {NotebookItem} from '../../components/NotebookItem';
 import {Search} from '../../components/SearchInput';
-import {storage} from '../../../App';
+import {db} from '../../../App';
 import {Header} from '../../components/header';
 import {AnimatedSafeAreaView} from '../Home';
 import * as Animatable from 'react-native-animatable';
@@ -55,6 +55,7 @@ export const Folders = ({navigation}) => {
   let marginSet = false;
 
   const setMarginTop = () => {
+    return;
     if (headerHeight < 30 || searchHeight < 30) {
       return;
     }
@@ -68,8 +69,8 @@ export const Folders = ({navigation}) => {
   };
 
   useEffect(() => {
-    setNotebooks(storage.getNotebooks());
-    console.log(storage.getNotebooks());
+    setNotebooks(db.getNotebooks());
+    console.log(db.getNotebooks());
   }, []);
 
   useEffect(() => {
@@ -101,7 +102,7 @@ export const Folders = ({navigation}) => {
         close={newNotes => {
           setAddNotebook(false);
           if (newNotes) {
-            setNotebooks(storage.getNotebooks());
+            setNotebooks(db.getNotebooks());
           }
         }}
       />
@@ -164,6 +165,8 @@ export const Folders = ({navigation}) => {
           }}
           ListHeaderComponent={
             <View
+              transition="marginTop"
+              duration={200}
               style={{
                 marginTop: margin,
               }}
@@ -177,7 +180,7 @@ export const Folders = ({navigation}) => {
               isMove={params.isMove}
               noteToMove={params.note}
               item={item}
-              refresh={() => setNotebooks(storage.getNotebooks())}
+              refresh={() => setNotebooks(db.getNotebooks())}
               index={index}
               colors={colors}
             />

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

@@ -25,7 +25,7 @@ import {w, h} from '../../utils/utils';
 import {Header} from '../../components/header';
 import {NavigationEvents} from 'react-navigation';
 import {NotesList} from '../../components/NotesList';
-import {storage} from '../../../App';
+import {db} from '../../../App';
 import Icon from 'react-native-vector-icons/Feather';
 import NavigationService from '../../services/NavigationService';
 import {useForceUpdate} from '../ListsEditor';
@@ -42,7 +42,7 @@ export const Home = ({navigation}) => {
   const [text, setText] = useState('');
   const [update, setUpdate] = useState(0);
   const [hideHeader, setHideHeader] = useState(false);
-  const [margin, setMargin] = useState(150);
+  const [margin, setMargin] = useState(190);
   const [buttonHide, setButtonHide] = useState(false);
   const [notes, setNotes] = useState([]);
   const [keyword, setKeyword] = useState('');
@@ -76,11 +76,8 @@ export const Home = ({navigation}) => {
   }, []);
 
   const fetchNotes = () => {
-    setTimeout(() => {
-      allNotes = storage.getNotes();
-
+    allNotes = db.getNotes();
     setNotes(allNotes);
-    }, 0);
   };
 
   useEffect(() => {
@@ -120,7 +117,7 @@ export const Home = ({navigation}) => {
     } else {
       setSearch(true);
       setKeyword(text);
-      searchResults = await storage.searchNotes(text);
+      searchResults = await db.searchNotes(text);
       if (searchResults) {
         setNotes(searchResults);
       }
@@ -153,6 +150,7 @@ export const Home = ({navigation}) => {
   };
 
   const setMarginTop = () => {
+    return;
     if (headerHeight < 30 || searchHeight < 30) {
       return;
     }

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

@@ -38,13 +38,15 @@ import * as Animatable from 'react-native-animatable';
 import {NavigationEvents} from 'react-navigation';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
-
+const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
+  TouchableOpacity,
+);
 export const Notebook = ({navigation}) => {
   // State
   const [colors, setColors] = useState(COLOR_SCHEME);
   const params = navigation.state.params;
   const [hideHeader, setHideHeader] = useState(false);
-  const [margin, setMargin] = useState(150);
+  const [margin, setMargin] = useState(190);
   const [buttonHide, setButtonHide] = useState(false);
   const [addTopic, setAddTopic] = useState(false);
   const forceUpdate = useForceUpdate();
@@ -70,6 +72,7 @@ export const Notebook = ({navigation}) => {
 
   // Functions
   const setMarginTop = () => {
+    return;
     console.log(params.notebook);
     if (headerHeight < 30 || searchHeight < 30) {
       return;
@@ -167,7 +170,9 @@ export const Notebook = ({navigation}) => {
               {params.hideMore ? (
                 <View style={{marginTop: margin}} />
               ) : (
-                <TouchableOpacity
+                <AnimatedTouchableOpacity
+                  transition="marginTop"
+                  duration={200}
                   activeOpacity={opacity}
                   onPress={() => {
                     setAddNotebook(true);
@@ -194,7 +199,7 @@ export const Notebook = ({navigation}) => {
                     }}>
                     View All Notes
                   </Text>
-                </TouchableOpacity>
+                </AnimatedTouchableOpacity>
               )}
             </>
           }

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

@@ -31,7 +31,7 @@ import {Search} from '../../components/SearchInput';
 import {useForceUpdate} from '../ListsEditor';
 import {NotesList} from '../../components/NotesList';
 import {AnimatedSafeAreaView} from '../Home';
-import {storage} from '../../../App';
+import {db} from '../../../App';
 import * as Animatable from 'react-native-animatable';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -70,7 +70,7 @@ export const Notes = ({navigation}) => {
   }, []);
 
   useEffect(() => {
-    let allNotes = storage.getTopic(params.notebookID, params.title);
+    let allNotes = db.getTopic(params.notebookID, params.title);
     if (allNotes && allNotes.length > 0) {
       setNotes(allNotes);
     }