Fix moved notice on profiles in web UI (#34052)
This commit is contained in:
		
					parent
					
						
							
								d50110a17a
							
						
					
				
			
			
				commit
				
					
						d399244d4d
					
				
			
		
					 4 changed files with 61 additions and 46 deletions
				
			
		|  | @ -58,8 +58,8 @@ import { | |||
| import { getAccountHidden } from 'mastodon/selectors/accounts'; | ||||
| import { useAppSelector, useAppDispatch } from 'mastodon/store'; | ||||
| 
 | ||||
| import MemorialNote from './memorial_note'; | ||||
| import MovedNote from './moved_note'; | ||||
| import { MemorialNote } from './memorial_note'; | ||||
| import { MovedNote } from './moved_note'; | ||||
| 
 | ||||
| const messages = defineMessages({ | ||||
|   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, | ||||
|  | @ -833,7 +833,7 @@ export const AccountHeader: React.FC<{ | |||
|     <div className='account-timeline__header'> | ||||
|       {!hidden && account.memorial && <MemorialNote />} | ||||
|       {!hidden && account.moved && ( | ||||
|         <MovedNote from={account} to={account.moved} /> | ||||
|         <MovedNote accountId={account.id} targetAccountId={account.moved} /> | ||||
|       )} | ||||
| 
 | ||||
|       <div | ||||
|  |  | |||
|  | @ -1,11 +1,12 @@ | |||
| import { FormattedMessage } from 'react-intl'; | ||||
| 
 | ||||
| const MemorialNote = () => ( | ||||
| export const MemorialNote: React.FC = () => ( | ||||
|   <div className='account-memorial-banner'> | ||||
|     <div className='account-memorial-banner__message'> | ||||
|       <FormattedMessage id='account.in_memoriam' defaultMessage='In Memoriam.' /> | ||||
|       <FormattedMessage | ||||
|         id='account.in_memoriam' | ||||
|         defaultMessage='In Memoriam.' | ||||
|       /> | ||||
|     </div> | ||||
|   </div> | ||||
| ); | ||||
| 
 | ||||
| export default MemorialNote; | ||||
|  | @ -1,39 +0,0 @@ | |||
| import { FormattedMessage } from 'react-intl'; | ||||
| 
 | ||||
| import { Link } from 'react-router-dom'; | ||||
| 
 | ||||
| import ImmutablePropTypes from 'react-immutable-proptypes'; | ||||
| import ImmutablePureComponent from 'react-immutable-pure-component'; | ||||
| 
 | ||||
| import { AvatarOverlay } from '../../../components/avatar_overlay'; | ||||
| import { DisplayName } from '../../../components/display_name'; | ||||
| 
 | ||||
| export default class MovedNote extends ImmutablePureComponent { | ||||
| 
 | ||||
|   static propTypes = { | ||||
|     from: ImmutablePropTypes.map.isRequired, | ||||
|     to: ImmutablePropTypes.map.isRequired, | ||||
|   }; | ||||
| 
 | ||||
|   render () { | ||||
|     const { from, to } = this.props; | ||||
| 
 | ||||
|     return ( | ||||
|       <div className='moved-account-banner'> | ||||
|         <div className='moved-account-banner__message'> | ||||
|           <FormattedMessage id='account.moved_to' defaultMessage='{name} has indicated that their new account is now:' values={{ name: <bdi><strong dangerouslySetInnerHTML={{ __html: from.get('display_name_html') }} /></bdi> }} /> | ||||
|         </div> | ||||
| 
 | ||||
|         <div className='moved-account-banner__action'> | ||||
|           <Link to={`/@${to.get('acct')}`} className='detailed-status__display-name'> | ||||
|             <div className='detailed-status__display-avatar'><AvatarOverlay account={to} friend={from} /></div> | ||||
|             <DisplayName account={to} /> | ||||
|           </Link> | ||||
| 
 | ||||
|           <Link to={`/@${to.get('acct')}`} className='button'><FormattedMessage id='account.go_to_profile' defaultMessage='Go to profile' /></Link> | ||||
|         </div> | ||||
|       </div> | ||||
|     ); | ||||
|   } | ||||
| 
 | ||||
| } | ||||
|  | @ -0,0 +1,53 @@ | |||
| import { FormattedMessage } from 'react-intl'; | ||||
| 
 | ||||
| import { Link } from 'react-router-dom'; | ||||
| 
 | ||||
| import { AvatarOverlay } from 'mastodon/components/avatar_overlay'; | ||||
| import { DisplayName } from 'mastodon/components/display_name'; | ||||
| import { useAppSelector } from 'mastodon/store'; | ||||
| 
 | ||||
| export const MovedNote: React.FC<{ | ||||
|   accountId: string; | ||||
|   targetAccountId: string; | ||||
| }> = ({ accountId, targetAccountId }) => { | ||||
|   const from = useAppSelector((state) => state.accounts.get(accountId)); | ||||
|   const to = useAppSelector((state) => state.accounts.get(targetAccountId)); | ||||
| 
 | ||||
|   return ( | ||||
|     <div className='moved-account-banner'> | ||||
|       <div className='moved-account-banner__message'> | ||||
|         <FormattedMessage | ||||
|           id='account.moved_to' | ||||
|           defaultMessage='{name} has indicated that their new account is now:' | ||||
|           values={{ | ||||
|             name: ( | ||||
|               <bdi> | ||||
|                 <strong | ||||
|                   dangerouslySetInnerHTML={{ | ||||
|                     __html: from?.display_name_html ?? '', | ||||
|                   }} | ||||
|                 /> | ||||
|               </bdi> | ||||
|             ), | ||||
|           }} | ||||
|         /> | ||||
|       </div> | ||||
| 
 | ||||
|       <div className='moved-account-banner__action'> | ||||
|         <Link to={`/@${to?.acct}`} className='detailed-status__display-name'> | ||||
|           <div className='detailed-status__display-avatar'> | ||||
|             <AvatarOverlay account={to} friend={from} /> | ||||
|           </div> | ||||
|           <DisplayName account={to} /> | ||||
|         </Link> | ||||
| 
 | ||||
|         <Link to={`/@${to?.acct}`} className='button'> | ||||
|           <FormattedMessage | ||||
|             id='account.go_to_profile' | ||||
|             defaultMessage='Go to profile' | ||||
|           /> | ||||
|         </Link> | ||||
|       </div> | ||||
|     </div> | ||||
|   ); | ||||
| }; | ||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue