diff --git a/src/components/posts/container/postsContainer.js b/src/components/posts/container/postsContainer.js
index c098fb9b3..3a3c8b95d 100644
--- a/src/components/posts/container/postsContainer.js
+++ b/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 (
);
};
diff --git a/src/components/posts/view/postsStyles.js b/src/components/posts/view/postsStyles.js
index 92d945aee..f2a21e166 100644
--- a/src/components/posts/view/postsStyles.js
+++ b/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',
},
});
diff --git a/src/components/posts/view/postsView.js b/src/components/posts/view/postsView.js
index 7998b9bdc..9d0add54d 100644
--- a/src/components/posts/view/postsView.js
+++ b/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 && (
- {
- handleOnRefreshPosts();
- setShowNewPostsPopup(false);
- }}
- >
-
- NEW CONTENT AVAILABLE
+
+ {
+ handleOnRefreshPosts();
+ setNewPostsPopupPictures(null);
+ }}
+ >
+
+ {
+ setNewPostsPopupPictures(null);
+ }}
+ size={12}
+ />
- {
- setShowNewPostsPopup(false);
- }}
- size={20}
- />
-
-
+ {newPostsPopupPictures.map((url, index) => (
+
+ ))}
+
+ Posted
+
+
+
+ {
+ setNewPostsPopupPictures(null);
+ }}
+ size={12}
+ />
+
)}