refactor

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 &&