refactor

apps/mobile/App.js

@@ -36,13 +36,10 @@ let editorRef;
 const App = () => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
-  // Local State
 
   const [init, setInit] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
 
-  // Effects
-
   const openSidebar = () => {
     DDS.isTab ? null : sideMenuRef.openMenu(true);
   };
@@ -58,28 +55,6 @@ const App = () => {
     DDS.isTab ? null : sideMenuRef.setGestureEnabled(true);
   };
 
-  useEffect(() => {
-    eSubscribeEvent(eOpenSideMenu, openSidebar);
-    eSubscribeEvent(eCloseSideMenu, closeSidebar);
-
-    eSubscribeEvent(eDisableGestures, disableGestures);
-    eSubscribeEvent(eEnableGestures, enableGestures);
-
-    eSubscribeEvent(eOpenFullscreenEditor, showFullScreenEditor);
-    eSubscribeEvent(eCloseFullscreenEditor, closeFullScreenEditor);
-
-    return () => {
-      eUnSubscribeEvent(eOpenFullscreenEditor, showFullScreenEditor);
-      eUnSubscribeEvent(eCloseFullscreenEditor, closeFullScreenEditor);
-
-      eUnSubscribeEvent(eOpenSideMenu, openSidebar);
-      eUnSubscribeEvent(eCloseSideMenu, closeSidebar);
-
-      eUnSubscribeEvent(eDisableGestures, disableGestures);
-      eUnSubscribeEvent(eEnableGestures, enableGestures);
-    };
-  }, []);
-
   const showFullScreenEditor = () => {
     setFullscreen(true);
     editorRef.setNativeProps({
@@ -117,6 +92,28 @@ const App = () => {
     };
   }, []);
 
+  useEffect(() => {
+    eSubscribeEvent(eOpenSideMenu, openSidebar);
+    eSubscribeEvent(eCloseSideMenu, closeSidebar);
+
+    eSubscribeEvent(eDisableGestures, disableGestures);
+    eSubscribeEvent(eEnableGestures, enableGestures);
+
+    eSubscribeEvent(eOpenFullscreenEditor, showFullScreenEditor);
+    eSubscribeEvent(eCloseFullscreenEditor, closeFullScreenEditor);
+
+    return () => {
+      eUnSubscribeEvent(eOpenFullscreenEditor, showFullScreenEditor);
+      eUnSubscribeEvent(eCloseFullscreenEditor, closeFullScreenEditor);
+
+      eUnSubscribeEvent(eOpenSideMenu, openSidebar);
+      eUnSubscribeEvent(eCloseSideMenu, closeSidebar);
+
+      eUnSubscribeEvent(eDisableGestures, disableGestures);
+      eUnSubscribeEvent(eEnableGestures, enableGestures);
+    };
+  }, []);
+
   useEffect(() => {
     if (Platform.OS === 'android') {
       StatusBar.setBackgroundColor('transparent');
@@ -136,11 +133,8 @@ const App = () => {
   async function updateAppTheme(colors = colors) {
     let newColors = await getColorScheme(colors);
     dispatch({type: ACTIONS.THEME, colors: newColors});
-    //setColors(newColors);
   }
 
-  // Render
-
   if (!init) {
     return <></>;
   }

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

@@ -12,8 +12,12 @@ import * as Animatable from 'react-native-animatable';
 import Icon from 'react-native-vector-icons/Feather';
 import {br, opacity, pv, SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
-import {getElevation, w} from '../../utils/utils';
-import {DDS} from '../../../App';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
+import {eScrollEvent} from '../../services/events';
+import {getElevation} from '../../utils/utils';
+import {Header} from '../header';
+import {Search} from '../SearchInput';
+import SelectionHeader from '../SelectionHeader';
 export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
 );
@@ -27,13 +31,71 @@ export const Container = ({
   bottomButtonOnPress,
   bottomButtonText,
   noBottomButton = false,
+  data = [],
 }) => {
   // State
   const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors, selectionMode, searchResults} = state;
+  const [text, setText] = useState('');
 
+  const [hideHeader, setHideHeader] = useState(false);
   const [buttonHide, setButtonHide] = useState(false);
 
+  let offsetY = 0;
+  let countUp = 1;
+  let countDown = 0;
+  let searchResult = [];
+
+  const onScroll = y => {
+    if (searchResults.length > 0) 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;
+  };
+
+  const onChangeText = value => {
+    //setText(value);
+  };
+  const onSubmitEditing = async () => {
+    if (!text || text.length < 1) {
+      clearSearch();
+    } else {
+      //setKeyword(text);
+      searchResult = await db.searchNotes(text);
+
+      if (searchResult && searchResult.length > 0) {
+        //setSearchResults([...searchResult]);
+      } else {
+        ToastEvent.show('No search results found', 'error', 3000, () => {}, '');
+      }
+    }
+  };
+
+  const onBlur = () => {
+    if (text && text.length < 1) {
+      clearSearch();
+    }
+  };
+
+  const onFocus = () => {
+    //setSearch(false);
+  };
+
+  const clearSearch = () => {
+    searchResult = null;
+    //setSearchResults([...[]]);
+  };
+
   useEffect(() => {
     Keyboard.addListener('keyboardDidShow', () => {
       setTimeout(() => {
@@ -58,6 +120,15 @@ export const Container = ({
       });
     };
   }, []);
+
+  useEffect(() => {
+    eSubscribeEvent(eScrollEvent, onScroll);
+
+    return () => {
+      eUnSubscribeEvent(eScrollEvent, onScroll);
+    };
+  });
+
   // Render
 
   return (
@@ -75,6 +146,55 @@ export const Container = ({
         style={{
           height: '100%',
         }}>
+        <SelectionHeader />
+
+        <Animatable.View
+          animation="fadeIn"
+          useNativeDriver={true}
+          duration={600}
+          delay={700}>
+          <Animatable.View
+            transition={['backgroundColor', 'opacity', 'height']}
+            duration={300}
+            style={{
+              position: 'absolute',
+              backgroundColor: colors.bg,
+              zIndex: 10,
+              height: selectionMode ? 0 : null,
+              opacity: selectionMode ? 0 : 1,
+              width: '100%',
+            }}>
+            <Header
+              menu
+              hide={hideHeader}
+              verticalMenu
+              showSearch={() => {
+                setHideHeader(false);
+                countUp = 0;
+                countDown = 0;
+              }}
+              colors={colors}
+              heading={'Home'}
+              canGoBack={false}
+              customIcon="menu"
+            />
+
+            {data[0] ? (
+              <Search
+                clear={() => setText('')}
+                hide={hideHeader}
+                onChangeText={onChangeText}
+                onSubmitEditing={onSubmitEditing}
+                placeholder="Search your notes"
+                onBlur={onBlur}
+                onFocus={onFocus}
+                clearSearch={clearSearch}
+                value={text}
+              />
+            ) : null}
+          </Animatable.View>
+        </Animatable.View>
+
         {children}
 
         {noBottomButton ? null : (

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

@@ -14,12 +14,10 @@ import {slideLeft, slideRight} from '../../utils/animations';
 import {NotesPlaceHolder} from '../ListPlaceholders';
 import NoteItem from '../NoteItem';
 import SelectionWrapper from '../SelectionWrapper';
-let sectionListRef;
+
 export const NotesList = ({
-  onScroll,
   isSearch = false,
   isGrouped = false,
-  refresh = () => {},
   searchResults,
 }) => {
   const [state, dispatch] = useTracked();
@@ -57,9 +55,9 @@ export const NotesList = ({
 
   const _onScroll = event => {
     if (!event) return;
-
     y = event.nativeEvent.contentOffset.y;
-    onScroll(y);
+
+    eSendEvent(eScrollEvent, y);
   };
 
   const _ListHeaderComponent = (

apps/mobile/src/services/events.js

@@ -53,3 +53,5 @@ export const eShowToast = '525';
 export const eHideToast = '526';
 
 export const eThemeUpdated = '527';
+
+export const eScrollEvent = '528';

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

@@ -1,17 +1,15 @@
-import React, {useEffect, useState} from 'react';
-import {DeviceEventEmitter, SafeAreaView} from 'react-native';
+import React, {useEffect} from 'react';
+import {SafeAreaView} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import {useIsFocused} from 'react-navigation-hooks';
-import {db, DDS} from '../../../App';
+import {DDS} from '../../../App';
 import Container from '../../components/Container';
-import {Header} from '../../components/header';
 import {NotesList} from '../../components/NotesList';
-import {Search} from '../../components/SearchInput';
-import SelectionHeader from '../../components/SelectionHeader';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
+import {eSendEvent} from '../../services/eventManager';
 import NavigationService from '../../services/NavigationService';
-import {SideMenuEvent, ToastEvent} from '../../utils/utils';
+import {SideMenuEvent} from '../../utils/utils';
 
 export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
@@ -20,89 +18,21 @@ export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
 export const Home = ({navigation}) => {
   // State
   const [state, dispatch] = useTracked();
-  const {colors, selectionMode, notes} = state;
-  const [text, setText] = useState('');
-  const [hideHeader, setHideHeader] = useState(false);
-  const [keyword, setKeyword] = useState('');
-  const [searchResults, setSearchResults] = useState([]);
-  const [loading, setLoading] = useState([]);
+  const {notes, searchResults, keyword} = state;
   const isFocused = useIsFocused();
-  // Variables
-
-  let offsetY = 0;
-  let countUp = 1;
-  let countDown = 0;
-  let searchResult = null;
 
   // Effects
 
   useEffect(() => {
     dispatch({type: ACTIONS.NOTES});
-    setTimeout(() => {
-      setLoading(false);
-    }, 2500);
   }, [isFocused]);
 
-  // Functions
-
-  const onChangeText = value => {
-    setText(value);
-  };
-  const onSubmitEditing = async () => {
-    if (!text || text.length < 1) {
-      clearSearch();
-    } else {
-      setKeyword(text);
-      searchResult = await db.searchNotes(text);
-
-      if (searchResult && searchResult.length > 0) {
-        setSearchResults([...searchResult]);
-      } else {
-        ToastEvent.show('No search results found', 'error', 3000, () => {}, '');
-      }
-    }
-  };
-
-  const onBlur = () => {
-    if (text && text.length < 1) {
-      clearSearch();
-    }
-  };
-
-  const onFocus = () => {
-    //setSearch(false);
-  };
-
-  const clearSearch = () => {
-    searchResult = null;
-    setSearchResults([...[]]);
-  };
-
-  const onScroll = y => {
-    if (searchResults.length > 0) 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;
-  };
-
   // Render
 
   return (
     <Container
       bottomButtonText="Add a new note"
       bottomButtonOnPress={() => {
-        dispatch({type: ACTIONS.NOTES});
-
         if (DDS.isTab) {
           eSendEvent(eOnLoadNote, {type: 'new'});
         } else {
@@ -110,59 +40,10 @@ export const Home = ({navigation}) => {
           SideMenuEvent.disable();
           NavigationService.navigate('Editor');
         }
-      }}>
-      <SelectionHeader />
-
-      <Animatable.View
-        animation="fadeIn"
-        useNativeDriver={true}
-        duration={600}
-        delay={700}>
-        <Animatable.View
-          transition={['backgroundColor', 'opacity', 'height']}
-          duration={300}
-          style={{
-            position: 'absolute',
-            backgroundColor: colors.bg,
-            zIndex: 10,
-            height: selectionMode ? 0 : null,
-            opacity: selectionMode ? 0 : 1,
-            width: '100%',
-          }}>
-          <Header
-            menu
-            hide={hideHeader}
-            verticalMenu
-            showSearch={() => {
-              setHideHeader(false);
-              countUp = 0;
-              countDown = 0;
       }}
-            colors={colors}
-            heading={'Home'}
-            canGoBack={false}
-            customIcon="menu"
-          />
-
-          {notes[0] ? (
-            <Search
-              clear={() => setText('')}
-              hide={hideHeader}
-              onChangeText={onChangeText}
-              onSubmitEditing={onSubmitEditing}
-              placeholder="Search your notes"
-              onBlur={onBlur}
-              onFocus={onFocus}
-              clearSearch={clearSearch}
-              value={text}
-            />
-          ) : null}
-        </Animatable.View>
-      </Animatable.View>
-
+      data={notes}>
       <NotesList
         isGrouped={true}
-        onScroll={onScroll}
         isSearch={searchResults.length > 0 ? true : false}
         searchResults={searchResults.length > 0 ? searchResults : null}
         keyword={keyword}