Delete same notification if enter the channel. (#476)

* Delete same notification if enter the channel.

* Delete notification if user is in channel

Delete notification if user is in channel, but not alert.

* Format eslint

* Rename function `camelCase`

client/src/components/pages/Message.tsx

@@ -1,3 +1,5 @@
+import * as Notifications from 'expo-notifications';
+
 import {
   ActivityIndicator,
   Alert,
@@ -636,6 +638,51 @@ const MessageScreen: FC = () => {
     params: {channelId},
   } = useRoute<RouteProp<MainStackParamList, 'Message'>>();
 
+  // Delete notification if user is foreground in channel.
+  useEffect(() => {
+    const subscription = Notifications.addNotificationReceivedListener(
+      (notification) => {
+        const parsedNotificationData = JSON.parse(
+          notification.request.content.data.data as string,
+        );
+
+        if (parsedNotificationData.channelId === channelId) {
+          Notifications.dismissNotificationAsync(
+            notification.request.identifier,
+          );
+        }
+      },
+    );
+
+    return () => subscription.remove();
+  }, [channelId]);
+
+  useEffect(() => {
+    async function deleteSameChannelNotification(): Promise<void> {
+      const notifications =
+        await Notifications.getPresentedNotificationsAsync();
+
+      notifications.forEach((notificationData) => {
+        const {data: jsonString} = notificationData.request.content.data;
+
+        if (typeof jsonString === 'string') {
+          const {channelId: notificationChannelId} = JSON.parse(jsonString);
+
+          if (
+            typeof notificationChannelId === 'string' &&
+            notificationChannelId === channelId
+          ) {
+            Notifications.dismissNotificationAsync(
+              notificationData.request.identifier,
+            );
+          }
+        }
+      });
+    }
+
+    deleteSameChannelNotification();
+  }, [channelId]);
+
   const searchArgs: MessagesQueryVariables = {
     first: ITEM_CNT,
     channelId,