#144 Add notifications

app.json

@@ -29,10 +29,13 @@
         "CAMERA",
         "RECORD_AUDIO",
         "READ_EXTERNAL_STORAGE",
-        "WRITE_EXTERNAL_STORAGE"
+        "WRITE_EXTERNAL_STORAGE",
+        "NOTIFICATIONS"
       ],
-      "versionCode": 13,
-      "softwareKeyboardLayoutMode": "pan"
+      "versionCode": 25,
+      "softwareKeyboardLayoutMode": "pan",
+      "useNextNotificationsApi": true,
+      "googleServicesFile": "./google-services.json"
     },
     "web": {
       "favicon": "./assets/favicon.png"

package.json

@@ -31,6 +31,7 @@
     "expo-google-sign-in": "^10.1.1",
     "expo-image-picker": "~12.0.1",
     "expo-linear-gradient": "~11.0.3",
+    "expo-notifications": "~0.14.0",
     "expo-random": "~12.1.1",
     "expo-status-bar": "~1.2.0",
     "expo-tracking-transparency": "~2.1.0",

src/hooks/useNotificationPermission.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import * as Notifications from 'expo-notifications';
+
+export const useNotificationPermission = () => {
+    const [token, setToken] = useState<string>(undefined);
+
+    const askNotificationPermission = async () => {
+        const { status: currentStatus } = await Notifications.requestPermissionsAsync();
+        return currentStatus;
+    }
+
+    useEffect(() => {
+        (
+            async () => {
+                let { status } = await Notifications.getPermissionsAsync();
+                if(status !== "granted") status = await askNotificationPermission();
+                if(status !== "granted") return alert("알림을 활성 해주세요 !");
+                const token = (await Notifications.getExpoPushTokenAsync()).data;
+                setToken(token);
+            }
+        )();
+    }, []);
+
+    return { token, isGranted: token !== undefined, askNotificationPermission };
+}

src/screens/Feed.tsx

@@ -2,11 +2,18 @@ import React, { FC, useCallback, useEffect, useMemo } from "react";
 import QuestionList from "components/QuestionList";
 import isStackContext from "context/IsStackContext";
 import { useQuestionList } from "queries/Question";
+import { useNotificationPermission } from "hooks/useNotificationPermission";
+import { postExpoToken } from "utils/api/notification";
 
 const size = 10;
 
 const Feed: FC = () => {
   const { data, fetchNextPage, isError } = useQuestionList(size);
+  const { isGranted, token } = useNotificationPermission();
+
+  useEffect(() => {
+    postExpoToken(token);
+  }, [isGranted]);
 
   const onQuestionEndReached = useCallback(() => {
     if (!isError) {

src/utils/api/notification/index.ts

@@ -0,0 +1,7 @@
+import { instance } from "utils/axios"
+
+export const postExpoToken = (token: string) => {
+    return instance.patch("/expo/token", {
+        token,
+    });
+}