refactor to single list

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

@@ -16,6 +16,7 @@ const SimpleList = ({
   focused,
   refreshing,
   placeholderText,
+  pinned = null,
 }) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode} = state;
@@ -104,8 +105,43 @@ const SimpleList = ({
               : data[0] && !selectionMode
               ? 155
               : 155 - 60,
-        }}
+        }}>
-      />
+        {pinned && pinned.notebooks && pinned.notebooks.length > 0 ? (
+          <>
+            <FlatList
+              data={pinned.notebooks}
+              keyExtractor={(item, index) => item.id.toString()}
+              renderItem={({item, index}) =>
+                item.type === 'notebook' ? (
+                  <NotebookItem
+                    hideMore={params.hideMore}
+                    customStyle={{
+                      backgroundColor: Platform.ios
+                        ? hexToRGBA(colors.accent + '19')
+                        : hexToRGBA(colors.shade),
+                      width: '100%',
+                      paddingHorizontal: 12,
+                      paddingTop: 20,
+                      paddingRight: 18,
+                      marginBottom: 10,
+                      marginTop: 20,
+                      borderBottomWidth: 0,
+                      marginHorizontal: 0,
+                    }}
+                    isMove={params.isMove}
+                    onLongPress={() => {}}
+                    noteToMove={params.note}
+                    item={item}
+                    pinned={true}
+                    index={index}
+                    colors={colors}
+                  />
+                ) : null
+              }
+            />
+          </>
+        ) : null}
+      </View>
     );
 
   const _ListEmptyComponent = (

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

@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {FlatList, Platform, Text, View, RefreshControl} from 'react-native';
+import {useIsFocused} from 'react-navigation-hooks';
-import {SIZE, WEIGHT} from '../../common/common';
 import Container from '../../components/Container';
 import {FavoritesPlaceHolder} from '../../components/ListPlaceholders';
 import {NotebookItem} from '../../components/NotebookItem';
@@ -8,18 +7,14 @@ import NoteItem from '../../components/NoteItem';
 import SelectionWrapper from '../../components/SelectionWrapper';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
-import {eSendEvent} from '../../services/eventManager';
-import {eScrollEvent} from '../../services/events';
 import {ToastEvent, w} from '../../utils/utils';
-import {useIsFocused} from 'react-navigation-hooks';
+import SimpleList from '../../components/SimpleList';
-import {inputRef} from '../../components/SearchInput';
 
 export const Favorites = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, favorites} = state;
   const [refreshing, setRefreshing] = useState(false);
   const isFocused = useIsFocused();
