Skip to content

Commit fe6900e

Browse files
olafcholafch
committed
chore: ProfileDetailsForm added
1 parent 4d4ab4f commit fe6900e

3 files changed

Lines changed: 116 additions & 98 deletions

File tree

‎src/components/screens/profile/ProfileDetailsForm.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { ControlledField } from '@baca/components'
2+
import { isWeb } from '@baca/constants'
3+
import { Text, Box } from '@baca/design-system'
4+
import {
5+
useCallback,
6+
useTranslation,
7+
useUpdateProfileForm,
8+
useScreenOptions,
9+
useWeb,
10+
} from '@baca/hooks'
11+
12+
export const ProfileDetailsForm = () => {
13+
const { t } = useTranslation()
14+
const { shouldApplyMobileStyles } = useWeb()
15+
const { control, errors, setFocus, submit } = useUpdateProfileForm()
16+
17+
useScreenOptions({
18+
title: t('navigation.screen_titles.profile'),
19+
})
20+
21+
const focusLastNameInput = useCallback(() => setFocus('lastName'), [setFocus])
22+
23+
return (
24+
<Box>
25+
<Box borderColor="border.secondary" borderTopWidth={1} py={6}>
26+
<Box
27+
justifyContent="space-between"
28+
flexDirection={isWeb && !shouldApplyMobileStyles ? 'row' : 'column'}
29+
mb={isWeb ? 10 : 0}
30+
maxW={800}
31+
>
32+
<Text.SmBold flex={1}>{t('form.labels.first_name')}</Text.SmBold>
33+
<Box flex={isWeb ? 2 : 0}>
34+
<ControlledField.Input
35+
{...{ control, errors }}
36+
autoCapitalize="none"
37+
inputMode="text"
38+
name="firstName"
39+
onFocus={focusLastNameInput}
40+
placeholder={t('form.placeholders.email')}
41+
testID="emailInput"
42+
{...(!isWeb && {
43+
label: t('form.labels.first_name'),
44+
})}
45+
/>
46+
</Box>
47+
</Box>
48+
<Box
49+
justifyContent="space-between"
50+
flexDirection={isWeb && !shouldApplyMobileStyles ? 'row' : 'column'}
51+
mb={isWeb ? 10 : 0}
52+
maxW={800}
53+
>
54+
<Text.SmBold flex={1}>{t('form.labels.last_name')}</Text.SmBold>
55+
<Box flex={isWeb ? 2 : 0}>
56+
<ControlledField.Input
57+
{...{ control, errors }}
58+
autoCapitalize="none"
59+
inputMode="text"
60+
name="lastName"
61+
placeholder={t('form.placeholders.last_name')}
62+
testID="lastNameInput"
63+
{...(!isWeb && {
64+
label: t('form.labels.last_name'),
65+
})}
66+
/>
67+
</Box>
68+
</Box>
69+
<Box
70+
justifyContent="space-between"
71+
flexDirection={isWeb && !shouldApplyMobileStyles ? 'row' : 'column'}
72+
mb={isWeb ? 10 : 0}
73+
maxW={800}
74+
>
75+
<Text.SmBold flex={1}>{t('form.labels.email')}</Text.SmBold>
76+
<Box flex={isWeb ? 2 : 0}>
77+
<ControlledField.Input
78+
{...{ control, errors }}
79+
autoCapitalize="none"
80+
inputMode="email"
81+
isDisabled
82+
name="email"
83+
onSubmitEditing={submit}
84+
placeholder={t('form.placeholders.email')}
85+
testID="emailInput"
86+
{...(!isWeb && {
87+
label: t('form.labels.email'),
88+
})}
89+
/>
90+
</Box>
91+
</Box>
92+
</Box>
93+
</Box>
94+
)
95+
}

‎src/components/screens/profile/ProfileEditImage.tsx‎

Whitespace-only changes.

‎src/screens/ProfileScreen.tsx‎

Lines changed: 21 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
11
import { useAuthControllerDelete } from '@baca/api/query/auth/auth'
2-
import { ControlledField } from '@baca/components'
2+
import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm'
33
import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader'
4-
import { isWeb } from '@baca/constants'
54
import { Button, Text, Spacer, Row, Box, useBottomSheet } from '@baca/design-system'
6-
import {
7-
useCallback,
8-
useTranslation,
9-
useUpdateProfileForm,
10-
useScreenOptions,
11-
useWeb,
12-
} from '@baca/hooks'
5+
import { useCallback, useTranslation, useUpdateProfileForm, useScreenOptions } from '@baca/hooks'
136
import { signOut } from '@baca/store/auth'
147
import { showErrorToast } from '@baca/utils'
158
import { useRouter } from 'expo-router'
169

