Fix moved notice on profiles in web UI (#34052)

app/javascript/mastodon/features/account_timeline/components/account_header.tsx

@@ -58,8 +58,8 @@ import {
 import { getAccountHidden } from 'mastodon/selectors/accounts';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
-import MemorialNote from './memorial_note';
+import { MemorialNote } from './memorial_note';
-import MovedNote from './moved_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

app/javascript/mastodon/features/account_timeline/components/memorial_note.tsx

@@ -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;

app/javascript/mastodon/features/account_timeline/components/moved_note.jsx

@@ -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>
-    );
-  }
-
-}

app/javascript/mastodon/features/account_timeline/components/moved_note.tsx

@@ -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>
+  );
+};