From aee333ec2b38c57a6f9fb354d9ae57308f8e1819 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Tue, 19 Mar 2024 14:08:01 +0100 Subject: [PATCH 1/6] add notificated config, handle e-mail confirmation --- app/(app)/(common)/confirm-email.tsx | 3 + src/api/axios/custom-instance.ts | 7 +- .../components/Button/Button.tsx | 135 +++++++++++------- src/design-system/components/types.ts | 3 + .../utils/generateStyledSystem.ts | 5 +- src/hooks/forms/useSignInForm.ts | 3 +- src/hooks/forms/useSignUpForm.ts | 12 +- src/hooks/forms/useUpdateProfileForm.ts | 12 +- src/i18n/translations/en.json | 6 + src/i18n/translations/pl.json | 6 + src/providers/NotificatedProvider.tsx | 71 ++++++++- src/screens/ComponentsScreen.tsx | 32 ++--- src/screens/ConfirmEmail.tsx | 51 +++++++ src/screens/index.ts | 1 + src/utils/index.ts | 6 +- src/utils/showToast.ts | 51 +++++++ 16 files changed, 303 insertions(+), 101 deletions(-) create mode 100644 app/(app)/(common)/confirm-email.tsx create mode 100644 src/screens/ConfirmEmail.tsx create mode 100644 src/utils/showToast.ts diff --git a/app/(app)/(common)/confirm-email.tsx b/app/(app)/(common)/confirm-email.tsx new file mode 100644 index 00000000..f3156100 --- /dev/null +++ b/app/(app)/(common)/confirm-email.tsx @@ -0,0 +1,3 @@ +import { ConfirmEmail } from '@baca/screens' + +export default ConfirmEmail diff --git a/src/api/axios/custom-instance.ts b/src/api/axios/custom-instance.ts index bb2555ca..4a8ced25 100644 --- a/src/api/axios/custom-instance.ts +++ b/src/api/axios/custom-instance.ts @@ -1,11 +1,10 @@ // custom-instance.ts import { ENV, SECOND_IN_MS } from '@baca/constants' -import { getApiError } from '@baca/utils' +import { getApiError, showErrorToast } from '@baca/utils' import Axios, { AxiosError, AxiosRequestConfig } from 'axios' import i18n from 'i18next' import qs from 'qs' -import { notify } from 'react-native-notificated' import { injectTokenToRequest } from './interceptors' @@ -45,9 +44,7 @@ AXIOS_INSTANCE.interceptors.response.use( // TODO: we should handle certain error type if (errorMessage) { - notify('error', { - params: { title: 'ERROR', description: i18n.t('errors.something_went_wrong') }, - }) + showErrorToast({ title: 'ERROR', description: i18n.t('errors.something_went_wrong') }) //CONFIG: Add errors in getApiError const api_error = getApiError(errorMessage) diff --git a/src/design-system/components/Button/Button.tsx b/src/design-system/components/Button/Button.tsx index 08e474a0..2c6779f9 100644 --- a/src/design-system/components/Button/Button.tsx +++ b/src/design-system/components/Button/Button.tsx @@ -1,4 +1,5 @@ import { useColorScheme } from '@baca/contexts' +import { IconNames } from '@baca/types/icon' import { getColorValue } from '@baca/utils' import { useMemo, @@ -7,6 +8,7 @@ import { forwardRef, ForwardRefExoticComponent, PropsWithoutRef, + ReactNode, RefAttributes, } from 'react' import { @@ -22,23 +24,24 @@ import { import { ButtonSize, ButtonVariant, buttonSizeVariants, buttonVariants, theme } from '../../config' import { generateStyledComponent } from '../../utils' -import { Box } from '../Box' +import { Icon } from '../Icon' import { Loader } from '../Loader' +import { Row } from '../Row' import { Text } from '../Text' import { useHover } from '../Touchables/useHover' import { StyledProps } from '../types' export type ButtonProps = StyledProps & PressableProps & { - title?: string - variant?: ButtonVariant - size?: ButtonSize - loading?: boolean disabled?: boolean - leftIcon?: JSX.Element - rightIcon?: JSX.Element + leftIconName?: IconNames loaderElement?: JSX.Element + loading?: boolean + rightIconName?: IconNames + size?: ButtonSize textStyle?: StyleProp + title?: string + variant?: ButtonVariant } const styles = StyleSheet.create({ @@ -60,16 +63,16 @@ const RawButton = memo( forwardRef( ( { - variant = 'Primary', - size = 'md', - loading, + children, disabled, - leftIcon, - rightIcon, + leftIconName, + loading, + rightIconName, + size = 'md', style, - title, - children, textStyle, + title, + variant = 'Primary', ...props }, ref @@ -202,6 +205,15 @@ const RawButton = memo( ] ) + const getIconColor = useCallback( + ({ pressed }: PressableStateCallbackType): ColorNames | undefined => { + if (disabled) return disabledStyle.color + if (pressed || isHovered) return hoveredStyle.color + return defaultStyle.color + }, + [defaultStyle.color, disabled, disabledStyle.color, hoveredStyle.color, isHovered] + ) + const pressableTextStyleFunction = useCallback( ({ pressed }: PressableStateCallbackType) => StyleSheet.flatten([ @@ -215,37 +227,64 @@ const RawButton = memo( const childrenElement = useCallback( (props: PressableStateCallbackType) => { - if (loading) { - return - } - if (title) { - return ( - - {title} - - ) - } - - if (typeof children === 'string') { - return ( - - {children} - - ) - } - return children + return ( + <> + {loading ? ( + + ) : ( + + {leftIconName && ( + + )} + {title ? ( + + {title} + + ) : typeof children === 'string' ? ( + + {children} + + ) : ( + (children as ReactNode) + )} + {rightIconName && ( + + )} + + )} + + ) }, - [buttonSizeVariant.textVariant, children, loading, pressableTextStyleFunction, title] + [ + buttonSizeVariant.iconGap, + buttonSizeVariant.iconSize, + buttonSizeVariant.textVariant, + children, + getIconColor, + leftIconName, + loading, + pressableTextStyleFunction, + rightIconName, + title, + ] ) return ( @@ -256,13 +295,7 @@ const RawButton = memo( testID="baseButton" {...{ disabled, ...hoverProps, ref, ...props }} > - {(props: PressableStateCallbackType) => ( - <> - {leftIcon && {leftIcon}} - {childrenElement(props)} - {rightIcon && {rightIcon}} - - )} + {(props: PressableStateCallbackType) => <>{childrenElement(props)}} ) } diff --git a/src/design-system/components/types.ts b/src/design-system/components/types.ts index fe1d70ec..ebe3b76a 100644 --- a/src/design-system/components/types.ts +++ b/src/design-system/components/types.ts @@ -17,6 +17,7 @@ type Sizing = | 'minHeight' | 'maxH' | 'maxHeight' + export type SizingValue = | keyof typeof _appTheme.size | DimensionValue @@ -49,6 +50,8 @@ export type Spacing = | 'pb' | 'px' | 'py' + | 'gap' + export type SpacingProps = { [key in Spacing]?: SizingValue } diff --git a/src/design-system/utils/generateStyledSystem.ts b/src/design-system/utils/generateStyledSystem.ts index ae2bf61c..846650a3 100644 --- a/src/design-system/utils/generateStyledSystem.ts +++ b/src/design-system/utils/generateStyledSystem.ts @@ -1,7 +1,8 @@ -import { hex2rgba, getColorValue, removeFalsyProperties } from '@baca/utils' +import { hex2rgba, removeFalsyProperties } from '@baca/utils' import { ImageStyle, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native' import { generateSize } from './generateSize' +import { getColorValue } from './getColorValue' import { FlexProps, SpacingProps, @@ -55,6 +56,7 @@ const generateSpacingStyle = ({ pb, px, py, + gap, }: SpacingProps): StyleProp => { const style: StyleProp = [ generateSize(p, 'padding'), @@ -71,6 +73,7 @@ const generateSpacingStyle = ({ generateSize(mt, 'marginTop'), generateSize(ml, 'marginLeft'), generateSize(mr, 'marginRight'), + generateSize(gap, 'gap'), ] return style.filter(Boolean) diff --git a/src/hooks/forms/useSignInForm.ts b/src/hooks/forms/useSignInForm.ts index beb116da..ca5f6169 100644 --- a/src/hooks/forms/useSignInForm.ts +++ b/src/hooks/forms/useSignInForm.ts @@ -2,8 +2,7 @@ import { useAuthControllerLogin } from '@baca/api/query/auth/auth' import { AuthEmailLoginDto } from '@baca/api/types' import { setToken } from '@baca/services' import { isSignedInAtom } from '@baca/store/auth' -import { hapticImpact } from '@baca/utils' -import { handleFormError } from '@baca/utils/handleFormErrors' +import { handleFormError, hapticImpact } from '@baca/utils' import { useSetAtom } from 'jotai' import { useForm } from 'react-hook-form' diff --git a/src/hooks/forms/useSignUpForm.ts b/src/hooks/forms/useSignUpForm.ts index 6b86e218..240fd9b9 100644 --- a/src/hooks/forms/useSignUpForm.ts +++ b/src/hooks/forms/useSignUpForm.ts @@ -1,10 +1,8 @@ import { useAuthControllerRegister } from '@baca/api/query/auth/auth' import { AuthRegisterLoginDto } from '@baca/api/types' -import { hapticImpact } from '@baca/utils' -import { handleFormError } from '@baca/utils/handleFormErrors' +import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils' import { useForm } from 'react-hook-form' import { useTranslation } from 'react-i18next' -import { notify } from 'react-native-notificated' const defaultValues: AuthRegisterLoginDto = { email: '', @@ -39,12 +37,8 @@ export const useSignUpForm = () => { }, { onSuccess: () => { - notify('success', { - params: { - style: { multiline: 100 }, - title: 'SUCCESS', - description: t('toast.success.new_account_created', { userEmail: data.email }), - }, + showSuccessToast({ + description: t('toast.success.new_account_created', { userEmail: data.email }), }) }, onError: (e) => { diff --git a/src/hooks/forms/useUpdateProfileForm.ts b/src/hooks/forms/useUpdateProfileForm.ts index b8b98618..6b1eef9f 100644 --- a/src/hooks/forms/useUpdateProfileForm.ts +++ b/src/hooks/forms/useUpdateProfileForm.ts @@ -1,11 +1,9 @@ import { useAuthControllerUpdate, useAuthControllerMe } from '@baca/api/query/auth/auth' import { AuthUpdateDto } from '@baca/api/types' -import { hapticImpact } from '@baca/utils' -import { handleFormError } from '@baca/utils/handleFormErrors' +import { handleFormError, hapticImpact, showSuccessToast } from '@baca/utils' import { useMemo, useEffect } from 'react' import { useForm } from 'react-hook-form' import { useTranslation } from 'react-i18next' -import { notify } from 'react-native-notificated' export const useUpdateProfileForm = () => { const { data: userData } = useAuthControllerMe() @@ -42,13 +40,7 @@ export const useUpdateProfileForm = () => { { data }, { onSuccess: () => { - notify('success', { - params: { - style: { multiline: 100 }, - title: 'SUCCESS', - description: t('toast.success.profile_updated'), - }, - }) + showSuccessToast({ description: t('toast.success.profile_updated') }) }, onError: (e) => { handleFormError( diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 88c94d7a..d0813cd8 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -81,6 +81,12 @@ "new_account_created": "A new account has been created. An email with an activation link was sent to {{userEmail}}.", "profile_updated": "Successfully updated your profile data." }, + "title": { + "error": "An error occurred", + "info": "Additional info", + "success": "Success", + "warning": "Attention" + }, "warning": {} }, "update": { diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index e71ced3f..c1e95d06 100644 --- a/src/i18n/translations/pl.json +++ b/src/i18n/translations/pl.json @@ -81,6 +81,12 @@ "new_account_created": "Nowe konto zostało stworzone. Email z linkiem weryfikacyjnym został wysłany na {{userEmail}}.", "profile_updated": "Zaktualizowano Twoje dane." }, + "title": { + "error": "Wystąpił błąd", + "info": "Dodatkowe info", + "success": "Udało się", + "warning": "Uwaga" + }, "warning": {} }, "update": { diff --git a/src/providers/NotificatedProvider.tsx b/src/providers/NotificatedProvider.tsx index c9dbf929..b924a5e7 100644 --- a/src/providers/NotificatedProvider.tsx +++ b/src/providers/NotificatedProvider.tsx @@ -1,11 +1,76 @@ -import { createNotifications } from 'react-native-notificated' +import { Box, Button, Text } from '@baca/design-system' +import { useCallback } from 'react' +import { + createNotifications, + FadeInFadeOut, + useNotificationController, +} from 'react-native-notificated' +import { NotificationsType } from 'react-native-notificated/lib/typescript/types/config' + +const notificationVariants: { + [key in NotificationsType]: { bg: ColorNames; textColor: ColorNames } +} = { + default: { bg: 'Blue.100', textColor: 'Blue.800' }, + error: { bg: 'Rose.100', textColor: 'Rose.800' }, + success: { bg: 'Green light.100', textColor: 'Green light.800' }, + warning: { bg: 'Yellow.100', textColor: 'Yellow.800' }, +} + +const createNotificationVariant = + (status: NotificationsType) => + ({ title, description }: { title: string; description: string }): JSX.Element => { + const { remove } = useNotificationController() + const removeNotification = useCallback(() => remove(), [remove]) + + const { bg, textColor } = notificationVariants[status] + + return ( + + + + {title} + + {description} + + ) + } export const { NotificationsProvider } = createNotifications({ - isNotch: true, - duration: 5000, defaultStylesSettings: { globalConfig: { defaultIconType: 'no-icon', + multiline: 8, + }, + }, + duration: 5000, + gestureConfig: { + direction: 'full', + x: { activationDistances: 100, activationVelocities: 5 }, + y: { activationDistances: 100, activationVelocities: 5 }, + }, + isNotch: true, + animationConfig: FadeInFadeOut, + notificationPosition: 'top', + variants: { + error: { + component: createNotificationVariant('error'), + }, + info: { + component: createNotificationVariant('default'), + }, + success: { + component: createNotificationVariant('success'), + }, + warning: { + component: createNotificationVariant('warning'), }, }, }) diff --git a/src/screens/ComponentsScreen.tsx b/src/screens/ComponentsScreen.tsx index 311db3dc..8bc6da7b 100644 --- a/src/screens/ComponentsScreen.tsx +++ b/src/screens/ComponentsScreen.tsx @@ -1,5 +1,6 @@ -import { Icon, Loader, Box, Text, Button, Center, ScrollView, Display } from '@baca/design-system' -import { useCallback, useNotifications, useScreenOptions, useTranslation } from '@baca/hooks' +import { Loader, Box, Text, Button, Center, ScrollView, Display } from '@baca/design-system' +import { useCallback, useScreenOptions, useTranslation } from '@baca/hooks' +import { showInformationToast } from '@baca/utils' import * as Linking from 'expo-linking' const loaderVariants = [ @@ -27,25 +28,20 @@ const loaderVariants = [ export const ComponentsScreen = (): JSX.Element => { const { t } = useTranslation() - const { notify } = useNotifications() useScreenOptions({ title: t('navigation.screen_titles.components'), }) - const testNotification = useCallback( - () => - notify('info', { - params: { - title: t('components_screen.notification.title'), - description: t('components_screen.notification.description'), - onPress: () => { - Linking.openURL('https://thewidlarzgroup.github.io/react-native-notificated/') - }, - }, - }), - [notify, t] - ) + const testNotification = useCallback(() => { + showInformationToast({ + title: t('components_screen.notification.title'), + description: t('components_screen.notification.description'), + onPress: () => { + Linking.openURL('https://thewidlarzgroup.github.io/react-native-notificated/') + }, + }) + }, [t]) return ( @@ -62,8 +58,8 @@ export const ComponentsScreen = (): JSX.Element => { } - rightIcon={} + leftIconName="ancient-gate-fill" + rightIconName="alarm-fill" title={t('components_screen.button_variants.with_icons')} /> router.replace('/sign-in') + +export const ConfirmEmail = () => { + const { code } = useLocalSearchParams<{ code: string }>() + + const { + isError, + isLoading, + isSuccess, + mutate: confirmEmailMutation, + } = useAuthControllerConfirmEmail() + + useEffect(() => { + if (code) { + if (isSignedInAtom) { + signOut() + } + } + }, [code, confirmEmailMutation]) + + return ( +
+ {isLoading && ( +
+ + Trwa weryfikowanie adresu e-mail ... +
+ )} + {isError && ( +
+ Ups nie udało się zweryfikować adresu email. + + +
+ )} + {isSuccess && ( +
+ Adres e-mail został pomyślnie potwierdzony. + + +
+ )} +
+ ) +} diff --git a/src/screens/index.ts b/src/screens/index.ts index 9636f7f7..12a7fc75 100644 --- a/src/screens/index.ts +++ b/src/screens/index.ts @@ -2,6 +2,7 @@ export * from './ApplicationInfoScreen' export * from './CategoriesScreen' export * from './ColorsScreen' export * from './ComponentsScreen' +export * from './ConfirmEmail' export * from './DataFromBeScreen_EXAMPLE' export * from './DetailsScreen' export * from './ExamplesScreen' diff --git a/src/utils/index.ts b/src/utils/index.ts index e5862b97..4860a8a5 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,12 +1,14 @@ export * from './alert' export * from './checkForUpdates' +export * from './convertEmToNumber' export * from './getApiError' -export * from './getColorValue' export * from './getNavigator' +export * from './getColorValue' +export * from './handleFormErrors' export * from './hapticImpact' export * from './hex2rgba' export * from './noop' export * from './removeFalsyProperties' export * from './secureStore' +export * from './showToast' export * from './wait' -export * from './convertEmToNumber' diff --git a/src/utils/showToast.ts b/src/utils/showToast.ts new file mode 100644 index 00000000..74113dd3 --- /dev/null +++ b/src/utils/showToast.ts @@ -0,0 +1,51 @@ +import i18n from 'i18next' +import { notify } from 'react-native-notificated' +import { + DefaultVariants, + NotificationProps, +} from 'react-native-notificated/lib/typescript/defaultConfig/types' + +type CustomToastProps = { + description: string + title?: NotificationProps['title'] + onPress?: NotificationProps['onPress'] +} + +const showCustomToast = ({ + title: customTitle, + variant, + ...rest +}: CustomToastProps & { + variant: keyof DefaultVariants +}) => { + const title = + customTitle || + { + error: i18n.t('toast.title.error'), + info: i18n.t('toast.title.info'), + warning: i18n.t('toast.title.warning'), + success: i18n.t('toast.title.warning'), + }[variant] + + notify(variant, { + params: { + title, + ...rest, + }, + }) +} + +export const showErrorToast = (props: CustomToastProps): void => { + showCustomToast({ variant: 'error', ...props }) +} + +export const showInformationToast = (props: CustomToastProps): void => { + showCustomToast({ variant: 'info', ...props }) +} +export const showSuccessToast = (props: CustomToastProps): void => { + showCustomToast({ variant: 'success', ...props }) +} + +export const showWarningToast = (props: CustomToastProps): void => { + showCustomToast({ variant: 'warning', ...props }) +} From f274d608252342f315ca21a28ec3fd63e839a5a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Wed, 20 Mar 2024 09:37:37 +0100 Subject: [PATCH 2/6] fix wrong import --- src/design-system/utils/generateStyledSystem.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/design-system/utils/generateStyledSystem.ts b/src/design-system/utils/generateStyledSystem.ts index 846650a3..4f2308d2 100644 --- a/src/design-system/utils/generateStyledSystem.ts +++ b/src/design-system/utils/generateStyledSystem.ts @@ -1,8 +1,7 @@ -import { hex2rgba, removeFalsyProperties } from '@baca/utils' +import { getColorValue, hex2rgba, removeFalsyProperties } from '@baca/utils' import { ImageStyle, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native' import { generateSize } from './generateSize' -import { getColorValue } from './getColorValue' import { FlexProps, SpacingProps, From 4645afbea354c6cb67de4c442d0604cdb87748a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Wed, 20 Mar 2024 09:38:36 +0100 Subject: [PATCH 3/6] fix loader on web --- src/components/AppLoading.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/AppLoading.tsx b/src/components/AppLoading.tsx index 1618b7fe..c7eea1dd 100644 --- a/src/components/AppLoading.tsx +++ b/src/components/AppLoading.tsx @@ -1,4 +1,4 @@ -import { AbsoluteFullFill, Loader, Center } from '@baca/design-system/components' +import { Loader, Center } from '@baca/design-system/components' import { useBoolean, useCachedResources, useFonts } from '@baca/hooks' import { isSignedInAtom } from '@baca/store/auth' import * as SplashScreen from 'expo-splash-screen' @@ -68,14 +68,13 @@ export const AppLoading: FC = ({ children }) => { return ( - {isLoading ? null : children} {isLoading || isDelayLoading ? ( - -
- -
- - ) : null} +
+ +
+ ) : ( + children + )} ) } From 540ee6678664e8df8f334553b859aeb534a9c6c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Wed, 20 Mar 2024 09:58:24 +0100 Subject: [PATCH 4/6] update button snapshot --- .../Button/__snapshots__/Button.test.tsx.snap | 46 ++++++++++++------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap index eba2a4ed..dd70b247 100644 --- a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap +++ b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap @@ -48,24 +48,38 @@ exports[`Button renders correctly 1`] = ` } testID="baseButton" > - - Button - + + Button + + `; From 87aa52b14959a855509986bce45fd118e9ba1e61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Thu, 21 Mar 2024 07:48:52 +0100 Subject: [PATCH 5/6] add missing translations --- src/i18n/translations/en.json | 6 ++++++ src/i18n/translations/pl.json | 6 ++++++ src/screens/ConfirmEmail.tsx | 25 +++++++++++++++++-------- 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index d0813cd8..eef3bae3 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -145,6 +145,12 @@ "4xl": "4xl" } }, + "confirm_email_screen": { + "go_back_login": "Go back to login screen", + "verification_failed": "Ops, we could not verify your e-mail address.", + "verification_in_progress": "E-mail verification in progress ...", + "verification_succeed": "E-mail address has been confirmed successfully." + }, "details_screen": { "awesome": "Awesome 🎉", "open_bottom_sheet": "Open BottomSheetModal", diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index c1e95d06..e0c83ce7 100644 --- a/src/i18n/translations/pl.json +++ b/src/i18n/translations/pl.json @@ -144,6 +144,12 @@ "title": "In-app notification example" } }, + "confirm_email_screen": { + "go_back_login": "Wróć na stronę logowania", + "verification_failed": "Ups, nie udało się zweryfikować adresu email.", + "verification_in_progress": "Trwa weryfikowanie adresu e-mail ...", + "verification_succeed": "Adres e-mail został pomyślnie potwierdzony." + }, "details_screen": { "title": "To jest przykładowy widok", "open_bottom_sheet": "Otwórz BottomSheetModal", diff --git a/src/screens/ConfirmEmail.tsx b/src/screens/ConfirmEmail.tsx index 0d47e66f..d2b918fa 100644 --- a/src/screens/ConfirmEmail.tsx +++ b/src/screens/ConfirmEmail.tsx @@ -1,5 +1,6 @@ import { useAuthControllerConfirmEmail } from '@baca/api/query/auth/auth' import { Button, Center, Loader, Spacer, Text } from '@baca/design-system' +import { useTranslation } from '@baca/hooks' import { isSignedInAtom, signOut } from '@baca/store/auth' import { router, useLocalSearchParams } from 'expo-router' import { useEffect } from 'react' @@ -7,6 +8,7 @@ import { useEffect } from 'react' const navigateToSignIn = () => router.replace('/sign-in') export const ConfirmEmail = () => { + const { t } = useTranslation() const { code } = useLocalSearchParams<{ code: string }>() const { @@ -17,11 +19,18 @@ export const ConfirmEmail = () => { } = useAuthControllerConfirmEmail() useEffect(() => { - if (code) { - if (isSignedInAtom) { - signOut() + const confirmFn = async (hash?: string) => { + if (hash) { + try { + if (isSignedInAtom) { + await signOut() + } + } finally { + confirmEmailMutation({ data: { hash } }) + } } } + confirmFn(code) }, [code, confirmEmailMutation]) return ( @@ -29,21 +38,21 @@ export const ConfirmEmail = () => { {isLoading && (
- Trwa weryfikowanie adresu e-mail ... + {t('confirm_email_screen.verification_in_progress')}
)} {isError && (
- Ups nie udało się zweryfikować adresu email. + {t('confirm_email_screen.verification_failed')} - +
)} {isSuccess && (
- Adres e-mail został pomyślnie potwierdzony. + {t('confirm_email_screen.verification_succeed')} - +
)} From 3bb574a4aa3a5decb9efee0db51a5de2d4e63588 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Thu, 21 Mar 2024 08:23:17 +0100 Subject: [PATCH 6/6] fix button style --- .../components/Button/Button.tsx | 109 ++++++++---------- src/providers/NotificatedProvider.tsx | 2 +- 2 files changed, 50 insertions(+), 61 deletions(-) diff --git a/src/design-system/components/Button/Button.tsx b/src/design-system/components/Button/Button.tsx index 3e6ae052..e9af61ef 100644 --- a/src/design-system/components/Button/Button.tsx +++ b/src/design-system/components/Button/Button.tsx @@ -8,7 +8,6 @@ import { forwardRef, ForwardRefExoticComponent, PropsWithoutRef, - ReactNode, RefAttributes, } from 'react' import { @@ -248,77 +247,67 @@ const RawButton = memo( [hoverColorStyle, defaultColorStyle, disabled, disabledColorStyle, textStyle] ) + const iconElement = useCallback( + (props: PressableStateCallbackType, iconName?: IconNames) => { + return iconName ? ( + + ) : null + }, + [buttonSizeVariant.iconSize, getIconColor] + ) + const childrenElement = useCallback( (props: PressableStateCallbackType) => { - return ( - <> - {loading ? ( - - ) : ( - - {leftIconName && ( - - )} - {title ? ( - - {title} - - ) : typeof children === 'string' ? ( - - {children} - - ) : ( - (children as ReactNode) - )} - {rightIconName && ( - - )} - - )} - - ) + if (title) { + return ( + + {title} + + ) + } + if (typeof children === 'string') { + return ( + + {children} + + ) + } + return <>{children} }, - [ - buttonSizeVariant.iconGap, - buttonSizeVariant.iconSize, - buttonSizeVariant.textVariant, - children, - getIconColor, - leftIconName, - loading, - pressableTextStyleFunction, - rightIconName, - title, - ] + + [buttonSizeVariant.textVariant, children, pressableTextStyleFunction, title] ) return ( - {(props: PressableStateCallbackType) => <>{childrenElement(props)}} + {loading ? ( + + ) : ( + (props: PressableStateCallbackType) => ( + + {leftIconName && iconElement(props, leftIconName)} + {childrenElement(props)} + {rightIconName && iconElement(props, leftIconName)} + + ) + )} ) } diff --git a/src/providers/NotificatedProvider.tsx b/src/providers/NotificatedProvider.tsx index b924a5e7..cdd559f5 100644 --- a/src/providers/NotificatedProvider.tsx +++ b/src/providers/NotificatedProvider.tsx @@ -11,7 +11,7 @@ const notificationVariants: { [key in NotificationsType]: { bg: ColorNames; textColor: ColorNames } } = { default: { bg: 'Blue.100', textColor: 'Blue.800' }, - error: { bg: 'Rose.100', textColor: 'Rose.800' }, + error: { bg: 'Rosé.100', textColor: 'Rosé.800' }, success: { bg: 'Green light.100', textColor: 'Green light.800' }, warning: { bg: 'Yellow.100', textColor: 'Yellow.800' }, }