From 4d4ab4fdd14c991d1648a631ca2483f0639e6879 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Mon, 27 May 2024 01:35:36 +0200 Subject: [PATCH 01/28] chore: ProfileHeader added --- src/components/screens/profile/ProfileHeader.tsx | 14 ++++++++++++++ src/screens/ProfileScreen.tsx | 10 +++------- 2 files changed, 17 insertions(+), 7 deletions(-) create mode 100644 src/components/screens/profile/ProfileHeader.tsx diff --git a/src/components/screens/profile/ProfileHeader.tsx b/src/components/screens/profile/ProfileHeader.tsx new file mode 100644 index 00000000..14d9f9ad --- /dev/null +++ b/src/components/screens/profile/ProfileHeader.tsx @@ -0,0 +1,14 @@ +import { Box, Text } from '@baca/design-system' +import { useTranslation } from '@baca/hooks' + +export const ProfileHeader = () => { + const { t } = useTranslation() + return ( + + {t('profile_screen.profile')} + + {t('profile_screen.update_your_details')} + + + ) +} diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index 193b8b86..f92dbf91 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -1,5 +1,6 @@ import { useAuthControllerDelete } from '@baca/api/query/auth/auth' import { ControlledField } from '@baca/components' +import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader' import { isWeb } from '@baca/constants' import { Button, Text, Spacer, Row, Box, useBottomSheet } from '@baca/design-system' import { @@ -76,11 +77,7 @@ export const ProfileScreen = () => { return ( - {t('profile_screen.profile')} - - - {t('profile_screen.update_your_details')} - + { mb={isWeb ? 10 : 0} maxW={800} > - {t('form.labels.last_name')} + {t('form.labels.email')} { - - - + {t('common.save')} + + + + + + , + { + name: 'delete-bin-line', + color: 'featured.icon.light.fg.error', + bgColor: 'bg.error.secondary', + } + ) + + useScreenOptions({ + title: t('navigation.screen_titles.profile'), + }) + + return ( + + + + {bottomSheet} + + + ) +} diff --git a/src/components/screens/profile/ProfilePasswordForm.tsx b/src/components/screens/profile/ProfilePasswordForm.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index 2917cf40..a948a5d6 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -1,66 +1,15 @@ -import { useAuthControllerDelete } from '@baca/api/query/auth/auth' +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, Text, Spacer, Row, Box, useBottomSheet } from '@baca/design-system' -import { useCallback, useTranslation, useUpdateProfileForm, useScreenOptions } from '@baca/hooks' -import { signOut } from '@baca/store/auth' -import { showErrorToast } from '@baca/utils' +import { Button, Spacer, Row, Box } from '@baca/design-system' +import { useTranslation, useUpdateProfileForm, useScreenOptions } from '@baca/hooks' import { useRouter } from 'expo-router' export const ProfileScreen = () => { const { t } = useTranslation() const { back } = useRouter() - const { mutateAsync: removeUserAccount, isLoading } = useAuthControllerDelete() const { isSubmitting, submit } = useUpdateProfileForm() - const { bottomSheetComponentRenderFunction, closeBottomSheet, presentBottomSheet } = - useBottomSheet({ - title: '', - isDivider: false, - }) - - const handleRemoveUserAccount = useCallback(async () => { - try { - await removeUserAccount() - signOut() - } catch { - showErrorToast({ - description: t('errors.something_went_wrong'), - }) - } - }, [removeUserAccount, t]) - - const bottomSheet = bottomSheetComponentRenderFunction( - - - {t('profile_screen.are_you_sure')} - - - {t('profile_screen.remove_account_desc')} - - - - - - - , - { - name: 'delete-bin-line', - color: 'featured.icon.light.fg.error', - bgColor: 'bg.error.secondary', - } - ) - useScreenOptions({ title: t('navigation.screen_titles.profile'), }) @@ -89,17 +38,7 @@ export const ProfileScreen = () => { {t('common.save')} - - - {bottomSheet} - + ) } From 5abb315fb157ac02dcb92fc3d37b63b7c0c12eab Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Wed, 29 May 2024 09:57:48 +0200 Subject: [PATCH 04/28] chore: update test text component styles --- src/design-system/components/Text/Text.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/design-system/components/Text/Text.test.tsx b/src/design-system/components/Text/Text.test.tsx index 616525ce..715828e8 100644 --- a/src/design-system/components/Text/Text.test.tsx +++ b/src/design-system/components/Text/Text.test.tsx @@ -9,7 +9,7 @@ console.error = jest.fn() console.warn = jest.fn() const defaultTextStyles = { - color: theme.light.colors.text.brand.primary, + color: theme.light.colors.text.primary, fontFamily: 'Inter_Regular', fontSize: 16, fontWeight: '400', From dc8604ea494bfd0f7144ee8a34e0324efd7aa743 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 29 May 2024 14:07:26 +0200 Subject: [PATCH 05/28] corrections on ProfileScreen split --- .../profile/ProfileDeleteAccountButton.tsx | 6 +-- .../screens/profile/ProfileDetailsForm.tsx | 41 ++++++++++++------- src/screens/ProfileScreen.tsx | 26 +----------- 3 files changed, 29 insertions(+), 44 deletions(-) diff --git a/src/components/screens/profile/ProfileDeleteAccountButton.tsx b/src/components/screens/profile/ProfileDeleteAccountButton.tsx index da9fc79a..e8f0fea1 100644 --- a/src/components/screens/profile/ProfileDeleteAccountButton.tsx +++ b/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 ( diff --git a/src/components/screens/profile/ProfileDetailsForm.tsx b/src/components/screens/profile/ProfileDetailsForm.tsx index 3ae554ee..a48ffe88 100644 --- a/src/components/screens/profile/ProfileDetailsForm.tsx +++ b/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 = () => { /> + + + {t('common.cancel')} + + + + ) diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index a948a5d6..3b324d5e 100644 --- a/src/screens/ProfileScreen.tsx +++ b/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 = () => { - - - {t('common.cancel')} - - - - ) From 718fdac6375717528f8ce01ee3c32b9b079b3300 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 29 May 2024 14:23:52 +0200 Subject: [PATCH 06/28] last changes from first pull added to this second pull --- .../profile/ProfileDeleteAccountButton.tsx | 6 +-- .../screens/profile/ProfileDetailsForm.tsx | 41 ++++++++++++------- .../components/Text/Text.test.tsx | 2 +- src/screens/ProfileScreen.tsx | 26 +----------- 4 files changed, 30 insertions(+), 45 deletions(-) diff --git a/src/components/screens/profile/ProfileDeleteAccountButton.tsx b/src/components/screens/profile/ProfileDeleteAccountButton.tsx index da9fc79a..e8f0fea1 100644 --- a/src/components/screens/profile/ProfileDeleteAccountButton.tsx +++ b/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 ( diff --git a/src/components/screens/profile/ProfileDetailsForm.tsx b/src/components/screens/profile/ProfileDetailsForm.tsx index 3ae554ee..a48ffe88 100644 --- a/src/components/screens/profile/ProfileDetailsForm.tsx +++ b/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 = () => { /> + + + {t('common.cancel')} + + + + ) diff --git a/src/design-system/components/Text/Text.test.tsx b/src/design-system/components/Text/Text.test.tsx index 616525ce..715828e8 100644 --- a/src/design-system/components/Text/Text.test.tsx +++ b/src/design-system/components/Text/Text.test.tsx @@ -9,7 +9,7 @@ console.error = jest.fn() console.warn = jest.fn() const defaultTextStyles = { - color: theme.light.colors.text.brand.primary, + color: theme.light.colors.text.primary, fontFamily: 'Inter_Regular', fontSize: 16, fontWeight: '400', diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index a948a5d6..3b324d5e 100644 --- a/src/screens/ProfileScreen.tsx +++ b/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 = () => { - - - {t('common.cancel')} - - - - ) From c9f6149088e9c13a5f7de096b5c2385fb233b47a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 29 May 2024 15:53:29 +0200 Subject: [PATCH 07/28] ProfileDetailsForm working with i18Next on interface --- .../profile/ProfileControlledInput.tsx | 57 ++++++++++ .../screens/profile/ProfileDetailsForm.tsx | 101 ++++++------------ 2 files changed, 87 insertions(+), 71 deletions(-) create mode 100644 src/components/screens/profile/ProfileControlledInput.tsx diff --git a/src/components/screens/profile/ProfileControlledInput.tsx b/src/components/screens/profile/ProfileControlledInput.tsx new file mode 100644 index 00000000..9eaf3ee0 --- /dev/null +++ b/src/components/screens/profile/ProfileControlledInput.tsx @@ -0,0 +1,57 @@ +import { ControlledField } from '@baca/components' +import { isWeb } from '@baca/constants' +import { Text, Box } from '@baca/design-system' +import { useTranslation, useWeb } from '@baca/hooks' +import { I18nKeys } from '@baca/types/i18next' +import { Control, FieldErrors } from 'react-hook-form' + +interface ProfileControlledInputProps { + labelTx: I18nKeys + name: string + placeholderTx: I18nKeys + control: Control + errors: FieldErrors + isDisabled?: boolean + onFocus?: () => void + onSubmitEditing?: () => void +} + +export const ProfileControlledInput = ({ + labelTx, + name, + placeholderTx, + control, + errors, + isDisabled = false, + onFocus, + onSubmitEditing, +}: ProfileControlledInputProps) => { + const { t } = useTranslation() + const { shouldApplyMobileStyles } = useWeb() + + return ( + + {t(labelTx)} + + + + + ) +} diff --git a/src/components/screens/profile/ProfileDetailsForm.tsx b/src/components/screens/profile/ProfileDetailsForm.tsx index a48ffe88..d1ae0b47 100644 --- a/src/components/screens/profile/ProfileDetailsForm.tsx +++ b/src/components/screens/profile/ProfileDetailsForm.tsx @@ -1,12 +1,13 @@ -import { ControlledField } from '@baca/components' -import { isWeb } from '@baca/constants' -import { Text, Box, Button, Spacer, Row } from '@baca/design-system' -import { useCallback, useTranslation, useUpdateProfileForm, useWeb } from '@baca/hooks' +import { Box, Button, Spacer, Row } from '@baca/design-system' +import { useUpdateProfileForm } from '@baca/hooks' import { useRouter } from 'expo-router' +import { useCallback } from 'react' +import { useTranslation } from 'react-i18next' + +import { ProfileControlledInput } from './ProfileControlledInput' export const ProfileDetailsForm = () => { const { t } = useTranslation() - const { shouldApplyMobileStyles } = useWeb() const { control, errors, setFocus, submit, isSubmitting } = useUpdateProfileForm() const { back } = useRouter() @@ -15,72 +16,30 @@ export const ProfileDetailsForm = () => { return ( - - {t('form.labels.first_name')} - - - - - - {t('form.labels.last_name')} - - - - - - {t('form.labels.email')} - - - - + + + Date: Wed, 29 May 2024 16:13:48 +0200 Subject: [PATCH 08/28] ProfileControlledInputs improved --- .../profile/ProfileControlledInput.tsx | 27 +++++-------------- .../screens/profile/ProfileDetailsForm.tsx | 12 ++++----- src/types/ProfileInputProps.ts | 12 +++++++++ 3 files changed, 25 insertions(+), 26 deletions(-) create mode 100644 src/types/ProfileInputProps.ts diff --git a/src/components/screens/profile/ProfileControlledInput.tsx b/src/components/screens/profile/ProfileControlledInput.tsx index 9eaf3ee0..5c164421 100644 --- a/src/components/screens/profile/ProfileControlledInput.tsx +++ b/src/components/screens/profile/ProfileControlledInput.tsx @@ -1,32 +1,19 @@ import { ControlledField } from '@baca/components' import { isWeb } from '@baca/constants' import { Text, Box } from '@baca/design-system' -import { useTranslation, useWeb } from '@baca/hooks' -import { I18nKeys } from '@baca/types/i18next' -import { Control, FieldErrors } from 'react-hook-form' - -interface ProfileControlledInputProps { - labelTx: I18nKeys - name: string - placeholderTx: I18nKeys - control: Control - errors: FieldErrors - isDisabled?: boolean - onFocus?: () => void - onSubmitEditing?: () => void -} +import { useWeb } from '@baca/hooks' +import { ProfileControlledInputProps } from '@baca/types/ProfileInputProps' export const ProfileControlledInput = ({ - labelTx, + label, name, - placeholderTx, + placeholder, control, errors, isDisabled = false, onFocus, onSubmitEditing, }: ProfileControlledInputProps) => { - const { t } = useTranslation() const { shouldApplyMobileStyles } = useWeb() return ( @@ -36,7 +23,7 @@ export const ProfileControlledInput = ({ mb={isWeb ? 10 : 0} maxW={800} > - {t(labelTx)} + {label} diff --git a/src/components/screens/profile/ProfileDetailsForm.tsx b/src/components/screens/profile/ProfileDetailsForm.tsx index d1ae0b47..ce0a0927 100644 --- a/src/components/screens/profile/ProfileDetailsForm.tsx +++ b/src/components/screens/profile/ProfileDetailsForm.tsx @@ -17,24 +17,24 @@ export const ProfileDetailsForm = () => { void + onSubmitEditing?: () => void +} From c77ed0944c80748696e81532bcece13ac6e96124 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 29 May 2024 19:02:45 +0200 Subject: [PATCH 09/28] first commit on password form branch --- src/screens/ProfileScreen.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index 3b324d5e..249396bc 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -20,3 +20,5 @@ export const ProfileScreen = () => { ) } + +//First commit on new branch From 693aefea8f989a0e115be1b0aaca63a949f18e69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 29 May 2024 20:53:17 +0200 Subject: [PATCH 10/28] UI of the password form done --- .../screens/profile/ProfilePasswordForm.tsx | 83 +++++++++++++++++++ src/hooks/forms/useUpdatePasswordForm.ts | 49 +++++++++++ src/i18n/translations/en.json | 9 +- src/screens/ProfileScreen.tsx | 39 ++++++++- 4 files changed, 177 insertions(+), 3 deletions(-) create mode 100644 src/hooks/forms/useUpdatePasswordForm.ts diff --git a/src/components/screens/profile/ProfilePasswordForm.tsx b/src/components/screens/profile/ProfilePasswordForm.tsx index e69de29b..df4d29bb 100644 --- a/src/components/screens/profile/ProfilePasswordForm.tsx +++ b/src/components/screens/profile/ProfilePasswordForm.tsx @@ -0,0 +1,83 @@ +import { Box, Spacer, Button } from '@baca/design-system' +import { useTranslation } from '@baca/hooks' +import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm' + +import { ProfileControlledInput } from './ProfileControlledInput' + +// interface ProfilePasswordFormProps { +// onSubmit: (data: any) => void +// } + +export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { + const { control, errors, isSubmitting, submit } = useUpdatePasswordForm() + const { t } = useTranslation() + + return ( + + + + + + + + ) +} + +// import { Box, Spacer, Button } from '@baca/design-system' +// import { useForm, Controller } from 'react-hook-form' +// import { ProfileControlledInput } from './ProfileControlledInput' +// import { useTranslation } from '@baca/hooks' +// import { AuthUpdateDto } from '@baca/api/types' + +// interface ProfilePasswordFormProps { +// onSubmit: (data: AuthUpdateDto) => void +// } + +// export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { +// const { +// control, +// handleSubmit, +// formState: { errors }, +// } = useForm() +// const { t } = useTranslation() + +// return ( +// +// +// +// +// +// +// +// ) +// } diff --git a/src/hooks/forms/useUpdatePasswordForm.ts b/src/hooks/forms/useUpdatePasswordForm.ts new file mode 100644 index 00000000..0bfa342d --- /dev/null +++ b/src/hooks/forms/useUpdatePasswordForm.ts @@ -0,0 +1,49 @@ +import { useAuthControllerUpdate } from '@baca/api/query/auth/auth' +import { AuthUpdateDto } from '@baca/api/types' +import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils' +import { useForm } from 'react-hook-form' +import { useTranslation } from 'react-i18next' + +export const useUpdatePasswordForm = () => { + const { t } = useTranslation() + const { mutate: updateUserMutation, isLoading } = useAuthControllerUpdate() + + const { + control, + formState: { errors }, + handleSubmit, + setError: setFormError, + setFocus, + } = useForm({ + mode: 'onTouched', + }) + + const onSubmit = (data: AuthUpdateDto) => { + updateUserMutation( + { data }, + { + onSuccess: () => { + showSuccessToast({ description: t('toast.success.password_updated') }) + }, + onError: (e) => { + handleFormError( + e as unknown as keyof AuthUpdateDto, + ({ field, description }) => { + setFormError(field, { message: description }) + } + ) + + hapticImpact() + }, + } + ) + } + + return { + control, + errors, + isSubmitting: isLoading, + setFocus, + submit: handleSubmit(onSubmit), + } +} diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 26a6c44a..05b737d7 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -27,6 +27,7 @@ "go_back": "Go back", "remove": "Remove", "save": "Save", + "change": "Change", "search": "Search", "try_again_later": "Please try again later", "try_again": "Try again" @@ -56,7 +57,9 @@ "email": "E-mail address", "first_name": "First name", "last_name": "Last name", - "password": "Password" + "password": "Password", + "old_password": "Old password", + "new_password": "New password" }, "placeholders": { "confirm_password": "Confirm password", @@ -64,7 +67,9 @@ "email": "Enter your email", "first_name": "Enter your first name", "last_name": "Enter your last name", - "password": "Password" + "password": "Password", + "old_password": "Enter your current password", + "new_password": "Enter the new password" }, "select": {}, "validation": { diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index 249396bc..b6f3cf19 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -1,6 +1,7 @@ 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 { ProfilePasswordForm } from '@baca/components/screens/profile/ProfilePasswordForm' import { Box, Spacer } from '@baca/design-system' import { useTranslation, useScreenOptions } from '@baca/hooks' @@ -11,14 +12,50 @@ export const ProfileScreen = () => { title: t('navigation.screen_titles.profile'), }) + const handlePasswordUpdate = (data) => { + console.log('Password updated:', data) + } + return ( + + + ) } -//First commit on new branch +// 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 { ProfilePasswordForm } from '@baca/components/screens/profile/ProfilePasswordForm' +// import { Box, Spacer } from '@baca/design-system' +// import { useTranslation, useScreenOptions } from '@baca/hooks' + +// export const ProfileScreen = () => { +// const { t } = useTranslation() + +// useScreenOptions({ +// title: t('navigation.screen_titles.profile'), +// }) + +// const handlePasswordUpdate = (data) => { +// console.log('Password updated:', data) +// } + +// return ( +// +// +// +// +// +// +// +// +// +// ) +// } From 563bd242502eaa0f6829036bb234f4c4de6a2ae5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Thu, 30 May 2024 15:51:27 +0200 Subject: [PATCH 11/28] Password form almost done, some code to be reviewed --- .../profile/ProfileDeleteAccountButton.tsx | 2 +- .../screens/profile/ProfilePasswordForm.tsx | 108 +++++++++++++----- src/hooks/forms/useUpdatePasswordForm.ts | 21 +++- src/i18n/translations/en.json | 4 +- src/screens/ProfileScreen.tsx | 3 +- 5 files changed, 100 insertions(+), 38 deletions(-) diff --git a/src/components/screens/profile/ProfileDeleteAccountButton.tsx b/src/components/screens/profile/ProfileDeleteAccountButton.tsx index e8f0fea1..8f1bf67d 100644 --- a/src/components/screens/profile/ProfileDeleteAccountButton.tsx +++ b/src/components/screens/profile/ProfileDeleteAccountButton.tsx @@ -58,7 +58,7 @@ export const ProfileDeleteAccountButton = () => { return ( - + + + + + + + + + ) } +// import { Box, Button } from '@baca/design-system' +// import { useTranslation } from '@baca/hooks' +// import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm' +// import { ProfileControlledInput } from './ProfileControlledInput' +// import { AuthUpdateDto } from '@baca/api/types' + +// interface ProfilePasswordFormProps { +// onSubmit: (data: AuthUpdateDto) => void +// } + +// export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { +// const { t } = useTranslation() +// const { control, errors, isSubmitting, submit } = useUpdatePasswordForm() + +// return ( +// +// +// +// +// +// ) +// } + // import { Box, Spacer, Button } from '@baca/design-system' // import { useForm, Controller } from 'react-hook-form' // import { ProfileControlledInput } from './ProfileControlledInput' diff --git a/src/hooks/forms/useUpdatePasswordForm.ts b/src/hooks/forms/useUpdatePasswordForm.ts index 0bfa342d..8c5487c1 100644 --- a/src/hooks/forms/useUpdatePasswordForm.ts +++ b/src/hooks/forms/useUpdatePasswordForm.ts @@ -1,29 +1,40 @@ import { useAuthControllerUpdate } from '@baca/api/query/auth/auth' import { AuthUpdateDto } from '@baca/api/types' import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils' +import { useMemo } from 'react' import { useForm } from 'react-hook-form' import { useTranslation } from 'react-i18next' export const useUpdatePasswordForm = () => { const { t } = useTranslation() - const { mutate: updateUserMutation, isLoading } = useAuthControllerUpdate() + const { mutate: updatePasswordMutation, isLoading } = useAuthControllerUpdate() + + const defaultValues: AuthUpdateDto = useMemo( + () => ({ + oldPassword: '', + password: '', + }), + [] + ) const { control, formState: { errors }, handleSubmit, + reset, setError: setFormError, - setFocus, } = useForm({ mode: 'onTouched', + defaultValues, }) const onSubmit = (data: AuthUpdateDto) => { - updateUserMutation( + updatePasswordMutation( { data }, { onSuccess: () => { - showSuccessToast({ description: t('toast.success.password_updated') }) + showSuccessToast({ description: t('toast.success.profile_updated') }) + reset(defaultValues) }, onError: (e) => { handleFormError( @@ -32,7 +43,6 @@ export const useUpdatePasswordForm = () => { setFormError(field, { message: description }) } ) - hapticImpact() }, } @@ -43,7 +53,6 @@ export const useUpdatePasswordForm = () => { control, errors, isSubmitting: isLoading, - setFocus, submit: handleSubmit(onSubmit), } } diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 05b737d7..5cf7e004 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -68,8 +68,8 @@ "first_name": "Enter your first name", "last_name": "Enter your last name", "password": "Password", - "old_password": "Enter your current password", - "new_password": "Enter the new password" + "old_password": "Enter current password", + "new_password": "Enter new password" }, "select": {}, "validation": { diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index b6f3cf19..9a70cc89 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -1,3 +1,4 @@ +import { AuthUpdateDto } from '@baca/api/types' import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton' import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm' import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader' @@ -12,7 +13,7 @@ export const ProfileScreen = () => { title: t('navigation.screen_titles.profile'), }) - const handlePasswordUpdate = (data) => { + const handlePasswordUpdate = (data: AuthUpdateDto) => { console.log('Password updated:', data) } From f8503e0ac3c236f7bedb7e2b569874804099bf2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Thu, 30 May 2024 15:59:05 +0200 Subject: [PATCH 12/28] ProfilePasswordForm working --- .../screens/profile/ProfilePasswordForm.tsx | 95 +------------------ src/screens/ProfileScreen.tsx | 38 +------- 2 files changed, 2 insertions(+), 131 deletions(-) diff --git a/src/components/screens/profile/ProfilePasswordForm.tsx b/src/components/screens/profile/ProfilePasswordForm.tsx index 3d9d1441..55561cfb 100644 --- a/src/components/screens/profile/ProfilePasswordForm.tsx +++ b/src/components/screens/profile/ProfilePasswordForm.tsx @@ -1,4 +1,3 @@ -import { AuthUpdateDto } from '@baca/api/types' import { Box, Button, Row } from '@baca/design-system' import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm' import React from 'react' @@ -6,11 +5,7 @@ import { useTranslation } from 'react-i18next' import { ProfileControlledInput } from './ProfileControlledInput' -interface ProfilePasswordFormProps { - onSubmit: (data: AuthUpdateDto) => void -} - -export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { +export const ProfilePasswordForm = () => { const { t } = useTranslation() const { control, errors, submit, isSubmitting } = useUpdatePasswordForm() @@ -23,7 +18,6 @@ export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { placeholder={t('form.placeholders.old_password')} control={control} errors={errors} - // secureTextEntry /> { placeholder={t('form.placeholders.new_password')} control={control} errors={errors} - // secureTextEntry /> -// -// ) -// } - -// import { Box, Spacer, Button } from '@baca/design-system' -// import { useForm, Controller } from 'react-hook-form' -// import { ProfileControlledInput } from './ProfileControlledInput' -// import { useTranslation } from '@baca/hooks' -// import { AuthUpdateDto } from '@baca/api/types' - -// interface ProfilePasswordFormProps { -// onSubmit: (data: AuthUpdateDto) => void -// } - -// export const ProfilePasswordForm = ({ onSubmit }: ProfilePasswordFormProps) => { -// const { -// control, -// handleSubmit, -// formState: { errors }, -// } = useForm() -// const { t } = useTranslation() - -// return ( -// -// -// -// -// -// -// -// ) -// } diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index 9a70cc89..7ef9eaf1 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -1,4 +1,3 @@ -import { AuthUpdateDto } from '@baca/api/types' import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton' import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm' import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader' @@ -13,50 +12,15 @@ export const ProfileScreen = () => { title: t('navigation.screen_titles.profile'), }) - const handlePasswordUpdate = (data: AuthUpdateDto) => { - console.log('Password updated:', data) - } - return ( - + ) } - -// 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 { ProfilePasswordForm } from '@baca/components/screens/profile/ProfilePasswordForm' -// import { Box, Spacer } from '@baca/design-system' -// import { useTranslation, useScreenOptions } from '@baca/hooks' - -// export const ProfileScreen = () => { -// const { t } = useTranslation() - -// useScreenOptions({ -// title: t('navigation.screen_titles.profile'), -// }) - -// const handlePasswordUpdate = (data) => { -// console.log('Password updated:', data) -// } - -// return ( -// -// -// -// -// -// -// -// -// -// ) -// } From 541103492ac379084be0997b0146974a40be1c74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Fri, 31 May 2024 10:02:38 +0200 Subject: [PATCH 13/28] Added changes to pl.json --- src/i18n/translations/pl.json | 33 +++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index c9ebd6af..f6b51b62 100644 --- a/src/i18n/translations/pl.json +++ b/src/i18n/translations/pl.json @@ -27,6 +27,7 @@ "go_back": "Cofnij", "remove": "Usuń", "save": "Zapisz", + "change": "Zmień", "search": "Szukaj", "try_again_later": "Proszę spróbuj ponownie później", "try_again": "Spróbuj ponownie" @@ -56,7 +57,9 @@ "email": "Adres e-mail", "first_name": "Imię", "last_name": "Nazwisko", - "password": "Hasło" + "password": "Hasło", + "old_password": "Stare hasło", + "new_password": "Nowe hasło" }, "placeholders": { "confirm_password": "Potwierdź hasło", @@ -64,7 +67,9 @@ "email": "Podaj adres e-mail", "first_name": "Podaj swoje imię", "last_name": "Podaj swoje nazwisko", - "password": "Hasło" + "password": "Hasło", + "old_password": "Podaj stare hasło", + "new_password": "Podaj nowe hasło" }, "select": {}, "validation": { @@ -126,18 +131,6 @@ "colors_label": "Kolory" }, "components_screen": { - "test_notification": "Test notification", - "typography": { - "label": "Typography", - "xs": "xs", - "sm": "sm", - "md": "md", - "lg": "lg", - "xl": "xl", - "2xl": "2xl", - "3xl": "3xl", - "4xl": "4xl" - }, "button_variants": { "disabled": "Button disabled", "header": "Button variants", @@ -166,6 +159,18 @@ "notification": { "description": "by react-native-notificated 🎉", "title": "In-app notification example" + }, + "test_notification": "Test notification", + "typography": { + "label": "Typography", + "xs": "xs", + "sm": "sm", + "md": "md", + "lg": "lg", + "xl": "xl", + "2xl": "2xl", + "3xl": "3xl", + "4xl": "4xl" } }, "confirm_email_screen": { From e59f1482b773af220a31fb02c1e832a04d6ee998 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Fri, 31 May 2024 11:14:05 +0200 Subject: [PATCH 14/28] first commit on this branch --- src/screens/ProfileScreen.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index 7ef9eaf1..7170f1a6 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -24,3 +24,4 @@ export const ProfileScreen = () => { ) } +//first commit on this branch From 54b42bf941889a2db33ef8dad65f113ac57b594c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Mon, 3 Jun 2024 00:22:13 +0200 Subject: [PATCH 15/28] ProfileEditImage almost done --- package.json | 1 + .../profile/ProfileControlledInput.tsx | 6 +- .../screens/profile/ProfileEditImage.tsx | 73 +++++++++++++++++++ src/i18n/translations/en.json | 5 +- src/screens/ProfileScreen.tsx | 26 ++++--- yarn.lock | 12 +++ 6 files changed, 109 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 01fca498..ef3a8259 100644 --- a/package.json +++ b/package.json @@ -121,6 +121,7 @@ "expo-device": "~5.9.4", "expo-font": "~11.10.3", "expo-haptics": "~12.8.1", + "expo-image-picker": "~14.7.1", "expo-linear-gradient": "~12.7.2", "expo-linking": "~6.2.2", "expo-local-authentication": "~13.8.0", diff --git a/src/components/screens/profile/ProfileControlledInput.tsx b/src/components/screens/profile/ProfileControlledInput.tsx index 5c164421..87f323ec 100644 --- a/src/components/screens/profile/ProfileControlledInput.tsx +++ b/src/components/screens/profile/ProfileControlledInput.tsx @@ -1,6 +1,6 @@ import { ControlledField } from '@baca/components' import { isWeb } from '@baca/constants' -import { Text, Box } from '@baca/design-system' +import { Box } from '@baca/design-system' import { useWeb } from '@baca/hooks' import { ProfileControlledInputProps } from '@baca/types/ProfileInputProps' @@ -23,7 +23,9 @@ export const ProfileControlledInput = ({ mb={isWeb ? 10 : 0} maxW={800} > - {label} + {/* + {label} + */} { + const [image, setImage] = React.useState(null) + + const pickImage = async () => { + const result = await ImagePicker.launchImageLibraryAsync({ + mediaTypes: ImagePicker.MediaTypeOptions.Images, + allowsEditing: true, + aspect: [4, 3], + quality: 1, + }) + + if (!result.canceled && result.assets && result.assets.length > 0) { + setImage(result.assets[0].uri) + } + } + + return ( + + + {t('profile_screen.your_photo')} + + {t('profile_screen.your_photo_description')} + + + + {image ? ( + + ) : ( + + No Image + + )} + + + + + + ) +} + +const styles = StyleSheet.create({ + image: { + height: '100%', + width: '100%', + }, + imageContainer: { + alignSelf: 'center', + borderRadius: 50, + height: 100, + marginBottom: 10, + overflow: 'hidden', + width: 100, + }, + marginBottom: { + marginBottom: 10, + }, + placeholder: { + alignItems: 'center', + height: '100%', + justifyContent: 'center', + width: '100%', + // backgroundColor: '#e0e0e0', + }, + placeholderText: { + // color: '#888', + }, +}) diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 5cf7e004..d95fb001 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -28,6 +28,7 @@ "remove": "Remove", "save": "Save", "change": "Change", + "upload": "Upload", "search": "Search", "try_again_later": "Please try again later", "try_again": "Try again" @@ -239,7 +240,9 @@ "update_your_details": "Update your personal details here.", "remove_account": "Remove account", "are_you_sure": "Are you sure?", - "remove_account_desc": "This action cannot be undone.\n\nYou will lose access to your account. If you have an active subscription you will lose access to it.\n\nPlease make sure you are certain about this action." + "remove_account_desc": "This action cannot be undone.\n\nYou will lose access to your account. If you have an active subscription you will lose access to it.\n\nPlease make sure you are certain about this action.", + "your_photo": "Your photo", + "your_photo_description": "This will be displayed on your profile." }, "sign_in_screen": { "do_not_have_an_account": "Don't have an account?", diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index 7170f1a6..e810c8dc 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -1,8 +1,9 @@ import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton' import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm' +import { ProfileEditImage } from '@baca/components/screens/profile/ProfileEditImage' import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader' import { ProfilePasswordForm } from '@baca/components/screens/profile/ProfilePasswordForm' -import { Box, Spacer } from '@baca/design-system' +import { Box, ScrollView, Spacer } from '@baca/design-system' import { useTranslation, useScreenOptions } from '@baca/hooks' export const ProfileScreen = () => { @@ -13,15 +14,18 @@ export const ProfileScreen = () => { }) return ( - - - - - - - - - + + + + + + + + + + + + + ) } -//first commit on this branch diff --git a/yarn.lock b/yarn.lock index 6d3f1f00..4d53af91 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6858,6 +6858,18 @@ expo-haptics@~12.8.1: resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-12.8.1.tgz#42b996763be33d661bd33bbc3b3958c3f2734b9d" integrity sha512-ntLsHkfle8K8w9MW8pZEw92ZN3sguaGUSSIxv30fPKNeQFu7Cq/h47Qv3tONv2MO3wU48N9FbKnant6XlfptpA== +expo-image-loader@~4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/expo-image-loader/-/expo-image-loader-4.6.0.tgz#ca7d4fdf53125bff2091d3a2c34a3155f10df147" + integrity sha512-RHQTDak7/KyhWUxikn2yNzXL7i2cs16cMp6gEAgkHOjVhoCJQoOJ0Ljrt4cKQ3IowxgCuOrAgSUzGkqs7omj8Q== + +expo-image-picker@~14.7.1: + version "14.7.1" + resolved "https://registry.yarnpkg.com/expo-image-picker/-/expo-image-picker-14.7.1.tgz#c51faff3a3fbffc6ae93d7155370beb1a2d2baea" + integrity sha512-ILQVOJgI3aEzrDmCFGDPtpAepYkn8mot8G7vfQ51BfFdQbzL6N3Wm1fS/ofdWlAZJl/qT2DwaIh5xYmf3SyGZA== + dependencies: + expo-image-loader "~4.6.0" + expo-json-utils@~0.12.0: version "0.12.3" resolved "https://registry.yarnpkg.com/expo-json-utils/-/expo-json-utils-0.12.3.tgz#cabb704a344d6d75f225cf4032c64479e442a2a9" From 77df1efcea2c14ed816713dfcf80f3fe27f5155e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Mon, 3 Jun 2024 17:26:58 +0200 Subject: [PATCH 16/28] ProfileEditImage done without backend logic --- .../profile/ProfileControlledInput.tsx | 12 ++-- .../screens/profile/ProfileEditImage.tsx | 27 +++++---- .../screens/profile/ProfilePasswordForm.tsx | 1 - src/hooks/forms/useUpdatePasswordForm 2.ts | 58 +++++++++++++++++++ src/hooks/forms/useUpdatePasswordForm 3.ts | 58 +++++++++++++++++++ src/i18n/translations/en.json | 3 +- src/i18n/translations/pl.json | 6 +- src/types/ProfileInputProps 2.ts | 12 ++++ src/types/ProfileInputProps 3.ts | 12 ++++ 9 files changed, 168 insertions(+), 21 deletions(-) create mode 100644 src/hooks/forms/useUpdatePasswordForm 2.ts create mode 100644 src/hooks/forms/useUpdatePasswordForm 3.ts create mode 100644 src/types/ProfileInputProps 2.ts create mode 100644 src/types/ProfileInputProps 3.ts diff --git a/src/components/screens/profile/ProfileControlledInput.tsx b/src/components/screens/profile/ProfileControlledInput.tsx index 87f323ec..b4b715a1 100644 --- a/src/components/screens/profile/ProfileControlledInput.tsx +++ b/src/components/screens/profile/ProfileControlledInput.tsx @@ -1,8 +1,9 @@ import { ControlledField } from '@baca/components' import { isWeb } from '@baca/constants' -import { Box } from '@baca/design-system' +import { Box, Text } from '@baca/design-system' import { useWeb } from '@baca/hooks' import { ProfileControlledInputProps } from '@baca/types/ProfileInputProps' +import { StyleSheet } from 'react-native' export const ProfileControlledInput = ({ label, @@ -23,9 +24,9 @@ export const ProfileControlledInput = ({ mb={isWeb ? 10 : 0} maxW={800} > - {/* + {label} - */} + ) } + +const s = StyleSheet.create({ + labelMargin: { marginBottom: 10 }, +}) diff --git a/src/components/screens/profile/ProfileEditImage.tsx b/src/components/screens/profile/ProfileEditImage.tsx index a7c0d892..28e07c9c 100644 --- a/src/components/screens/profile/ProfileEditImage.tsx +++ b/src/components/screens/profile/ProfileEditImage.tsx @@ -1,8 +1,9 @@ -import { Box, Text, Button, Row } from '@baca/design-system' +import { isWeb } from '@baca/constants' +import { Box, Text, Button, Row, themeColors } from '@baca/design-system' import * as ImagePicker from 'expo-image-picker' import { t } from 'i18next' import React from 'react' -import { View, Image, StyleSheet } from 'react-native' +import { Image, StyleSheet } from 'react-native' export const ProfileEditImage: React.FC = () => { const [image, setImage] = React.useState(null) @@ -21,20 +22,20 @@ export const ProfileEditImage: React.FC = () => { } return ( - - + + {t('profile_screen.your_photo')} {t('profile_screen.your_photo_description')} - + {image ? ( - + ) : ( - - No Image - + + {t('profile_screen.photo_innerText')} + )} @@ -44,7 +45,7 @@ export const ProfileEditImage: React.FC = () => { ) } -const styles = StyleSheet.create({ +const s = StyleSheet.create({ image: { height: '100%', width: '100%', @@ -55,6 +56,7 @@ const styles = StyleSheet.create({ height: 100, marginBottom: 10, overflow: 'hidden', + right: isWeb ? 150 : 0, width: 100, }, marginBottom: { @@ -62,12 +64,9 @@ const styles = StyleSheet.create({ }, placeholder: { alignItems: 'center', + backgroundColor: themeColors.primitives['Gray neutral']['50'], height: '100%', justifyContent: 'center', width: '100%', - // backgroundColor: '#e0e0e0', - }, - placeholderText: { - // color: '#888', }, }) diff --git a/src/components/screens/profile/ProfilePasswordForm.tsx b/src/components/screens/profile/ProfilePasswordForm.tsx index 55561cfb..e774b1b2 100644 --- a/src/components/screens/profile/ProfilePasswordForm.tsx +++ b/src/components/screens/profile/ProfilePasswordForm.tsx @@ -1,6 +1,5 @@ import { Box, Button, Row } from '@baca/design-system' import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm' -import React from 'react' import { useTranslation } from 'react-i18next' import { ProfileControlledInput } from './ProfileControlledInput' diff --git a/src/hooks/forms/useUpdatePasswordForm 2.ts b/src/hooks/forms/useUpdatePasswordForm 2.ts new file mode 100644 index 00000000..8c5487c1 --- /dev/null +++ b/src/hooks/forms/useUpdatePasswordForm 2.ts @@ -0,0 +1,58 @@ +import { useAuthControllerUpdate } from '@baca/api/query/auth/auth' +import { AuthUpdateDto } from '@baca/api/types' +import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils' +import { useMemo } from 'react' +import { useForm } from 'react-hook-form' +import { useTranslation } from 'react-i18next' + +export const useUpdatePasswordForm = () => { + const { t } = useTranslation() + const { mutate: updatePasswordMutation, isLoading } = useAuthControllerUpdate() + + const defaultValues: AuthUpdateDto = useMemo( + () => ({ + oldPassword: '', + password: '', + }), + [] + ) + + const { + control, + formState: { errors }, + handleSubmit, + reset, + setError: setFormError, + } = useForm({ + mode: 'onTouched', + defaultValues, + }) + + const onSubmit = (data: AuthUpdateDto) => { + updatePasswordMutation( + { data }, + { + onSuccess: () => { + showSuccessToast({ description: t('toast.success.profile_updated') }) + reset(defaultValues) + }, + onError: (e) => { + handleFormError( + e as unknown as keyof AuthUpdateDto, + ({ field, description }) => { + setFormError(field, { message: description }) + } + ) + hapticImpact() + }, + } + ) + } + + return { + control, + errors, + isSubmitting: isLoading, + submit: handleSubmit(onSubmit), + } +} diff --git a/src/hooks/forms/useUpdatePasswordForm 3.ts b/src/hooks/forms/useUpdatePasswordForm 3.ts new file mode 100644 index 00000000..8c5487c1 --- /dev/null +++ b/src/hooks/forms/useUpdatePasswordForm 3.ts @@ -0,0 +1,58 @@ +import { useAuthControllerUpdate } from '@baca/api/query/auth/auth' +import { AuthUpdateDto } from '@baca/api/types' +import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils' +import { useMemo } from 'react' +import { useForm } from 'react-hook-form' +import { useTranslation } from 'react-i18next' + +export const useUpdatePasswordForm = () => { + const { t } = useTranslation() + const { mutate: updatePasswordMutation, isLoading } = useAuthControllerUpdate() + + const defaultValues: AuthUpdateDto = useMemo( + () => ({ + oldPassword: '', + password: '', + }), + [] + ) + + const { + control, + formState: { errors }, + handleSubmit, + reset, + setError: setFormError, + } = useForm({ + mode: 'onTouched', + defaultValues, + }) + + const onSubmit = (data: AuthUpdateDto) => { + updatePasswordMutation( + { data }, + { + onSuccess: () => { + showSuccessToast({ description: t('toast.success.profile_updated') }) + reset(defaultValues) + }, + onError: (e) => { + handleFormError( + e as unknown as keyof AuthUpdateDto, + ({ field, description }) => { + setFormError(field, { message: description }) + } + ) + hapticImpact() + }, + } + ) + } + + return { + control, + errors, + isSubmitting: isLoading, + submit: handleSubmit(onSubmit), + } +} diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index d95fb001..f11b1506 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -242,7 +242,8 @@ "are_you_sure": "Are you sure?", "remove_account_desc": "This action cannot be undone.\n\nYou will lose access to your account. If you have an active subscription you will lose access to it.\n\nPlease make sure you are certain about this action.", "your_photo": "Your photo", - "your_photo_description": "This will be displayed on your profile." + "your_photo_description": "This will be displayed on your profile.", + "photo_innerText": "No Image" }, "sign_in_screen": { "do_not_have_an_account": "Don't have an account?", diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index f6b51b62..68dc6fbf 100644 --- a/src/i18n/translations/pl.json +++ b/src/i18n/translations/pl.json @@ -28,6 +28,7 @@ "remove": "Usuń", "save": "Zapisz", "change": "Zmień", + "upload": "Prześlij", "search": "Szukaj", "try_again_later": "Proszę spróbuj ponownie później", "try_again": "Spróbuj ponownie" @@ -238,7 +239,10 @@ "update_your_details": "Zaktualizuj swoje dane osobowe tutaj.", "remove_account": "Usuń konto", "are_you_sure": "Jesteś pewny/a?", - "remove_account_desc": "Tej akcji nie można cofnąć.\n\nUtracisz dostęp do swojego konta. Jeśli masz aktywną subskrypcję, utracisz do niej dostęp.\n\nUpewnij się, że jesteś pewien tej akcji" + "remove_account_desc": "Tej akcji nie można cofnąć.\n\nUtracisz dostęp do swojego konta. Jeśli masz aktywną subskrypcję, utracisz do niej dostęp.\n\nUpewnij się, że jesteś pewien tej akcji", + "your_photo": "Twoje zdjęcie", + "your_photo_description": "To będzie wyświetlane na twoim profilu.", + "photo_innerText": "Bez Zdjęcia" }, "sign_in_screen": { "do_not_have_an_account": "Nie masz konta?", diff --git a/src/types/ProfileInputProps 2.ts b/src/types/ProfileInputProps 2.ts new file mode 100644 index 00000000..ad3742bb --- /dev/null +++ b/src/types/ProfileInputProps 2.ts @@ -0,0 +1,12 @@ +import { Control, FieldErrors } from 'react-hook-form' + +export type ProfileControlledInputProps = { + label: string + name: string + placeholder: string + control: Control + errors: FieldErrors + isDisabled?: boolean + onFocus?: () => void + onSubmitEditing?: () => void +} diff --git a/src/types/ProfileInputProps 3.ts b/src/types/ProfileInputProps 3.ts new file mode 100644 index 00000000..ad3742bb --- /dev/null +++ b/src/types/ProfileInputProps 3.ts @@ -0,0 +1,12 @@ +import { Control, FieldErrors } from 'react-hook-form' + +export type ProfileControlledInputProps = { + label: string + name: string + placeholder: string + control: Control + errors: FieldErrors + isDisabled?: boolean + onFocus?: () => void + onSubmitEditing?: () => void +} From 642a3fa03b91d9770e0bac48200fbb344fe355f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Mon, 3 Jun 2024 17:30:50 +0200 Subject: [PATCH 17/28] Deleted duplicated files --- src/hooks/forms/useUpdatePasswordForm 2.ts | 58 ---------------------- src/hooks/forms/useUpdatePasswordForm 3.ts | 58 ---------------------- src/types/ProfileInputProps 2.ts | 12 ----- src/types/ProfileInputProps 3.ts | 12 ----- 4 files changed, 140 deletions(-) delete mode 100644 src/hooks/forms/useUpdatePasswordForm 2.ts delete mode 100644 src/hooks/forms/useUpdatePasswordForm 3.ts delete mode 100644 src/types/ProfileInputProps 2.ts delete mode 100644 src/types/ProfileInputProps 3.ts diff --git a/src/hooks/forms/useUpdatePasswordForm 2.ts b/src/hooks/forms/useUpdatePasswordForm 2.ts deleted file mode 100644 index 8c5487c1..00000000 --- a/src/hooks/forms/useUpdatePasswordForm 2.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { useAuthControllerUpdate } from '@baca/api/query/auth/auth' -import { AuthUpdateDto } from '@baca/api/types' -import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils' -import { useMemo } from 'react' -import { useForm } from 'react-hook-form' -import { useTranslation } from 'react-i18next' - -export const useUpdatePasswordForm = () => { - const { t } = useTranslation() - const { mutate: updatePasswordMutation, isLoading } = useAuthControllerUpdate() - - const defaultValues: AuthUpdateDto = useMemo( - () => ({ - oldPassword: '', - password: '', - }), - [] - ) - - const { - control, - formState: { errors }, - handleSubmit, - reset, - setError: setFormError, - } = useForm({ - mode: 'onTouched', - defaultValues, - }) - - const onSubmit = (data: AuthUpdateDto) => { - updatePasswordMutation( - { data }, - { - onSuccess: () => { - showSuccessToast({ description: t('toast.success.profile_updated') }) - reset(defaultValues) - }, - onError: (e) => { - handleFormError( - e as unknown as keyof AuthUpdateDto, - ({ field, description }) => { - setFormError(field, { message: description }) - } - ) - hapticImpact() - }, - } - ) - } - - return { - control, - errors, - isSubmitting: isLoading, - submit: handleSubmit(onSubmit), - } -} diff --git a/src/hooks/forms/useUpdatePasswordForm 3.ts b/src/hooks/forms/useUpdatePasswordForm 3.ts deleted file mode 100644 index 8c5487c1..00000000 --- a/src/hooks/forms/useUpdatePasswordForm 3.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { useAuthControllerUpdate } from '@baca/api/query/auth/auth' -import { AuthUpdateDto } from '@baca/api/types' -import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils' -import { useMemo } from 'react' -import { useForm } from 'react-hook-form' -import { useTranslation } from 'react-i18next' - -export const useUpdatePasswordForm = () => { - const { t } = useTranslation() - const { mutate: updatePasswordMutation, isLoading } = useAuthControllerUpdate() - - const defaultValues: AuthUpdateDto = useMemo( - () => ({ - oldPassword: '', - password: '', - }), - [] - ) - - const { - control, - formState: { errors }, - handleSubmit, - reset, - setError: setFormError, - } = useForm({ - mode: 'onTouched', - defaultValues, - }) - - const onSubmit = (data: AuthUpdateDto) => { - updatePasswordMutation( - { data }, - { - onSuccess: () => { - showSuccessToast({ description: t('toast.success.profile_updated') }) - reset(defaultValues) - }, - onError: (e) => { - handleFormError( - e as unknown as keyof AuthUpdateDto, - ({ field, description }) => { - setFormError(field, { message: description }) - } - ) - hapticImpact() - }, - } - ) - } - - return { - control, - errors, - isSubmitting: isLoading, - submit: handleSubmit(onSubmit), - } -} diff --git a/src/types/ProfileInputProps 2.ts b/src/types/ProfileInputProps 2.ts deleted file mode 100644 index ad3742bb..00000000 --- a/src/types/ProfileInputProps 2.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Control, FieldErrors } from 'react-hook-form' - -export type ProfileControlledInputProps = { - label: string - name: string - placeholder: string - control: Control - errors: FieldErrors - isDisabled?: boolean - onFocus?: () => void - onSubmitEditing?: () => void -} diff --git a/src/types/ProfileInputProps 3.ts b/src/types/ProfileInputProps 3.ts deleted file mode 100644 index ad3742bb..00000000 --- a/src/types/ProfileInputProps 3.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Control, FieldErrors } from 'react-hook-form' - -export type ProfileControlledInputProps = { - label: string - name: string - placeholder: string - control: Control - errors: FieldErrors - isDisabled?: boolean - onFocus?: () => void - onSubmitEditing?: () => void -} From efe27c272b71bfbf95f360a826a734570070beb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 5 Jun 2024 14:09:55 +0200 Subject: [PATCH 18/28] Code optimization --- .../screens/profile/ProfileEditImage.tsx | 18 +++--- src/i18n/translations/en.json | 58 ++++++++--------- src/i18n/translations/pl.json | 64 +++++++++---------- 3 files changed, 70 insertions(+), 70 deletions(-) diff --git a/src/components/screens/profile/ProfileEditImage.tsx b/src/components/screens/profile/ProfileEditImage.tsx index 28e07c9c..7919ea59 100644 --- a/src/components/screens/profile/ProfileEditImage.tsx +++ b/src/components/screens/profile/ProfileEditImage.tsx @@ -2,13 +2,13 @@ import { isWeb } from '@baca/constants' import { Box, Text, Button, Row, themeColors } from '@baca/design-system' import * as ImagePicker from 'expo-image-picker' import { t } from 'i18next' -import React from 'react' +import React, { useState, useCallback } from 'react' import { Image, StyleSheet } from 'react-native' export const ProfileEditImage: React.FC = () => { - const [image, setImage] = React.useState(null) + const [image, setImage] = useState(null) - const pickImage = async () => { + const pickImage = useCallback(async () => { const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, @@ -19,21 +19,21 @@ export const ProfileEditImage: React.FC = () => { if (!result.canceled && result.assets && result.assets.length > 0) { setImage(result.assets[0].uri) } - } + }, []) return ( - + {t('profile_screen.your_photo')} {t('profile_screen.your_photo_description')} - + {image ? ( - + ) : ( - + {t('profile_screen.photo_innerText')} )} @@ -45,7 +45,7 @@ export const ProfileEditImage: React.FC = () => { ) } -const s = StyleSheet.create({ +const styles = StyleSheet.create({ image: { height: '100%', width: '100%', diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index f11b1506..3894e7c4 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -11,27 +11,28 @@ "title": "Your current session expired" } }, + "app_information": "Shake your device to open developer menu", "bottom_tabs": { - "home": "Home", "categories": "Categories", + "details": "Details", "example": "Example", - "settings": "Settings", + "home": "Home", "profile": "Profile", - "details": "Details" + "settings": "Settings" }, "common": { "add": "Add", "back": "Back", "cancel": "Cancel", + "change": "Change", "continue": "Continue", "go_back": "Go back", "remove": "Remove", "save": "Save", - "change": "Change", - "upload": "Upload", "search": "Search", "try_again_later": "Please try again later", - "try_again": "Try again" + "try_again": "Try again", + "upload": "Upload" }, "errors": { "invalid_email": "Niepoprawny adres e-mail", @@ -58,9 +59,9 @@ "email": "E-mail address", "first_name": "First name", "last_name": "Last name", - "password": "Password", + "new_password": "New password", "old_password": "Old password", - "new_password": "New password" + "password": "Password" }, "placeholders": { "confirm_password": "Confirm password", @@ -68,9 +69,9 @@ "email": "Enter your email", "first_name": "Enter your first name", "last_name": "Enter your last name", - "password": "Password", + "new_password": "Enter new password", "old_password": "Enter current password", - "new_password": "Enter new password" + "password": "Password" }, "select": {}, "validation": { @@ -81,6 +82,7 @@ "required": "This field is required" } }, + "hello": "Welcome", "navigation": { "screen_titles": { "application_info": "ApplicationInfo", @@ -96,8 +98,8 @@ "home": "Home", "main_tab": "MainTab", "not_found": "Not Found", - "resetLinkSent": "Reset link sent", "profile": "Profile", + "resetLinkSent": "Reset link sent", "settings": "Settings", "sign_in": "Sign in", "sign_up": "Sign up", @@ -139,8 +141,8 @@ "link_destructive": "Button link destructive", "link_gray": "Button link gray", "loading": "Button loading", - "primary": "Button primary", "primary_destructive": "Button primary destructive", + "primary": "Button primary", "secondary_color": "Button secondary color", "secondary_destructive": "Button secondary destructive", "secondary_gray": "Button secondary gray", @@ -164,14 +166,14 @@ "test_notification": "Test notification", "typography": { "label": "Typography", - "xs": "xs", - "sm": "sm", - "md": "md", - "lg": "lg", - "xl": "xl", "2xl": "2xl", "3xl": "3xl", - "4xl": "4xl" + "4xl": "4xl", + "lg": "lg", + "md": "md", + "sm": "sm", + "xl": "xl", + "xs": "xs" } }, "confirm_email_screen": { @@ -232,18 +234,18 @@ "settings_screen": { "copy_push_token": "Copy push token", "current_theme": "Current theme: {{theme}}", - "sign_out": "Sign out!", - "selected": " - selected" + "selected": " - selected", + "sign_out": "Sign out!" }, "profile_screen": { - "profile": "Profile", - "update_your_details": "Update your personal details here.", - "remove_account": "Remove account", "are_you_sure": "Are you sure?", + "photo_innerText": "No Image", + "profile": "Profile", "remove_account_desc": "This action cannot be undone.\n\nYou will lose access to your account. If you have an active subscription you will lose access to it.\n\nPlease make sure you are certain about this action.", - "your_photo": "Your photo", + "remove_account": "Remove account", + "update_your_details": "Update your personal details here.", "your_photo_description": "This will be displayed on your profile.", - "photo_innerText": "No Image" + "your_photo": "Your photo" }, "sign_in_screen": { "do_not_have_an_account": "Don't have an account?", @@ -308,11 +310,9 @@ "surname_placeholder": "Surname", "which_music": "what kind of music do you listen ?" }, + "thanks": "Thank you for using the best template for expo apps", "typography_screen": { "display_font_size": "Display fontSize: ", "text_font_size": "Text fontSize: " - }, - "hello": "Welcome", - "thanks": "Thank you for using the best template for expo apps", - "app_information": "Shake your device to open developer menu" + } } diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index 68dc6fbf..1e255276 100644 --- a/src/i18n/translations/pl.json +++ b/src/i18n/translations/pl.json @@ -11,27 +11,28 @@ "title": "Twoja sesja wygasła" } }, + "app_information": "Potrząśnij swoim urządzeniem, by otworzyć menu dewelopera", "bottom_tabs": { - "home": "Home", "categories": "Kategorie", + "details": "Detale", "example": "Przykłady", - "settings": "Ustawienia", + "home": "Home", "profile": "Profil", - "details": "Detale" + "settings": "Ustawienia" }, "common": { "add": "Dodaj", "back": "Cofnij", "cancel": "Anuluj", + "change": "Zmień", "continue": "Kontynuuj", "go_back": "Cofnij", "remove": "Usuń", "save": "Zapisz", - "change": "Zmień", - "upload": "Prześlij", "search": "Szukaj", "try_again_later": "Proszę spróbuj ponownie później", - "try_again": "Spróbuj ponownie" + "try_again": "Spróbuj ponownie", + "upload": "Prześlij" }, "errors": { "invalid_email": "Niepoprawny adres e-mail", @@ -58,9 +59,9 @@ "email": "Adres e-mail", "first_name": "Imię", "last_name": "Nazwisko", - "password": "Hasło", + "new_password": "Nowe hasło", "old_password": "Stare hasło", - "new_password": "Nowe hasło" + "password": "Hasło" }, "placeholders": { "confirm_password": "Potwierdź hasło", @@ -68,9 +69,9 @@ "email": "Podaj adres e-mail", "first_name": "Podaj swoje imię", "last_name": "Podaj swoje nazwisko", - "password": "Hasło", + "new_password": "Podaj nowe hasło", "old_password": "Podaj stare hasło", - "new_password": "Podaj nowe hasło" + "password": "Hasło" }, "select": {}, "validation": { @@ -81,6 +82,7 @@ "required": "Pole wymagane" } }, + "hello": "Witaj", "navigation": { "screen_titles": { "application_info": "ApplicationInfo", @@ -96,8 +98,8 @@ "home": "Home", "main_tab": "MainTab", "not_found": "NotFound", - "resetLinkSent": "Link wysłany", "profile": "Profil użytkownika", + "resetLinkSent": "Link wysłany", "settings": "Settings", "sign_in": "Sign in", "sign_up": "Sign up", @@ -139,8 +141,8 @@ "link_destructive": "Button link destructive", "link_gray": "Button link gray", "loading": "Button loading", - "primary": "Button primary", "primary_destructive": "Button primary destructive", + "primary": "Button primary", "secondary_color": "Button secondary color", "secondary_destructive": "Button secondary destructive", "secondary_gray": "Button secondary gray", @@ -164,14 +166,14 @@ "test_notification": "Test notification", "typography": { "label": "Typography", - "xs": "xs", - "sm": "sm", - "md": "md", - "lg": "lg", - "xl": "xl", "2xl": "2xl", "3xl": "3xl", - "4xl": "4xl" + "4xl": "4xl", + "lg": "lg", + "md": "md", + "sm": "sm", + "xl": "xl", + "xs": "xs" } }, "confirm_email_screen": { @@ -181,10 +183,10 @@ "verification_succeed": "Adres e-mail został pomyślnie potwierdzony." }, "details_screen": { - "title": "To jest przykładowy widok", + "awesome": "Wspaniale 🎉", "open_bottom_sheet": "Otwórz BottomSheetModal", "screen_params": "Parametry widoku: {{params}}", - "awesome": "Wspaniale 🎉" + "title": "To jest przykładowy widok" }, "examples_screen": { "go_to_application_info": "Idź do ApplicationInfo", @@ -208,10 +210,10 @@ "details": "Detale" }, "landing_screen": { - "login_cta": "Zaloguj się", - "sign_up": "Zarejestruj się", "go_to_blog": "Otwórz blog", - "go_to_form": "Otwórz pełno ekranowy formularz full" + "go_to_form": "Otwórz pełno ekranowy formularz full", + "login_cta": "Zaloguj się", + "sign_up": "Zarejestruj się" }, "reset_password_complete": { "password_reset": "Reset hasła", @@ -235,14 +237,14 @@ "sign_out": "Wyloguj!" }, "profile_screen": { - "profile": "Profil", - "update_your_details": "Zaktualizuj swoje dane osobowe tutaj.", - "remove_account": "Usuń konto", "are_you_sure": "Jesteś pewny/a?", + "photo_innerText": "Bez Zdjęcia", + "profile": "Profil", "remove_account_desc": "Tej akcji nie można cofnąć.\n\nUtracisz dostęp do swojego konta. Jeśli masz aktywną subskrypcję, utracisz do niej dostęp.\n\nUpewnij się, że jesteś pewien tej akcji", - "your_photo": "Twoje zdjęcie", + "remove_account": "Usuń konto", + "update_your_details": "Zaktualizuj swoje dane osobowe tutaj.", "your_photo_description": "To będzie wyświetlane na twoim profilu.", - "photo_innerText": "Bez Zdjęcia" + "your_photo": "Twoje zdjęcie" }, "sign_in_screen": { "do_not_have_an_account": "Nie masz konta?", @@ -307,11 +309,9 @@ "surname_placeholder": "Nazwisko", "which_music": "Jakiej muzyki słuchasz ?" }, + "thanks": "Dzięki za używanie najlepszej templatki dla aplikacji expo", "typography_screen": { "display_font_size": "Display fontSize: ", "text_font_size": "Text fontSize: " - }, - "hello": "Witaj", - "thanks": "Dzięki za używanie najlepszej templatki dla aplikacji expo", - "app_information": "Potrząśnij swoim urządzeniem, by otworzyć menu dewelopera" + } } From 5ea929d9a0ab039a148d733308c44e05ec11f5e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 5 Jun 2024 14:21:04 +0200 Subject: [PATCH 19/28] Code optimization --- src/components/screens/profile/ProfileControlledInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/screens/profile/ProfileControlledInput.tsx b/src/components/screens/profile/ProfileControlledInput.tsx index b4b715a1..cd393254 100644 --- a/src/components/screens/profile/ProfileControlledInput.tsx +++ b/src/components/screens/profile/ProfileControlledInput.tsx @@ -24,7 +24,7 @@ export const ProfileControlledInput = ({ mb={isWeb ? 10 : 0} maxW={800} > - + {label} @@ -45,6 +45,6 @@ export const ProfileControlledInput = ({ ) } -const s = StyleSheet.create({ +const styles = StyleSheet.create({ labelMargin: { marginBottom: 10 }, }) From d617680c76dbf5d906c38bbc6e6b29a4109a90fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 5 Jun 2024 17:24:53 +0200 Subject: [PATCH 20/28] Rest operator on props and index.ts for types added --- .../screens/profile/ProfileControlledInput.tsx | 14 +++----------- src/types/index.ts | 4 ++++ 2 files changed, 7 insertions(+), 11 deletions(-) create mode 100644 src/types/index.ts diff --git a/src/components/screens/profile/ProfileControlledInput.tsx b/src/components/screens/profile/ProfileControlledInput.tsx index cd393254..bac4c221 100644 --- a/src/components/screens/profile/ProfileControlledInput.tsx +++ b/src/components/screens/profile/ProfileControlledInput.tsx @@ -2,18 +2,14 @@ import { ControlledField } from '@baca/components' import { isWeb } from '@baca/constants' import { Box, Text } from '@baca/design-system' import { useWeb } from '@baca/hooks' -import { ProfileControlledInputProps } from '@baca/types/ProfileInputProps' +import { ProfileControlledInputProps } from '@baca/types' import { StyleSheet } from 'react-native' export const ProfileControlledInput = ({ label, name, - placeholder, - control, - errors, isDisabled = false, - onFocus, - onSubmitEditing, + ...rest }: ProfileControlledInputProps) => { const { shouldApplyMobileStyles } = useWeb() @@ -29,16 +25,12 @@ export const ProfileControlledInput = ({ diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 00000000..6bbcf636 --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1,4 @@ +export * from './i18next' +export * from './icon' +export * from './ProfileInputProps' +export * from './testForm' From 5f64e30210454a029315ee3abee2276028beba8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 5 Jun 2024 17:31:58 +0200 Subject: [PATCH 21/28] types imports optimized --- src/components/FeaturedIcon.tsx | 2 +- src/design-system/bottomSheets/types.ts | 2 +- src/design-system/components/Button/Button.tsx | 2 +- src/design-system/components/Icon.tsx | 2 +- src/design-system/components/types.ts | 2 +- src/hooks/forms/useTestForm.ts | 2 +- src/hooks/usePasswordValidation.tsx | 2 +- src/hooks/useSecurePassword.ts | 2 +- src/navigation/tabNavigator/components/SideBarTabItem.tsx | 2 +- src/navigation/tabNavigator/navigation-config.ts | 3 +-- 10 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/FeaturedIcon.tsx b/src/components/FeaturedIcon.tsx index 22005967..cfd01759 100644 --- a/src/components/FeaturedIcon.tsx +++ b/src/components/FeaturedIcon.tsx @@ -1,5 +1,5 @@ import { Box, Icon } from '@baca/design-system' -import { IconNames } from '@baca/types/icon' +import { IconNames } from '@baca/types' type FeatureIconSize = 'sm' | 'md' | 'lg' | 'xl' diff --git a/src/design-system/bottomSheets/types.ts b/src/design-system/bottomSheets/types.ts index 5837fd17..328a9c74 100644 --- a/src/design-system/bottomSheets/types.ts +++ b/src/design-system/bottomSheets/types.ts @@ -1,4 +1,4 @@ -import { IconNames } from '@baca/types/icon' +import { IconNames } from '@baca/types' import { BottomSheetModal } from '@gorhom/bottom-sheet' import { RefObject } from 'react' diff --git a/src/design-system/components/Button/Button.tsx b/src/design-system/components/Button/Button.tsx index c21d8d70..ab5b7451 100644 --- a/src/design-system/components/Button/Button.tsx +++ b/src/design-system/components/Button/Button.tsx @@ -1,5 +1,5 @@ import { useTheme } from '@baca/hooks' -import { IconNames } from '@baca/types/icon' +import { IconNames } from '@baca/types' import { getColorValue } from '@baca/utils' import { useMemo, diff --git a/src/design-system/components/Icon.tsx b/src/design-system/components/Icon.tsx index 28c5913f..fb1e9d32 100644 --- a/src/design-system/components/Icon.tsx +++ b/src/design-system/components/Icon.tsx @@ -1,5 +1,5 @@ import { useTheme } from '@baca/hooks' -import { IconNames } from '@baca/types/icon' +import { IconNames } from '@baca/types' import { getColorValue } from '@baca/utils' import { createIconSetFromIcoMoon } from '@expo/vector-icons' import iconJson from 'assets/icomoon/selection.json' diff --git a/src/design-system/components/types.ts b/src/design-system/components/types.ts index fb1e7b57..0893a537 100644 --- a/src/design-system/components/types.ts +++ b/src/design-system/components/types.ts @@ -1,5 +1,5 @@ import { FontWeight, TextFontSize, _appTheme } from '@baca/design-system' -import { IconNames } from '@baca/types/icon' +import { IconNames } from '@baca/types' import { DimensionValue, TextStyle, ViewProps, ViewStyle, TextInputProps } from 'react-native' import { BoxProps } from './Box' diff --git a/src/hooks/forms/useTestForm.ts b/src/hooks/forms/useTestForm.ts index 7b604a2d..8e74b1b0 100644 --- a/src/hooks/forms/useTestForm.ts +++ b/src/hooks/forms/useTestForm.ts @@ -1,4 +1,4 @@ -import { TestFormValues } from '@baca/types/testForm' +import { TestFormValues } from '@baca/types' import { isError } from '@tanstack/react-query' import { useState } from 'react' import { FieldPath, useForm } from 'react-hook-form' diff --git a/src/hooks/usePasswordValidation.tsx b/src/hooks/usePasswordValidation.tsx index c89a1c96..cf8a638f 100644 --- a/src/hooks/usePasswordValidation.tsx +++ b/src/hooks/usePasswordValidation.tsx @@ -1,6 +1,6 @@ import { REGEX } from '@baca/constants' import { Box, Icon, Row, Text } from '@baca/design-system' -import { IconNames } from '@baca/types/icon' +import { IconNames } from '@baca/types' import { useCallback, useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' diff --git a/src/hooks/useSecurePassword.ts b/src/hooks/useSecurePassword.ts index 1ee96a1d..2fcf1488 100644 --- a/src/hooks/useSecurePassword.ts +++ b/src/hooks/useSecurePassword.ts @@ -1,4 +1,4 @@ -import { IconNames } from '@baca/types/icon' +import { IconNames } from '@baca/types' import { useCallback, useState } from 'react' export const useSecurePassword = (type?: 'text' | 'password') => { diff --git a/src/navigation/tabNavigator/components/SideBarTabItem.tsx b/src/navigation/tabNavigator/components/SideBarTabItem.tsx index 758b8dde..fde2f692 100644 --- a/src/navigation/tabNavigator/components/SideBarTabItem.tsx +++ b/src/navigation/tabNavigator/components/SideBarTabItem.tsx @@ -1,5 +1,5 @@ import { Icon, Row, Text } from '@baca/design-system' -import { IconNames } from '@baca/types/icon' +import { IconNames } from '@baca/types' import { Platform, StyleSheet } from 'react-native' import { TabBarItemWrapper } from './TabBarItemWrapper' diff --git a/src/navigation/tabNavigator/navigation-config.ts b/src/navigation/tabNavigator/navigation-config.ts index 5e0a6f8b..edada444 100644 --- a/src/navigation/tabNavigator/navigation-config.ts +++ b/src/navigation/tabNavigator/navigation-config.ts @@ -1,5 +1,4 @@ -import { I18nKeys } from '@baca/types/i18next' -import { IconNames } from '@baca/types/icon' +import { I18nKeys, IconNames } from '@baca/types' type Tab = { // This will be passed to translations object and translated in the app From a5cf84db5d6dcd168399555fa507f8d93fcbf3f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Wed, 5 Jun 2024 18:43:53 +0200 Subject: [PATCH 22/28] All comments fixed --- src/components/index.ts | 7 +++ .../profile/ProfileDeleteAccountButton.tsx | 22 ++++---- .../screens/profile/ProfileDetailsForm.tsx | 9 ++-- .../screens/profile/ProfileEditImage.tsx | 2 +- .../screens/profile/ProfilePasswordForm.tsx | 52 +++++++++---------- src/hooks/forms/useUpdatePasswordForm.ts | 14 ++--- src/screens/ProfileScreen.tsx | 12 +++-- 7 files changed, 58 insertions(+), 60 deletions(-) diff --git a/src/components/index.ts b/src/components/index.ts index d211f686..cfd0fc8d 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -12,3 +12,10 @@ export * from './LanguagePicker' export * from './Modal' export * from './StatusBar' export * from './Version' + +export * from './screens/profile/ProfileControlledInput' +export * from './screens/profile/ProfileDeleteAccountButton' +export * from './screens/profile/ProfileDetailsForm' +export * from './screens/profile/ProfileEditImage' +export * from './screens/profile/ProfileHeader' +export * from './screens/profile/ProfilePasswordForm' diff --git a/src/components/screens/profile/ProfileDeleteAccountButton.tsx b/src/components/screens/profile/ProfileDeleteAccountButton.tsx index 8f1bf67d..a5544f6f 100644 --- a/src/components/screens/profile/ProfileDeleteAccountButton.tsx +++ b/src/components/screens/profile/ProfileDeleteAccountButton.tsx @@ -57,18 +57,16 @@ export const ProfileDeleteAccountButton = () => { ) return ( - - - - {bottomSheet} - + + + {bottomSheet} ) } diff --git a/src/components/screens/profile/ProfileDetailsForm.tsx b/src/components/screens/profile/ProfileDetailsForm.tsx index ce0a0927..0574a0c9 100644 --- a/src/components/screens/profile/ProfileDetailsForm.tsx +++ b/src/components/screens/profile/ProfileDetailsForm.tsx @@ -20,23 +20,20 @@ export const ProfileDetailsForm = () => { label={t('form.labels.first_name')} name="firstName" placeholder={t('form.placeholders.first_name')} - control={control} - errors={errors} + {...{ control, errors }} onFocus={focusLastNameInput} /> diff --git a/src/components/screens/profile/ProfileEditImage.tsx b/src/components/screens/profile/ProfileEditImage.tsx index 7919ea59..f6dc0947 100644 --- a/src/components/screens/profile/ProfileEditImage.tsx +++ b/src/components/screens/profile/ProfileEditImage.tsx @@ -2,7 +2,7 @@ import { isWeb } from '@baca/constants' import { Box, Text, Button, Row, themeColors } from '@baca/design-system' import * as ImagePicker from 'expo-image-picker' import { t } from 'i18next' -import React, { useState, useCallback } from 'react' +import { useState, useCallback } from 'react' import { Image, StyleSheet } from 'react-native' export const ProfileEditImage: React.FC = () => { diff --git a/src/components/screens/profile/ProfilePasswordForm.tsx b/src/components/screens/profile/ProfilePasswordForm.tsx index e774b1b2..94e48fe0 100644 --- a/src/components/screens/profile/ProfilePasswordForm.tsx +++ b/src/components/screens/profile/ProfilePasswordForm.tsx @@ -9,33 +9,31 @@ export const ProfilePasswordForm = () => { const { control, errors, submit, isSubmitting } = useUpdatePasswordForm() return ( - - - - - - - - + + + + + + ) } diff --git a/src/hooks/forms/useUpdatePasswordForm.ts b/src/hooks/forms/useUpdatePasswordForm.ts index 8c5487c1..6d9af568 100644 --- a/src/hooks/forms/useUpdatePasswordForm.ts +++ b/src/hooks/forms/useUpdatePasswordForm.ts @@ -1,22 +1,18 @@ import { useAuthControllerUpdate } from '@baca/api/query/auth/auth' import { AuthUpdateDto } from '@baca/api/types' import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils' -import { useMemo } from 'react' import { useForm } from 'react-hook-form' import { useTranslation } from 'react-i18next' +const defaultValues: AuthUpdateDto = { + oldPassword: '', + password: '', +} + export const useUpdatePasswordForm = () => { const { t } = useTranslation() const { mutate: updatePasswordMutation, isLoading } = useAuthControllerUpdate() - const defaultValues: AuthUpdateDto = useMemo( - () => ({ - oldPassword: '', - password: '', - }), - [] - ) - const { control, formState: { errors }, diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index e810c8dc..6a037a8a 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -1,8 +1,10 @@ -import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton' -import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm' -import { ProfileEditImage } from '@baca/components/screens/profile/ProfileEditImage' -import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader' -import { ProfilePasswordForm } from '@baca/components/screens/profile/ProfilePasswordForm' +import { + ProfileDeleteAccountButton, + ProfileDetailsForm, + ProfileEditImage, + ProfileHeader, + ProfilePasswordForm, +} from '@baca/components' import { Box, ScrollView, Spacer } from '@baca/design-system' import { useTranslation, useScreenOptions } from '@baca/hooks' From 85de1e02057901acdb3adbabaedd2ffbe108eadd Mon Sep 17 00:00:00 2001 From: Mateusz Rostkowski Date: Tue, 18 Jun 2024 09:48:25 +0200 Subject: [PATCH 23/28] chore: Update SignUpScreen.tsx with usePasswordValidation hook --- src/screens/auth/SignUpScreen.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/screens/auth/SignUpScreen.tsx b/src/screens/auth/SignUpScreen.tsx index e0312370..a2e8bf79 100644 --- a/src/screens/auth/SignUpScreen.tsx +++ b/src/screens/auth/SignUpScreen.tsx @@ -1,11 +1,10 @@ import { CompanyLogo, ControlledField, FormWrapper, SocialButtons } from '@baca/components' import { Box, Button, Center, Display, Row, Spacer, Text } from '@baca/design-system' import { useCallback, useSignUpForm, useState, useTranslation } from '@baca/hooks' +import { usePasswordValidation } from '@baca/hooks/usePasswordValidation' import { router } from 'expo-router' import { Keyboard } from 'react-native' -import { usePasswordValidation } from '../../hooks/usePasswordValidation' - const navigateToLogIn = () => { router.navigate('/sign-in') } From d1434f00784241bfad352c5eb5a85042911b45f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Thu, 20 Jun 2024 12:52:09 +0200 Subject: [PATCH 24/28] ProfileEditImage with better alignments --- .../screens/profile/ProfileEditImage.tsx | 41 +++++++++++-------- 1 file changed, 24 insertions(+), 17 deletions(-) diff --git a/src/components/screens/profile/ProfileEditImage.tsx b/src/components/screens/profile/ProfileEditImage.tsx index f6dc0947..5ab78b6e 100644 --- a/src/components/screens/profile/ProfileEditImage.tsx +++ b/src/components/screens/profile/ProfileEditImage.tsx @@ -1,4 +1,3 @@ -import { isWeb } from '@baca/constants' import { Box, Text, Button, Row, themeColors } from '@baca/design-system' import * as ImagePicker from 'expo-image-picker' import { t } from 'i18next' @@ -22,8 +21,8 @@ export const ProfileEditImage: React.FC = () => { }, []) return ( - - + + {t('profile_screen.your_photo')} {t('profile_screen.your_photo_description')} @@ -34,39 +33,47 @@ export const ProfileEditImage: React.FC = () => { ) : ( - {t('profile_screen.photo_innerText')} + + {t('profile_screen.photo_innerText')} + )} - - - - + + ) } const styles = StyleSheet.create({ + container: { + alignItems: 'flex-start', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'space-between', + maxWidth: 800, + }, image: { height: '100%', width: '100%', }, imageContainer: { - alignSelf: 'center', - borderRadius: 50, - height: 100, + borderRadius: 32, + height: 64, marginBottom: 10, + marginRight: 82, overflow: 'hidden', - right: isWeb ? 150 : 0, - width: 100, - }, - marginBottom: { - marginBottom: 10, + width: 64, }, placeholder: { alignItems: 'center', backgroundColor: themeColors.primitives['Gray neutral']['50'], height: '100%', justifyContent: 'center', - width: '100%', + }, + textContainer: { + flex: 1, + marginBottom: 30, + maxWidth: 260, + minWidth: 260, }, }) From 5b721dc831b1476ae1b9673dcac73ecd9c7be2a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olaf=20Chwo=C5=82ka?= Date: Thu, 20 Jun 2024 19:44:54 +0200 Subject: [PATCH 25/28] password with validations done --- .../profile/ProfileControlledInput.tsx | 7 +------ .../screens/profile/ProfilePasswordForm.tsx | 20 ++++++++++++++++--- src/hooks/forms/index.ts | 1 + src/hooks/forms/useUpdatePasswordForm.ts | 4 +++- src/types/ProfileInputProps.ts | 12 +++++++---- 5 files changed, 30 insertions(+), 14 deletions(-) diff --git a/src/components/screens/profile/ProfileControlledInput.tsx b/src/components/screens/profile/ProfileControlledInput.tsx index bac4c221..1400dad0 100644 --- a/src/components/screens/profile/ProfileControlledInput.tsx +++ b/src/components/screens/profile/ProfileControlledInput.tsx @@ -3,7 +3,6 @@ import { isWeb } from '@baca/constants' import { Box, Text } from '@baca/design-system' import { useWeb } from '@baca/hooks' import { ProfileControlledInputProps } from '@baca/types' -import { StyleSheet } from 'react-native' export const ProfileControlledInput = ({ label, @@ -20,7 +19,7 @@ export const ProfileControlledInput = ({ mb={isWeb ? 10 : 0} maxW={800} > - + {label} @@ -36,7 +35,3 @@ export const ProfileControlledInput = ({ ) } - -const styles = StyleSheet.create({ - labelMargin: { marginBottom: 10 }, -}) diff --git a/src/components/screens/profile/ProfilePasswordForm.tsx b/src/components/screens/profile/ProfilePasswordForm.tsx index 94e48fe0..55284b0b 100644 --- a/src/components/screens/profile/ProfilePasswordForm.tsx +++ b/src/components/screens/profile/ProfilePasswordForm.tsx @@ -1,12 +1,19 @@ import { Box, Button, Row } from '@baca/design-system' -import { useUpdatePasswordForm } from '@baca/hooks/forms/useUpdatePasswordForm' +import { useCallback } from '@baca/hooks' +import { useUpdatePasswordForm } from '@baca/hooks/forms' +import { usePasswordValidation } from '@baca/hooks/usePasswordValidation' import { useTranslation } from 'react-i18next' +import { Keyboard } from 'react-native' import { ProfileControlledInput } from './ProfileControlledInput' export const ProfilePasswordForm = () => { const { t } = useTranslation() - const { control, errors, submit, isSubmitting } = useUpdatePasswordForm() + const { control, errors, submit, isSubmitting, setFocus } = useUpdatePasswordForm() + + const { isPasswordError, passwordSuggestions, validationFn } = usePasswordValidation() + + const focusNewPasswordInput = useCallback(() => setFocus('password'), [setFocus]) return ( @@ -16,14 +23,21 @@ export const ProfilePasswordForm = () => { placeholder={t('form.placeholders.old_password')} control={control} errors={errors} + onSubmitEditing={focusNewPasswordInput} /> + {passwordSuggestions}