Remove all JS side Timers

This is the result of me fixing the background timers.
Previously our code just used a CountdownTimer
not even in a service, just immediately in the
@ReactMethod. This would in certain scenarios stop
running. Even with battery optimizations turned off.

The reason why all the JS side timers had to be removed
is because we were relying on RCTDeviceEventEmitter
which I don't know how to use from within a Service.
See my stackoverflow ticket here: https://stackoverflow.com/questions/74204339/sending-react-native-android-events-to-javascript-from-a-service

Closes #212, #196

App.tsx

@@ -17,7 +17,6 @@ import FatalError from "./FatalError";
 import { AppDataSource } from "./data-source";
 import { settingsRepo } from "./db";
 import { ThemeContext } from "./use-theme";
-import TimerProgress from "./TimerProgress";
 
 export const CombinedDefaultTheme = {
   ...NavigationDefaultTheme,
@@ -119,7 +118,6 @@ const App = () => {
       </NavigationContainer>
 
       <AppSnack textColor={paperTheme.colors.background} />
-      <TimerProgress />
     </PaperProvider>
   );
 };

AppDrawer.tsx

@@ -8,7 +8,6 @@ import InsightsPage from "./InsightsPage";
 import PlanList from "./PlanList";
 import SetList from "./SetList";
 import SettingsPage from "./SettingsPage";
-import TimerPage from "./TimerPage";
 import WeightList from "./WeightList";
 
 const Drawer = createDrawerNavigator<DrawerParams>();
@@ -55,11 +54,6 @@ export default function AppDrawer({
           drawerIcon: () => <IconButton icon="chart-bell-curve-cumulative" />,
         }}
       />
-      <Drawer.Screen
-        name="Timer"
-        component={TimerPage}
-        options={{ drawerIcon: () => <IconButton icon="timer-outline" /> }}
-      />
       <Drawer.Screen
         name="Weight"
         component={WeightList}

SettingsPage.tsx

@@ -6,7 +6,6 @@ import { FlatList, NativeModules } from "react-native";
 import DocumentPicker from "react-native-document-picker";
 import { Dirs, FileSystem } from "react-native-file-access";
 import { Button } from "react-native-paper";
-import { check, PERMISSIONS, request, RESULTS } from "react-native-permissions";
 import AppInput from "./AppInput";
 import ConfirmDialog from "./ConfirmDialog";
 import { PADDING } from "./constants";

TimerPage.tsx

@@ -1,68 +0,0 @@
-import { useFocusEffect } from "@react-navigation/native";
-import React, { useCallback, useState } from "react";
-import { NativeModules, View } from "react-native";
-import { FAB, Text, useTheme } from "react-native-paper";
-import AppFab from "./AppFab";
-import DrawerHeader from "./DrawerHeader";
-import { settingsRepo } from "./db";
-import Settings from "./settings";
-import useTimer from "./use-timer";
-
-export interface TickEvent {
-  minutes: string;
-  seconds: string;
-}
-
-export default function TimerPage() {
-  const { minutes, seconds, update } = useTimer();
-  const [settings, setSettings] = useState<Settings>();
-  const { colors } = useTheme();
-
-  useFocusEffect(
-    useCallback(() => {
-      settingsRepo.findOne({ where: {} }).then(setSettings);
-    }, [])
-  );
-
-  const stop = () => {
-    NativeModules.AlarmModule.stop();
-    update();
-  };
-
-  const add = async () => {
-    console.log(`${TimerPage.name}.add:`, settings);
-    NativeModules.AlarmModule.add();
-    update();
-  };
-
-  return (
-    <>
-      <DrawerHeader name="Timer" />
-      <View
-        style={{
-          flex: 1,
-          flexGrow: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <Text style={{ fontSize: 70, position: "absolute" }}>
-          {minutes}:{seconds}
-        </Text>
-      </View>
-
-      <FAB
-        icon="plus"
-        onPress={add}
-        style={{
-          position: "absolute",
-          left: 20,
-          bottom: 20,
-          backgroundColor: colors.primary,
-        }}
-        color={colors.background}
-      />
-      <AppFab icon="stop" onPress={stop} />
-    </>
-  );
-}

TimerProgress.tsx

@@ -1,31 +0,0 @@
-import { useEffect, useState } from "react";
-import { ProgressBar } from "react-native-paper";
-import { TickEvent } from "./TimerPage";
-import { emitter } from "./emitter";
-
-export default function TimerProgress() {
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    const description = emitter.addListener(
-      "tick",
-      ({ minutes, seconds }: TickEvent) => {
-        setProgress((Number(minutes) * 60 + Number(seconds)) / 210);
-      }
-    );
-    return description.remove;
-  }, []);
-
-  if (progress === 0) return null;
-
-  return (
-    <ProgressBar
-      style={{
-        position: "absolute",
-        bottom: 0,
-        height: 5,
-      }}
-      progress={progress}
-    />
-  );
-}

use-timer.ts

@@ -1,38 +0,0 @@
-import { useFocusEffect } from "@react-navigation/native";
-import { useCallback, useState } from "react";
-import { NativeModules } from "react-native";
-import { emitter } from "./emitter";
-import { TickEvent } from "./TimerPage";
-
-export default function useTimer() {
-  const [minutes, setMinutes] = useState("00");
-  const [seconds, setSeconds] = useState("00");
-
-  const update = () => {
-    const current: number = NativeModules.AlarmModule.getCurrent();
-    setMinutes(
-      Math.floor(current / 1000 / 60)
-        .toString()
-        .padStart(2, "0")
-    );
-    setSeconds(
-      Math.floor((current / 1000) % 60)
-        .toString()
-        .padStart(2, "0")
-    );
-  };
-
-  useFocusEffect(
-    useCallback(() => {
-      update();
-      const listener = emitter.addListener("tick", (event: TickEvent) => {
-        console.log(`${useTimer.name}.tick:`, { event });
-        setMinutes(event.minutes);
-        setSeconds(event.seconds);
-      });
-      return listener.remove;
-    }, [])
-  );
-
-  return { minutes, seconds, update };
-}