-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
111 lines (99 loc) · 3.26 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { StrictMode, useState, useEffect, createContext } from 'react';
import { StyleSheet, Text, View, SafeAreaView, Button, Pressable } from 'react-native';
import { TimerList } from './components/TimerList';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { FontAwesome6 } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';
import 'react-native-get-random-values';
import { v4 as uuidv4 } from 'uuid';
import { TimerContext } from './TimerContext';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
const Stack = createNativeStackNavigator();
class Timer {
constructor(name, durationInSeconds, id=uuidv4()) {
this.name = name;
this.durationInSeconds = durationInSeconds;
this.id = id;
}
}
const testTimers = [
{ name: "Poached Egg", durationInSeconds: 390, id: 1 },
{ name: "Plank", durationInSeconds: 45, id: 2 },
{ name: "how long i last", durationInSeconds: 5, id: 3 },
]
export default function App() {
const [timers, setTimers] = useState(null);
const getTimers = async () => {
try {
// await AsyncStorage.clear();
const jsonValue = await AsyncStorage.getItem('timers');
return jsonValue != null ? JSON.parse(jsonValue) : testTimers;
} catch (e) {
alert(e);
}
};
useEffect(() => {
getTimers().then(setTimers);
}, []);
const storeTimers = async () => {
try {
console.log("store:", timers);
const jsonValue = JSON.stringify(timers);
await AsyncStorage.setItem('timers', jsonValue);
} catch (e) {
alert(e);
}
};
useEffect(() => {
if (timers != null) {
storeTimers();
}
}, [timers]);
const updateTimersName = (id, name) => {
setTimers(timers.map(t => (t.id === id ? {...t, name: name} : t)));
}
const updateTimersDuration = (id, durationSecs) => {
setTimers(timers.map(t => (t.id === id ? {...t, durationInSeconds: durationSecs} : t)));
}
const addTimer = () => {
const newTimer = new Timer("New timer", 60)
setTimers([...timers, newTimer]);
}
const deleteTimer = (id) => {
setTimers(timers.filter((timer) => {
return timer.id !== id;
}));
}
return (
<StrictMode>
<GestureHandlerRootView style={{ flex: 1 }}>
<SafeAreaView style={styles.container}>
<TimerContext.Provider value={{ timers, updateTimersDuration, updateTimersName, deleteTimer }}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="TimerList" component={TimerList}
options={{
title: 'AutoTime',
headerRight: () => (
<Pressable onPress={addTimer}>
<FontAwesome6 name="plus" size={20} color="black" />
</Pressable>
)
}}
/>
</Stack.Navigator>
</NavigationContainer>
</TimerContext.Provider>
</SafeAreaView>
</GestureHandlerRootView>
</StrictMode>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ECECEC',
justifyContent: 'center',
},
});