-  const searchResults = {...state.searchResults};
 
   useEffect(() => {
     if (isFocused) {
@@ -31,11 +26,74 @@ export const Favorites = ({navigation}) => {
     }
   }, [isFocused]);
 
-  const onScroll = event => {
+  const _onRefresh = async () => {
-    let y = event.nativeEvent.contentOffset.y;
+    setRefreshing(true);
-    eSendEvent(eScrollEvent, y);
+    try {
+      await db.sync();
+
+      dispatch({type: ACTIONS.FAVORITES});
+      dispatch({type: ACTIONS.USER});
+      setRefreshing(false);
+      ToastEvent.show('Sync Complete', 'success');
+    } catch (e) {
+      setRefreshing(false);
+      ToastEvent.show('Sync failed, network error', 'error');
+    }
   };
 
+  const _renderItem = ({item, index}) => (
+    <SelectionWrapper item={item}>
+      {item.type === 'note' ? (
+        <NoteItem
+          customStyle={{
+            width: selectionMode ? w - 74 : '100%',
+            marginHorizontal: 0,
+          }}
+          colors={colors}
+          selectionMode={selectionMode}
+          onLongPress={() => {
+            if (!selectionMode) {
+              dispatch({
+                type: ACTIONS.SELECTION_MODE,
+                enabled: !selectionMode,
+              });
+            }
+            dispatch({
+              type: ACTIONS.SELECTED_ITEMS,
+              item: item,
+            });
+          }}
+          item={item}
+          index={index}
+          isTrash={false}
+        />
+      ) : (
+        <NotebookItem
+          selectionMode={selectionMode}
+          onLongPress={() => {
+            if (!selectionMode) {
+              dispatch({
+                type: ACTIONS.SELECTION_MODE,
+                enabled: !selectionMode,
+              });
+            }
+            dispatch({
+              type: ACTIONS.SELECTED_ITEMS,
+              item: item,
+            });
+          }}
+          customStyle={{
+            width: selectionMode ? w - 74 : '100%',
+            marginHorizontal: 0,
+          }}
+          item={item}
+          isTrash={false}
+          index={index}
+        />
+      )}
+    </SelectionWrapper>
+  );
+
   return (
     <Container
       menu={true}
@@ -46,182 +104,15 @@ export const Favorites = ({navigation}) => {
       data={favorites}
       type="notes"
       noBottomButton={true}>
-      <FlatList
+      <SimpleList
-        keyExtractor={item => item.dateCreated.toString()}
+        data={favorites}
-        refreshControl={
+        type="notes"
-          <RefreshControl
+        refreshing={refreshing}
-            tintColor={colors.accent}
+        focused={isFocused}
-            colors={[colors.accent]}
+        onRefresh={_onRefresh}
-            progressViewOffset={165}
+        renderItem={_renderItem}
-            onRefresh={async () => {
+        placeholder={<FavoritesPlaceHolder />}
-              setRefreshing(true);
+        placeholderText="Notes you favorite appear here"
-              try {
-                await db.sync();
-
-                dispatch({type: ACTIONS.FAVORITES});
-                dispatch({type: ACTIONS.USER});
-                setRefreshing(false);
-                ToastEvent.show('Sync Complete', 'success');
-              } catch (e) {
-                setRefreshing(false);
-                ToastEvent.show('Sync failed, network error', 'error');
-              }
-            }}
-            refreshing={refreshing}
-          />
-        }
-        style={{
-          width: '100%',
-          alignSelf: 'center',
-          height: '100%',
-        }}
-        contentContainerStyle={{
-          height: '100%',
-        }}
-        ListHeaderComponent={
-          searchResults.type === 'notes' && searchResults.results.length > 0 ? (
-            <View
-              style={{
-                marginTop:
-                  Platform.OS == 'ios'
-                    ? favorites[0]
-                      ? 135
-                      : 135 - 60
-                    : favorites[0]
-                    ? 155
-                    : 155 - 60,
-                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={() => {
-                  inputRef.current?.setNativeProps({
-                    text: '',
-                  });
-                  dispatch({
-                    type: ACTIONS.SEARCH_RESULTS,
-                    results: {
-                      results: [],
-                      type: null,
-                      keyword: null,
-                    },
-                  });
-                }}
-                style={{
-                  fontFamily: WEIGHT.regular,
-                  color: colors.errorText,
-                  fontSize: SIZE.xs,
-                }}>
-                Clear
-              </Text>
-            </View>
-          ) : (
-            <View
-              style={{
-                marginTop:
-                  Platform.OS == 'ios'
-                    ? favorites[0]
-                      ? 135
-                      : 135 - 60
-                    : favorites[0]
-                    ? 155
-                    : 155 - 60,
-              }}
-            />
-          )
-        }
-        ListEmptyComponent={
-          <View
-            style={{
-              height: '80%',
-              width: '100%',
-              alignItems: 'center',
-              alignSelf: 'center',
-              justifyContent: 'center',
-              opacity: 0.8,
-            }}>
-            <FavoritesPlaceHolder />
-            <Text
-              style={{
-                color: colors.icon,
-                fontSize: SIZE.sm,
-                fontFamily: WEIGHT.regular,
-                marginTop: 30,
-              }}>
-              Favorite notes & notebooks appear here.
-            </Text>
-          </View>
-        }
-        data={
-          searchResults.type === 'notes' &&
-          isFocused &&
-          searchResults.results.length > 0
-            ? searchResults.results
-            : favorites
-        }
-        onScroll={onScroll}
-        renderItem={({item, index}) => (
-          <SelectionWrapper item={item}>
-            {item.type === 'note' ? (
-              <NoteItem
-                customStyle={{
-                  width: selectionMode ? w - 74 : '100%',
-                  marginHorizontal: 0,
-                }}
-                colors={colors}
-                selectionMode={selectionMode}
-                onLongPress={() => {
-                  if (!selectionMode) {
-                    dispatch({
-                      type: ACTIONS.SELECTION_MODE,
-                      enabled: !selectionMode,
-                    });
-                  }
-                  dispatch({
-                    type: ACTIONS.SELECTED_ITEMS,
-                    item: item,
-                  });
-                }}
-                item={item}
-                index={index}
-                isTrash={false}
-              />
-            ) : (
-              <NotebookItem
-                selectionMode={selectionMode}
-                onLongPress={() => {
-                  if (!selectionMode) {
-                    dispatch({
-                      type: ACTIONS.SELECTION_MODE,
-                      enabled: !selectionMode,
-                    });
-                  }
-                  dispatch({
-                    type: ACTIONS.SELECTED_ITEMS,
-                    item: item,
-                  });
-                }}
-                customStyle={{
-                  width: selectionMode ? w - 74 : '100%',
-                  marginHorizontal: 0,
-                }}
-                item={item}
-                isTrash={false}
-                index={index}
-              />
-            )}
-          </SelectionWrapper>
-        )}
       />
     </Container>
   );

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

@@ -22,6 +22,7 @@ import {eScrollEvent} from '../../services/events';
 import {slideLeft, slideRight} from '../../utils/animations';
 import {w, ToastEvent, hexToRGBA} from '../../utils/utils';
 import {inputRef} from '../../components/SearchInput';
+import SimpleList from '../../components/SimpleList';
 
 export const Folders = ({navigation}) => {
   const [state, dispatch] = useTracked();
@@ -71,12 +72,52 @@ export const Folders = ({navigation}) => {
 
   const params = navigation.state.params;
 
-  const onScroll = event => {
+  const _onRefresh = async () => {
-    let y = event.nativeEvent.contentOffset.y;
+    setRefreshing(true);
-
+    try {
-    eSendEvent(eScrollEvent, y);
+      await db.sync();
+      dispatch({type: ACTIONS.NOTEBOOKS});
+      dispatch({type: ACTIONS.PINNED});
+      dispatch({type: ACTIONS.USER});
+      setRefreshing(false);
+      ToastEvent.show('Sync Complete', 'success');
+    } catch (e) {
+      setRefreshing(false);
+      ToastEvent.show('Sync failed, network error', 'error');
+    }
   };
 
+  const _renderItem = ({item, index}) => (
+    <SelectionWrapper item={item}>
+      <NotebookItem
+        hideMore={params.hideMore}
+        navigation={navigation}
+        customStyle={{
+          width: selectionMode ? w - 74 : '100%',
+          marginHorizontal: 0,
+        }}
+        isMove={params.isMove}
+        selectionMode={selectionMode}
+        onLongPress={() => {
+          if (!selectionMode) {
+            dispatch({
+              type: ACTIONS.SELECTION_MODE,
+              enabled: !selectionMode,
+            });
+          }
+
+          dispatch({
+            type: ACTIONS.SELECTED_ITEMS,
+            item: item,
+          });
+        }}
+        noteToMove={params.note}
+        item={item}
+        index={index}
+      />
+    </SelectionWrapper>
+  );
+
   return (
     <Container
       bottomButtonText="Create a new notebook"
@@ -91,216 +132,22 @@ export const Folders = ({navigation}) => {
       bottomButtonOnPress={() => {
         AddNotebookEvent(null);
       }}>
-      <FlatList
+      <SimpleList
-        style={{
+        data={notebooks}
-          width: '100%',
+        type="notebooks"
-        }}
+        refreshing={refreshing}
-        refreshControl={
+        focused={isFocused}
-          <RefreshControl
+        onRefresh={_onRefresh}
-            tintColor={colors.accent}
+        renderItem={_renderItem}
-            colors={[colors.accent]}
+        placeholder={
-            progressViewOffset={165}
+          <>
-            onRefresh={async () => {
-              setRefreshing(true);
-              try {
-                await db.sync();
-                dispatch({type: ACTIONS.NOTEBOOKS});
-                dispatch({type: ACTIONS.PINNED});
-                dispatch({type: ACTIONS.USER});
-                setRefreshing(false);
-                ToastEvent.show('Sync Complete', 'success');
-              } catch (e) {
-                setRefreshing(false);
-                ToastEvent.show('Sync failed, network error', 'error');
-              }
-            }}
-            refreshing={refreshing}
-          />
-        }
-        onScroll={onScroll}
-        ListHeaderComponent={
-          searchResults.type === 'notebooks' &&
-          searchResults.results.length > 0 ? (
-            <View
-              style={{
-                marginTop:
-                  Platform.OS == 'ios'
-                    ? notebooks[0] && !selectionMode
-                      ? 135
-                      : 135 - 60
-                    : notebooks[0] && !selectionMode
-                    ? 155
-                    : 155 - 60,
-                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={() => {
-                  inputRef.current?.setNativeProps({
-                    text: '',
-                  });
-                  dispatch({
-                    type: ACTIONS.SEARCH_RESULTS,
-                    results: {
-                      results: [],
-                      type: null,
-                      keyword: null,
-                    },
-                  });
-                }}
-                style={{
-                  fontFamily: WEIGHT.regular,
-                  color: colors.errorText,
-                  fontSize: SIZE.xs,
-                }}>
-                Clear
-              </Text>
-            </View>
-          ) : (
-            <View
-              style={{
-                marginTop:
-                  Platform.OS == 'ios'
-                    ? notebooks[0] && !selectionMode
-                      ? 135
-                      : 135 - 60
-                    : notebooks[0] && !selectionMode
-                    ? 155
-                    : 155 - 60,
-              }}>
-              {pinned && pinned.notebooks && pinned.notebooks.length > 0 ? (
-                <>
-                  <FlatList
-                    data={pinned.notebooks}
-                    keyExtractor={(item, index) => item.id.toString()}
-                    renderItem={({item, index}) =>
-                      item.type === 'notebook' ? (
-                        <NotebookItem
-                          hideMore={params.hideMore}
-                          customStyle={{
-                            backgroundColor: Platform.ios
-                              ? hexToRGBA(colors.accent + '19')
-                              : hexToRGBA(colors.shade),
-                            width: '100%',
-                            paddingHorizontal: 12,
-                            paddingTop: 20,
-                            paddingRight: 18,
-                            marginBottom: 10,
-                            marginTop: 20,
-                            borderBottomWidth: 0,
-                            marginHorizontal: 0,
-                          }}
-                          isMove={params.isMove}
-                          onLongPress={() => {}}
-                          noteToMove={params.note}
-                          item={item}
-                          pinned={true}
-                          index={index}
-                          colors={colors}
-                        />
-                      ) : null
-                    }
-                  />
-                </>
-              ) : null}
-            </View>
-          )
-        }
-        ListEmptyComponent={
-          <View
-            style={{
-              height: '80%',
-              width: DDS.isTab ? '70%' : '100%',
-              alignItems: 'center',
-              alignSelf: 'center',
-              justifyContent: 'center',
-              opacity: 0.8,
-            }}>
             <NotebookPlaceHolder animation={slideRight} colors={colors} />
             <NotebookPlaceHolder animation={slideLeft} colors={colors} />
             <NotebookPlaceHolder animation={slideRight} colors={colors} />
-
+          </>
-            <Text
-              style={{
-                color: colors.icon,
-                fontSize: SIZE.sm,
-                fontFamily: WEIGHT.regular,
-                marginTop: 30,
-              }}>
-              Notebooks you add will appear here
-            </Text>
-          </View>
         }
-        contentContainerStyle={{
+        pinned={pinned}
-          width: '100%',
+        placeholderText="Notebooks you add will appear here"
-          alignSelf: 'center',
-          minHeight: '100%',
-        }}
-        ListFooterComponent={
-          <View
-            style={{
-              height: 150,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}>
-            <Text
-              style={{
-                color: colors.navbg,
-                fontSize: SIZE.sm,
-                fontFamily: WEIGHT.regular,
-              }}>
-              - End -
-            </Text>
-          </View>
-        }
-        data={
-          searchResults &&
-          searchResults.results.length > 0 &&
-          searchResults.type === 'notebooks'
-            ? searchResults.results
-            : notebooks
-        }
-        keyExtractor={(item, index) => item.id.toString()}
-        renderItem={({item, index}) => (
-          <SelectionWrapper item={item}>
-            <NotebookItem
-              hideMore={params.hideMore}
-              navigation={navigation}
-              customStyle={{
-                width: selectionMode ? w - 74 : '100%',
-                marginHorizontal: 0,
-              }}
-              isMove={params.isMove}
-              selectionMode={selectionMode}
-              onLongPress={() => {
-                if (!selectionMode) {
-                  dispatch({
-                    type: ACTIONS.SELECTION_MODE,
-                    enabled: !selectionMode,
-                  });
-                }
-
-                dispatch({
-                  type: ACTIONS.SELECTED_ITEMS,
-                  item: item,
-                });
-              }}
-              noteToMove={params.note}
-              item={item}
-              index={index}
-            />
-          </SelectionWrapper>
-        )}
       />
     </Container>
   );

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

@@ -1,13 +1,12 @@
 import React, {useEffect, useState} from 'react';
-import {FlatList, Platform, RefreshControl, Text, View} from 'react-native';
 import {useIsFocused} from 'react-navigation-hooks';
 import {db} from '../../../App';
-import {SIZE, WEIGHT} from '../../common/common';
 import Container from '../../components/Container';
 import {AddTopicEvent} from '../../components/DialogManager';
 import {NotebookItem} from '../../components/NotebookItem';
 import SelectionWrapper from '../../components/SelectionWrapper';
 import {useTracked} from '../../provider';
+import {ACTIONS} from '../../provider/actions';
 import {
   eSendEvent,
   eSubscribeEvent,
@@ -19,15 +18,15 @@ import {
   eScrollEvent,
 } from '../../services/events';
 import {ToastEvent, w} from '../../utils/utils';
-import {ACTIONS} from '../../provider/actions';
+import SimpleList from '../../components/SimpleList';
-import {inputRef} from '../../components/SearchInput';
+import {NotebookPlaceHolder} from '../../components/ListPlaceholders';
 
 export const Notebook = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, preventDefaultMargins} = state;
   const [topics, setTopics] = useState([]);
   const [refreshing, setRefreshing] = useState(false);
-  const searchResults = {...state.searchResults};
+
   let params = navigation.state.params;
   let notebook;
   let isFocused = useIsFocused();
@@ -78,15 +77,7 @@ export const Notebook = ({navigation}) => {
     };
   }, []);
 
-  const onScroll = event => {
+  const _renderItem = ({item, index}) => (
-    let y = event.nativeEvent.contentOffset.y;
-    eSendEvent(eScrollEvent, y);
-  };
-
-  const keyExtractor = (item, index) =>
-    item.dateCreated.toString() + index.toString();
-
-  const renderItem = ({item, index}) => (
     <SelectionWrapper item={item}>
       <NotebookItem
         hideMore={params.hideMore}
@@ -121,85 +112,20 @@ export const Notebook = ({navigation}) => {
     </SelectionWrapper>
   );
 
-  const ListFooterComponent = (
+  const _onRefresh = async () => {
-    <View
+    setRefreshing(true);
-      style={{
+    try {
-        height: 150,
+      await db.sync();
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <Text
-        style={{
-          color: colors.navbg,
-          fontSize: SIZE.sm,
-          fontFamily: WEIGHT.regular,
-        }}>
-        - End -
-      </Text>
-    </View>
-  );
 
-  const ListHeaderComponent =
+      onLoad();
-    searchResults.type === 'topics' && searchResults.results.length > 0 ? (
+      dispatch({type: ACTIONS.USER});
-      <View
+      setRefreshing(false);
-        style={{
+      ToastEvent.show('Sync Complete', 'success');
-          marginTop:
+    } catch (e) {
-            Platform.OS == 'ios'
+      setRefreshing(false);
-              ? topics[0] && !selectionMode
+      ToastEvent.show('Sync failed, network error', 'error');
-                ? 135
+    }
-                : 135 - 60
+  };
-              : topics[0] && !selectionMode
-              ? 155
-              : 155 - 60,
-          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={() => {
-            inputRef.current?.setNativeProps({
-              text: '',
-            });
-            dispatch({
-              type: ACTIONS.SEARCH_RESULTS,
-              results: {
-                results: [],
-                type: null,
-                keyword: null,
-              },
-            });
-          }}
-          style={{
-            fontFamily: WEIGHT.regular,
-            color: colors.errorText,
-            fontSize: SIZE.xs,
-          }}>
-          Clear
-        </Text>
-      </View>
-    ) : (
-      <View
-        style={{
-          marginTop:
-            Platform.OS == 'ios'
-              ? topics[0] && !selectionMode
-                ? 135
-                : 135 - 60
-              : topics[0] && !selectionMode
-              ? 155
-              : 155 - 60,
-        }}
-      />
-    );
 
   return (
     <Container
@@ -215,44 +141,15 @@ export const Notebook = ({navigation}) => {
         let n = navigation.state.params.notebook;
         AddTopicEvent(n);
       }}>
-      <FlatList
+      <SimpleList
-        refreshControl={
+        data={topics}
-          <RefreshControl
+        type="topics"
-            tintColor={colors.accent}
+        refreshing={refreshing}
-            colors={[colors.accent]}
+        focused={isFocused}
-            progressViewOffset={165}
+        onRefresh={_onRefresh}
-            onRefresh={async () => {
+        renderItem={_renderItem}
-              setRefreshing(true);
+        placeholder={<NotebookPlaceHolder colors={colors} />}
-              try {
+        placeholderText="Topics added to notebook appear here."
-                await db.sync();
-
-                onLoad();
-                dispatch({type: ACTIONS.USER});
-                setRefreshing(false);
-                ToastEvent.show('Sync Complete', 'success');
-              } catch (e) {
-                setRefreshing(false);
-                ToastEvent.show('Sync failed, network error', 'error');
-              }
-            }}
-            refreshing={refreshing}
-          />
-        }
-        style={{
-          width: '100%',
-        }}
-        data={
-          searchResults.type === 'topics' &&
-          searchResults.results.length > 0 &&
-          isFocused
-            ? searchResults.results
-            : topics
-        }
-        onScroll={onScroll}
-        ListHeaderComponent={ListHeaderComponent}
-        ListFooterComponent={ListFooterComponent}
-        keyExtractor={keyExtractor}
-        renderItem={renderItem}
       />
     </Container>
   );

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

@@ -29,6 +29,7 @@ import {NotesPlaceHolder} from '../../components/ListPlaceholders';
 import {useIsFocused} from 'react-navigation-hooks';
 import {openEditorAnimation} from '../../utils/animations';
 import {inputRef} from '../../components/SearchInput';
+import SimpleList from '../../components/SimpleList';
 
 export const Notes = ({navigation}) => {
   const [state, dispatch] = useTracked();
@@ -37,7 +38,6 @@ export const Notes = ({navigation}) => {
   const [notes, setNotes] = useState([]);
   const [refreshing, setRefreshing] = useState(false);
   const isFocused = useIsFocused();
-  const searchResults = {...state.searchResults};
   let params = navigation.state ? navigation.state.params : null;
 
   useEffect(() => {
@@ -129,118 +129,6 @@ export const Notes = ({navigation}) => {
     </SelectionWrapper>
   );
 
-  const _onScroll = event => {
-    if (!event) return;
-    let y = event.nativeEvent.contentOffset.y;
-
-    eSendEvent(eScrollEvent, y);
-  };
-
-  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 _ListHeaderComponent_S =
-    searchResults.type === 'notes' && searchResults.results.length > 0 ? (
-      <View
-        style={{
-          marginTop:
-            Platform.OS == 'ios'
-              ? notes[0]
-                ? 135
-                : 135 - 60
-              : notes[0]
-              ? 155
-              : 155 - 60,
-          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={() => {
-            inputRef.current?.setNativeProps({
-              text: '',
-            });
-            dispatch({
-              type: ACTIONS.SEARCH_RESULTS,
-              results: {
-                results: [],
-                type: null,
-                keyword: null,
-              },
-            });
-          }}
-          style={{
-            fontFamily: WEIGHT.regular,
-            color: colors.errorText,
-            fontSize: SIZE.xs,
-          }}>
-          Clear
-        </Text>
-      </View>
-    ) : (
-      <View
-        style={{
-          marginTop:
-            Platform.OS == 'ios'
-              ? notes[0]
-                ? 135
-                : 135 - 60
-              : notes[0]
-              ? 155
-              : 155 - 60,
-        }}
-      />
-    );
-
-  const _ListEmptyComponent = (
-    <View
-      style={{
-        height: '80%',
-        width: '100%',
-        alignItems: 'center',
-        alignSelf: 'center',
-        justifyContent: 'center',
-        opacity: 0.8,
-      }}>
-      <>
-        <NotesPlaceHolder colors={colors} />
-        <Text
-          style={{
-            color: colors.icon,
-            fontSize: SIZE.sm,
-            fontFamily: WEIGHT.regular,
-            marginTop: 35,
-          }}>
-          Add some notes to this {params.type ? params.type : 'topic.'}
-        </Text>
-      </>
-    </View>
-  );
-
   const _onRefresh = async () => {
     setRefreshing(true);
     try {
@@ -256,7 +144,34 @@ export const Notes = ({navigation}) => {
     }
   };
 
-  const _listKeyExtractor = (item, index) => item.dateCreated.toString();
+  const _bottomBottomOnPress = () => {
+    if (params.type === 'tag') {
+      editing.actionAfterFirstSave = {
+        type: 'tag',
+        id: params.tag.title,
+      };
+    } else if (params.type == 'color') {
+      editing.actionAfterFirstSave = {
+        type: 'color',
+        id: params.color.id,
+      };
+    } else {
+      editing.actionAfterFirstSave = {
+        type: 'topic',
+        id: params.title,
+        notebook: params.notebookId,
+      };
+    }
+
+    if (DDS.isTab) {
+      eSendEvent(eOnLoadNote, {type: 'new'});
+    } else {
+      SideMenuEvent.close();
+      SideMenuEvent.disable();
+      eSendEvent(eOnLoadNote, {type: 'new'});
+      openEditorAnimation();
+    }
+  };
 
   return (
     <Container
@@ -274,65 +189,18 @@ export const Notes = ({navigation}) => {
       placeholder={`Search in ${
         params.type == 'tag' ? '#' + params.title : params.title
       }`}
-      bottomButtonOnPress={() => {
+      bottomButtonOnPress={_bottomBottomOnPress}>
-        if (params.type === 'tag') {
+      <SimpleList
-          editing.actionAfterFirstSave = {
+        data={notes}
-            type: 'tag',
+        type="notes"
-            id: params.tag.title,
+        refreshing={refreshing}
-          };
+        focused={isFocused}
-        } else if (params.type == 'color') {
+        onRefresh={_onRefresh}
-          editing.actionAfterFirstSave = {
-            type: 'color',
-            id: params.color.id,
-          };
-        } else {
-          editing.actionAfterFirstSave = {
-            type: 'topic',
-            id: params.title,
-            notebook: params.notebookId,
-          };
-        }
-
-        if (DDS.isTab) {
-          eSendEvent(eOnLoadNote, {type: 'new'});
-        } else {
-          SideMenuEvent.close();
-          SideMenuEvent.disable();
-          eSendEvent(eOnLoadNote, {type: 'new'});
-          openEditorAnimation();
-        }
-      }}>
-      <FlatList
-        data={
-          searchResults.type === 'notes' &&
-          isFocused &&
-          searchResults.results.length > 0
-            ? searchResults.results
-            : notes
-        }
-        refreshControl={
-          <RefreshControl
-            tintColor={colors.accent}
-            colors={[colors.accent]}
-            progressViewOffset={165}
-            onRefresh={_onRefresh}
-            refreshing={refreshing}
-          />
-        }
-        keyExtractor={_listKeyExtractor}
-        ListFooterComponent={_ListFooterComponent}
-        onScroll={_onScroll}
-        ListHeaderComponent={_ListHeaderComponent_S}
-        ListEmptyComponent={_ListEmptyComponent}
-        contentContainerStyle={{
-          width: '100%',
-          alignSelf: 'center',
-          minHeight: '100%',
-        }}
-        style={{
-          height: '100%',
-        }}
         renderItem={_renderItem}
+        placeholder={<NotesPlaceHolder colors={colors} />}
+        placeholderText={`Add some notes to this" ${
+          params.type ? params.type : 'topic.'
+        }`}
       />
     </Container>
   );

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

@@ -17,15 +17,15 @@ import NavigationService from '../../services/NavigationService';
 import {ToastEvent} from '../../utils/utils';
 import {useIsFocused} from 'react-navigation-hooks';
 import {inputRef} from '../../components/SearchInput';
+import SimpleList from '../../components/SimpleList';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
 export const Tags = ({navigation}) => {
   const [state, dispatch] = useTracked();
-  const {colors, tags, selectionMode} = state;
+  const {colors, tags} = state;
   const [refreshing, setRefreshing] = useState(false);
   const isFocused = useIsFocused();
-  const searchResults = {...state.searchResults};
   useEffect(() => {
     if (isFocused) {
       dispatch({type: ACTIONS.TAGS});
@@ -36,6 +36,58 @@ export const Tags = ({navigation}) => {
     }
   }, [isFocused]);
 
+  const _onRefresh = () => {
+    //Handle
+  };
+
+  const _renderItem = ({item, index}) => (
+    <TouchableOpacity
+      key={item.title}
+      onPress={() => {
+        NavigationService.navigate('Notes', {
+          type: 'tag',
+          title: item.title,
+          tag: item,
+        });
+      }}
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        margin: 0,
+        paddingVertical: pv,
+        borderBottomWidth: 1.5,
+        borderBottomColor: colors.nav,
+      }}>
+      <Text
+        style={{
+          fontFamily: WEIGHT.regular,
+          fontSize: SIZE.md,
+          color: colors.pri,
+        }}>
+        <Text
+          style={{
+            color: colors.accent,
+          }}>
+          #
+        </Text>
+        {item.title}
+        {'\n'}
+        <Text
+          style={{
+            fontSize: SIZE.xs,
+            color: colors.icon,
+          }}>
+          {item && item.count && item.count > 1
+            ? item.count + ' notes'
+            : item.count === 1
+            ? item.count + ' note'
+            : null}
+        </Text>
+      </Text>
+    </TouchableOpacity>
+  );
+
   return (
     <Container
       canGoBack={false}
@@ -47,176 +99,19 @@ export const Tags = ({navigation}) => {
       menu>
       <View
         style={{
-          width: '100%',
-          alignSelf: 'center',
-          height: '100%',
           paddingHorizontal: 12,
+          height: '100%',
+          width: '100%',
         }}>
-        <FlatList
+        <SimpleList
-          style={{
+          data={tags}
-            height: '100%',
+          type="tags"
-          }}
+          refreshing={refreshing}
-          ListHeaderComponent={
+          focused={isFocused}
-            searchResults.type === 'tags' &&
+          onRefresh={_onRefresh}
-            searchResults.results.length > 0 ? (
+          renderItem={_renderItem}
-              <View
+          placeholder={<TagsPlaceHolder colors={colors} />}
-                style={{
+          placeholderText="Tags added to notes appear here"
-                  marginTop:
-                    Platform.OS == 'ios'
-                      ? tags[0] && !selectionMode
-                        ? 135
-                        : 135 - 60 && !selectionMode
-                      : tags[0]
-                      ? 155
-                      : 155 - 60,
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  paddingHorizontal: 0,
-                }}>
-                <Text
-                  style={{
-                    fontFamily: WEIGHT.bold,
-                    color: colors.accent,
-                    fontSize: SIZE.xs,
-                  }}>
-                  Search Results for {searchResults.keyword}
-                </Text>
-                <Text
-                  onPress={() => {
-                    inputRef.current?.setNativeProps({
-                      text: '',
-                    });
-                    dispatch({
-                      type: ACTIONS.SEARCH_RESULTS,
-                      results: {
-                        results: [],
-                        type: null,
-                        keyword: null,
-                      },
-                    });
-                  }}
-                  style={{
-                    fontFamily: WEIGHT.regular,
-                    color: colors.errorText,
-                    fontSize: SIZE.xs,
-                  }}>
-                  Clear
-                </Text>
-              </View>
-            ) : (
-              <View
-                style={{
-                  marginTop:
-                    Platform.OS == 'ios'
-                      ? tags[0] && !selectionMode
-                        ? 135
-                        : 135 - 60
-                      : tags[0] && !selectionMode
-                      ? 155
-                      : 155 - 60,
-                }}
-              />
-            )
-          }
-          refreshControl={
-            <RefreshControl
-              tintColor={colors.accent}
-              colors={[colors.accent]}
-              progressViewOffset={165}
-              onRefresh={async () => {
-                setRefreshing(true);
-                try {
-                  await db.sync();
-                  dispatch({type: ACTIONS.TAGS});
-                  dispatch({type: ACTIONS.USER});
-                  setRefreshing(false);
-                  ToastEvent.show('Sync Complete', 'success');
-                } catch (e) {
-                  setRefreshing(false);
-                  ToastEvent.show('Sync failed, network error', 'error');
-                }
-              }}
-              refreshing={refreshing}
-            />
-          }
-          contentContainerStyle={{
-            height: '100%',
-          }}
-          data={
-            searchResults.type === 'tags' &&
-            isFocused &&
-            searchResults.results.length > 0
-              ? searchResults.results
-              : tags
-          }
-          ListEmptyComponent={
-            <View
-              style={{
-                height: '80%',
-                width: '100%',
-                alignItems: 'center',
-                alignSelf: 'center',
-                justifyContent: 'center',
-                opacity: 0.8,
-              }}>
-              <TagsPlaceHolder colors={colors} />
-              <Text
-                style={{
-                  fontSize: SIZE.sm,
-                  color: colors.icon,
-                }}>
-                Tags added to notes appear here
-              </Text>
-            </View>
-          }
-          renderItem={({item, index}) => (
-            <TouchableOpacity
-              key={item.title}
-              onPress={() => {
-                NavigationService.navigate('Notes', {
-                  type: 'tag',
-                  title: item.title,
-                  tag: item,
-                });
-              }}
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'flex-start',
-                alignItems: 'center',
-                margin: 0,
-                paddingVertical: pv,
-                borderBottomWidth: 1.5,
-                borderBottomColor: colors.nav,
-              }}>
-              <Text
-                style={{
-                  fontFamily: WEIGHT.regular,
-                  fontSize: SIZE.md,
-                  color: colors.pri,
-                }}>
-                <Text
-                  style={{
-                    color: colors.accent,
-                  }}>
-                  #
-                </Text>
-                {item.title}
-                {'\n'}
-                <Text
-                  style={{
-                    fontSize: SIZE.xs,
-                    color: colors.icon,
-                  }}>
-                  {item && item.count && item.count > 1
-                    ? item.count + ' notes'
-                    : item.count === 1
-                    ? item.count + ' note'
-                    : null}
-                </Text>
-              </Text>
-            </TouchableOpacity>
-          )}
         />
       </View>
     </Container>

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

@@ -15,13 +15,13 @@ import {w, ToastEvent} from '../../utils/utils';
 import SelectionWrapper from '../../components/SelectionWrapper';
 import {useIsFocused} from 'react-navigation-hooks';
 import {inputRef} from '../../components/SearchInput';
+import SimpleList from '../../components/SimpleList';
 
 export const Trash = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, trash} = state;
   const [refreshing, setRefreshing] = useState(false);
   const isFocused = useIsFocused();
-  const searchResults = {...state.searchResults};
   useEffect(() => {
     if (isFocused) {
       dispatch({
@@ -88,28 +88,20 @@ export const Trash = ({navigation}) => {
     </SelectionWrapper>
   );
 
-  const _ListEmptyComponent = (
+  const _onRefresh = async () => {
-    <View
+    setRefreshing(true);
-      style={{
+    try {
-        height: '80%',
+      await db.sync();
-        width: '100%',
+
-        alignItems: 'center',
+      dispatch({type: ACTIONS.TRASH});
-        alignSelf: 'center',
+      dispatch({type: ACTIONS.USER});
-        justifyContent: 'center',
+      setRefreshing(false);
-        opacity: 0.8,
+      ToastEvent.show('Sync Complete', 'success');
-      }}>
+    } catch (e) {
-      <TrashPlaceHolder colors={colors} />
+      setRefreshing(false);
-      <Text
+      ToastEvent.show('Sync failed, network error', 'error');
-        style={{
+    }
-          color: colors.icon,
+  };
-          fontSize: SIZE.sm,
-          fontFamily: WEIGHT.regular,
-          marginTop: 30,
-        }}>
-        Deleted notes & notebooks appear here.
-      </Text>
-    </View>
-  );
 
   return (
     <Container
@@ -124,109 +116,15 @@ export const Trash = ({navigation}) => {
       type="trash"
       data={trash}
       bottomButtonText="Clear all trash">
-      <FlatList
+      <SimpleList
-        refreshControl={
+        data={trash}
-          <RefreshControl
+        type="trash"
-            tintColor={colors.accent}
+        refreshing={refreshing}
-            colors={[colors.accent]}
+        focused={isFocused}
-            progressViewOffset={165}
+        onRefresh={_onRefresh}
-            onRefresh={async () => {
-              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');
-              }
-            }}
-            refreshing={refreshing}
-          />
-        }
-        ListHeaderComponent={
-          searchResults.type === 'trash' && searchResults.results.length > 0 ? (
-            <View
-              style={{
-                marginTop:
-                  Platform.OS == 'ios'
-                    ? trash[0]
-                      ? 135
-                      : 135 - 60
-                    : trash[0]
-                    ? 155
-                    : 155 - 60,
-                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={() => {
-                  inputRef.current?.setNativeProps({
-                    text: '',
-                  });
-                  dispatch({
-                    type: ACTIONS.SEARCH_RESULTS,
-                    results: {
-                      results: [],
-                      type: null,
-                      keyword: null,
-                    },
-                  });
-                }}
-                style={{
-                  fontFamily: WEIGHT.regular,
-                  color: colors.errorText,
-                  fontSize: SIZE.xs,
-                }}>
-                Clear
-              </Text>
-            </View>
-          ) : (
-            <View
-              style={{
-                marginTop:
-                  Platform.OS == 'ios'
-                    ? trash[0]
-                      ? 135
-                      : 135 - 60
-                    : trash[0]
-                    ? 155
-                    : 155 - 60,
-              }}
-            />
-          )
-        }
-        keyExtractor={item => item.dateCreated.toString()}
-        style={{
-          width: '100%',
-          alignSelf: 'center',
-          height: '100%',
-        }}
-        contentContainerStyle={{
-          height: '100%',
-        }}
-        data={
-          searchResults.type === 'trash' &&
-          searchResults.results.length > 0 &&
-          isFocused
-            ? searchResults.results
-            : trash
-        }
-        ListEmptyComponent={_ListEmptyComponent}
         renderItem={_renderItem}
+        placeholder={<TrashPlaceHolder colors={colors} />}
+        placeholderText="Deleted notes & notebooks appear here."
       />
     </Container>
   );