Change toasts based on context of settings
The messages should explain what you have now changed rather than the setting itself.
This commit is contained in:
parent
1a83b20069
commit
567bf182b4
30
App.tsx
30
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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
42
MassiveSnack.tsx
Normal file
42
MassiveSnack.tsx
Normal file
|
@ -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;
|
|
@ -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],
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue
Block a user