Create useSnackbar custom hook

DrawerMenu.tsx

@@ -1,11 +1,11 @@
 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 {FileSystem} from 'react-native-file-access';
 import {Divider, IconButton, Menu} from 'react-native-paper';
 import ConfirmDialog from './ConfirmDialog';
 import {DrawerParamList} from './drawer-param-list';
-import {SnackbarContext} from './MassiveSnack';
+import {useSnackbar} from './MassiveSnack';
 import {Plan} from './plan';
 import {addPlans, deletePlans, getAllPlans} from './plan.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}) {
   const [showMenu, setShowMenu] = useState(false);
   const [showRemove, setShowRemove] = useState(false);
-  const {toast} = useContext(SnackbarContext);
+  const {toast} = useSnackbar();
   const {reset} = useNavigation<NavigationProp<DrawerParamList>>();
 
   const exportSets = useCallback(async () => {

EditSet.tsx

@@ -4,12 +4,12 @@ import {
   useNavigation,
   useRoute,
 } from '@react-navigation/native';
-import React, {useCallback, useContext} from 'react';
+import React, {useCallback} from 'react';
 import {NativeModules, View} from 'react-native';
 import {IconButton} from 'react-native-paper';
 import {PADDING} from './constants';
 import {HomePageParams} from './home-page-params';
-import {SnackbarContext} from './MassiveSnack';
+import {useSnackbar} from './MassiveSnack';
 import Set from './set';
 import {addSet, updateSet} from './set.service';
 import SetForm from './SetForm';
@@ -20,7 +20,7 @@ export default function EditSet() {
   const {params} = useRoute<RouteProp<HomePageParams, 'EditSet'>>();
   const {set} = params;
   const navigation = useNavigation();
-  const {toast} = useContext(SnackbarContext);
+  const {toast} = useSnackbar();
   const {settings, setSettings} = useSettings();
 
   useFocusEffect(

EditWorkout.tsx

@@ -4,14 +4,14 @@ import {
   useNavigation,
   useRoute,
 } 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 DocumentPicker from 'react-native-document-picker';
 import {Button, Card, IconButton, TouchableRipple} from 'react-native-paper';
 import ConfirmDialog from './ConfirmDialog';
 import {MARGIN, PADDING} from './constants';
 import MassiveInput from './MassiveInput';
-import {SnackbarContext} from './MassiveSnack';
+import {useSnackbar} from './MassiveSnack';
 import {updatePlanWorkouts} from './plan.service';
 import {addSet, updateManySet, updateSetImage} from './set.service';
 import {useSettings} from './use-settings';
@@ -31,7 +31,7 @@ export default function EditWorkout() {
     params.value.seconds?.toString() ?? '30',
   );
   const [sets, setSets] = useState(params.value.sets?.toString() ?? '3');
-  const {toast} = useContext(SnackbarContext);
+  const {toast} = useSnackbar();
   const navigation = useNavigation();
   const setsRef = useRef<TextInput>(null);
   const stepsRef = useRef<TextInput>(null);

MassiveSnack.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import {Snackbar} from 'react-native-paper';
 import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
 import useDark from './use-dark';
@@ -7,6 +7,10 @@ export const SnackbarContext = React.createContext<{
   toast: (value: string, timeout: number) => void;
 }>({toast: () => null});
 
+export const useSnackbar = () => {
+  return useContext(SnackbarContext);
+};
+
 export default function MassiveSnack({
   children,
 }: {

SetForm.tsx

@@ -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 DocumentPicker from 'react-native-document-picker';
 import {Button, Card, TouchableRipple} from 'react-native-paper';
 import ConfirmDialog from './ConfirmDialog';
 import {MARGIN} from './constants';
 import MassiveInput from './MassiveInput';
-import {SnackbarContext} from './MassiveSnack';
+import {useSnackbar} from './MassiveSnack';
 import Set from './set';
 import {getSets} from './set.service';
 import {useSettings} from './use-settings';
@@ -28,7 +28,7 @@ export default function SetForm({
     end: set.reps.toString().length,
   });
   const [removeImage, setRemoveImage] = useState(false);
-  const {toast} = useContext(SnackbarContext);
+  const {toast} = useSnackbar();
   const {settings} = useSettings();
   const weightRef = useRef<TextInput>(null);
   const repsRef = useRef<TextInput>(null);

SettingsPage.tsx

@@ -1,6 +1,6 @@
 import {Picker} from '@react-native-picker/picker';
 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 DocumentPicker from 'react-native-document-picker';
 import {Button} from 'react-native-paper';
@@ -9,7 +9,7 @@ import {darkColors, lightColors} from './colors';
 import ConfirmDialog from './ConfirmDialog';
 import {MARGIN} from './constants';
 import Input from './input';
-import {SnackbarContext} from './MassiveSnack';
+import {useSnackbar} from './MassiveSnack';
 import Page from './Page';
 import {getSettings, updateSettings} from './settings.service';
 import Switch from './Switch';
@@ -31,7 +31,7 @@ export default function SettingsPage() {
   const [theme, setTheme] = useState(settings.theme || 'system');
   const [showDate, setShowDate] = useState(!!settings.showDate);
   const {color, setColor} = useColor();
-  const {toast} = useContext(SnackbarContext);
+  const {toast} = useSnackbar();
 
   useFocusEffect(
     useCallback(() => {

StartPlan.tsx

@@ -4,7 +4,7 @@ import {
   useNavigation,
   useRoute,
 } 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 {FlatList} from 'react-native-gesture-handler';
 import {Button, IconButton, List, RadioButton} from 'react-native-paper';
@@ -13,7 +13,7 @@ import {useColor} from './color';
 import {PADDING} from './constants';
 import CountMany from './count-many';
 import MassiveInput from './MassiveInput';
-import {SnackbarContext} from './MassiveSnack';
+import {useSnackbar} from './MassiveSnack';
 import {PlanPageParams} from './plan-page-params';
 import {addSet, countManyToday} from './set.service';
 import SetForm from './SetForm';
@@ -26,7 +26,7 @@ export default function StartPlan() {
   const [reps, setReps] = useState(set.reps.toString());
   const [weight, setWeight] = useState(set.weight.toString());
   const [unit, setUnit] = useState<string>();
-  const {toast} = useContext(SnackbarContext);
+  const {toast} = useSnackbar();
   const [minutes, setMinutes] = useState(set.minutes);
   const [seconds, setSeconds] = useState(set.seconds);
   const [selected, setSelected] = useState(0);