Create useSnackbar custom hook
This commit is contained in:
parent
8461f86e88
commit
46f0875497
|
@ -1,11 +1,11 @@
|
||||||
import {NavigationProp, useNavigation} from '@react-navigation/native';
|
import {NavigationProp, useNavigation} from '@react-navigation/native';
|
||||||
import React, {useCallback, useContext, useState} from 'react';
|
import React, {useCallback, useState} from 'react';
|
||||||
import DocumentPicker from 'react-native-document-picker';
|
import DocumentPicker from 'react-native-document-picker';
|
||||||
import {FileSystem} from 'react-native-file-access';
|
import {FileSystem} from 'react-native-file-access';
|
||||||
import {Divider, IconButton, Menu} from 'react-native-paper';
|
import {Divider, IconButton, Menu} from 'react-native-paper';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
import {DrawerParamList} from './drawer-param-list';
|
import {DrawerParamList} from './drawer-param-list';
|
||||||
import {SnackbarContext} from './MassiveSnack';
|
import {useSnackbar} from './MassiveSnack';
|
||||||
import {Plan} from './plan';
|
import {Plan} from './plan';
|
||||||
import {addPlans, deletePlans, getAllPlans} from './plan.service';
|
import {addPlans, deletePlans, getAllPlans} from './plan.service';
|
||||||
import {addSets, deleteSets, getAllSets} from './set.service';
|
import {addSets, deleteSets, getAllSets} from './set.service';
|
||||||
|
@ -18,7 +18,7 @@ const planFields = 'id,days,workouts';
|
||||||
export default function DrawerMenu({name}: {name: keyof DrawerParamList}) {
|
export default function DrawerMenu({name}: {name: keyof DrawerParamList}) {
|
||||||
const [showMenu, setShowMenu] = useState(false);
|
const [showMenu, setShowMenu] = useState(false);
|
||||||
const [showRemove, setShowRemove] = useState(false);
|
const [showRemove, setShowRemove] = useState(false);
|
||||||
const {toast} = useContext(SnackbarContext);
|
const {toast} = useSnackbar();
|
||||||
const {reset} = useNavigation<NavigationProp<DrawerParamList>>();
|
const {reset} = useNavigation<NavigationProp<DrawerParamList>>();
|
||||||
|
|
||||||
const exportSets = useCallback(async () => {
|
const exportSets = useCallback(async () => {
|
||||||
|
|
|
@ -4,12 +4,12 @@ import {
|
||||||
useNavigation,
|
useNavigation,
|
||||||
useRoute,
|
useRoute,
|
||||||
} from '@react-navigation/native';
|
} from '@react-navigation/native';
|
||||||
import React, {useCallback, useContext} from 'react';
|
import React, {useCallback} from 'react';
|
||||||
import {NativeModules, View} from 'react-native';
|
import {NativeModules, View} from 'react-native';
|
||||||
import {IconButton} from 'react-native-paper';
|
import {IconButton} from 'react-native-paper';
|
||||||
import {PADDING} from './constants';
|
import {PADDING} from './constants';
|
||||||
import {HomePageParams} from './home-page-params';
|
import {HomePageParams} from './home-page-params';
|
||||||
import {SnackbarContext} from './MassiveSnack';
|
import {useSnackbar} from './MassiveSnack';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import {addSet, updateSet} from './set.service';
|
import {addSet, updateSet} from './set.service';
|
||||||
import SetForm from './SetForm';
|
import SetForm from './SetForm';
|
||||||
|
@ -20,7 +20,7 @@ export default function EditSet() {
|
||||||
const {params} = useRoute<RouteProp<HomePageParams, 'EditSet'>>();
|
const {params} = useRoute<RouteProp<HomePageParams, 'EditSet'>>();
|
||||||
const {set} = params;
|
const {set} = params;
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
const {toast} = useContext(SnackbarContext);
|
const {toast} = useSnackbar();
|
||||||
const {settings, setSettings} = useSettings();
|
const {settings, setSettings} = useSettings();
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
|
|
|
@ -4,14 +4,14 @@ import {
|
||||||
useNavigation,
|
useNavigation,
|
||||||
useRoute,
|
useRoute,
|
||||||
} from '@react-navigation/native';
|
} from '@react-navigation/native';
|
||||||
import React, {useCallback, useContext, useRef, useState} from 'react';
|
import React, {useCallback, useRef, useState} from 'react';
|
||||||
import {ScrollView, TextInput, View} from 'react-native';
|
import {ScrollView, TextInput, View} from 'react-native';
|
||||||
import DocumentPicker from 'react-native-document-picker';
|
import DocumentPicker from 'react-native-document-picker';
|
||||||
import {Button, Card, IconButton, TouchableRipple} from 'react-native-paper';
|
import {Button, Card, IconButton, TouchableRipple} from 'react-native-paper';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
import {MARGIN, PADDING} from './constants';
|
import {MARGIN, PADDING} from './constants';
|
||||||
import MassiveInput from './MassiveInput';
|
import MassiveInput from './MassiveInput';
|
||||||
import {SnackbarContext} from './MassiveSnack';
|
import {useSnackbar} from './MassiveSnack';
|
||||||
import {updatePlanWorkouts} from './plan.service';
|
import {updatePlanWorkouts} from './plan.service';
|
||||||
import {addSet, updateManySet, updateSetImage} from './set.service';
|
import {addSet, updateManySet, updateSetImage} from './set.service';
|
||||||
import {useSettings} from './use-settings';
|
import {useSettings} from './use-settings';
|
||||||
|
@ -31,7 +31,7 @@ export default function EditWorkout() {
|
||||||
params.value.seconds?.toString() ?? '30',
|
params.value.seconds?.toString() ?? '30',
|
||||||
);
|
);
|
||||||
const [sets, setSets] = useState(params.value.sets?.toString() ?? '3');
|
const [sets, setSets] = useState(params.value.sets?.toString() ?? '3');
|
||||||
const {toast} = useContext(SnackbarContext);
|
const {toast} = useSnackbar();
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
const setsRef = useRef<TextInput>(null);
|
const setsRef = useRef<TextInput>(null);
|
||||||
const stepsRef = useRef<TextInput>(null);
|
const stepsRef = useRef<TextInput>(null);
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, {useState} from 'react';
|
import React, {useContext, useState} from 'react';
|
||||||
import {Snackbar} from 'react-native-paper';
|
import {Snackbar} from 'react-native-paper';
|
||||||
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
|
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
|
||||||
import useDark from './use-dark';
|
import useDark from './use-dark';
|
||||||
|
@ -7,6 +7,10 @@ export const SnackbarContext = React.createContext<{
|
||||||
toast: (value: string, timeout: number) => void;
|
toast: (value: string, timeout: number) => void;
|
||||||
}>({toast: () => null});
|
}>({toast: () => null});
|
||||||
|
|
||||||
|
export const useSnackbar = () => {
|
||||||
|
return useContext(SnackbarContext);
|
||||||
|
};
|
||||||
|
|
||||||
export default function MassiveSnack({
|
export default function MassiveSnack({
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
import React, {useCallback, useContext, useRef, useState} from 'react';
|
import React, {useCallback, useRef, useState} from 'react';
|
||||||
import {TextInput, View} from 'react-native';
|
import {TextInput, View} from 'react-native';
|
||||||
import DocumentPicker from 'react-native-document-picker';
|
import DocumentPicker from 'react-native-document-picker';
|
||||||
import {Button, Card, TouchableRipple} from 'react-native-paper';
|
import {Button, Card, TouchableRipple} from 'react-native-paper';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
import {MARGIN} from './constants';
|
import {MARGIN} from './constants';
|
||||||
import MassiveInput from './MassiveInput';
|
import MassiveInput from './MassiveInput';
|
||||||
import {SnackbarContext} from './MassiveSnack';
|
import {useSnackbar} from './MassiveSnack';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import {getSets} from './set.service';
|
import {getSets} from './set.service';
|
||||||
import {useSettings} from './use-settings';
|
import {useSettings} from './use-settings';
|
||||||
|
@ -28,7 +28,7 @@ export default function SetForm({
|
||||||
end: set.reps.toString().length,
|
end: set.reps.toString().length,
|
||||||
});
|
});
|
||||||
const [removeImage, setRemoveImage] = useState(false);
|
const [removeImage, setRemoveImage] = useState(false);
|
||||||
const {toast} = useContext(SnackbarContext);
|
const {toast} = useSnackbar();
|
||||||
const {settings} = useSettings();
|
const {settings} = useSettings();
|
||||||
const weightRef = useRef<TextInput>(null);
|
const weightRef = useRef<TextInput>(null);
|
||||||
const repsRef = useRef<TextInput>(null);
|
const repsRef = useRef<TextInput>(null);
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import {Picker} from '@react-native-picker/picker';
|
import {Picker} from '@react-native-picker/picker';
|
||||||
import {useFocusEffect} from '@react-navigation/native';
|
import {useFocusEffect} from '@react-navigation/native';
|
||||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
import React, {useCallback, useEffect, useState} from 'react';
|
||||||
import {NativeModules, ScrollView} from 'react-native';
|
import {NativeModules, ScrollView} from 'react-native';
|
||||||
import DocumentPicker from 'react-native-document-picker';
|
import DocumentPicker from 'react-native-document-picker';
|
||||||
import {Button} from 'react-native-paper';
|
import {Button} from 'react-native-paper';
|
||||||
|
@ -9,7 +9,7 @@ import {darkColors, lightColors} from './colors';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
import {MARGIN} from './constants';
|
import {MARGIN} from './constants';
|
||||||
import Input from './input';
|
import Input from './input';
|
||||||
import {SnackbarContext} from './MassiveSnack';
|
import {useSnackbar} from './MassiveSnack';
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
import {getSettings, updateSettings} from './settings.service';
|
import {getSettings, updateSettings} from './settings.service';
|
||||||
import Switch from './Switch';
|
import Switch from './Switch';
|
||||||
|
@ -31,7 +31,7 @@ export default function SettingsPage() {
|
||||||
const [theme, setTheme] = useState(settings.theme || 'system');
|
const [theme, setTheme] = useState(settings.theme || 'system');
|
||||||
const [showDate, setShowDate] = useState(!!settings.showDate);
|
const [showDate, setShowDate] = useState(!!settings.showDate);
|
||||||
const {color, setColor} = useColor();
|
const {color, setColor} = useColor();
|
||||||
const {toast} = useContext(SnackbarContext);
|
const {toast} = useSnackbar();
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
|
|
|
@ -4,7 +4,7 @@ import {
|
||||||
useNavigation,
|
useNavigation,
|
||||||
useRoute,
|
useRoute,
|
||||||
} from '@react-navigation/native';
|
} from '@react-navigation/native';
|
||||||
import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
|
import React, {useCallback, useMemo, useRef, useState} from 'react';
|
||||||
import {NativeModules, TextInput, View} from 'react-native';
|
import {NativeModules, TextInput, View} from 'react-native';
|
||||||
import {FlatList} from 'react-native-gesture-handler';
|
import {FlatList} from 'react-native-gesture-handler';
|
||||||
import {Button, IconButton, List, RadioButton} from 'react-native-paper';
|
import {Button, IconButton, List, RadioButton} from 'react-native-paper';
|
||||||
|
@ -13,7 +13,7 @@ import {useColor} from './color';
|
||||||
import {PADDING} from './constants';
|
import {PADDING} from './constants';
|
||||||
import CountMany from './count-many';
|
import CountMany from './count-many';
|
||||||
import MassiveInput from './MassiveInput';
|
import MassiveInput from './MassiveInput';
|
||||||
import {SnackbarContext} from './MassiveSnack';
|
import {useSnackbar} from './MassiveSnack';
|
||||||
import {PlanPageParams} from './plan-page-params';
|
import {PlanPageParams} from './plan-page-params';
|
||||||
import {addSet, countManyToday} from './set.service';
|
import {addSet, countManyToday} from './set.service';
|
||||||
import SetForm from './SetForm';
|
import SetForm from './SetForm';
|
||||||
|
@ -26,7 +26,7 @@ export default function StartPlan() {
|
||||||
const [reps, setReps] = useState(set.reps.toString());
|
const [reps, setReps] = useState(set.reps.toString());
|
||||||
const [weight, setWeight] = useState(set.weight.toString());
|
const [weight, setWeight] = useState(set.weight.toString());
|
||||||
const [unit, setUnit] = useState<string>();
|
const [unit, setUnit] = useState<string>();
|
||||||
const {toast} = useContext(SnackbarContext);
|
const {toast} = useSnackbar();
|
||||||
const [minutes, setMinutes] = useState(set.minutes);
|
const [minutes, setMinutes] = useState(set.minutes);
|
||||||
const [seconds, setSeconds] = useState(set.seconds);
|
const [seconds, setSeconds] = useState(set.seconds);
|
||||||
const [selected, setSelected] = useState(0);
|
const [selected, setSelected] = useState(0);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user