refactor

apps/mobile/App.js

@@ -46,7 +46,6 @@ const App = () => {
       db.init().then(async () => {
         let user = await db.user.get();
         dispatch({type: ACTIONS.USER, user: user});
-
         setInit(true);
       });
     });
@@ -78,6 +77,7 @@ const App = () => {
 
       dispatch({type: ACTIONS.SETTINGS, settings: {...s}});
     }
+
     dispatch({type: ACTIONS.THEME, colors: newColors});
   }
 

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

@@ -1,310 +0,0 @@
-import React, {useEffect, useState, createRef} from 'react';
-import {
-  ActivityIndicator,
-  FlatList,
-  Platform,
-  RefreshControl,
-  SectionList,
-  Text,
-  View,
-} from 'react-native';
-import {SIZE, WEIGHT} from '../../common/common';
-import {useTracked} from '../../provider';
-import {ACTIONS} from '../../provider/actions';
-import {eSendEvent} from '../../services/eventManager';
-import {eScrollEvent, eClearSearch} from '../../services/events';
-import {ToastEvent, hexToRGBA, DDS, db} from '../../utils/utils';
-import {NotesPlaceHolder} from '../ListPlaceholders';
-import NoteItem from '../NoteItem';
-import SelectionWrapper from '../SelectionWrapper';
-import {useIsFocused} from 'react-navigation-hooks';
-import {useSafeArea} from 'react-native-safe-area-context';
-
-const sectionListRef = createRef();
-export const NotesList = ({isGrouped = false}) => {
-  const [state, dispatch] = useTracked();
-  const {colors, selectionMode, currentEditingNote, loading, notes} = state;
-  const isFocused = useIsFocused();
-  const [refreshing, setRefreshing] = useState(false);
-  const searchResults = {...state.searchResults};
-  const insets = useSafeArea();
-  const _renderItem = ({item, index}) => (
-    <SelectionWrapper
-      index={index}
-      currentEditingNote={
-        currentEditingNote === item.id ? currentEditingNote : null
-      }
-      item={item}>
-      <NoteItem
-        colors={colors}
-        customStyle={{
-          width: selectionMode ? '90%' : '100%',
-          marginHorizontal: 0,
-        }}
-        currentEditingNote={
-          currentEditingNote === item.id ? currentEditingNote : null
-        }
-        selectionMode={selectionMode}
-        onLongPress={() => {
-          if (!selectionMode) {
-            dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
-          }
-          dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
-        }}
-        update={() => {
-          dispatch({type: ACTIONS.NOTES});
-        }}
-        item={item}
-        index={index}
-      />
-    </SelectionWrapper>
-  );
-
-  const _onScroll = event => {
-    if (!event) return;
-    let y = event.nativeEvent.contentOffset.y;
-
-    eSendEvent(eScrollEvent, y);
-  };
-
-  const _ListHeaderComponent = (
-    <View
-      style={{
-        marginTop:
-          Platform.OS == 'ios'
-            ? notes[0] && !selectionMode
-              ? 135
-              : 135 - 60
-            : notes[0] && !selectionMode
-            ? 135
-            : 135 - 60 - insets.top,
-      }}>
-      <PinnedItems />
-    </View>
-  );
-
-  const _ListFooterComponent = notes[0] ? (
-    <View
-      style={{
-        height: 150,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <Text
-        style={{
-          color: colors.navbg,
-          fontSize: SIZE.sm,
-          fontFamily: WEIGHT.regular,
-        }}>
-        - End -
-      </Text>
-    </View>
-  ) : null;
-
-  const _ListEmptyComponent = (
-    <View
-      style={{
-        height: '80%',
-        width: '100%',
-        alignItems: 'center',
-        alignSelf: 'center',
-        justifyContent: 'center',
-        opacity: 0.8,
-      }}>
-      {loading ? (
-        <ActivityIndicator size={SIZE.xl} color={colors.accent} />
-      ) : (
-        <>
-          <NotesPlaceHolder colors={colors} />
-          <Text
-            style={{
-              color: colors.icon,
-              fontSize: SIZE.sm,
-              fontFamily: WEIGHT.regular,
-              marginTop: 35,
-            }}>
-            Notes you write will appear here.
-          </Text>
-        </>
-      )}
-    </View>
-  );
-
-  const _renderSectionHeader = ({section: {title}}) => (
-    <Text
-      style={{
-        fontFamily: WEIGHT.bold,
-        fontSize: SIZE.xs + 1,
-        color: colors.accent,
-        paddingHorizontal: 12,
-        width: '100%',
-        alignSelf: 'center',
-        marginTop: 15,
-        paddingBottom: 5,
-      }}>
-      {title}
-    </Text>
-  );
-
-  const _ListHeaderComponent_S = (
-    <View
-      style={{
-        marginTop:
-          Platform.OS == 'ios'
-            ? notes[0] && !selectionMode
-              ? 135
-              : 135 - 60
-            : notes[0] && !selectionMode
-            ? 135
-            : 135 - 60 - insets.top,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 12,
-      }}>
-      <Text
-        style={{
-          fontFamily: WEIGHT.bold,
-          color: colors.accent,
-          fontSize: SIZE.xs,
-        }}>
-        Search Results for {searchResults.keyword}
-      </Text>
-      <Text
-        onPress={() => {
-          eSendEvent(eClearSearch);
-        }}
-        style={{
-          fontFamily: WEIGHT.regular,
-          color: colors.errorText,
-          fontSize: SIZE.xs,
-        }}>
-        Clear
-      </Text>
-    </View>
-  );
-
-  const _listKeyExtractor = (item, index) => item.id.toString();
-
-  return searchResults.type !== 'notes' && isFocused ? (
-    <SectionList
-      ref={sectionListRef}
-      sections={notes}
-      refreshControl={
-        <RefreshControl
-          tintColor={colors.accent}
-          colors={[colors.accent]}
-          progressViewOffset={165}
-          onRefresh={async () => {
-            setRefreshing(true);
-            try {
-              await db.sync();
-              setRefreshing(false);
-              ToastEvent.show('Sync Complete', 'success');
-            } catch (e) {
-              setRefreshing(false);
-              ToastEvent.show(e.message, 'error');
-            }
-            dispatch({type: ACTIONS.NOTES});
-            dispatch({type: ACTIONS.PINNED});
-            let user = await db.user.get();
-            dispatch({type: ACTIONS.USER, user: user});
-          }}
-          refreshing={refreshing}
-        />
-      }
-      keyExtractor={_listKeyExtractor}
-      renderSectionHeader={_renderSectionHeader}
-      onScroll={_onScroll}
-      ListEmptyComponent={_ListEmptyComponent}
-      ListHeaderComponent={_ListHeaderComponent}
-      contentContainerStyle={{
-        width: '100%',
-        alignSelf: 'center',
-        minHeight: '100%',
-      }}
-      style={{
-        height: '100%',
-      }}
-      removeClippedSubviews={true}
-      ListFooterComponent={_ListFooterComponent}
-      renderItem={_renderItem}
-    />
-  ) : (
-    <FlatList
-      data={searchResults.type === 'notes' ? searchResults.results : []}
-      keyExtractor={_listKeyExtractor}
-      ListFooterComponent={_ListFooterComponent}
-      onScroll={_onScroll}
-      ListHeaderComponent={_ListHeaderComponent_S}
-      contentContainerStyle={{
-        width: '100%',
-        alignSelf: 'center',
-        minHeight: '100%',
-      }}
-      style={{
-        height: '100%',
-      }}
-      renderItem={_renderItem}
-    />
-  );
-};
-
-const PinnedItems = () => {
-  const [state, dispatch] = useTracked();
-  const {pinned, colors, selectionMode} = state;
-
-  useEffect(() => {
-    dispatch({type: ACTIONS.PINNED});
-  }, []);
-
-  return (
-    <>
-      <FlatList
-        data={pinned.notes}
-        keyExtractor={(item, index) => item.id.toString()}
-        renderItem={({item, index}) =>
-          item.type === 'note' ? (
-            <SelectionWrapper
-              index={index}
-              currentEditingNote={false}
-              pinned={true}
-              background={
-                Platform.ios
-                  ? hexToRGBA(colors.accent + '19')
-                  : hexToRGBA(colors.shade)
-              }
-              item={item}>
-              <NoteItem
-                colors={colors}
-                customStyle={{
-                  width: selectionMode ? '90%' : '100%',
-                  marginHorizontal: 0,
-                  paddingTop: 15,
-                  paddingRight: 18,
-                  marginBottom: 10,
-                  marginTop: 15,
-                  borderBottomWidth: 0,
-                }}
-                currentEditingNote={false}
-                pinned={true}
-                selectionMode={selectionMode}
-                onLongPress={() => {
-                  if (!selectionMode) {
-                    dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
-                  }
-                  dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
-                }}
-                update={() => {
-                  dispatch({type: ACTIONS.NOTES});
-                }}
-                item={item}
-                index={index}
-              />
-            </SelectionWrapper>
-          ) : null
-        }
-      />
-    </>
-  );
-};

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

@@ -1,5 +1,12 @@
-import React from 'react';
-import {FlatList, Platform, RefreshControl, Text, View} from 'react-native';
+import React, {createRef} from 'react';
+import {
+  FlatList,
+  Platform,
+  RefreshControl,
+  Text,
+  View,
+  SectionList,
+} from 'react-native';
 import {SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
@@ -9,7 +16,8 @@ import {hexToRGBA} from '../../utils/utils';
 import {NotebookItem} from '../NotebookItem';
 import SelectionWrapper from '../SelectionWrapper';
 import {useSafeArea} from 'react-native-safe-area-context';
-
+import NoteItem from '../NoteItem';
+const sectionListRef = createRef();
 const SimpleList = ({
   data,
   type,
@@ -23,6 +31,7 @@ const SimpleList = ({
   isMove,
   hideMore,
   noteToMove,
+  isHome = false,
 }) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode} = state;
@@ -53,6 +62,22 @@ const SimpleList = ({
     </View>
   ) : null;
 
+  const _renderSectionHeader = ({section: {title}}) => (
+    <Text
+      style={{
+        fontFamily: WEIGHT.bold,
+        fontSize: SIZE.xs + 1,
+        color: colors.accent,
+        paddingHorizontal: 12,
+        width: '100%',
+        alignSelf: 'center',
+        marginTop: 15,
+        paddingBottom: 5,
+      }}>
+      {title}
+    </Text>
+  );
+
   const _ListHeaderComponent_S =
     searchResults.type === type && searchResults.results.length > 0 ? (
       <View
@@ -63,8 +88,8 @@ const SimpleList = ({
                 ? 135
                 : 135 - 60
               : data[0] && !selectionMode
-              ? 135 - insets.top
-              : 135 - insets.top - 60,
+              ? 155 - insets.top
+              : 155 - insets.top - 60,
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'space-between',
@@ -99,8 +124,8 @@ const SimpleList = ({
                 ? 135
                 : 135 - 60
               : data[0] && !selectionMode
-              ? 155
-              : 155 - 60,
+              ? 155 - insets.top
+              : 155 - 60 - insets.top,
         }}>
         {pinned && pinned.notebooks && pinned.notebooks.length > 0 ? (
           <>
@@ -148,7 +173,48 @@ const SimpleList = ({
                       colors={colors}
                     />
                   </SelectionWrapper>
-                ) : null
+                ) : (
+                  <SelectionWrapper
+                    index={index}
+                    currentEditingNote={false}
+                    pinned={true}
+                    background={
+                      Platform.ios
+                        ? hexToRGBA(colors.accent + '19')
+                        : hexToRGBA(colors.shade)
+                    }
+                    item={item}>
+                    <NoteItem
+                      colors={colors}
+                      customStyle={{
+                        width: selectionMode ? '90%' : '100%',
+                        marginHorizontal: 0,
+                        paddingTop: 15,
+                        paddingRight: 18,
+                        marginBottom: 10,
+                        marginTop: 15,
+                        borderBottomWidth: 0,
+                      }}
+                      currentEditingNote={false}
+                      pinned={true}
+                      selectionMode={selectionMode}
+                      onLongPress={() => {
+                        if (!selectionMode) {
+                          dispatch({
+                            type: ACTIONS.SELECTION_MODE,
+                            enabled: true,
+                          });
+                        }
+                        dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
+                      }}
+                      update={() => {
+                        dispatch({type: ACTIONS.NOTES});
+                      }}
+                      item={item}
+                      index={index}
+                    />
+                  </SelectionWrapper>
+                )
               }
             />
           </>
@@ -184,7 +250,37 @@ const SimpleList = ({
   const _listKeyExtractor = (item, index) =>
     item.id.toString() + index.toString();
 
-  return (
+  return isHome && searchResults.type !== 'notes' ? (
+    <SectionList
+      ref={sectionListRef}
+      sections={data}
+      refreshControl={
+        <RefreshControl
+          tintColor={colors.accent}
+          colors={[colors.accent]}
+          progressViewOffset={165}
+          onRefresh={onRefresh}
+          refreshing={refreshing}
+        />
+      }
+      keyExtractor={_listKeyExtractor}
+      renderSectionHeader={_renderSectionHeader}
+      onScroll={_onScroll}
+      ListEmptyComponent={_ListEmptyComponent}
+      ListHeaderComponent={_ListHeaderComponent_S}
+      contentContainerStyle={{
+        width: '100%',
+        alignSelf: 'center',
+        minHeight: '100%',
+      }}
+      style={{
+        height: '100%',
+      }}
+      removeClippedSubviews={true}
+      ListFooterComponent={_ListFooterComponent}
+      renderItem={renderItem}
+    />
+  ) : (
     <FlatList
       data={
         searchResults.type === type &&

apps/mobile/src/provider/reducer.js

@@ -32,13 +32,13 @@ export const reducer = (state, action) => {
         trash: [],
         pinned: {
           notes: [],
-          notebooks: []
+          notebooks: [],
         },
         tags: [],
         favorites: [],
         colorNotes: [],
-        user: null
-      }
+        user: null,
+      };
     }
     case ACTIONS.NOTES:
       let notes;

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

@@ -1,7 +1,6 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useIsFocused} from 'react-navigation-hooks';
 import Container from '../../components/Container';
-import {NotesList} from '../../components/NotesList';
 import SelectionHeader from '../../components/SelectionHeader';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
@@ -10,11 +9,16 @@ import {DDS} from '../../utils/utils';
 import {eScrollEvent, eOnLoadNote} from '../../services/events';
 import {openEditorAnimation} from '../../utils/animations';
 import {sideMenuRef} from '../../utils/refs';
+import SimpleList from '../../components/SimpleList';
+import {NotesPlaceHolder} from '../../components/ListPlaceholders';
+import SelectionWrapper from '../../components/SelectionWrapper';
+import NoteItem from '../../components/NoteItem';
 let count = 0;
 
 export const Home = ({navigation}) => {
   const [state, dispatch] = useTracked();
-  const {notes} = state;
+  const [refreshing, setRefreshing] = useState(false);
+  const {colors, selectionMode, currentEditingNote, loading, notes} = state;
   const isFocused = useIsFocused();
 
   useEffect(() => {
@@ -30,6 +34,54 @@ export const Home = ({navigation}) => {
     dispatch({type: ACTIONS.NOTES});
   }, [isFocused]);
 
+  const _onRefresh = async () => {
+    setRefreshing(true);
+    try {
+      await db.sync();
+      setRefreshing(false);
+      ToastEvent.show('Sync Complete', 'success');
+    } catch (e) {
+      setRefreshing(false);
+      ToastEvent.show(e.message, 'error');
+    }
+    dispatch({type: ACTIONS.NOTES});
+    dispatch({type: ACTIONS.PINNED});
+    let user = await db.user.get();
+    dispatch({type: ACTIONS.USER, user: user});
+  };
+
+  const _renderItem = ({item, index}) => (
+    <SelectionWrapper
+      index={index}
+      currentEditingNote={
+        currentEditingNote === item.id ? currentEditingNote : null
+      }
+      item={item}>
+      <NoteItem
+        colors={colors}
+        customStyle={{
+          width: selectionMode ? '90%' : '100%',
+          marginHorizontal: 0,
+        }}
+        currentEditingNote={
+          currentEditingNote === item.id ? currentEditingNote : null
+        }
+        selectionMode={selectionMode}
+        onLongPress={() => {
+          if (!selectionMode) {
+            dispatch({type: ACTIONS.SELECTION_MODE, enabled: true});
+          }
+          dispatch({type: ACTIONS.SELECTED_ITEMS, item: item});
+        }}
+        update={() => {
+          dispatch({type: ACTIONS.NOTES});
+        }}
+        item={item}
+        index={index}
+      />
+    </SelectionWrapper>
+  );
+
   return (
     <Container
       bottomButtonText="Create a new note"
@@ -53,7 +105,17 @@ export const Home = ({navigation}) => {
       data={notes ? notes : []}>
       <SelectionHeader />
 
-      <NotesList />
+      <SimpleList
+        data={notes}
+        type="notes"
+        isHome={true}
+        refreshing={refreshing}
+        focused={isFocused}
+        onRefresh={_onRefresh}
+        renderItem={_renderItem}
+        placeholder={<NotesPlaceHolder colors={colors} />}
+        placeholderText={`Notes you write appear here`}
+      />
     </Container>
   );
 };

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

@@ -14,8 +14,10 @@ import {TEMPLATE_EMPTY_TRASH} from '../../components/DialogManager/templates';
 
 export const Trash = ({navigation}) => {
   const [state, dispatch] = useTracked();
-  const {colors, selectionMode, trash} = state;
+  const {colors, selectionMode} = state;
+  const trash = [...trash];
   const [refreshing, setRefreshing] = useState(false);
+
   const isFocused = useIsFocused();
   useEffect(() => {
     if (isFocused) {
@@ -87,15 +89,14 @@ export const Trash = ({navigation}) => {
     setRefreshing(true);
     try {
       await db.sync();
-
-      dispatch({type: ACTIONS.TRASH});
-      dispatch({type: ACTIONS.USER});
       setRefreshing(false);
       ToastEvent.show('Sync Complete', 'success');
     } catch (e) {
       setRefreshing(false);
       ToastEvent.show('Sync failed, network error', 'error');
     }
+    dispatch({type: ACTIONS.TRASH});
+    dispatch({type: ACTIONS.USER});
   };
 
   return (