-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathApp.js
88 lines (78 loc) · 2.23 KB
/
App.js
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React, {useEffect, useState} from 'react';
import {Dimensions, StatusBar, StyleSheet, View} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {Focus} from './src/features/focus/Focus';
import {FocusHistory} from './src/features/focus/focusHistory';
import {Timer} from './src/features/timer/Timer';
import {uuidv4} from './src/utils/uuid';
import {colors} from './src/utils/colors';
const {height, width} = Dimensions.get('window');
const App = () => {
const [focusSubject, setFocusSubject] = useState(null);
const [focusHistory, setFocusHistory] = useState([]);
const saveFocusHistory = async () => {
try {
AsyncStorage.setItem('focusHistory', JSON.stringify(focusHistory));
} catch (e) {
console.log(e);
}
};
const loadFocusHistory = async () => {
try {
const history = await AsyncStorage.getItem('focusHistory');
if (history && JSON.parse(history).length) {
setFocusHistory(JSON.parse(history));
}
} catch (e) {
console.log(e);
}
};
useEffect(() => {
loadFocusHistory();
}, []);
useEffect(() => {
saveFocusHistory();
}, [focusHistory]);
return (
<View style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor={colors.primary} />
{focusSubject ? (
<Timer
focusSubject={focusSubject}
onTimerEnd={() => {
setFocusHistory([
...focusHistory,
{subject: focusSubject, status: 1, key: uuidv4()},
]);
setFocusSubject(null);
}}
onCancel={() => {
setFocusHistory([
...focusHistory,
{subject: focusSubject, status: 0, key: uuidv4()},
]);
setFocusSubject(null);
}}
/>
) : (
<>
<Focus addSubject={setFocusSubject} />
<FocusHistory
focusHistory={focusHistory}
setFocusHistory={setFocusHistory}
/>
</>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.primary,
height: height,
width: width,
position: 'absolute',
},
});
export default App;