From b6aa3e3bafe8a608eca4153c6288e83b87e34181 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 13 Jun 2024 19:08:25 -0500
Subject: [PATCH 1/2] EditIdentity: improve feedback to user upon submitting
 form

---
 src/features/edit-identity/index.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/features/edit-identity/index.tsx b/src/features/edit-identity/index.tsx
index 0b96ed3e3..d4800202c 100644
--- a/src/features/edit-identity/index.tsx
+++ b/src/features/edit-identity/index.tsx
@@ -6,6 +6,7 @@ import { patchMe } from 'soapbox/actions/me';
 import List, { ListItem } from 'soapbox/components/list';
 import { Button, CardHeader, CardTitle, Column, Emoji, Form, HStack, Icon, Input, Textarea, Tooltip } from 'soapbox/components/ui';
 import { useApi, useAppDispatch, useInstance, useOwnAccount } from 'soapbox/hooks';
+import { queryClient } from 'soapbox/queries/client';
 import { adminAccountSchema } from 'soapbox/schemas/admin-account';
 import toast from 'soapbox/toast';
 
@@ -19,6 +20,7 @@ const messages = defineMessages({
   success: { id: 'edit_profile.success', defaultMessage: 'Your profile has been successfully saved!' },
   error: { id: 'edit_profile.error', defaultMessage: 'Profile update failed' },
   placeholder: { id: 'edit_identity.reason_placeholder', defaultMessage: 'Why do you want this name?' },
+  requested: { id: 'edit_identity.requested', defaultMessage: 'Name requested' },
 });
 
 /** EditIdentity component. */
@@ -27,7 +29,7 @@ const EditIdentity: React.FC<IEditIdentity> = () => {
   const instance = useInstance();
   const dispatch = useAppDispatch();
   const { account } = useOwnAccount();
-  const { mutate } = useRequestName();
+  const { mutate, isPending } = useRequestName();
 
   const { data: approvedNames } = useNames();
   const { data: pendingNames } = usePendingNames();
@@ -49,24 +51,34 @@ const EditIdentity: React.FC<IEditIdentity> = () => {
 
   const submit = () => {
     const name = `${username}@${instance.domain}`;
-    mutate({ name, reason });
+
+    mutate({ name, reason }, {
+      onSuccess() {
+        toast.success(intl.formatMessage(messages.requested));
+        queryClient.invalidateQueries({
+          queryKey: ['names', 'pending'],
+        });
+        setUsername('');
+      },
+    });
   };
 
   return (
     <Column label={intl.formatMessage(messages.title)}>
       <div className='space-y-4'>
         <Form>
-          <UsernameInput value={username} onChange={(e) => setUsername(e.target.value)} />
+          <UsernameInput value={username} onChange={(e) => setUsername(e.target.value)} disabled={isPending} />
           <Textarea
             name='reason'
             placeholder={intl.formatMessage(messages.placeholder)}
             maxLength={500}
             onChange={(e) => setReason(e.target.value)}
+            disabled={isPending}
             value={reason}
             autoGrow
             required
           />
-          <Button theme='accent' onClick={submit}>
+          <Button theme='accent' onClick={submit} disabled={isPending}>
             <FormattedMessage id='edit_identity.request' defaultMessage='Request' />
           </Button>
         </Form>

From 3c7c1c83fe14454ba40eef43831047cc3c33338a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 13 Jun 2024 19:29:14 -0500
Subject: [PATCH 2/2] yarn i18n

---
 src/locales/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/locales/en.json b/src/locales/en.json
index d373b6b39..b3a6ad652 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -649,6 +649,7 @@
   "edit_identity.pending_names_title": "Requested Names",
   "edit_identity.reason_placeholder": "Why do you want this name?",
   "edit_identity.request": "Request",
+  "edit_identity.requested": "Name requested",
   "edit_password.header": "Change Password",
   "edit_profile.error": "Profile update failed",
   "edit_profile.fields.accepts_email_list_label": "Subscribe to newsletter",