From 567bf182b48a8dbd21cf9a22f4c3678d235c4928 Mon Sep 17 00:00:00 2001 From: Brandon Presley Date: Sun, 11 Sep 2022 15:35:20 +1200 Subject: [PATCH] Change toasts based on context of settings The messages should explain what you have now changed rather than the setting itself. --- App.tsx | 30 ++++-------------------------- DrawerMenu.tsx | 3 ++- EditSet.tsx | 2 +- MassiveSnack.tsx | 42 ++++++++++++++++++++++++++++++++++++++++++ SettingsPage.tsx | 29 ++++++++++++++++++----------- 5 files changed, 67 insertions(+), 39 deletions(-) create mode 100644 MassiveSnack.tsx diff --git a/App.tsx b/App.tsx index 89e93b8..b3fd9a2 100644 --- a/App.tsx +++ b/App.tsx @@ -4,15 +4,15 @@ import { DefaultTheme as NavigationDefaultTheme, NavigationContainer, } from '@react-navigation/native'; -import React, {useState} from 'react'; +import React from 'react'; import {useColorScheme} from 'react-native'; import { DarkTheme as PaperDarkTheme, DefaultTheme as PaperDefaultTheme, Provider, - Snackbar, } from 'react-native-paper'; import Ionicon from 'react-native-vector-icons/Ionicons'; +import MassiveSnack from './MassiveSnack'; import Routes from './Routes'; export const Drawer = createDrawerNavigator(); @@ -25,10 +25,6 @@ export type DrawerParamList = { Loading: {}; }; -export const SnackbarContext = React.createContext<{ - toast: (value: string, timeout: number) => void; -}>({toast: () => null}); - export const CombinedDefaultTheme = { ...PaperDefaultTheme, ...NavigationDefaultTheme, @@ -49,36 +45,18 @@ export const CombinedDarkTheme = { }; const App = () => { - const [snackbar, setSnackbar] = useState(''); const dark = useColorScheme() === 'dark'; - const toast = (value: string, timeout: number) => { - setSnackbar(value); - setTimeout(() => setSnackbar(''), timeout); - }; - return ( }}> - + - + - setSnackbar('')} - visible={!!snackbar} - action={{ - label: 'Close', - onPress: () => setSnackbar(''), - color: dark - ? CombinedDarkTheme.colors.background - : CombinedDefaultTheme.colors.primary, - }}> - {snackbar} - ); }; diff --git a/DrawerMenu.tsx b/DrawerMenu.tsx index 7eaac9b..ec78e9f 100644 --- a/DrawerMenu.tsx +++ b/DrawerMenu.tsx @@ -3,8 +3,9 @@ import React, {useCallback, useContext, useState} from 'react'; import DocumentPicker from 'react-native-document-picker'; import {FileSystem} from 'react-native-file-access'; import {Divider, IconButton, Menu} from 'react-native-paper'; -import {DrawerParamList, SnackbarContext} from './App'; +import {DrawerParamList} from './App'; import ConfirmDialog from './ConfirmDialog'; +import {SnackbarContext} from './MassiveSnack'; import {Plan} from './plan'; import {addPlans, deletePlans, getAllPlans} from './plan.service'; import {addSets, deleteSets, getAllSets} from './set.service'; diff --git a/EditSet.tsx b/EditSet.tsx index 27164dd..f6cf1ab 100644 --- a/EditSet.tsx +++ b/EditSet.tsx @@ -7,8 +7,8 @@ import { import React, {useCallback, useContext} from 'react'; import {NativeModules, View} from 'react-native'; import {IconButton} from 'react-native-paper'; -import {SnackbarContext} from './App'; import {HomePageParams} from './HomePage'; +import {SnackbarContext} from './MassiveSnack'; import Set from './set'; import {addSet, setSet} from './set.service'; import SetForm from './SetForm'; diff --git a/MassiveSnack.tsx b/MassiveSnack.tsx new file mode 100644 index 0000000..a6175dc --- /dev/null +++ b/MassiveSnack.tsx @@ -0,0 +1,42 @@ +import React, {useState} from 'react'; +import {useColorScheme} from 'react-native'; +import {Snackbar} from 'react-native-paper'; +import {CombinedDarkTheme, CombinedDefaultTheme} from './App'; + +export const SnackbarContext = React.createContext<{ + toast: (value: string, timeout: number) => void; +}>({toast: () => null}); + +const MassiveSnack = ({children}: {children: JSX.Element[] | JSX.Element}) => { + const [snackbar, setSnackbar] = useState(''); + const dark = useColorScheme() === 'dark'; + let timeoutId: number; + + const toast = (value: string, timeout: number) => { + setSnackbar(value); + clearTimeout(timeoutId); + timeoutId = setTimeout(() => setSnackbar(''), timeout); + }; + + return ( + <> + + {children} + + setSnackbar('')} + visible={!!snackbar} + action={{ + label: 'Close', + onPress: () => setSnackbar(''), + color: dark + ? CombinedDarkTheme.colors.background + : CombinedDefaultTheme.colors.primary, + }}> + {snackbar} + + + ); +}; + +export default MassiveSnack; diff --git a/SettingsPage.tsx b/SettingsPage.tsx index c11a20e..38c9ec0 100644 --- a/SettingsPage.tsx +++ b/SettingsPage.tsx @@ -2,9 +2,9 @@ import React, {useCallback, useContext, useEffect, useState} from 'react'; import {NativeModules, ScrollView, StyleSheet, View} from 'react-native'; import DocumentPicker from 'react-native-document-picker'; import {Button, Searchbar, Text} from 'react-native-paper'; -import {SnackbarContext} from './App'; import ConfirmDialog from './ConfirmDialog'; import MassiveInput from './MassiveInput'; +import {SnackbarContext} from './MassiveSnack'; import MassiveSwitch from './MassiveSwitch'; import {getSettings, setSettings} from './settings.service'; @@ -65,7 +65,8 @@ export default function SettingsPage() { const changeAlarmEnabled = useCallback( (enabled: boolean) => { setAlarm(enabled); - toast('Time your rest duration after each set.', 4000); + if (enabled) toast('Timers will now run after each set.', 4000); + else toast('Stopped timers running after each set.', 4000); if (enabled && !ignoring) setBattery(true); }, [setBattery, ignoring, toast], @@ -74,15 +75,18 @@ export default function SettingsPage() { const changePredict = useCallback( (enabled: boolean) => { setPredict(enabled); - toast('Predict your next set based on todays plan.', 4000); + if (enabled) + toast('Predicting your next set based on todays plan.', 4000); + else toast('New sets will always be empty.', 4000); }, [setPredict, toast], ); const changeVibrate = useCallback( - (value: boolean) => { - setVibrate(value); - toast('When a timer completes, vibrate your phone.', 4000); + (enabled: boolean) => { + setVibrate(enabled); + if (enabled) toast('When a timer completes, vibrate your phone.', 4000); + else toast('Stop vibrating at the end of timers.', 4000); }, [setVibrate, toast], ); @@ -92,13 +96,16 @@ export default function SettingsPage() { type: 'audio/*', copyTo: 'documentDirectory', }); - if (fileCopyUri) setSound(fileCopyUri); - }, []); + if (!fileCopyUri) return; + setSound(fileCopyUri); + toast('This song will now play after rest timers complete.', 4000); + }, [toast]); const changeNotify = useCallback( - (value: boolean) => { - setNotify(value); - toast('If a set is a new record, show a notification.', 4000); + (enabled: boolean) => { + setNotify(enabled); + if (enabled) toast('Show when a set is a new record.', 4000); + else toast('Stopped showing notifications for new records.', 4000); }, [toast], );