From ee3916d62e82732f3aabf6bd3d2053913ee8f58a Mon Sep 17 00:00:00 2001 From: weronika Date: Wed, 8 May 2024 15:28:57 +0200 Subject: [PATCH 1/5] set divider in bottom sheet as optional; add iconConfig; move types to separate file --- .../bottomSheets/BottomSheet.tsx | 19 +++++-------- .../bottomSheets/BottomSheet.web.tsx | 19 +++++-------- .../bottomSheets/BottomSheetHeader.tsx | 22 ++++++++------- src/design-system/bottomSheets/types.ts | 27 +++++++++++++++++++ .../bottomSheets/useBottomSheets.tsx | 20 +++++++++++--- src/i18n/translations/en.json | 10 +++++-- src/i18n/translations/pl.json | 10 +++++-- 7 files changed, 87 insertions(+), 40 deletions(-) create mode 100644 src/design-system/bottomSheets/types.ts diff --git a/src/design-system/bottomSheets/BottomSheet.tsx b/src/design-system/bottomSheets/BottomSheet.tsx index 12093ec0..c03f662d 100644 --- a/src/design-system/bottomSheets/BottomSheet.tsx +++ b/src/design-system/bottomSheets/BottomSheet.tsx @@ -6,30 +6,25 @@ import { BottomSheetBackdropProps, BottomSheetView, } from '@gorhom/bottom-sheet' -import { RefObject, useCallback } from 'react' +import { useCallback } from 'react' import { Dimensions } from 'react-native' import { BottomSheetScrollView } from './BootomSheetScrollables' import { BottomSheetHeader } from './BottomSheetHeader' +import { BottomSheetProps } from './types' const screenHeight = Dimensions.get('screen').height -type Props = { - bottomSheetRef: RefObject - children: JSX.Element | JSX.Element[] - title?: string - showCloseButton?: boolean - numberOfTitleLines?: number -} - export { BottomSheetScrollView } export const BottomSheet = ({ children, title, + iconConfig, + isDivider = true, showCloseButton = true, numberOfTitleLines, bottomSheetRef, -}: Props) => { +}: BottomSheetProps) => { const { top } = useSafeAreaInsets() const handleClose = useCallback(() => { @@ -52,13 +47,13 @@ export const BottomSheet = ({ > - - + {isDivider && } {children} diff --git a/src/design-system/bottomSheets/BottomSheet.web.tsx b/src/design-system/bottomSheets/BottomSheet.web.tsx index 0ebf2988..c601336b 100644 --- a/src/design-system/bottomSheets/BottomSheet.web.tsx +++ b/src/design-system/bottomSheets/BottomSheet.web.tsx @@ -1,28 +1,22 @@ import { Modal } from '@baca/components/Modal' import { useBoolean, useWeb } from '@baca/hooks' -import { BottomSheetModal } from '@gorhom/bottom-sheet' -import { RefObject, useCallback, useImperativeHandle } from 'react' +import { useCallback, useImperativeHandle } from 'react' import { ScrollView } from 'react-native' import { BottomSheetHeader } from './BottomSheetHeader' +import { BottomSheetProps } from './types' import { Box } from '../components/Box' -type Props = { - bottomSheetRef: RefObject - children: JSX.Element | JSX.Element[] - title?: string - showCloseButton?: boolean - numberOfTitleLines?: number -} - export const BottomSheetScrollView = ScrollView export const BottomSheet = ({ children, + iconConfig, + isDivider = true, title, showCloseButton = true, numberOfTitleLines, bottomSheetRef, -}: Props) => { +}: BottomSheetProps) => { const [isOpen, setIsOpen] = useBoolean(false) const { webContentWidth } = useWeb() @@ -63,8 +57,9 @@ export const BottomSheet = ({ numberOfLines={numberOfTitleLines} showCloseButton={showCloseButton} onClose={setIsOpen.off} + iconConfig={iconConfig} /> - + {isDivider && } {children} diff --git a/src/design-system/bottomSheets/BottomSheetHeader.tsx b/src/design-system/bottomSheets/BottomSheetHeader.tsx index 5cb0cedf..f4f9293f 100644 --- a/src/design-system/bottomSheets/BottomSheetHeader.tsx +++ b/src/design-system/bottomSheets/BottomSheetHeader.tsx @@ -1,3 +1,4 @@ +import { BottomSheetHeaderProps } from './types' import { Box } from '../components/Box' import { Icon } from '../components/Icon' import { Row } from '../components/Row' @@ -9,22 +10,25 @@ export const BottomSheetHeader = ({ numberOfLines = undefined, showCloseButton, onClose, -}: { - title?: string - numberOfLines?: number - showCloseButton?: boolean - onClose?: () => void -}) => { + iconConfig, +}: BottomSheetHeaderProps) => { if (!showCloseButton && !title) { return null } return ( + {iconConfig && ( + + + + )} - - {title} - + {title && ( + + {title} + + )} {showCloseButton && ( diff --git a/src/design-system/bottomSheets/types.ts b/src/design-system/bottomSheets/types.ts new file mode 100644 index 00000000..5837fd17 --- /dev/null +++ b/src/design-system/bottomSheets/types.ts @@ -0,0 +1,27 @@ +import { IconNames } from '@baca/types/icon' +import { BottomSheetModal } from '@gorhom/bottom-sheet' +import { RefObject } from 'react' + +export type BottomSheetIconConfigProps = { + name: IconNames + color: ColorNames + bgColor: ColorNames +} + +export type BottomSheetProps = { + bottomSheetRef: RefObject + children: JSX.Element | JSX.Element[] + isDivider?: boolean + title?: string + showCloseButton?: boolean + numberOfTitleLines?: number + iconConfig?: BottomSheetIconConfigProps +} + +export type BottomSheetHeaderProps = { + title?: string + numberOfLines?: number + showCloseButton?: boolean + onClose?: () => void + iconConfig?: BottomSheetIconConfigProps +} diff --git a/src/design-system/bottomSheets/useBottomSheets.tsx b/src/design-system/bottomSheets/useBottomSheets.tsx index 6fc9839a..7e2e5749 100644 --- a/src/design-system/bottomSheets/useBottomSheets.tsx +++ b/src/design-system/bottomSheets/useBottomSheets.tsx @@ -2,13 +2,22 @@ import { BottomSheetModal } from '@gorhom/bottom-sheet' import { useCallback, useRef } from 'react' import { BottomSheet } from './BottomSheet' +import { BottomSheetIconConfigProps } from './types' -export const useBottomSheet = ({ title = '' }) => { +export const useBottomSheet = ({ title = '', isDivider = true }) => { const bottomSheetRef = useRef(null) - const bottomSheetComponentRenderFunction = (children: JSX.Element | JSX.Element[]) => { + const bottomSheetComponentRenderFunction = ( + children: JSX.Element | JSX.Element[], + iconConfig?: BottomSheetIconConfigProps + ) => { return ( - + {children} ) @@ -18,8 +27,13 @@ export const useBottomSheet = ({ title = '' }) => { bottomSheetRef.current?.present?.() }, []) + const closeBottomSheet = useCallback(() => { + bottomSheetRef.current?.close?.() + }, []) + return { bottomSheetComponentRenderFunction, + closeBottomSheet, presentBottomSheet, } } diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 01ddb9e1..0f216f03 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -234,8 +234,14 @@ "copy_push_token": "Copy push token", "current_theme": "Current theme: {{theme}}", "sign_out": "Sign out!", - "selected": " - selected", - "remove_account": "Remove account" + "selected": " - selected" + }, + "profile_screen": { + "profile": "Profile", + "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." }, "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 6ae9f1c5..1d512c12 100644 --- a/src/i18n/translations/pl.json +++ b/src/i18n/translations/pl.json @@ -232,8 +232,14 @@ "settings_screen": { "current_theme": "Current theme: {{theme}}", "selected": " - wybrano", - "sign_out": "Wyloguj!", - "remove_account": "Usuń konto" + "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?", + "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" }, "sign_in_screen": { "do_not_have_an_account": "Nie masz konta?", From 381e133b17ac9165423e50c3be43addc4fbdd8ac Mon Sep 17 00:00:00 2001 From: weronika Date: Wed, 8 May 2024 15:30:41 +0200 Subject: [PATCH 2/5] move remove account button to profile; remove unused translations --- src/i18n/translations/en.json | 8 +--- src/i18n/translations/pl.json | 8 +--- src/screens/ProfileScreen.tsx | 74 +++++++++++++++++++++++++++++++--- src/screens/SettingsScreen.tsx | 29 +------------ 4 files changed, 71 insertions(+), 48 deletions(-) diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json index 0f216f03..9fe1e589 100644 --- a/src/i18n/translations/en.json +++ b/src/i18n/translations/en.json @@ -9,11 +9,6 @@ "session_expired": { "description": "Try to log in again", "title": "Your current session expired" - }, - "remove_account": { - "description": "Are you sure you want to delete your account?", - "title": "Attention!", - "confirm": "Yes, delete" } }, "bottom_tabs": { @@ -34,8 +29,7 @@ "save": "Save", "search": "Search", "try_again_later": "Please try again later", - "try_again": "Try again", - "remove_account": "Remove account" + "try_again": "Try again" }, "errors": { "invalid_email": "Niepoprawny adres e-mail", diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json index 1d512c12..9138e806 100644 --- a/src/i18n/translations/pl.json +++ b/src/i18n/translations/pl.json @@ -9,11 +9,6 @@ "session_expired": { "description": "Spróbuj zalogować się ponownie", "title": "Twoja sesja wygasła" - }, - "remove_account": { - "description": "Czy na pewno chcesz usunąć swoje konto?", - "title": "Uwaga!", - "confirm": "Tak, usuń" } }, "bottom_tabs": { @@ -34,8 +29,7 @@ "save": "Zapisz", "search": "Szukaj", "try_again_later": "Proszę spróbuj ponownie później", - "try_again": "Spróbuj ponownie", - "remove_account": "Usuń konto" + "try_again": "Spróbuj ponownie" }, "errors": { "invalid_email": "Niepoprawny adres e-mail", diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index d130a814..62e71b93 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -1,25 +1,75 @@ +import { useAuthControllerDelete } from '@baca/api/query/auth/auth' import { ControlledField } from '@baca/components' -import { Button, Text, Spacer, Row, Box } from '@baca/design-system' +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 { useRouter } from 'expo-router' export const ProfileScreen = () => { const { t } = useTranslation() const { back } = useRouter() + const { mutateAsync: removeUserAccount, isLoading } = useAuthControllerDelete() + const { control, errors, isSubmitting, setFocus, 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'), }) - const { control, errors, isSubmitting, setFocus, submit } = useUpdateProfileForm() - const focusLastNameInput = useCallback(() => setFocus('lastName'), [setFocus]) return ( - {/* TODO: Add translations here */} - Profile - Update your personal details here. + {t('profile_screen.profile')} + {t('profile_screen.update_your_details')} { {t('common.save')} + + + {bottomSheet} + ) } diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx index 21b77c17..18c18bb0 100644 --- a/src/screens/SettingsScreen.tsx +++ b/src/screens/SettingsScreen.tsx @@ -1,16 +1,14 @@ -import { useAuthControllerDelete } from '@baca/api/query/auth/auth' import { Version } from '@baca/components' import { colorSchemesList } from '@baca/constants' import { useColorScheme } from '@baca/contexts' import { Spacer, Button, Center, Text, ScrollView } from '@baca/design-system' import { useCallback, useScreenOptions, useTranslation } from '@baca/hooks' import { signOut } from '@baca/store/auth' -import { alert, noop, showErrorToast } from '@baca/utils' +import { noop } from '@baca/utils' export const SettingsScreen = (): JSX.Element => { const { t } = useTranslation() const { setColorSchemeSetting, colorSchemeSetting } = useColorScheme() - const { mutateAsync: removeUserAccount, isLoading } = useAuthControllerDelete() useScreenOptions({ title: t('navigation.screen_titles.settings'), @@ -23,28 +21,6 @@ export const SettingsScreen = (): JSX.Element => { [setColorSchemeSetting] ) - const handleRemoveUserAccount = useCallback(async () => { - alert(t('alert.remove_account.title'), t('alert.remove_account.description'), [ - { - text: t('alert.remove_account.confirm'), - onPress: async () => { - try { - await removeUserAccount() - signOut() - } catch { - showErrorToast({ - description: t('errors.something_went_wrong'), - }) - } - }, - }, - { - text: t('common.cancel'), - style: 'destructive', - }, - ]) - }, [removeUserAccount, t]) - return (
@@ -64,9 +40,6 @@ export const SettingsScreen = (): JSX.Element => { {t('settings_screen.sign_out')} -
From dcec86389c9c08b360a8cd6c6b2d3ab0d75e1f86 Mon Sep 17 00:00:00 2001 From: weronika Date: Mon, 13 May 2024 12:20:52 +0200 Subject: [PATCH 3/5] adjust bottom sheet for dark theme --- src/contexts/ColorSchemeContext.ts | 1 + src/design-system/bottomSheets/BottomSheet.tsx | 11 ++++++++++- src/providers/ColorSchemeProvider.tsx | 3 +++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/contexts/ColorSchemeContext.ts b/src/contexts/ColorSchemeContext.ts index a56b5a87..e5e2e810 100644 --- a/src/contexts/ColorSchemeContext.ts +++ b/src/contexts/ColorSchemeContext.ts @@ -7,6 +7,7 @@ export type ColorSchemeName = Exclude export type ColorSchemeContextType = { colorSchemeSetting: SettingColorSchemeName colorScheme: ColorSchemeName + isDarkTheme: boolean setColorSchemeSetting: (newColorScheme: SettingColorSchemeName) => void } diff --git a/src/design-system/bottomSheets/BottomSheet.tsx b/src/design-system/bottomSheets/BottomSheet.tsx index c03f662d..f126529a 100644 --- a/src/design-system/bottomSheets/BottomSheet.tsx +++ b/src/design-system/bottomSheets/BottomSheet.tsx @@ -1,5 +1,6 @@ import { Box } from '@baca/design-system/components/Box' -import { useSafeAreaInsets } from '@baca/hooks' +import { useColorScheme } from '@baca/contexts' +import { useSafeAreaInsets, useTheme } from '@baca/hooks' import { BottomSheetModal, BottomSheetBackdrop, @@ -26,6 +27,8 @@ export const BottomSheet = ({ bottomSheetRef, }: BottomSheetProps) => { const { top } = useSafeAreaInsets() + const { isDarkTheme } = useColorScheme() + const { colors } = useTheme() const handleClose = useCallback(() => { bottomSheetRef?.current?.snapToPosition(-1) @@ -44,6 +47,12 @@ export const BottomSheet = ({ snapPoints={[screenHeight - top - 24]} backdropComponent={renderBackdrop} enableDynamicSizing + backgroundStyle={{ + backgroundColor: isDarkTheme ? colors.bg.primary : 'green', + }} + handleIndicatorStyle={{ + backgroundColor: isDarkTheme ? colors.alpha.black[100] : colors.alpha.white[100], + }} > = ({ children }) => { [colorSchemeSetting, setItem] ) + const isDarkTheme = useMemo(() => colorScheme === 'dark', [colorSchemeSetting]) + const value: ColorSchemeContextType = useMemo( () => ({ colorScheme, colorSchemeSetting, + isDarkTheme, setColorSchemeSetting: setNewColorSchemeSetting, }), [colorScheme, colorSchemeSetting, setNewColorSchemeSetting] From b7494cc45e6fc04ed335a2da9f55f2374a0f23db Mon Sep 17 00:00:00 2001 From: weronika Date: Mon, 13 May 2024 12:37:00 +0200 Subject: [PATCH 4/5] yarn lint --- src/design-system/bottomSheets/BottomSheet.tsx | 6 ++++-- src/providers/ColorSchemeProvider.tsx | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/design-system/bottomSheets/BottomSheet.tsx b/src/design-system/bottomSheets/BottomSheet.tsx index f126529a..58ac05e6 100644 --- a/src/design-system/bottomSheets/BottomSheet.tsx +++ b/src/design-system/bottomSheets/BottomSheet.tsx @@ -1,5 +1,5 @@ -import { Box } from '@baca/design-system/components/Box' import { useColorScheme } from '@baca/contexts' +import { Box } from '@baca/design-system/components/Box' import { useSafeAreaInsets, useTheme } from '@baca/hooks' import { BottomSheetModal, @@ -48,9 +48,11 @@ export const BottomSheet = ({ backdropComponent={renderBackdrop} enableDynamicSizing backgroundStyle={{ - backgroundColor: isDarkTheme ? colors.bg.primary : 'green', + // eslint-disable-next-line react-native/no-inline-styles + backgroundColor: colors.bg.primary, }} handleIndicatorStyle={{ + // eslint-disable-next-line react-native/no-inline-styles backgroundColor: isDarkTheme ? colors.alpha.black[100] : colors.alpha.white[100], }} > diff --git a/src/providers/ColorSchemeProvider.tsx b/src/providers/ColorSchemeProvider.tsx index a3b7938c..f2a76506 100644 --- a/src/providers/ColorSchemeProvider.tsx +++ b/src/providers/ColorSchemeProvider.tsx @@ -54,7 +54,7 @@ export const ColorSchemeProvider: FC = ({ children }) => { [colorSchemeSetting, setItem] ) - const isDarkTheme = useMemo(() => colorScheme === 'dark', [colorSchemeSetting]) + const isDarkTheme = useMemo(() => colorScheme === 'dark', [colorScheme]) const value: ColorSchemeContextType = useMemo( () => ({ @@ -63,7 +63,7 @@ export const ColorSchemeProvider: FC = ({ children }) => { isDarkTheme, setColorSchemeSetting: setNewColorSchemeSetting, }), - [colorScheme, colorSchemeSetting, setNewColorSchemeSetting] + [colorScheme, colorSchemeSetting, isDarkTheme, setNewColorSchemeSetting] ) return {children} From 84406d290c8a8ae32e61b1366ca4ee1b18352ca3 Mon Sep 17 00:00:00 2001 From: weronika Date: Mon, 13 May 2024 12:40:14 +0200 Subject: [PATCH 5/5] fix styles for handle indicator --- src/design-system/bottomSheets/BottomSheet.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/design-system/bottomSheets/BottomSheet.tsx b/src/design-system/bottomSheets/BottomSheet.tsx index 58ac05e6..2e593acc 100644 --- a/src/design-system/bottomSheets/BottomSheet.tsx +++ b/src/design-system/bottomSheets/BottomSheet.tsx @@ -1,4 +1,3 @@ -import { useColorScheme } from '@baca/contexts' import { Box } from '@baca/design-system/components/Box' import { useSafeAreaInsets, useTheme } from '@baca/hooks' import { @@ -27,7 +26,6 @@ export const BottomSheet = ({ bottomSheetRef, }: BottomSheetProps) => { const { top } = useSafeAreaInsets() - const { isDarkTheme } = useColorScheme() const { colors } = useTheme() const handleClose = useCallback(() => { @@ -53,7 +51,7 @@ export const BottomSheet = ({ }} handleIndicatorStyle={{ // eslint-disable-next-line react-native/no-inline-styles - backgroundColor: isDarkTheme ? colors.alpha.black[100] : colors.alpha.white[100], + backgroundColor: colors.alpha.black[100], }} >