corrections on ProfileScreen split

Author: olafch

src/components/screens/profile/ProfileDeleteAccountButton.tsx

@@ -1,6 +1,6 @@
 import { useAuthControllerDelete } from '@baca/api/query/auth/auth'
 import { Button, Text, Spacer, Row, Box, useBottomSheet } from '@baca/design-system'
-import { useCallback, useTranslation, useScreenOptions } from '@baca/hooks'
+import { useCallback, useTranslation } from '@baca/hooks'
 import { signOut } from '@baca/store/auth'
 import { showErrorToast } from '@baca/utils'
 
@@ -56,10 +56,6 @@ export const ProfileDeleteAccountButton = () => {
     }
   )
 
-  useScreenOptions({
-    title: t('navigation.screen_titles.profile'),
-  })
-
   return (
     <Box>
       <Box borderColor="border.secondary" borderTopWidth={1} my={4} py={6} alignItems="flex-start">

src/components/screens/profile/ProfileDetailsForm.tsx

@@ -1,22 +1,14 @@
 import { ControlledField } from '@baca/components'
 import { isWeb } from '@baca/constants'
-import { Text, Box } from '@baca/design-system'
-import {
-  useCallback,
-  useTranslation,
-  useUpdateProfileForm,
-  useScreenOptions,
-  useWeb,
-} from '@baca/hooks'
+import { Text, Box, Button, Spacer, Row } from '@baca/design-system'
+import { useCallback, useTranslation, useUpdateProfileForm, useWeb } from '@baca/hooks'
+import { useRouter } from 'expo-router'
 
 export const ProfileDetailsForm = () => {
   const { t } = useTranslation()
   const { shouldApplyMobileStyles } = useWeb()
-  const { control, errors, setFocus, submit } = useUpdateProfileForm()
-
-  useScreenOptions({
-    title: t('navigation.screen_titles.profile'),
-  })
+  const { control, errors, setFocus, submit, isSubmitting } = useUpdateProfileForm()
+  const { back } = useRouter()
 
   const focusLastNameInput = useCallback(() => setFocus('lastName'), [setFocus])
 
@@ -37,8 +29,8 @@ export const ProfileDetailsForm = () => {
               inputMode="text"
               name="firstName"
               onFocus={focusLastNameInput}
-              placeholder={t('form.placeholders.email')}
-              testID="emailInput"
+              placeholder={t('form.placeholders.first_name')}
+              testID="firstNameInput"
               {...(!isWeb && {
                 label: t('form.labels.first_name'),
               })}
@@ -89,6 +81,25 @@ export const ProfileDetailsForm = () => {
             />
           </Box>
         </Box>
+        <Row maxW={800} justifyContent="flex-end">
+          <Button.SecondaryColor
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            onPress={back}
+            testID="backProfileButton"
+          >
+            {t('common.cancel')}
+          </Button.SecondaryColor>
+          <Spacer x="4" />
+          <Button
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            onPress={submit}
+            testID="saveProfileUpdateButton"
+          >
+            {t('common.save')}
+          </Button>
+        </Row>
       </Box>
     </Box>
   )

src/screens/ProfileScreen.tsx

@@ -1,14 +1,11 @@
 import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton'
 import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm'
 import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader'
-import { Button, Spacer, Row, Box } from '@baca/design-system'
-import { useTranslation, useUpdateProfileForm, useScreenOptions } from '@baca/hooks'
-import { useRouter } from 'expo-router'
+import { Box, Spacer } from '@baca/design-system'
+import { useTranslation, useScreenOptions } from '@baca/hooks'
 
 export const ProfileScreen = () => {
   const { t } = useTranslation()
-  const { back } = useRouter()
-  const { isSubmitting, submit } = useUpdateProfileForm()
 
   useScreenOptions({
     title: t('navigation.screen_titles.profile'),
@@ -19,25 +16,6 @@ export const ProfileScreen = () => {
       <ProfileHeader />
       <Spacer y={4} />
       <ProfileDetailsForm />
-      <Row maxW={800} justifyContent="flex-end">
-        <Button.SecondaryColor
-          disabled={isSubmitting}
-          loading={isSubmitting}
-          onPress={back}
-          testID="backProfileButton"
-        >
-          {t('common.cancel')}
-        </Button.SecondaryColor>
-        <Spacer x="4" />
-        <Button
-          disabled={isSubmitting}
-          loading={isSubmitting}
-          onPress={submit}
-          testID="saveProfileUpdateButton"
-        >
-          {t('common.save')}
-        </Button>
-      </Row>
       <ProfileDeleteAccountButton />
     </Box>
   )