-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: settings notifications, closes leather-io/issues#195
- Loading branch information
Showing
19 changed files
with
298 additions
and
180 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
apps/mobile/src/app/(home)/settings/notifications/_layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { useSafeAreaInsets } from 'react-native-safe-area-context'; | ||
|
|
||
| import { BackButtonHeader } from '@/components/headers/back-button'; | ||
| import { SimpleHeader } from '@/components/headers/containers/simple-header'; | ||
| import { TitleHeader } from '@/components/headers/title'; | ||
| import { TabBar } from '@/components/tab-bar'; | ||
| import { AppRoutes } from '@/routes'; | ||
| import { t } from '@lingui/macro'; | ||
| import { Tabs, router, usePathname, useRouter } from 'expo-router'; | ||
|
|
||
| function HeaderBottomTabs() { | ||
| const router = useRouter(); | ||
| const pathname = usePathname(); | ||
| return ( | ||
| <TabBar | ||
| tabs={[ | ||
| { | ||
| onPress() { | ||
| router.navigate(AppRoutes.SettingsNotifications); | ||
| }, | ||
| title: t`Push`, | ||
| isActive: pathname === AppRoutes.SettingsNotifications, | ||
| }, | ||
| { | ||
| onPress() { | ||
| router.navigate(AppRoutes.SettingsNotificationsEmail); | ||
| }, | ||
| title: t`Email`, | ||
| isActive: pathname === AppRoutes.SettingsNotificationsEmail, | ||
| }, | ||
| ]} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default function SettingsNotificationsLayout() { | ||
| const insets = useSafeAreaInsets(); | ||
|
|
||
| const NavigationHeader = ( | ||
| <SimpleHeader | ||
| insets={insets} | ||
| left={<BackButtonHeader onPress={() => router.navigate(AppRoutes.Settings)} />} | ||
| center={<TitleHeader title={t`Notifications`} />} | ||
| bottom={<HeaderBottomTabs />} | ||
| /> | ||
| ); | ||
|
|
||
| return ( | ||
| <Tabs tabBar={() => null}> | ||
| <Tabs.Screen | ||
| name="index" | ||
| options={{ | ||
| title: t`Push`, | ||
| header: () => NavigationHeader, | ||
| }} | ||
| /> | ||
| <Tabs.Screen | ||
| name="email" | ||
| options={{ | ||
| title: t`Email`, | ||
| header: () => NavigationHeader, | ||
| }} | ||
| /> | ||
| </Tabs> | ||
| ); | ||
| } |
47 changes: 47 additions & 0 deletions
47
apps/mobile/src/app/(home)/settings/notifications/email.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { useRef } from 'react'; | ||
| import { TouchableOpacity } from 'react-native-gesture-handler'; | ||
|
|
||
| import { EmailAddressSheet } from '@/features/settings/email-address-sheet'; | ||
| import { t } from '@lingui/macro'; | ||
|
|
||
| import { | ||
| Avatar, | ||
| ChevronRightIcon, | ||
| EmailIcon, | ||
| Flag, | ||
| ItemLayout, | ||
| SheetRef, | ||
| } from '@leather.io/ui/native'; | ||
|
|
||
| import SettingsScreenLayout from '../settings-screen.layout'; | ||
|
|
||
| export default function SettingsNotificationsEmailScreen() { | ||
| const emailAddressSheetRef = useRef<SheetRef>(null); | ||
|
|
||
| return ( | ||
| <> | ||
| <SettingsScreenLayout> | ||
| <TouchableOpacity | ||
| onPress={() => { | ||
| emailAddressSheetRef.current?.present(); | ||
| }} | ||
| > | ||
| <Flag | ||
| img={ | ||
| <Avatar> | ||
| <EmailIcon /> | ||
| </Avatar> | ||
| } | ||
| > | ||
| <ItemLayout | ||
| actionIcon={<ChevronRightIcon variant="small" />} | ||
| captionLeft={t`Awaiting verification`} | ||
| titleLeft={t`Email address`} | ||
| /> | ||
| </Flag> | ||
| </TouchableOpacity> | ||
| </SettingsScreenLayout> | ||
| <EmailAddressSheet sheetRef={emailAddressSheetRef} /> | ||
| </> | ||
| ); | ||
| } |
82 changes: 22 additions & 60 deletions
82
apps/mobile/src/app/(home)/settings/notifications/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,30 @@ | ||
| import { useRef } from 'react'; | ||
| import { ScrollView } from 'react-native-gesture-handler'; | ||
| import { useSafeAreaInsets } from 'react-native-safe-area-context'; | ||
| import { Switch, TouchableOpacity } from 'react-native-gesture-handler'; | ||
|
|
||
| import { EmailAddressSheet } from '@/features/settings/email-address-sheet'; | ||
| import { EmailNotificationsSheet } from '@/features/settings/email-notifications-sheet'; | ||
| import { PushNotificationsSheet } from '@/features/settings/push-notifications-sheet'; | ||
| import { t } from '@lingui/macro'; | ||
| import { useTheme } from '@shopify/restyle'; | ||
|
|
||
| import { | ||
| Box, | ||
| Cell, | ||
| EmailIcon, | ||
| EmailNotificationIcon, | ||
| SheetRef, | ||
| SquareNotificationIcon, | ||
| Theme, | ||
| } from '@leather.io/ui/native'; | ||
| import { Avatar, Flag, ItemLayout, PlaceholderIcon } from '@leather.io/ui/native'; | ||
|
|
||
| export default function SettingsNotificationsScreen() { | ||
| const { bottom } = useSafeAreaInsets(); | ||
| const pushNotificationsSheetRef = useRef<SheetRef>(null); | ||
| const emailNotificationsSheetRef = useRef<SheetRef>(null); | ||
| const emailAddressSheetRef = useRef<SheetRef>(null); | ||
| const theme = useTheme<Theme>(); | ||
| import SettingsScreenLayout from '../settings-screen.layout'; | ||
|
|
||
| // TODO: Hook up to notifications service when available or use Expo? | ||
| export default function SettingsNotificationsScreen() { | ||
| return ( | ||
| <Box flex={1} backgroundColor="ink.background-primary"> | ||
| <ScrollView | ||
| contentContainerStyle={{ | ||
| paddingHorizontal: theme.spacing['5'], | ||
| paddingTop: theme.spacing['5'], | ||
| paddingBottom: theme.spacing['5'] + bottom, | ||
| gap: theme.spacing[5], | ||
| }} | ||
| > | ||
| <Cell | ||
| title={t`Push notifications`} | ||
| subtitle={t`All enabled`} | ||
| Icon={SquareNotificationIcon} | ||
| onPress={() => { | ||
| pushNotificationsSheetRef.current?.present(); | ||
| }} | ||
| /> | ||
| <Cell | ||
| title={t`Email notifications`} | ||
| subtitle={t`5 enabled`} | ||
| Icon={EmailNotificationIcon} | ||
| onPress={() => { | ||
| emailNotificationsSheetRef.current?.present(); | ||
| }} | ||
| /> | ||
| <Cell | ||
| title={t`Email address`} | ||
| subtitle={t`None/Awaiting verification/Verified`} | ||
| Icon={EmailIcon} | ||
| onPress={() => { | ||
| emailAddressSheetRef.current?.present(); | ||
| }} | ||
| /> | ||
| </ScrollView> | ||
| <PushNotificationsSheet sheetRef={pushNotificationsSheetRef} /> | ||
| <EmailNotificationsSheet sheetRef={emailNotificationsSheetRef} /> | ||
| <EmailAddressSheet sheetRef={emailAddressSheetRef} /> | ||
| </Box> | ||
| <SettingsScreenLayout> | ||
| <TouchableOpacity onPress={() => {}}> | ||
| <Flag | ||
| img={ | ||
| <Avatar> | ||
| <PlaceholderIcon /> | ||
| </Avatar> | ||
| } | ||
| > | ||
| <ItemLayout | ||
| actionIcon={<Switch disabled value={false} />} | ||
| titleLeft={t`Notification`} | ||
| captionLeft={t`Description`} | ||
| /> | ||
| </Flag> | ||
| </TouchableOpacity> | ||
| </SettingsScreenLayout> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,58 @@ | ||
| import { RefObject } from 'react'; | ||
| import { RefObject, useState } from 'react'; | ||
|
|
||
| import { TextInput } from '@/components/text-input'; | ||
| import { useToastContext } from '@/components/toast/toast-context'; | ||
| import { useSettings } from '@/store/settings/settings'; | ||
| import { t } from '@lingui/macro'; | ||
| import { z } from 'zod'; | ||
|
|
||
| import { Sheet, SheetRef, Text } from '@leather.io/ui/native'; | ||
| import { emailAddressSchema } from '@leather.io/models'; | ||
| import { Button, EmailIcon, SheetRef, Text, UIBottomSheetTextInput } from '@leather.io/ui/native'; | ||
|
|
||
| import { SettingsSheetLayout } from './settings-sheet.layout'; | ||
|
|
||
| interface EmailAddressSheetProps { | ||
| sheetRef: RefObject<SheetRef>; | ||
| } | ||
| export function EmailAddressSheet({ sheetRef }: EmailAddressSheetProps) { | ||
| const { themeDerivedFromThemePreference } = useSettings(); | ||
| const [emailAddress, setEmailAddress] = useState(''); | ||
| const settings = useSettings(); | ||
| const { displayToast } = useToastContext(); | ||
|
|
||
| function onSaveEmailAddress(address: string) { | ||
| try { | ||
| emailAddressSchema.parse(address); | ||
| } catch (err) { | ||
| if (err instanceof z.ZodError) { | ||
| displayToast({ title: t`Invalid email address`, type: 'info' }); | ||
| return; | ||
| } | ||
| } | ||
|
|
||
| settings.changeEmailAddressPreference(address); | ||
| sheetRef.current?.close(); | ||
| displayToast({ title: t`Email submitted, please check your email`, type: 'success' }); | ||
| } | ||
|
|
||
| return ( | ||
| <Sheet isScrollView ref={sheetRef} themeVariant={themeDerivedFromThemePreference}> | ||
| <Text>{t`Hello`}</Text> | ||
| </Sheet> | ||
| <SettingsSheetLayout icon={<EmailIcon />} sheetRef={sheetRef} title={t`Email address`}> | ||
| <Text>{t`Provide an email address for receiving notifications`}</Text> | ||
| <TextInput | ||
| autoCapitalize="none" | ||
| autoComplete="off" | ||
| autoCorrect={false} | ||
| autoFocus | ||
| inputState="focused" | ||
| onChangeText={text => setEmailAddress(text)} | ||
| placeholder={t`Email address`} | ||
| TextInputComponent={UIBottomSheetTextInput} | ||
| value={emailAddress} | ||
| /> | ||
| <Button | ||
| buttonState="default" | ||
| onPress={() => onSaveEmailAddress(emailAddress)} | ||
| title={t`Save`} | ||
| /> | ||
| </SettingsSheetLayout> | ||
| ); | ||
| } |
18 changes: 0 additions & 18 deletions
18
apps/mobile/src/features/settings/email-notifications-sheet.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.