132 lines
3.9 KiB
TypeScript
132 lines
3.9 KiB
TypeScript
import { useState, useEffect, useRef } from "react";
|
|
import { Text, View, Button, Platform } from "react-native";
|
|
import * as Device from "expo-device";
|
|
import * as Notifications from "expo-notifications";
|
|
import Constants from "expo-constants";
|
|
import { Session } from "@supabase/supabase-js";
|
|
import { supabase } from "../lib/supabase";
|
|
|
|
Notifications.setNotificationHandler({
|
|
handleNotification: async () => ({
|
|
shouldShowAlert: true,
|
|
shouldPlaySound: false,
|
|
shouldSetBadge: false,
|
|
}),
|
|
});
|
|
|
|
// Can use this function below or use Expo's Push Notification Tool from: https://expo.dev/notifications
|
|
async function sendPushNotification(expoPushToken: string) {
|
|
const message = {
|
|
to: expoPushToken,
|
|
sound: "default",
|
|
title: "Original Title",
|
|
body: "And here is the body!",
|
|
data: { someData: "goes here" },
|
|
};
|
|
|
|
await fetch("https://exp.host/--/api/v2/push/send", {
|
|
method: "POST",
|
|
headers: {
|
|
Accept: "application/json",
|
|
"Accept-encoding": "gzip, deflate",
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(message),
|
|
});
|
|
}
|
|
|
|
async function registerForPushNotificationsAsync() {
|
|
let token;
|
|
|
|
if (Platform.OS === "android") {
|
|
Notifications.setNotificationChannelAsync("default", {
|
|
name: "default",
|
|
importance: Notifications.AndroidImportance.MAX,
|
|
vibrationPattern: [0, 250, 250, 250],
|
|
lightColor: "#FF231F7C",
|
|
});
|
|
}
|
|
|
|
if (Device.isDevice) {
|
|
const { status: existingStatus } =
|
|
await Notifications.getPermissionsAsync();
|
|
let finalStatus = existingStatus;
|
|
if (existingStatus !== "granted") {
|
|
const { status } = await Notifications.requestPermissionsAsync();
|
|
finalStatus = status;
|
|
}
|
|
if (finalStatus !== "granted") {
|
|
alert("Failed to get push token for push notification!");
|
|
return "";
|
|
}
|
|
token = await Notifications.getExpoPushTokenAsync({
|
|
projectId: Constants?.expoConfig?.extra?.eas.projectId,
|
|
});
|
|
console.log(token);
|
|
} else {
|
|
alert("Must use physical device for Push Notifications");
|
|
}
|
|
|
|
return token?.data ?? "";
|
|
}
|
|
|
|
export default function Push({ session }: { session: Session }) {
|
|
const [expoPushToken, setExpoPushToken] = useState("");
|
|
const [notification, setNotification] =
|
|
useState<Notifications.Notification>();
|
|
const notificationListener = useRef<Notifications.Subscription>();
|
|
const responseListener = useRef<Notifications.Subscription>();
|
|
|
|
useEffect(() => {
|
|
registerForPushNotificationsAsync().then(async (token) => {
|
|
setExpoPushToken(token);
|
|
|
|
const { error } = await supabase
|
|
.from("profiles")
|
|
.upsert({ id: session?.user.id, expo_push_token: token });
|
|
console.log(error);
|
|
});
|
|
|
|
notificationListener.current =
|
|
Notifications.addNotificationReceivedListener((notification) => {
|
|
setNotification(notification);
|
|
});
|
|
|
|
responseListener.current =
|
|
Notifications.addNotificationResponseReceivedListener((response) => {
|
|
console.log(response);
|
|
});
|
|
|
|
return () => {
|
|
Notifications.removeNotificationSubscription(
|
|
notificationListener.current!
|
|
);
|
|
Notifications.removeNotificationSubscription(responseListener.current!);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<View
|
|
style={{ flex: 1, alignItems: "center", justifyContent: "space-around" }}
|
|
>
|
|
<Text>Your expo push token: {expoPushToken}</Text>
|
|
<View style={{ alignItems: "center", justifyContent: "center" }}>
|
|
<Text>
|
|
Title: {notification && notification.request.content.title}{" "}
|
|
</Text>
|
|
<Text>Body: {notification && notification.request.content.body}</Text>
|
|
<Text>
|
|
Data:{" "}
|
|
{notification && JSON.stringify(notification.request.content.data)}
|
|
</Text>
|
|
</View>
|
|
<Button
|
|
title="Press to Send Notification"
|
|
onPress={async () => {
|
|
await sendPushNotification(expoPushToken);
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|