1import React from 'react';
2import * as TaskManager from 'expo-task-manager';
3import { NavigationEvents, NavigationScreenProps } from 'react-navigation';
4import { ScrollView, StyleSheet, View } from 'react-native';
5
6import Button from '../components/Button';
7import MonoText from '../components/MonoText';
8import HeadingText from '../components/HeadingText';
9
10interface State {
11  tasks?: TaskManager.RegisteredTask[];
12}
13
14export default class TaskManagerScreen extends React.Component<NavigationScreenProps, State> {
15  static navigationOptions = {
16    title: 'TaskManager',
17  };
18
19  readonly state: State = {};
20
21  componentDidMount() {
22    this.updateRegisteredTasks();
23  }
24
25  updateRegisteredTasks = async () => {
26    const tasks = await TaskManager.getRegisteredTasksAsync();
27    this.setState({ tasks });
28  }
29
30  unregisterTask = async (taskName: string) => {
31    await TaskManager.unregisterTaskAsync(taskName);
32    await this.updateRegisteredTasks();
33  }
34
35  unregisterAllTasks = async () => {
36    await TaskManager.unregisterAllTasksAsync();
37    await this.updateRegisteredTasks();
38  }
39
40  renderButtons() {
41    const { tasks } = this.state;
42    const buttons = tasks!.map(({ taskName }) => {
43      return (
44        <Button
45          key={taskName}
46          style={styles.button}
47          title={`Unregister '${taskName}'`}
48          onPress={() => this.unregisterTask(taskName)}
49        />
50      );
51    });
52
53    return (
54      <View style={styles.buttons}>
55        {buttons}
56        {tasks!.length > 0 && (
57          <Button
58            style={styles.button}
59            buttonStyle={{ backgroundColor: 'red' }}
60            title="Unregister all tasks"
61            onPress={this.unregisterAllTasks}
62          />
63        )}
64        {this.renderNavigationButtons()}
65      </View>
66    );
67  }
68
69  renderNavigationButtons() {
70    return (
71      <View>
72        <Button
73          style={styles.button}
74          buttonStyle={{ backgroundColor: 'green' }}
75          title="Go to background location screen"
76          onPress={() => this.props.navigation.navigate('BackgroundLocationMap')}
77        />
78        <Button
79          style={styles.button}
80          buttonStyle={{ backgroundColor: 'green' }}
81          title="Go to geofencing screen"
82          onPress={() => this.props.navigation.navigate('Geofencing')}
83        />
84        <Button
85          style={styles.button}
86          buttonStyle={{ backgroundColor: 'green' }}
87          title="Go to background fetch screen"
88          onPress={() => this.props.navigation.navigate('BackgroundFetch')}
89        />
90      </View>
91    );
92  }
93
94  renderContent() {
95    const { tasks } = this.state;
96
97    if (!tasks) {
98      return null;
99    }
100
101    return (
102      <ScrollView contentContainerStyle={styles.container}>
103        <HeadingText>Registered tasks</HeadingText>
104        <MonoText>{JSON.stringify(tasks, null, 2)}</MonoText>
105        {this.renderButtons()}
106      </ScrollView>
107    );
108  }
109
110  render() {
111    return (
112      <View style={styles.screen}>
113        <NavigationEvents onDidFocus={this.updateRegisteredTasks} />
114        {this.renderContent()}
115      </View>
116    );
117  }
118}
119
120const styles = StyleSheet.create({
121  screen: {
122    flex: 1,
123  },
124  container: {
125    padding: 10,
126  },
127  buttons: {
128    padding: 10,
129  },
130  button: {
131    marginVertical: 10,
132  },
133});
134