forked from brandon.presley/Massive
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
This commit is contained in:
parent
47cfaa4b67
commit
a0dc62e761
2
App.tsx
2
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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
38
use-timer.ts
38
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 };
|
||||
}
|
Loading…
Reference in New Issue