memorising flat-list and separated posts input from redux

src/components/posts/container/postsContainer.js

@@ -61,14 +61,13 @@ const PostsContainer = ({
   const subscribingCommunities = useSelector(
     (state) => state.communities.subscribingCommunitiesInFeedScreen,
   );
-
+  const [posts, setPosts] = useState(isConnected ? [] : feedPosts);
   const [isNoPost, setIsNoPost] = useState(false);
   const [startPermlink, setStartPermlink] = useState('');
   const [startAuthor, setStartAuthor] = useState('');
   const [promotedPosts, setPromotedPosts] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
-  const [posts, setPosts] = useState(isConnected ? [] : feedPosts);
   const [selectedFilterIndex, setSelectedFilterIndex] = useState(selectedOptionIndex || 0);
   const [selectedFilterValue, setSelectedFilterValue] = useState(
     filterOptionsValue && filterOptionsValue[selectedFilterIndex],
@@ -102,7 +101,7 @@ const PostsContainer = ({
 
   useEffect(() => {
     if (forceLoadPost) {
-      setPosts([]);
+      _setFeedPosts([])
       setStartAuthor('');
       setStartPermlink('');
       setSelectedFilterIndex(selectedOptionIndex || 0);
@@ -206,6 +205,7 @@ const PostsContainer = ({
   }, [subscribingCommunities]);
 
   const _setFeedPosts = (_posts) => {
+    setPosts(_posts)
     dispatch(setFeedPosts(_posts));
   };
 
@@ -322,15 +322,15 @@ const PostsContainer = ({
                 _posts = unionBy(posts, _posts, 'permlink');
               }
             }
-            if (posts.length <= 5 && pageType !== 'profiles') {
+            // if (posts.length <= 5 && pageType !== 'profiles') {
               _setFeedPosts(_posts);
-            }
+            // }
 
             //if (!refreshing) {
             setStartAuthor(result[result.length - 1] && result[result.length - 1].author);
             setStartPermlink(result[result.length - 1] && result[result.length - 1].permlink);
             //}
-            setPosts(_posts);
+            // setPosts(_posts);
           }
         } else if (result.length === 0) {
           setIsNoPost(true);
@@ -368,7 +368,7 @@ const PostsContainer = ({
 
   const _handleFilterOnDropdownSelect = (index) => {
     setSelectedFilterIndex(index);
-    setPosts([]);
+    _setFeedPosts([])
     setStartPermlink('');
     setStartAuthor('');
     setIsNoPost(false);
@@ -376,7 +376,7 @@ const PostsContainer = ({
 
   const _handleFeedSubfilterOnDropdownSelect = (index) => {
     setSelectedFeedSubfilterIndex(index);
-    setPosts([]);
+    _setFeedPosts([])
     setStartPermlink('');
     setStartAuthor('');
     setIsNoPost(false);
@@ -482,7 +482,6 @@ const PostsContainer = ({
       selectedOptionIndex={selectedOptionIndex}
       tag={tag}
       filterOptionsValue={filterOptionsValue}
-      posts={posts}
       isLoading={isLoading}
       refreshing={refreshing}
       selectedFilterIndex={selectedFilterIndex}

src/components/posts/view/postsView.js

@@ -20,6 +20,7 @@ import { ThemeContainer } from '../../../containers';
 import styles from './postsStyles';
 import { default as ROUTES } from '../../../constants/routeNames';
 import globalStyles from '../../../globalStyles';
+import PostsList from '../../postsList';
 
 let _onEndReachedCalledDuringMomentum = true;
 
@@ -313,7 +314,34 @@ const PostsView = ({
             />
           )}
 
-          <FlatList
+          <PostsList
+            ref={postsList}
+            promotedPosts={promotedPosts}
+            showsVerticalScrollIndicator={false}
+            onEndReached={_onEndReached}
+            onMomentumScrollBegin={() => {
+              _onEndReachedCalledDuringMomentum = false;
+            }}
+            removeClippedSubviews
+            refreshing={refreshing}
+            onRefresh={handleOnRefreshPosts}
+            onEndReachedThreshold={1}
+            ListFooterComponent={_renderFooter}
+            onScrollEndDrag={_handleOnScroll}
+            ListEmptyComponent={_renderEmptyContent}
+            refreshControl={
+              <RefreshControl
+                refreshing={refreshing}
+                onRefresh={handleOnRefreshPosts}
+                progressBackgroundColor="#357CE6"
+                tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'}
+                titleColor="#fff"
+                colors={['#fff']}
+              />
+            }
+          />
+
+          {/* <FlatList
             ref={postsList}
             data={posts}
             showsVerticalScrollIndicator={false}
@@ -340,7 +368,7 @@ const PostsView = ({
                 colors={['#fff']}
               />
             }
-          />
+          /> */}
         </View>
       )}
     </ThemeContainer>

src/components/postsList/container/postsListContainer.tsx

@@ -0,0 +1,87 @@
+import React, {memo, useRef} from 'react'
+import PostCard from '../../postCard';
+import { get } from 'lodash';
+import { FlatListProps, FlatList } from 'react-native';
+import { useSelector } from 'react-redux';
+
+
+interface postsListContainerProps extends FlatListProps<any> {
+    promotedPosts:Array<any>;
+}
+
+const postsListContainer = ({
+    promotedPosts,
+    ...props
+}:postsListContainerProps) => {
+
+    const isHideImages = useSelector((state) => state.ui.hidePostsThumbnails);
+    const posts = useSelector((state) => state.posts.feedPosts);
+
+
+    const _renderItem = ({ item, index }) => {
+        const e = [];
+        if (index % 3 === 0) {
+          const ix = index / 3 - 1;
+          if (promotedPosts[ix] !== undefined) {
+            const p = promotedPosts[ix];
+            if (get(p, 'author', null) && posts.filter((x) => x.permlink === p.permlink).length <= 0) {
+              e.push(
+                <PostCard
+                  key={`${p.author}-${p.permlink}-prom`}
+                  isRefresh={false}
+                  content={p}
+                  isHideImage={isHideImages}
+                />,
+              );
+            }
+          }
+        }
+        if (get(item, 'author', null)) {
+          e.push(
+            <PostCard
+              key={`${item.author}-${item.permlink}`}
+              isRefresh={false}
+              content={item}
+              isHideImage={isHideImages}
+            />,
+          );
+        }
+        return e;
+      };
+
+    return (
+        <FlatList
+            data={posts}
+            showsVerticalScrollIndicator={false}
+            renderItem={_renderItem}
+            keyExtractor={(content) => content.permlink}
+            removeClippedSubviews
+            onEndReachedThreshold={1}
+            maxToRenderPerBatch={3}
+            initialNumToRender={3}
+            windowSize={5}
+            {...props}
+        />
+    )
+}
+
+//render only is posts list item are different;
+// const _checkEquality = (prevProps:postsListContainerProps, nextProps:postsListContainerProps) => {
+//     console.log("equality check: ", prevProps, nextProps)
+
+//     if(prevProps.posts.length == nextProps.posts.length){
+//         let samePosts = true;
+//         for(var i = 0; i < nextProps.posts.length; i++){
+            
+//             if(nextProps.posts[i].post_id !== prevProps.posts[i].post_id){
+//                 samePosts = false;
+//                 break;
+//             }
+//         }
+//         return samePosts;
+//     }
+
+//     return false;
+// }
+
+export default memo(postsListContainer);

src/components/postsList/index.js

@@ -0,0 +1,5 @@
+import PostsListView from './view/postsListView';
+import PostsList from './container/postsListContainer';
+
+export { PostsListView, PostsList };
+export default PostsList;

src/components/postsList/view/postsListView.tsx

@@ -0,0 +1,12 @@
+import React, { useRef } from 'react'
+import { View } from 'react-native'
+
+
+const postsListView = () => {
+    //will posts stuff here when finalized on the main container
+    return <View>
+        
+    </View>
+}
+
+export default postsListView