2022-09-26 01:38:25 +00:00
|
|
|
import {useFocusEffect} from '@react-navigation/native';
|
|
|
|
import React, {useCallback, useEffect, useState} from 'react';
|
|
|
|
import {NativeModules, View} from 'react-native';
|
|
|
|
import {Button, Text} from 'react-native-paper';
|
|
|
|
import {MARGIN, PADDING} from './constants';
|
|
|
|
import {
|
|
|
|
getNext,
|
|
|
|
getSettings,
|
|
|
|
settings,
|
|
|
|
updateSettings,
|
|
|
|
} from './settings.service';
|
|
|
|
|
|
|
|
export default function TimerPage() {
|
|
|
|
const [next, setNext] = useState(new Date());
|
|
|
|
const [ms, setMs] = useState(0);
|
|
|
|
const [intervalId, setIntervalId] = useState(0);
|
|
|
|
|
|
|
|
const seconds =
|
|
|
|
ms > 0
|
|
|
|
? Math.floor((ms / 1000) % 60)
|
|
|
|
.toString()
|
|
|
|
.padStart(2, '0')
|
|
|
|
: '00';
|
|
|
|
|
|
|
|
const minutes =
|
|
|
|
ms > 0
|
|
|
|
? Math.floor(ms / 1000 / 60)
|
|
|
|
.toString()
|
|
|
|
.padStart(2, '0')
|
|
|
|
: '00';
|
|
|
|
|
|
|
|
useFocusEffect(
|
|
|
|
useCallback(() => {
|
|
|
|
getNext().then(nextIso =>
|
|
|
|
setNext(nextIso ? new Date(nextIso) : new Date()),
|
|
|
|
);
|
|
|
|
}, []),
|
|
|
|
);
|
|
|
|
|
|
|
|
const tick = (date: Date) => {
|
|
|
|
const remaining = date.getTime() - new Date().getTime();
|
2022-09-26 06:13:24 +00:00
|
|
|
console.log(`${TimerPage.name}.useEffect`, {remaining});
|
|
|
|
if (remaining <= 0) return;
|
2022-09-26 01:38:25 +00:00
|
|
|
setMs(remaining);
|
|
|
|
};
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
console.log(`${TimerPage.name}.useEffect:`, {next});
|
|
|
|
const date = next || new Date();
|
2022-09-26 06:13:24 +00:00
|
|
|
tick(date);
|
2022-09-26 01:38:25 +00:00
|
|
|
const id = setInterval(() => {
|
2022-09-26 06:13:24 +00:00
|
|
|
tick(date);
|
2022-09-26 01:38:25 +00:00
|
|
|
}, 1000);
|
|
|
|
setIntervalId(oldId => {
|
|
|
|
clearInterval(oldId);
|
|
|
|
return id;
|
|
|
|
});
|
|
|
|
return () => clearInterval(id);
|
|
|
|
}, [next]);
|
|
|
|
|
|
|
|
const stop = () => {
|
|
|
|
NativeModules.AlarmModule.stop();
|
|
|
|
setNext(new Date());
|
|
|
|
updateSettings({...settings, nextAlarm: undefined});
|
|
|
|
getSettings();
|
|
|
|
tick(new Date());
|
|
|
|
setMs(0);
|
|
|
|
};
|
|
|
|
|
|
|
|
const add = async () => {
|
|
|
|
console.log(`${TimerPage.name}.add:`, {intervalId, next});
|
|
|
|
const date = next || new Date();
|
|
|
|
date.setTime(date.getTime() + 1000 * 60);
|
|
|
|
await updateSettings({...settings, nextAlarm: date.toISOString()});
|
|
|
|
setNext(date);
|
|
|
|
NativeModules.AlarmModule.add(ms, !!settings.vibrate, settings.sound);
|
|
|
|
tick(date);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<View style={{padding: PADDING, alignItems: 'center'}}>
|
|
|
|
<Text>
|
|
|
|
{minutes}:{seconds}
|
|
|
|
</Text>
|
|
|
|
<Button style={{marginTop: MARGIN}} onPress={stop}>
|
|
|
|
Stop
|
|
|
|
</Button>
|
|
|
|
<Button style={{marginTop: MARGIN}} onPress={add}>
|
|
|
|
Add 1 min
|
|
|
|
</Button>
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|