Add confirm dialog to deleting all data

BatteryDialog.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import {NativeModules, Text} from 'react-native';
-import {Button, Dialog, Portal} from 'react-native-paper';
-
-export default function BatteryDialog({
-  show,
-  setShow,
-}: {
-  show: boolean;
-  setShow: (show: boolean) => void;
-}) {
-  const ok = () => {
-    NativeModules.AlarmModule.openBatteryOptimizations();
-    setShow(false);
-  };
-
-  return (
-    <Portal>
-      <Dialog visible={show} onDismiss={() => setShow(false)}>
-        <Dialog.Title>Battery optimizations</Dialog.Title>
-        <Dialog.Content>
-          <Text>
-            Disable battery optimizations for Massive to use rest timers.
-          </Text>
-          <Text>
-            Settings {'>'} Battery {'>'} Unrestricted
-          </Text>
-        </Dialog.Content>
-        <Dialog.Actions>
-          <Button onPress={ok}>Open settings</Button>
-          <Button onPress={() => setShow(false)}>Cancel</Button>
-        </Dialog.Actions>
-      </Dialog>
-    </Portal>
-  );
-}

ConfirmDialog.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Text} from 'react-native';
+import {Button, Dialog, Portal} from 'react-native-paper';
+
+export default function ConfirmDialog({
+  title,
+  children,
+  onOk,
+  show,
+  setShow,
+}: {
+  title: string;
+  children: string;
+  onOk: () => void;
+  show: boolean;
+  setShow: (show: boolean) => void;
+}) {
+  return (
+    <Portal>
+      <Dialog visible={show} onDismiss={() => setShow(false)}>
+        <Dialog.Title>{title}</Dialog.Title>
+        <Dialog.Content>
+          <Text>{children}</Text>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button onPress={onOk}>OK</Button>
+          <Button onPress={() => setShow(false)}>Cancel</Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+}

HomePage.tsx

@@ -6,7 +6,7 @@ import {IconButton} from 'react-native-paper';
 import {DrawerParamList} from './App';
 import EditSet from './EditSet';
 import Set from './set';
-import SetsPage from './SetsPage';
+import SetList from './SetList';
 
 const Stack = createStackNavigator<StackParams>();
 export type StackParams = {
@@ -22,7 +22,7 @@ export default function HomePage() {
   return (
     <Stack.Navigator
       screenOptions={{headerShown: false, animationEnabled: false}}>
-      <Stack.Screen name="Sets" component={SetsPage} />
+      <Stack.Screen name="Sets" component={SetList} />
       <Stack.Screen
         name="EditSet"
         component={EditSet}

SetList.tsx

@@ -14,7 +14,7 @@ import SetItem from './SetItem';
 
 const limit = 15;
 
-export default function SetsPage() {
+export default function SetList() {
   const [sets, setSets] = useState<Set[]>();
   const [offset, setOffset] = useState(0);
   const [search, setSearch] = useState('');
@@ -33,7 +33,7 @@ export default function SetsPage() {
   const refresh = useCallback(async () => {
     const [result] = await db.executeSql(selectSets, [`%${search}%`, limit, 0]);
     if (!result) return setSets([]);
-    console.log(`${SetsPage.name}.refresh:`, {search, limit});
+    console.log(`${SetList.name}.refresh:`, {search, limit});
     setSets(result.rows.raw());
     setOffset(0);
     setEnd(false);
@@ -66,7 +66,7 @@ export default function SetsPage() {
     if (end) return;
     setRefreshing(true);
     const newOffset = offset + limit;
-    console.log(`${SetsPage.name}.next:`, {
+    console.log(`${SetList.name}.next:`, {
       offset,
       limit,
       newOffset,

SettingsPage.tsx

@@ -13,6 +13,7 @@ import {DatabaseContext} from './App';
 import BatteryDialog from './BatteryDialog';
 import Set from './set';
 import DocumentPicker from 'react-native-document-picker';
+import ConfirmDialog from './ConfirmDialog';
 
 const {getItem, setItem} = AsyncStorage;
 
@@ -24,6 +25,7 @@ export default function SettingsPage() {
   const [predictiveSets, setPredictiveSets] = useState<boolean>(false);
   const [snackbar, setSnackbar] = useState('');
   const [showBattery, setShowBattery] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
   const [ignoring, setIgnoring] = useState(false);
   const [timeoutId, setTimeoutId] = useState(0);
   const db = useContext(DatabaseContext);
@@ -51,6 +53,7 @@ export default function SettingsPage() {
   );
 
   const clear = useCallback(async () => {
+    setShowDelete(false);
     await db.executeSql(`DELETE FROM sets`);
     toast('All data has been deleted!');
   }, [db, toast]);
@@ -165,6 +168,17 @@ export default function SettingsPage() {
         onValueChange={changeAlarmEnabled}
       />
 
+      <ConfirmDialog
+        title="Battery optimizations"
+        show={showBattery}
+        setShow={setShowBattery}
+        onOk={() => {
+          NativeModules.AlarmModule.openBatteryOptimizations();
+          setShowBattery(false);
+        }}>
+        Disable battery optimizations for Massive to use rest timers.
+      </ConfirmDialog>
+
       <Text style={styles.text}>Predictive sets</Text>
       <Switch
         style={[styles.text, {alignSelf: 'flex-start'}]}
@@ -187,13 +201,19 @@ export default function SettingsPage() {
       </Button>
 
       <Button
-        style={{alignSelf: 'flex-start', marginTop: 'auto'}}
+        style={{alignSelf: 'flex-start'}}
         icon="trash"
-        onPress={clear}>
+        onPress={() => setShowDelete(true)}>
         Delete all data
       </Button>
 
-      <BatteryDialog show={showBattery} setShow={setShowBattery} />
+      <ConfirmDialog
+        title="Delete all data"
+        show={showDelete}
+        setShow={setShowDelete}
+        onOk={clear}>
+        This irreversibly deletes all data from the app. Are you sure?
+      </ConfirmDialog>
 
       <Snackbar
         visible={!!snackbar}