Flagged posts now hidden in other contexts

apps/web/src/components/PostBigGridItem/PostBigGridItem.js

@@ -12,6 +12,7 @@ import Icon from 'components/Icon'
 import Tooltip from 'components/Tooltip'
 import respondToEvent from 'store/actions/respondToEvent'
 import getMe from 'store/selectors/getMe'
+import getMyGroups from 'store/selectors/getMyGroups'
 import { personUrl, postUrl } from 'util/navigation'
 
 import classes from './PostBigGridItem.module.scss'
@@ -40,7 +41,8 @@ export default function PostBigGridItem ({
   // XXX: we should figure out what to actually do with 'video' type attachments, which are almost never used
   const attachmentType = (firstAttachment.type === 'video' ? 'file' : firstAttachment.type) || 0
   const attachmentUrl = firstAttachment.url || 0
-  const isFlagged = post.flaggedGroups && post.flaggedGroups.includes(currentGroupId)
+  const myGroupsIds = useSelector(getMyGroups).map(group => group.id)
+  const isFlagged = post.flaggedGroups && post.flaggedGroups.some(group => myGroupsIds.includes(group))
 
   const currentUser = useSelector(getMe)
 

apps/web/src/components/PostCard/PostCard.jsx

@@ -12,6 +12,7 @@ import { POST_PROP_TYPES } from 'store/models/Post'
 import { postUrl, editPostUrl } from 'util/navigation'
 import respondToEvent from 'store/actions/respondToEvent'
 import getMe from 'store/selectors/getMe'
+import getMyGroups from 'store/selectors/getMyGroups'
 import EventBody from './EventBody'
 import PostBody from './PostBody'
 import PostFooter from './PostFooter'
@@ -80,7 +81,9 @@ export default function PostCard (props) {
 
   const postType = get('type', post)
   const isEvent = postType === 'event'
-  const isFlagged = group && post.flaggedGroups && post.flaggedGroups.includes(group.id)
+  const myGroupsIds = useSelector(getMyGroups).map(group => group.id)
+
+  const isFlagged = post.flaggedGroups && post.flaggedGroups.some(group => myGroupsIds.includes(group))
 
   const hasImage = post.attachments?.find(a => a.type === 'image') || false
 

apps/web/src/components/PostGridItem/PostGridItem.js

@@ -4,6 +4,8 @@ import Tooltip from 'components/Tooltip'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { personUrl, postUrl } from 'util/navigation'
+import { useSelector } from 'react-redux'
+import getMyGroups from 'store/selectors/getMyGroups'
 import Avatar from 'components/Avatar'
 import HyloHTML from 'components/HyloHTML'
 import Icon from 'components/Icon'
@@ -33,7 +35,8 @@ export default function PostGridItem ({
   const attachmentType = firstAttachment.type || 0
   const attachmentUrl = firstAttachment.url || 0
   const { t } = useTranslation()
-  const isFlagged = post.flaggedGroups && post.flaggedGroups.includes(currentGroupId)
+  const myGroupsIds = useSelector(getMyGroups).map(group => group.id)
+  const isFlagged = post.flaggedGroups && post.flaggedGroups.some(group => myGroupsIds.includes(group))
   const creatorUrl = personUrl(creator.id, routeParams.slug)
   const unread = false
   // will reintegrate once I have attachment vars

apps/web/src/components/PostListRow/PostListRow.js

@@ -6,6 +6,8 @@ import Moment from 'moment-timezone'
 
 import { isEmpty } from 'lodash/fp'
 import { personUrl, topicUrl } from 'util/navigation'
+import { useSelector } from 'react-redux'
+import getMyGroups from 'store/selectors/getMyGroups'
 import Avatar from 'components/Avatar'
 import EmojiRow from 'components/EmojiRow'
 import HyloHTML from 'components/HyloHTML'
@@ -20,7 +22,6 @@ const PostListRow = (props) => {
   const {
     childPost,
     routeParams,
-    currentGroupId,
     post,
     showDetails,
     expanded,
@@ -37,6 +38,8 @@ const PostListRow = (props) => {
 
   const { t } = useTranslation()
 
+  const myGroupsIds = useSelector(getMyGroups).map(group => group.id)
+
   if (!creator) { // PostCard guards against this, so it must be important? ;P
     return null
   }
@@ -48,7 +51,7 @@ const PostListRow = (props) => {
   const numOtherCommentors = commentersTotal - 1
   const unread = false
   const startTimeMoment = Moment(post.startTime)
-  const isFlagged = post.flaggedGroups && post.flaggedGroups.includes(currentGroupId)
+  const isFlagged = post.flaggedGroups && post.flaggedGroups.some(group => myGroupsIds.includes(group))
 
   return (
     <div className={cx(classes.postRow, { [classes.unread]: unread, [classes.expanded]: expanded })} onClick={showDetails}>

apps/web/src/routes/PostDetail/PostDetail.js

@@ -36,6 +36,7 @@ import trackAnalyticsEvent from 'store/actions/trackAnalyticsEvent'
 import { FETCH_POST } from 'store/constants'
 import presentPost from 'store/presenters/presentPost'
 import getGroupForSlug from 'store/selectors/getGroupForSlug'
+import getMyGroups from 'store/selectors/getMyGroups'
 import getMe from 'store/selectors/getMe'
 import getPost from 'store/selectors/getPost'
 import getQuerystringParam from 'store/selectors/getQuerystringParam'
@@ -55,6 +56,7 @@ function PostDetail () {
   const postId = routeParams.postId || getQuerystringParam('fromPostId', location)
   const { groupSlug, commentId } = routeParams
 
+  const myGroupsIds = useSelector(getMyGroups).map(group => group.id)
   const currentGroup = useSelector(state => getGroupForSlug(state, groupSlug))
   const postSelector = useSelector(state => getPost(state, postId))
   const post = useMemo(() => {
@@ -140,7 +142,7 @@ function PostDetail () {
   const isProject = get('type', post) === 'project'
   const isEvent = get('type', post) === 'event'
   // TODO: if not in a group should show as flagged if flagged in any of my groups
-  const isFlagged = post.flaggedGroups && post.flaggedGroups.includes(currentGroup?.id)
+  const isFlagged = post.flaggedGroups && post.flaggedGroups.some(group => myGroupsIds.includes(group))
 
   const m = post.projectManagementLink ? post.projectManagementLink.match(/(asana|trello|airtable|clickup|confluence|teamwork|notion|wrike|zoho)/) : null
   const projectManagementTool = m ? m[1] : null