Rewrite AccountNote as Typescript functional component (#34925)

Co-authored-by: diondiondion <mail@diondiondion.com>

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

@@ -0,0 +1,131 @@
+import type { ChangeEventHandler, KeyboardEventHandler } from 'react';
+import { useState, useRef, useCallback, useId } from 'react';
+
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+import Textarea from 'react-textarea-autosize';
+
+import { submitAccountNote } from '@/mastodon/actions/account_notes';
+import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
+import { useAppDispatch, useAppSelector } from '@/mastodon/store';
+
+const messages = defineMessages({
+  placeholder: {
+    id: 'account_note.placeholder',
+    defaultMessage: 'Click to add a note',
+  },
+});
+
+const AccountNoteUI: React.FC<{
+  initialValue: string | undefined;
+  onSubmit: (newNote: string) => void;
+  wasSaved: boolean;
+}> = ({ initialValue, onSubmit, wasSaved }) => {
+  const intl = useIntl();
+  const uniqueId = useId();
+  const [value, setValue] = useState(initialValue ?? '');
+  const isLoading = initialValue === undefined;
+  const canSubmitOnBlurRef = useRef(true);
+
+  const handleChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(
+    (e) => {
+      setValue(e.target.value);
+    },
+    [],
+  );
+
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
+    (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+
+        setValue(initialValue ?? '');
+
+        canSubmitOnBlurRef.current = false;
+        e.currentTarget.blur();
+      } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+
+        onSubmit(value);
+
+        canSubmitOnBlurRef.current = false;
+        e.currentTarget.blur();
+      }
+    },
+    [initialValue, onSubmit, value],
+  );
+
+  const handleBlur = useCallback(() => {
+    if (initialValue !== value && canSubmitOnBlurRef.current) {
+      onSubmit(value);
+    }
+    canSubmitOnBlurRef.current = true;
+  }, [initialValue, onSubmit, value]);
+
+  return (
+    <div className='account__header__account-note'>
+      <label htmlFor={`account-note-${uniqueId}`}>
+        <FormattedMessage
+          id='account.account_note_header'
+          defaultMessage='Personal note'
+        />{' '}
+        <span
+          aria-live='polite'
+          role='status'
+          className='inline-alert'
+          style={{ opacity: wasSaved ? 1 : 0 }}
+        >
+          {wasSaved && (
+            <FormattedMessage id='generic.saved' defaultMessage='Saved' />
+          )}
+        </span>
+      </label>
+      {isLoading ? (
+        <div className='account__header__account-note__loading-indicator-wrapper'>
+          <LoadingIndicator />
+        </div>
+      ) : (
+        <Textarea
+          id={`account-note-${uniqueId}`}
+          className='account__header__account-note__content'
+          placeholder={intl.formatMessage(messages.placeholder)}
+          value={value}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+        />
+      )}
+    </div>
+  );
+};
+
+export const AccountNote: React.FC<{
+  accountId: string;
+}> = ({ accountId }) => {
+  const dispatch = useAppDispatch();
+  const initialValue = useAppSelector((state) =>
+    state.relationships.get(accountId)?.get('note'),
+  );
+  const [wasSaved, setWasSaved] = useState(false);
+
+  const handleSubmit = useCallback(
+    (note: string) => {
+      setWasSaved(true);
+      void dispatch(submitAccountNote({ accountId, note }));
+
+      setTimeout(() => {
+        setWasSaved(false);
+      }, 2000);
+    },
+    [dispatch, accountId],
+  );
+
+  return (
+    <AccountNoteUI
+      key={`${accountId}-${initialValue}`}
+      initialValue={initialValue}
+      wasSaved={wasSaved}
+      onSubmit={handleSubmit}
+    />
+  );
+};