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,29 +26,7 @@ export const Favorites = ({navigation}) => {
     }
   }, [isFocused]);
 
-  const onScroll = event => {
+  const _onRefresh = async () => {
-    let y = event.nativeEvent.contentOffset.y;
-    eSendEvent(eScrollEvent, y);
-  };
-
-  return (
-    <Container
-      menu={true}
-      heading="Favorites"
-      placeholder="Search your notes"
-      canGoBack={false}
-      customIcon="menu"
-      data={favorites}
-      type="notes"
-      noBottomButton={true}>
-      <FlatList
-        keyExtractor={item => item.dateCreated.toString()}
-        refreshControl={
-          <RefreshControl
-            tintColor={colors.accent}
-            colors={[colors.accent]}
-            progressViewOffset={165}
-            onRefresh={async () => {
     setRefreshing(true);
     try {
       await db.sync();
@@ -66,111 +39,9 @@ export const Favorites = ({navigation}) => {
       setRefreshing(false);
       ToastEvent.show('Sync failed, network error', 'error');
     }
-            }}
+  };
-            refreshing={refreshing}
+
-          />
+  const _renderItem = ({item, index}) => (
-        }
-        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
@@ -221,7 +92,27 @@ export const Favorites = ({navigation}) => {
         />
       )}
     </SelectionWrapper>
-        )}
+  );
+
+  return (
+    <Container
+      menu={true}
+      heading="Favorites"
+      placeholder="Search your notes"
+      canGoBack={false}
+      customIcon="menu"
+      data={favorites}
+      type="notes"
+      noBottomButton={true}>
+      <SimpleList
+        data={favorites}
+        type="notes"
+        refreshing={refreshing}
+        focused={isFocused}
+        onRefresh={_onRefresh}
+        renderItem={_renderItem}
+        placeholder={<FavoritesPlaceHolder />}
+        placeholderText="Notes you favorite appear here"
       />
     </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,36 +72,7 @@ export const Folders = ({navigation}) => {
 
   const params = navigation.state.params;
 
-  const onScroll = event => {
+  const _onRefresh = async () => {
-    let y = event.nativeEvent.contentOffset.y;
-
-    eSendEvent(eScrollEvent, y);
-  };
-
-  return (
-    <Container
-      bottomButtonText="Create a new notebook"
-      menu={params.canGoBack ? false : true}
-      preventDefaultMargins={preventDefaultMargins}
-      heading={params.title}
-      canGoBack={params.canGoBack}
-      navigation={navigation}
-      placeholder="Search all notebooks"
-      data={notebooks}
-      type="notebooks"
-      bottomButtonOnPress={() => {
-        AddNotebookEvent(null);
-      }}>
-      <FlatList
-        style={{
-          width: '100%',
-        }}
-        refreshControl={
-          <RefreshControl
-            tintColor={colors.accent}
-            colors={[colors.accent]}
-            progressViewOffset={165}
-            onRefresh={async () => {
     setRefreshing(true);
     try {
       await db.sync();
@@ -113,165 +85,9 @@ export const Folders = ({navigation}) => {
       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
+  const _renderItem = ({item, index}) => (
-              style={{
-                color: colors.icon,
-                fontSize: SIZE.sm,
-                fontFamily: WEIGHT.regular,
-                marginTop: 30,
-              }}>
-              Notebooks you add will appear here
-            </Text>
-          </View>
-        }
-        contentContainerStyle={{
-          width: '100%',
-          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}
@@ -300,7 +116,38 @@ export const Folders = ({navigation}) => {
         index={index}
       />
     </SelectionWrapper>
-        )}
+  );
+
+  return (
+    <Container
+      bottomButtonText="Create a new notebook"
+      menu={params.canGoBack ? false : true}
+      preventDefaultMargins={preventDefaultMargins}
+      heading={params.title}
+      canGoBack={params.canGoBack}
+      navigation={navigation}
+      placeholder="Search all notebooks"
+      data={notebooks}
+      type="notebooks"
+      bottomButtonOnPress={() => {
+        AddNotebookEvent(null);
+      }}>
+      <SimpleList
+        data={notebooks}
+        type="notebooks"
+        refreshing={refreshing}
+        focused={isFocused}
+        onRefresh={_onRefresh}
+        renderItem={_renderItem}
+        placeholder={
+          <>
+            <NotebookPlaceHolder animation={slideRight} colors={colors} />
+            <NotebookPlaceHolder animation={slideLeft} colors={colors} />
+            <NotebookPlaceHolder animation={slideRight} colors={colors} />
+          </>
+        }
+        pinned={pinned}
+        placeholderText="Notebooks you add will appear here"
       />
     </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}
-            colors={[colors.accent]}
-            progressViewOffset={165}
-            onRefresh={async () => {
-              setRefreshing(true);
-              try {
-                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}
-          />
+        focused={isFocused}
-        }
+        onRefresh={_onRefresh}
-        style={{
+        renderItem={_renderItem}
-          width: '100%',
+        placeholder={<NotebookPlaceHolder colors={colors} />}
-        }}
+        placeholderText="Topics added to notebook appear here."
-        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,25 +144,7 @@ export const Notes = ({navigation}) => {
     }
   };
 
-  const _listKeyExtractor = (item, index) => item.dateCreated.toString();
+  const _bottomBottomOnPress = () => {
-
-  return (
-    <Container
-      bottomButtonText="Create a new note"
-      canGoBack={false}
-      heading={
-        params.type == 'tag'
-          ? '#' + params.title
-          : params.title.slice(0, 1).toUpperCase() + params.title.slice(1)
-      }
-      headerColor={params.type == 'color' ? params.title : null}
-      canGoBack={true}
-      data={notes}
-      type="notes"
-      placeholder={`Search in ${
-        params.type == 'tag' ? '#' + params.title : params.title
-      }`}
-      bottomButtonOnPress={() => {
     if (params.type === 'tag') {
       editing.actionAfterFirstSave = {
         type: 'tag',
@@ -301,38 +171,36 @@ export const Notes = ({navigation}) => {
       eSendEvent(eOnLoadNote, {type: 'new'});
       openEditorAnimation();
     }
-      }}>
+  };
-      <FlatList
+
-        data={
+  return (
-          searchResults.type === 'notes' &&
+    <Container
-          isFocused &&
+      bottomButtonText="Create a new note"
-          searchResults.results.length > 0
+      canGoBack={false}
-            ? searchResults.results
+      heading={
-            : notes
+        params.type == 'tag'
+          ? '#' + params.title
+          : params.title.slice(0, 1).toUpperCase() + params.title.slice(1)
       }
-        refreshControl={
+      headerColor={params.type == 'color' ? params.title : null}
-          <RefreshControl
+      canGoBack={true}
-            tintColor={colors.accent}
+      data={notes}
-            colors={[colors.accent]}
+      type="notes"
-            progressViewOffset={165}
+      placeholder={`Search in ${
-            onRefresh={_onRefresh}
+        params.type == 'tag' ? '#' + params.title : params.title
+      }`}
+      bottomButtonOnPress={_bottomBottomOnPress}>
+      <SimpleList
+        data={notes}
+        type="notes"
         refreshing={refreshing}
-          />
+        focused={isFocused}
-        }
+        onRefresh={_onRefresh}
-        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,141 +36,11 @@ export const Tags = ({navigation}) => {
     }
   }, [isFocused]);
 
-  return (
+  const _onRefresh = () => {
-    <Container
+    //Handle
-      canGoBack={false}
+  };
-      heading="Tags"
+
-      noBottomButton={true}
+  const _renderItem = ({item, index}) => (
-      placeholder="Search for #tags"
-      data={tags}
-      type="tags"
-      menu>
-      <View
-        style={{
-          width: '100%',
-          alignSelf: 'center',
-          height: '100%',
-          paddingHorizontal: 12,
-        }}>
-        <FlatList
-          style={{
-            height: '100%',
-          }}
-          ListHeaderComponent={
-            searchResults.type === 'tags' &&
-            searchResults.results.length > 0 ? (
-              <View
-                style={{
-                  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={() => {
@@ -216,7 +86,32 @@ export const Tags = ({navigation}) => {
         </Text>
       </Text>
     </TouchableOpacity>
-          )}
+  );
+
+  return (
+    <Container
+      canGoBack={false}
+      heading="Tags"
+      noBottomButton={true}
+      placeholder="Search for #tags"
+      data={tags}
+      type="tags"
+      menu>
+      <View
+        style={{
+          paddingHorizontal: 12,
+          height: '100%',
+          width: '100%',
+        }}>
+        <SimpleList
+          data={tags}
+          type="tags"
+          refreshing={refreshing}
+          focused={isFocused}
+          onRefresh={_onRefresh}
+          renderItem={_renderItem}
+          placeholder={<TagsPlaceHolder colors={colors} />}
+          placeholderText="Tags added to notes appear here"
         />
       </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}
-            colors={[colors.accent]}
-            progressViewOffset={165}
-            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}
-          />
+        focused={isFocused}
-        }
+        onRefresh={_onRefresh}
-        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>
   );