Fix/add members (#339)

* Refactor AddMembers button composition and trigger

* Fix save value on submit

* Fixes

* Removed groupDetailQuery ternary check

Author: marcosinigaglia

src/components/Account/UpdateName.tsx

@@ -77,7 +77,7 @@ export const UpdateName: React.FC<{
       actionOnClick={handleOnActionClick}
     >
       <Form {...detailForm}>
-        <form className="mt-4 flex w-full items-start gap-4">
+        <form className="mt-4 flex w-full items-start gap-4" onSubmit={handleOnActionClick}>
           <FormField control={detailForm.control} name="name" render={field} />
         </form>
       </Form>

src/components/group/AddMembers.tsx

@@ -15,7 +15,7 @@ import { Input } from '../ui/input';
 
 const AddMembers: React.FC<{
   enableSendingInvites: boolean;
-  group: Group & { groupUsers: GroupUser[] };
+  group: (Group & { groupUsers: GroupUser[] }) | null | undefined;
   children: React.ReactNode;
 }> = ({ group, children, enableSendingInvites }) => {
   const { t } = useTranslation('groups_details');
@@ -29,6 +29,10 @@ const AddMembers: React.FC<{
 
   const utils = api.useUtils();
 
+  if (!group) {
+    return null;
+  }
+
   const groupUserMap = group.groupUsers.reduce(
     (acc, gu) => {
       acc[gu.userId] = true;
@@ -103,7 +107,7 @@ const AddMembers: React.FC<{
 
   return (
     <AppDrawer
-      trigger={<>{children}</>}
+      trigger={children}
       onTriggerClick={handleTriggerClick}
       title={t('ui.no_members.add_members_details.title')}
       leftAction={t('ui.actions.cancel', { ns: 'common' })}

src/components/group/NoMembers.tsx

@@ -29,12 +29,13 @@ const NoMembers: React.FC<NoMembersProps> = ({ group, enableSendingInvites }) =>
   return (
     <div className="flex h-full flex-col items-center justify-center gap-4">
       <p className="mb-4 text-center text-gray-500">{t('ui.no_members.no_members')}</p>
-      <Button className="w-[200px]" disabled={isArchived}>
-        <AddMembers group={group} enableSendingInvites={enableSendingInvites}>
-          <UserPlus className="text-primary-foreground h-5 w-5" />
-          <p>{t('ui.no_members.add_members')}</p>
-        </AddMembers>
-      </Button>
+
+      <AddMembers group={group} enableSendingInvites={enableSendingInvites}>
+        <Button className="w-[200px]" disabled={isArchived}>
+          <UserPlus className="text-primary-foreground" /> {t('ui.no_members.add_members')}
+        </Button>
+      </AddMembers>
+
       <p className="text-gray-400">{t('common:ui.or')}</p>
       <Button
         className="flex w-[200px] items-center gap-2"

src/pages/groups/[groupId].tsx

@@ -425,16 +425,13 @@ const BalancePage: NextPageWithUser<{
                   <PlusIcon className="size-4" /> {t('ui.actions.add_expense', { ns: 'common' })}
                 </Button>
               </Link>
-              <Button size="sm" responsiveIcon variant="secondary" disabled={isArchived}>
-                {groupDetailQuery.data ? (
-                  <AddMembers
-                    group={groupDetailQuery.data}
-                    enableSendingInvites={enableSendingInvites}
-                  >
-                    <UserPlus className="size-4 text-gray-400" /> {t('ui.add_members')}
-                  </AddMembers>
-                ) : null}
-              </Button>
+
+              <AddMembers group={groupDetailQuery.data} enableSendingInvites={enableSendingInvites}>
+                <Button size="sm" responsiveIcon variant="secondary" disabled={isArchived}>
+                  <UserPlus className="size-4 text-gray-400" /> {t('ui.add_members')}
+                </Button>
+              </AddMembers>
+
               <Button
                 size="sm"
                 responsiveIcon