improved posts fetch logic, also added support for images

src/components/posts/container/postsContainer.js

@@ -86,7 +86,7 @@ const PostsContainer = ({
   );
   const [recommendedUsers, setRecommendedUsers] = useState([]);
   const [recommendedCommunities, setRecommendedCommunities] = useState([]);
-  const [showNewPostsPopup, setShowNewPostsPopup] = useState(false);
+  const [newPostsPopupPictures, setNewPostsPopupPictures] = useState(null);
 
   const _resetLocalVoteMap = () => {
     dispatch(resetLocalVoteMap());
@@ -479,11 +479,20 @@ const PostsContainer = ({
   const _matchFreshPosts = (posts, reducerFilter) => {
     const cachedPosts = cache.cachedData[reducerFilter].posts;
 
-    const cachedPostId = get(cachedPosts[0], 'post_id');
-    const newPostId = get(posts[0], 'post_id');
+    const newPosts = [];
+    posts.forEach((post, index) => {
+      const cachedPostId = get(cachedPosts[index], 'post_id');
+      const newPostId = get(post, 'post_id');
 
-    if (cachedPostId !== newPostId) {
-      setShowNewPostsPopup(true);
+      if (cachedPostId !== newPostId) {
+        newPosts.push(post);
+      }
+    });
+
+    if (newPosts.length > 0) {
+      setNewPostsPopupPictures(newPosts.map((post) => get(post, 'avatar', '')));
+    } else {
+      _scheduleLatestPostsCheck(posts[0]);
     }
   };
 
@@ -776,6 +785,16 @@ const PostsContainer = ({
     });
   };
 
+  const _handleSetNewPostsPopupPictures = (data) => {
+    setNewPostsPopupPictures(data);
+    const cacheFilter =
+      cache.currentFilter !== 'feed' ? cache.currentFilter : cache.currentSubFilter;
+    const posts = cache.cachedData[cacheFilter].posts;
+    if (posts.length > 0) {
+      _scheduleLatestPostsCheck(posts[0]);
+    }
+  };
+
   return (
     <PostsView
       ref={elem}
@@ -813,8 +832,8 @@ const PostsContainer = ({
       followingUsers={followingUsers}
       subscribingCommunities={subscribingCommunities}
       isFeedScreen={isFeedScreen}
-      showNewPostsPopup={showNewPostsPopup}
-      setShowNewPostsPopup={setShowNewPostsPopup}
+      newPostsPopupPictures={newPostsPopupPictures}
+      setNewPostsPopupPictures={_handleSetNewPostsPopupPictures}
     />
   );
 };

src/components/posts/view/postsStyles.js

@@ -51,17 +51,31 @@ export default EStyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: '$primaryBlue',
-    paddingHorizontal: 16,
-    paddingVertical: 4,
+    paddingHorizontal: 0,
+    paddingVertical: 2,
     borderRadius: 32,
   },
   popupText: {
-    fontWeight: '700',
+    fontWeight: '500',
     color: '$white',
+    marginLeft: 6,
   },
   closeIcon: {
     color: '$white',
     margin: 0,
-    marginLeft: 8,
+    padding: 6,
+  },
+  arrowUpIcon: {
+    color: '$white',
+    margin: 0,
+    marginHorizontal: 4,
+  },
+  popupImage: {
+    height: 24,
+    width: 24,
+    borderRadius: 12,
+    borderWidth: 2,
+    marginLeft: -8,
+    borderColor: '$primaryBlue',
   },
 });

src/components/posts/view/postsView.js

@@ -14,6 +14,7 @@ import { withNavigation } from 'react-navigation';
 import { get } from 'lodash';
 
 // COMPONENTS
+import FastImage from 'react-native-fast-image';
 import { PostCard } from '../../postCard';
 import { FilterBar } from '../../filterBar';
 import {
@@ -68,8 +69,8 @@ const PostsView = ({
   followingUsers,
   subscribingCommunities,
   isFeedScreen,
-  showNewPostsPopup,
-  setShowNewPostsPopup,
+  newPostsPopupPictures,
+  setNewPostsPopupPictures,
 }) => {
   const intl = useIntl();
   const postsList = useRef(null);
@@ -310,28 +311,47 @@ const PostsView = ({
             isFeedScreen={isFeedScreen}
           />
 
-          {showNewPostsPopup && (
+          {newPostsPopupPictures !== null && (
             <View style={styles.popupContainer}>
-              <TouchableOpacity
-                onPress={() => {
-                  handleOnRefreshPosts();
-                  setShowNewPostsPopup(false);
-                }}
-              >
-                <View style={styles.popupContentContainer}>
-                  <Text style={styles.popupText}>NEW CONTENT AVAILABLE</Text>
+              <View style={styles.popupContentContainer}>
+                <TouchableOpacity
+                  onPress={() => {
+                    handleOnRefreshPosts();
+                    setNewPostsPopupPictures(null);
+                  }}
+                >
+                  <View style={styles.popupContentContainer}>
+                    <IconButton
+                      iconStyle={styles.arrowUpIcon}
+                      iconType="MaterialCommunityIcons"
+                      name="arrow-up"
+                      onPress={() => {
+                        setNewPostsPopupPictures(null);
+                      }}
+                      size={12}
+                    />
 
-                  <IconButton
-                    iconStyle={styles.closeIcon}
-                    iconType="MaterialCommunityIcons"
-                    name="close"
-                    onPress={() => {
-                      setShowNewPostsPopup(false);
-                    }}
-                    size={20}
-                  />
-                </View>
-              </TouchableOpacity>
+                    {newPostsPopupPictures.map((url, index) => (
+                      <FastImage
+                        source={{ uri: url }}
+                        style={[styles.popupImage, { zIndex: 10 - index }]}
+                      />
+                    ))}
+
+                    <Text style={styles.popupText}>Posted</Text>
+                  </View>
+                </TouchableOpacity>
+
+                <IconButton
+                  iconStyle={styles.closeIcon}
+                  iconType="MaterialCommunityIcons"
+                  name="close"
+                  onPress={() => {
+                    setNewPostsPopupPictures(null);
+                  }}
+                  size={12}
+                />
+              </View>
             </View>
           )}