Rewrite AccountNote as functional component

app/javascript/mastodon/features/account/components/account_note.jsx

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-
-import { is } from 'immutable';
-import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import Textarea from 'react-textarea-autosize';
 
+import { submitAccountNote } from 'mastodon/actions/account_notes';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
+
 const messages = defineMessages({
   placeholder: { id: 'account_note.placeholder', defaultMessage: 'Click to add a note' },
 });
@@ -34,107 +34,66 @@ InlineAlert.propTypes = {
   show: PropTypes.bool,
 };
 
-class AccountNote extends ImmutablePureComponent {
+const InnerAccountNote = ({ accountId }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const initialValue = useAppSelector(state => state.relationships.get(accountId)?.get('note'));
+  const [value, setValue] = useState(initialValue);
+  const [saved, setSaved] = useState(false);
 
-  static propTypes = {
+  // We need to access the value on unmount
-    accountId: PropTypes.string.isRequired,
+  const valueRef = useRef(value);
-    value: PropTypes.string,
+  const dirtyRef = useRef(false);
-    onSave: PropTypes.func.isRequired,
+
-    intl: PropTypes.object.isRequired,
+  // Keep the valueRef in sync with the state
+  useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+
+  useEffect(() => {
+    if (initialValue !== valueRef.current) setValue(initialValue);
+  }, [initialValue, setValue]);
+
+  useEffect(() => {
+    dirtyRef.current = initialValue !== value;
+  }, [initialValue, value]);
+
+  const onSave = useCallback((value) => {
+    dispatch(submitAccountNote({ accountId, note: value }));
+
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  }, [accountId, dispatch, setSaved]);
+
+  // Save changes on unmount
+  useEffect(() => {
+    return () => {
+      if (dirtyRef.current) onSave(valueRef.current);
     };
+  }, [onSave]);
 
-  state = {
+  const handleChange = useCallback((e) => {
-    value: null,
+    setValue(e.target.value);
-    saving: false,
+  }, [setValue]);
-    saved: false,
-  };
 
-  UNSAFE_componentWillMount () {
+  const handleKeyDown = useCallback((e) => {
-    this._reset();
+    if (e.keyCode === 27) {
-  }
-
-  UNSAFE_componentWillReceiveProps (nextProps) {
-    const accountWillChange = !is(this.props.accountId, nextProps.accountId);
-    const newState = {};
-
-    if (accountWillChange && this._isDirty()) {
-      this._save(false);
-    }
-
-    if (accountWillChange || nextProps.value === this.state.value) {
-      newState.saving = false;
-    }
-
-    if (this.props.value !== nextProps.value) {
-      newState.value = nextProps.value;
-    }
-
-    this.setState(newState);
-  }
-
-  componentWillUnmount () {
-    if (this._isDirty()) {
-      this._save(false);
-    }
-  }
-
-  setTextareaRef = c => {
-    this.textarea = c;
-  };
-
-  handleChange = e => {
-    this.setState({ value: e.target.value, saving: false });
-  };
-
-  handleKeyDown = e => {
-    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
       e.preventDefault();
 
-      this._save();
+      setValue(initialValue);
-
+      e.target.blur();
-      if (this.textarea) {
+    } else if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-        this.textarea.blur();
-      }
-    } else if (e.keyCode === 27) {
       e.preventDefault();
 
-      this._reset(() => {
+      onSave(valueRef.current);
-        if (this.textarea) {
-          this.textarea.blur();
-        }
-      });
-    }
-  };
 
-  handleBlur = () => {
+      e.target.blur();
-    if (this._isDirty()) {
-      this._save();
     }
-  };
+  }, [onSave, initialValue]);
 
-  _save (showMessage = true) {
+  const handleBlur = useCallback(() => {
-    this.setState({ saving: true }, () => this.props.onSave(this.state.value));
+    if (dirtyRef.current) onSave(valueRef.current);
-
+  }, [onSave]);
-    if (showMessage) {
-      this.setState({ saved: true }, () => setTimeout(() => this.setState({ saved: false }), 2000));
-    }
-  }
-
-  _reset (callback) {
-    this.setState({ value: this.props.value }, callback);
-  }
-
-  _isDirty () {
-    return !this.state.saving && this.props.value !== null && this.state.value !== null && this.state.value !== this.props.value;
-  }
-
-  render () {
-    const { accountId, intl } = this.props;
-    const { value, saved } = this.state;
-
-    if (!accountId) {
-      return null;
-    }
 
   return (
     <div className='account__header__account-note'>
@@ -145,18 +104,25 @@ class AccountNote extends ImmutablePureComponent {
       <Textarea
         id={`account-note-${accountId}`}
         className='account__header__account-note__content'
-          disabled={this.props.value === null || value === null}
+        disabled={initialValue === null || value === null}
         placeholder={intl.formatMessage(messages.placeholder)}
         value={value || ''}
-          onChange={this.handleChange}
+        onChange={handleChange}
-          onKeyDown={this.handleKeyDown}
+        onKeyDown={handleKeyDown}
-          onBlur={this.handleBlur}
+        onBlur={handleBlur}
-          ref={this.setTextareaRef}
       />
     </div>
   );
-  }
+};
 
-}
+InnerAccountNote.propTypes = {
+  accountId: PropTypes.string,
+};
 
-export default injectIntl(AccountNote);
+const AccountNote = ({ accountId }) => (<InnerAccountNote accountId={accountId} key={`account-note-{accountId}`} />);
+
+AccountNote.propTypes = {
+  accountId: PropTypes.string,
+};
+
+export default AccountNote;

app/javascript/mastodon/features/account/containers/account_note_container.js

@@ -1,19 +0,0 @@
-import { connect } from 'react-redux';
-
-import { submitAccountNote } from 'mastodon/actions/account_notes';
-
-import AccountNote from '../components/account_note';
-
-const mapStateToProps = (state, { accountId }) => ({
-  value: state.relationships.getIn([accountId, 'note']),
-});
-
-const mapDispatchToProps = (dispatch, { accountId }) => ({
-
-  onSave (value) {
-    dispatch(submitAccountNote({ accountId: accountId, note: value }));
-  },
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(AccountNote);

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

@@ -42,8 +42,8 @@ import { IconButton } from 'mastodon/components/icon_button';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { ShortNumber } from 'mastodon/components/short_number';
 import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
+import AccountNote from 'mastodon/features/account/components/account_note';
 import { DomainPill } from 'mastodon/features/account/components/domain_pill';
-import AccountNoteContainer from 'mastodon/features/account/containers/account_note_container';
 import FollowRequestNoteContainer from 'mastodon/features/account/containers/follow_request_note_container';
 import { useLinks } from 'mastodon/hooks/useLinks';
 import { useIdentity } from 'mastodon/identity_context';
@@ -919,7 +919,7 @@ export const AccountHeader: React.FC<{
                 onClickCapture={handleLinkClick}
               >
                 {account.id !== me && signedIn && (
-                  <AccountNoteContainer accountId={accountId} />
+                  <AccountNote accountId={accountId} />
                 )}
 
                 {account.note.length > 0 && account.note !== '<p></p>' && (