eletrotupi / tcc/ frontend/app/notifications.tsxcb5d2d5c050efb38c5d440aba81f7bc1ded98c34
3.2 KB | 126 lines Raw
1
import {
2
  View,
3
  Text,
4
  StyleSheet,
5
  ScrollView,
6
  KeyboardAvoidingView,
7
  Platform,
8
  Alert,
9
} from 'react-native';
10
11
import {
12
  useState, useEffect
13
} from 'react';
14
import * as Notifications from 'expo-notifications';
15
import { useAuth } from "@/context/AuthContext";
16
17
import { StatusBar } from 'expo-status-bar';
18
import { SafeAreaView } from 'react-native-safe-area-context';
19
import { useThemeColor } from '@/hooks/use-theme-color';
20
import { Button } from '@/components/ui/Button';
21
22
export default function NotificationsPage() {
23
  const { user } = useAuth();
24
  const backgroundColor = useThemeColor({}, 'background');
25
  const [expoPushToken, setExpoPushToken] = useState(user.pushToken);
26
  const [notification, setNotification] = useState<Notifications.Notification | undefined>(
27
    undefined
28
  );
29
30
  useEffect(() => {
31
    const notificationListener = Notifications
32
    .addNotificationReceivedListener(notification => {
33
      setNotification(notification);
34
    });
35
36
    const responseListener = Notifications
37
    .addNotificationResponseReceivedListener(response => {
38
      console.log(response);
39
    });
40
41
    return () => {
42
      notificationListener.remove();
43
      responseListener.remove();
44
    };
45
  }, []);
46
47
  useEffect(() => {
48
    setExpoPushToken(user.pushToken)
49
  }, [user]);
50
51
  async function sendPushNotification(expoPushToken: string) {
52
    if (expoPushToken) {
53
      const message = {
54
        to: expoPushToken,
55
        sound: 'default',
56
        title: 'Oi meu querido',
57
        body: 'Vamo escutar um The Doors',
58
        data: { screen: 'notifications' },
59
      };
60
61
      const response = await fetch('https://exp.host/--/api/v2/push/send', {
62
        method: 'POST',
63
        headers: {
64
          Accept: 'application/json',
65
          'Accept-encoding': 'gzip, deflate',
66
          'Content-Type': 'application/json',
67
        },
68
        body: JSON.stringify(message),
69
      });
70
    }
71
  }
72
73
  return (
74
    <SafeAreaView style={[styles.container, { backgroundColor }]}>
75
      <StatusBar style={'dark'} />
76
      <KeyboardAvoidingView
77
        behavior='height'
78
        style={styles.keyboardView}
79
      >
80
        <ScrollView
81
          contentContainerStyle={styles.scrollContainer}
82
          showsVerticalScrollIndicator={false}
83
        >
84
        <View>
85
          <Text>
86
            Uma notificação!!!
87
          </Text>
88
        </View>
89
90
        <View style={{ alignItems: 'center', justifyContent: 'center' }}>
91
          <Text>Title: {notification && notification.request.content.title} </Text>
92
          <Text>Body: {notification && notification.request.content.body}</Text>
93
          <Text>Data: {notification && JSON.stringify(notification.request.content.data)}</Text>
94
        </View>
95
96
        <Button
97
          title="Quer ver uma coisa?"
98
          onPress={async () => {
99
            await sendPushNotification(expoPushToken);
100
          }}
101
        />
102
103
        </ScrollView>
104
      </KeyboardAvoidingView>
105
    </SafeAreaView>
106
  );
107
}
108
109
const styles = StyleSheet.create({
110
  container: {
111
    flex: 1,
112
  },
113
  keyboardView: {
114
    flex: 1,
115
  },
116
  scrollContainer: {
117
    flexGrow: 1,
118
    paddingHorizontal: 24,
119
    justifyContent: 'start',
120
    minHeight: '100%',
121
  },
122
  header: {
123
    alignItems: 'left',
124
    marginBottom: 40,
125
  },
126
});