/
App.tsx
60 lines (53 loc) · 1.81 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { TimerCountDownDisplay } from './src/components/TimerCountDownDisplay';
import { TimerToggleButton } from './src/components/TimerToggleButton';
import { TimerModeDisplay, TimerModes } from './src/components/TimerModeDisplay';
const FOCUS_TIME_MINUTES = 2 * 60 * 1000;
const BREAK_TIME_MINUTES = 1 * 60 * 1000;
export default function App() {
const [timerCount, setTimerCount] = useState<number>(FOCUS_TIME_MINUTES);
const [timerInterval, setTimerInterval] = useState<NodeJS.Timer|null>(null);
const [isTimerRunning, setIsTimerRunning] = useState<boolean>(false);
const [timerMode, setTimerMode] = useState<TimerModes>("Focus")
useEffect(()=>{
if(timerCount==0){
if(timerMode=='Focus'){
setTimerMode('Break');
setTimerCount(BREAK_TIME_MINUTES)
}else{
setTimerMode('Focus');
setTimerCount(FOCUS_TIME_MINUTES)
}
stopTimer();
}
},[timerCount])
const startTimer = () => {
setIsTimerRunning(true);
const id = setInterval(()=> setTimerCount(prev => prev - 1000), 1000)
setTimerInterval(id)
};
const stopTimer = () => {
if(timerInterval != null){
clearInterval(timerInterval);
}
setIsTimerRunning(false);
};
return (
<View style={styles.container}>
<StatusBar style="auto" />
<TimerModeDisplay timerMode={timerMode}/>
<TimerToggleButton isTimerRunning={isTimerRunning} startTimer={startTimer} stopTimer={stopTimer}/>
<TimerCountDownDisplay timerDate={new Date(timerCount)}/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#161922',
alignItems: 'center',
justifyContent: 'center',
},
});