brandon.presley/Massive
brandon.presley
/
Massive
4
8
Fork 3
Code Issues 14 Pull Requests Activity

Use react-native-paper snackbar instead of ToastAndroid

This commit is contained in:
Brandon Presley 2022-08-25 13:01:01 +12:00
parent c54396cb9c
commit 2c9242b03f
6 changed files with 77 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
App.tsx
View File

@ -10,6 +10,7 @@ import {
DarkTheme as PaperDarkTheme,
DefaultTheme as PaperDefaultTheme,
Provider,
Snackbar,
} from 'react-native-paper';
import {SQLiteDatabase} from 'react-native-sqlite-storage';
import Ionicon from 'react-native-vector-icons/Ionicons';
@ -25,6 +26,9 @@ export type DrawerParamList = {
};
export const DatabaseContext = React.createContext<SQLiteDatabase>({} as any);
export const SnackbarContext = React.createContext<{
toast: (value: string, timeout: number) => void;
}>({toast: () => null});
const CombinedDefaultTheme = {
...PaperDefaultTheme,
@ -45,6 +49,7 @@ const CombinedDarkTheme = {
const App = () => {
const [db, setDb] = useState<SQLiteDatabase | null>(null);
const [snackbar, setSnackbar] = useState('');
const dark = useColorScheme() === 'dark';
useEffect(() => {
@ -64,6 +69,11 @@ const App = () => {
init();
}, []);
const toast = (value: string, timeout: number) => {
setSnackbar(value);
setTimeout(() => setSnackbar(''), timeout);
};
return (
<Provider
theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}
@ -71,8 +81,22 @@ const App = () => {
<NavigationContainer
theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}>
<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
<Routes db={db} />
<SnackbarContext.Provider value={{toast}}>
<Routes db={db} />
</SnackbarContext.Provider>
</NavigationContainer>
<Snackbar
onDismiss={() => setSnackbar('')}
visible={!!snackbar}
action={{
label: 'Close',
onPress: () => setSnackbar(''),
color: dark
? CombinedDarkTheme.colors.primary
: CombinedDefaultTheme.colors.primary,
}}>
{snackbar}
</Snackbar>
</Provider>
);
};

29
DrawerMenu.tsx
View File

@ -1,12 +1,11 @@
import {NavigationProp, useNavigation} from '@react-navigation/native';
import React, {useCallback, useContext, useState} from 'react';
import {ToastAndroid} from 'react-native';
import DocumentPicker from 'react-native-document-picker';
import {FileSystem} from 'react-native-file-access';
import {Divider, IconButton, Menu} from 'react-native-paper';
import {DatabaseContext, DrawerParamList} from './App';
import {DatabaseContext, DrawerParamList, SnackbarContext} from './App';
import ConfirmDialog from './ConfirmDialog';
import {write} from './file';
import {useWrite} from './file';
import {Plan} from './plan';
import Set from './set';
@ -17,7 +16,9 @@ export default function DrawerMenu({name}: {name: keyof DrawerParamList}) {
const [showMenu, setShowMenu] = useState(false);
const [showRemove, setShowRemove] = useState(false);
const db = useContext(DatabaseContext);
const {toast} = useContext(SnackbarContext);
const {reset} = useNavigation<NavigationProp<DrawerParamList>>();
const {write} = useWrite();
const exportSets = useCallback(async () => {
const [result] = await db.executeSql('SELECT * FROM sets');
@ -33,7 +34,7 @@ export default function DrawerMenu({name}: {name: keyof DrawerParamList}) {
.join('\n');
console.log(`${DrawerMenu.name}.exportSets`, {length: sets.length});
await write('sets.csv', data);
}, [db]);
}, [db, write]);
const exportPlans = useCallback(async () => {
const [result] = await db.executeSql('SELECT * FROM plans');
@ -44,7 +45,7 @@ export default function DrawerMenu({name}: {name: keyof DrawerParamList}) {
.join('\n');
console.log(`${DrawerMenu.name}.exportPlans`, {length: sets.length});
await write('plans.csv', data);
}, [db]);
}, [db, write]);
const download = useCallback(async () => {
setShowMenu(false);
@ -57,8 +58,7 @@ export default function DrawerMenu({name}: {name: keyof DrawerParamList}) {
const file = await FileSystem.readFile(result.uri);
console.log(`${DrawerMenu.name}.${uploadSets.name}:`, file.length);
const lines = file.split('\n');
if (lines[0] != setFields)
return ToastAndroid.show('Invalid csv.', ToastAndroid.SHORT);
if (lines[0] != setFields) return toast('Invalid csv.', 3000);
const values = lines
.slice(1)
.filter(line => line)
@ -70,17 +70,16 @@ export default function DrawerMenu({name}: {name: keyof DrawerParamList}) {
await db.executeSql(
`INSERT INTO sets(name,reps,weight,created,unit) VALUES ${values}`,
);
ToastAndroid.show('Data imported.', ToastAndroid.SHORT);
toast('Data imported.', 3000);
reset({index: 0, routes: [{name}]});
}, [db, reset, name]);
}, [db, reset, name, toast]);
const uploadPlans = useCallback(async () => {
const result = await DocumentPicker.pickSingle();
const file = await FileSystem.readFile(result.uri);
console.log(`${DrawerMenu.name}.uploadPlans:`, file.length);
const lines = file.split('\n');
if (lines[0] != planFields)
return ToastAndroid.show('Invalid csv.', ToastAndroid.SHORT);
if (lines[0] != planFields) return toast('Invalid csv.', 3000);
const values = file
.split('\n')
.slice(1)
@ -91,8 +90,8 @@ export default function DrawerMenu({name}: {name: keyof DrawerParamList}) {
})
.join(',');
await db.executeSql(`INSERT INTO plans(days,workouts) VALUES ${values}`);
ToastAndroid.show('Data imported.', ToastAndroid.SHORT);
}, [db]);
toast('Data imported.', 3000);
}, [db, toast]);
const upload = useCallback(async () => {
setShowMenu(false);
@ -106,9 +105,9 @@ export default function DrawerMenu({name}: {name: keyof DrawerParamList}) {
setShowRemove(false);
if (name === 'Home') await db.executeSql(`DELETE FROM sets`);
else if (name === 'Plans') await db.executeSql(`DELETE FROM plans`);
ToastAndroid.show('All data has been deleted.', ToastAndroid.SHORT);
toast('All data has been deleted.', 4000);
reset({index: 0, routes: [{name}]});
}, [db, reset, name]);
}, [db, reset, name, toast]);
if (name === 'Home' || name === 'Plans')
return (

10
EditSet.tsx
View File

@ -5,9 +5,9 @@ import {
useRoute,
} from '@react-navigation/native';
import React, {useCallback, useContext} from 'react';
import {NativeModules, ToastAndroid, View} from 'react-native';
import {NativeModules, View} from 'react-native';
import {IconButton} from 'react-native-paper';
import {DatabaseContext} from './App';
import {DatabaseContext, SnackbarContext} from './App';
import {HomePageParams} from './HomePage';
import Set from './set';
import SetForm from './SetForm';
@ -17,6 +17,7 @@ export default function EditSet() {
const {params} = useRoute<RouteProp<HomePageParams, 'EditSet'>>();
const db = useContext(DatabaseContext);
const navigation = useNavigation();
const {toast} = useContext(SnackbarContext);
useFocusEffect(
useCallback(() => {
@ -24,6 +25,7 @@ export default function EditSet() {
headerLeft: () => (
<IconButton icon="arrow-back" onPress={() => navigation.goBack()} />
),
headerRight: null,
title: 'Set',
});
}, [navigation]),
@ -62,10 +64,10 @@ export default function EditSet() {
weight > params.set.weight ||
(reps > params.set.reps && weight === params.set.weight)
)
ToastAndroid.show("Great work King, that's a new record!", 6000);
toast("Great work King, that's a new record!", 6000);
navigation.goBack();
},
[db, navigation, startTimer, params.set],
[db, navigation, startTimer, params.set, toast],
);
const save = useCallback(

6
SetList.tsx
View File

@ -7,6 +7,7 @@ import React, {useCallback, useContext, useEffect, useState} from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
import {List, Searchbar} from 'react-native-paper';
import {DatabaseContext} from './App';
import DrawerMenu from './DrawerMenu';
import {HomePageParams} from './HomePage';
import MassiveFab from './MassiveFab';
import {Plan} from './plan';
@ -132,7 +133,10 @@ export default function SetList() {
useCallback(() => {
refresh();
predict();
}, [refresh, predict]),
navigation.getParent()?.setOptions({
headerRight: () => <DrawerMenu name="Home" />,
});
}, [refresh, predict, navigation]),
);
const renderItem = useCallback(

18
SettingsPage.tsx
View File

@ -5,15 +5,9 @@ import React, {
useEffect,
useState,
} from 'react';
import {
NativeModules,
StyleSheet,
Text,
ToastAndroid,
View,
} from 'react-native';
import {NativeModules, StyleSheet, Text, View} from 'react-native';
import {Searchbar, TextInput} from 'react-native-paper';
import {DatabaseContext} from './App';
import {DatabaseContext, SnackbarContext} from './App';
import ConfirmDialog from './ConfirmDialog';
import MassiveSwitch from './MassiveSwitch';
import Settings from './settings';
@ -29,6 +23,7 @@ export default function SettingsPage() {
const [ignoring, setIgnoring] = useState(false);
const [search, setSearch] = useState('');
const db = useContext(DatabaseContext);
const {toast} = useContext(SnackbarContext);
const refresh = useCallback(async () => {
const [result] = await db.executeSql(`SELECT * FROM settings LIMIT 1`);
@ -65,12 +60,9 @@ export default function SettingsPage() {
const changePredictive = useCallback(
(enabled: boolean) => {
setPredictive(enabled);
ToastAndroid.show(
'Predictive sets guess whats next based on todays plan.',
ToastAndroid.LONG,
);
toast('Predictive sets guess whats next based on todays plan.', 7000);
},
[setPredictive],
[setPredictive, toast],
);
const changeVibrate = useCallback(

36
file.ts
View File

@ -1,18 +1,26 @@
import {PermissionsAndroid, ToastAndroid} from 'react-native';
import {useContext} from 'react';
import {PermissionsAndroid} from 'react-native';
import {Dirs, FileSystem} from 'react-native-file-access';
import {SnackbarContext} from './App';
export const write = async (name: string, data: string) => {
const filePath = `${Dirs.DocumentDir}/${name}`;
const permission = async () => {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
);
return granted === PermissionsAndroid.RESULTS.GRANTED;
export const useWrite = () => {
const {toast} = useContext(SnackbarContext);
return {
write: async (name: string, data: string) => {
const filePath = `${Dirs.DocumentDir}/${name}`;
const permission = async () => {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
);
return granted === PermissionsAndroid.RESULTS.GRANTED;
};
const granted = await permission();
if (!granted) return;
await FileSystem.writeFile(filePath, data);
if (!FileSystem.exists(filePath)) return;
await FileSystem.cpExternal(filePath, name, 'downloads');
toast(`Saved "${name}" in your downloads folder.`, 6000);
},
};
const granted = await permission();
if (!granted) return;
await FileSystem.writeFile(filePath, data);
if (!FileSystem.exists(filePath)) return;
await FileSystem.cpExternal(filePath, name, 'downloads');
ToastAndroid.show(`Saved "${name}". Check downloads`, ToastAndroid.LONG);
};