Change toasts based on context of settings

The messages should explain what you have now changed
rather than the setting itself.

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<DrawerParamList>();
@@ -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 (
     <Provider
       theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}
       settings={{icon: props => <Ionicon {...props} />}}>
       <NavigationContainer
         theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}>
-        <SnackbarContext.Provider value={{toast}}>
+        <MassiveSnack>
           <Routes />
-        </SnackbarContext.Provider>
+        </MassiveSnack>
       </NavigationContainer>
-      <Snackbar
-        onDismiss={() => setSnackbar('')}
-        visible={!!snackbar}
-        action={{
-          label: 'Close',
-          onPress: () => setSnackbar(''),
-          color: dark
-            ? CombinedDarkTheme.colors.background
-            : CombinedDefaultTheme.colors.primary,
-        }}>
-        {snackbar}
-      </Snackbar>
     </Provider>
   );
 };

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';

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';

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 (
+    <>
+      <SnackbarContext.Provider value={{toast}}>
+        {children}
+      </SnackbarContext.Provider>
+      <Snackbar
+        onDismiss={() => setSnackbar('')}
+        visible={!!snackbar}
+        action={{
+          label: 'Close',
+          onPress: () => setSnackbar(''),
+          color: dark
+            ? CombinedDarkTheme.colors.background
+            : CombinedDefaultTheme.colors.primary,
+        }}>
+        {snackbar}
+      </Snackbar>
+    </>
+  );
+};
+
+export default MassiveSnack;

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) => {
+    (enabled: boolean) => {
-      setVibrate(value);
+      setVibrate(enabled);
-      toast('When a timer completes, vibrate your phone.', 4000);
+      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) => {
+    (enabled: boolean) => {
-      setNotify(value);
+      setNotify(enabled);
-      toast('If a set is a new record, show a notification.', 4000);
+      if (enabled) toast('Show when a set is a new record.', 4000);
+      else toast('Stopped showing notifications for new records.', 4000);
     },
     [toast],
   );