1710
export const ProfileScreen = () => {
1811
const { t } = useTranslation()
1912
const { back } = useRouter()
20-
const { shouldApplyMobileStyles } = useWeb()
2113
const { mutateAsync: removeUserAccount, isLoading } = useAuthControllerDelete()
22-
const { control, errors, isSubmitting, setFocus, submit } = useUpdateProfileForm()
14+
const { isSubmitting, submit } = useUpdateProfileForm()
2315

2416
const { bottomSheetComponentRenderFunction, closeBottomSheet, presentBottomSheet } =
2517
useBottomSheet({
@@ -73,99 +65,30 @@ export const ProfileScreen = () => {
7365
title: t('navigation.screen_titles.profile'),
7466
})
7567

76-
const focusLastNameInput = useCallback(() => setFocus('lastName'), [setFocus])
77-
7868
return (
7969
<Box p={4}>
8070
<ProfileHeader />
8171
<Spacer y={4} />
82-
<Box borderColor="border.secondary" borderTopWidth={1} py={6}>
83-
<Box
84-
justifyContent="space-between"
85-
flexDirection={isWeb && !shouldApplyMobileStyles ? 'row' : 'column'}
86-
mb={isWeb ? 10 : 0}
87-
maxW={800}
88-
>
89-
<Text.SmBold flex={1}>{t('form.labels.first_name')}</Text.SmBold>
90-
<Box flex={isWeb ? 2 : 0}>
91-
<ControlledField.Input
92-
{...{ control, errors }}
93-
autoCapitalize="none"
94-
inputMode="text"
95-
name="firstName"
96-
onFocus={focusLastNameInput}
97-
placeholder={t('form.placeholders.email')}
98-
testID="emailInput"
99-
{...(!isWeb && {
100-
label: t('form.labels.first_name'),
101-
})}
102-
/>
103-
</Box>
104-
</Box>
105-
<Box
106-
justifyContent="space-between"
107-
flexDirection={isWeb && !shouldApplyMobileStyles ? 'row' : 'column'}
108-
mb={isWeb ? 10 : 0}
109-
maxW={800}
72+
<ProfileDetailsForm />
73+
<Row maxW={800} justifyContent="flex-end">
74+
<Button.SecondaryColor
75+
disabled={isSubmitting}
76+
loading={isSubmitting}
77+
onPress={back}
78+
testID="backProfileButton"
11079
>
111-
<Text.SmBold flex={1}>{t('form.labels.last_name')}</Text.SmBold>
112-
<Box flex={isWeb ? 2 : 0}>
113-
<ControlledField.Input
114-
{...{ control, errors }}
115-
autoCapitalize="none"
116-
inputMode="text"
117-
name="lastName"
118-
placeholder={t('form.placeholders.last_name')}
119-
testID="lastNameInput"
120-
{...(!isWeb && {
121-
label: t('form.labels.last_name'),
122-
})}
123-
/>
124-
</Box>
125-
</Box>
126-
<Box
127-
justifyContent="space-between"
128-
flexDirection={isWeb && !shouldApplyMobileStyles ? 'row' : 'column'}
129-
mb={isWeb ? 10 : 0}
130-
maxW={800}
80+
{t('common.cancel')}
81+
</Button.SecondaryColor>
82+
<Spacer x="4" />
83+
<Button
84+
disabled={isSubmitting}
85+
loading={isSubmitting}
86+
onPress={submit}
87+
testID="saveProfileUpdateButton"
13188
>
132-
<Text.SmBold flex={1}>{t('form.labels.email')}</Text.SmBold>
133-
<Box flex={isWeb ? 2 : 0}>
134-
<ControlledField.Input
135-
{...{ control, errors }}
136-
autoCapitalize="none"
137-
inputMode="email"
138-
isDisabled
139-
name="email"
140-
onSubmitEditing={submit}
141-
placeholder={t('form.placeholders.email')}
142-
testID="emailInput"
143-
{...(!isWeb && {
144-
label: t('form.labels.email'),
145-
})}
146-
/>
147-
</Box>
148-
</Box>
149-
<Row maxW={800} justifyContent="flex-end">
150-
<Button.SecondaryColor
151-
disabled={isSubmitting}
152-
loading={isSubmitting}
153-
onPress={back}
154-
testID="backProfileButton"
155-
>
156-
{t('common.cancel')}
157-
</Button.SecondaryColor>
158-
<Spacer x="4" />
159-
<Button
160-
disabled={isSubmitting}
161-
loading={isSubmitting}
162-
onPress={submit}
163-
testID="saveProfileUpdateButton"
164-
>
165-
{t('common.save')}
166-
</Button>
167-
</Row>
168-
</Box>
89+
{t('common.save')}
90+
</Button>
91+
</Row>
16992
<Box borderColor="border.secondary" borderTopWidth={1} my={4} py={6} alignItems="flex-start">
17093
<Button
17194
leftIconName="delete-bin-line"

0 commit comments

Comments
 (0)