diff --git a/frontend/src/views/game/board/usePostUserPermissions.ts b/frontend/src/views/game/board/usePostUserPermissions.ts index 2d13d5923..852c97a26 100644 --- a/frontend/src/views/game/board/usePostUserPermissions.ts +++ b/frontend/src/views/game/board/usePostUserPermissions.ts @@ -8,3 +8,15 @@ export function usePostUserPermissions(post: Post): PostUserPermissions { const user = useUser(); return postPermissionLogic(post, session, user); } + +export function usePostUserPermissionsNullable( + post?: Post +): PostUserPermissions | undefined { + const { session } = useSession(); + const user = useUser(); + if (!post) { + return undefined; + } + + return postPermissionLogic(post, session, user); +} diff --git a/frontend/src/views/game/summary/SummaryMode.tsx b/frontend/src/views/game/summary/SummaryMode.tsx index 157fd7193..2a49b97b0 100644 --- a/frontend/src/views/game/summary/SummaryMode.tsx +++ b/frontend/src/views/game/summary/SummaryMode.tsx @@ -23,6 +23,7 @@ import useTranslation from '../../../translations'; import useCrypto from '../../../crypto/useCrypto'; import isSearchMatch from '../is-search-match'; import { Box } from '@mui/system'; +import { usePostUserPermissionsNullable } from '../board/usePostUserPermissions'; interface SummaryModeProps { columns: ColumnContent[]; @@ -120,6 +121,8 @@ interface PostLineProps { const PostLine = ({ item, search }: PostLineProps) => { const { decrypt } = useCrypto(); + const permissions = usePostUserPermissionsNullable(item.post); + const canShowAuthor = permissions && permissions.canShowAuthor; const higlighted = search && isSearchMatch( @@ -129,23 +132,40 @@ const PostLine = ({ item, search }: PostLineProps) => { false ); return ( - - - - +{item.likes}  - -{item.dislikes} - - - {decrypt(item.content)} - - - + + + + + +{item.likes}  + -{item.dislikes} + + + {decrypt(item.content)} + + {canShowAuthor ? (by {item.post?.user.name}) : null} + + + ); }; +const PostLineContainer = styled.div` + :hover { + background-color: ${colors.grey[50]}; + } +`; + +const Author = styled.div` + color: ${colors.grey[500]}; + font-size: 0.7rem; + display: flex; + align-items: center; + padding: 0 10px; +`; + const PostContainer = styled.div` display: flex; `; diff --git a/frontend/src/views/game/summary/types.ts b/frontend/src/views/game/summary/types.ts index f0a11f6c7..c6be0bec8 100644 --- a/frontend/src/views/game/summary/types.ts +++ b/frontend/src/views/game/summary/types.ts @@ -1,4 +1,5 @@ import { User } from '@sentry/types'; +import { Post, PostGroup } from 'common'; import { ColumnContent } from '../types'; export interface Stats { @@ -19,6 +20,8 @@ export interface ColumnStatsItem { content: string; user: User | null; children: ColumnStatsItem[]; + post?: Post; + group?: PostGroup; } export interface ActionItem { diff --git a/frontend/src/views/game/summary/useSummary.ts b/frontend/src/views/game/summary/useSummary.ts index b861ba03f..e398fc2ce 100644 --- a/frontend/src/views/game/summary/useSummary.ts +++ b/frontend/src/views/game/summary/useSummary.ts @@ -51,6 +51,7 @@ function postToItem( children: [], likes: countVotes(post, 'like'), dislikes: countVotes(post, 'dislike'), + post, }; } @@ -70,6 +71,7 @@ function groupToItem( ), likes: countVotesForGroup(group, 'like'), dislikes: countVotesForGroup(group, 'dislike'), + group, }; }