diff --git a/app/javascript/flavours/glitch/components/mentions_placeholder.jsx b/app/javascript/flavours/glitch/components/mentions_placeholder.jsx new file mode 100644 index 00000000000000..dde4d77a8494db --- /dev/null +++ b/app/javascript/flavours/glitch/components/mentions_placeholder.jsx @@ -0,0 +1,29 @@ +import ImmutablePropTypes from 'react-immutable-proptypes'; + +import { Permalink } from 'flavours/glitch/components/permalink'; + +export const MentionsPlaceholder = ({ status }) => { + if (status.get('spoiler_text').length === 0 || !status.get('mentions')) { + return null; + } + + return ( +
+ {status.get('mentions').map(item => ( + + @{item.get('username')} + + )).reduce((aggregate, item) => [...aggregate, item, ' '], [])} +
+ ); +}; + +MentionsPlaceholder.propTypes = { + status: ImmutablePropTypes.map.isRequired, +}; + \ No newline at end of file diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index 276fff6ada244f..f45b41e9238e4f 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -28,6 +28,7 @@ import { Avatar } from './avatar'; import { AvatarOverlay } from './avatar_overlay'; import { DisplayName } from './display_name'; import { getHashtagBarForStatus } from './hashtag_bar'; +import { MentionsPlaceholder } from './mentions_placeholder'; import { Permalink } from './permalink'; import StatusActionBar from './status_action_bar'; import StatusContent from './status_content'; @@ -698,7 +699,6 @@ class Status extends ImmutablePureComponent { {status.get('spoiler_text').length > 0 && } - { /* TODO: mention placeholders */ } {expanded && ( <> )} + {/* This is a glitch-soc addition to have a placeholder */} + {!expanded && } + )} - {/* TODO: mention placeholders */} {expanded && ( <> )} + {/* This is a glitch-soc addition to have a placeholder */} + {!expanded && } +