[WIP] Integrate mobile app notification API

.env.dev

@@ -1,6 +1,7 @@
 SSL_PINNING_CERT_NAME=thaialert-dev
 API_URL=https://api.dev.thaialert.com
+NOTIFICATION_API_URL=https://notification.dev.thaialert.com
 SHOP_QR_PINNING_CERT=shopqr-dev
 SHOP_API_URL=https://api-dev.covid.odds.team
 SHOP_API_NAME=morchana-app
-SHOP_API_KEY=qWjchJvz5cMRBk3EUeFPBhkUXybUBSaPTkVacsUfVztkzqHRQKZCT
+SHOP_API_KEY=qWjchJvz5cMRBk3EUeFPBhkUXybUBSaPTkVacsUfVztkzqHRQKZCT

.env.example

@@ -1,3 +1,4 @@
 SSL_PINNING_CERT_NAME=
 API_URL=
-API_KEY=
+API_KEY=
+NOTIFICATION_API_URL=

.prettierrc

@@ -2,6 +2,5 @@
   "semi": false,
   "trailingComma": "all",
   "singleQuote": true,
-  "no-func-assign": false,
   "proseWrap": "always"
 }

android/build.gradle

@@ -15,6 +15,7 @@ buildscript {
         appCompatVersion = "1.0.2"
         supportV4Version = "1.0.0"
         mediaCompatVersion = "1.0.1"
+        firebaseMessagingVersion = '21.1.0'
     }
     repositories {
         jcenter()
@@ -62,4 +63,4 @@ subprojects {
                 }
             }
     }
-}
+}

i18n/locales/en.js

@@ -80,11 +80,9 @@ export default {
   settings: 'Settings',
   risk: 'risk',
   scan_result: 'scan result',
-  low_risk: 'Low Risk',
   data_at: 'data at',
   por_sor: 'BE',
   scan_again: 'scan again',
-  risk_level: 'risk level',
   wrong_data: 'wrong data',
   record_contact_and_estimate_risk: 'Record Contact and Estimate Risk',
   already_registered: 'already registered',
@@ -273,4 +271,6 @@ export default {
   back: 'BACK',
   change_lang: 'Change Language',
   beacon_header: 'Found Beacon',
+  notification_history: 'Notification',
+  notification_history_empty: 'This list is empty.',
 }

i18n/locales/th.js

@@ -79,11 +79,9 @@ export default {
   settings: 'ตั้งค่า',
   risk: 'ความเสี่ยง',
   scan_result: 'ผลลัพธ์การสแกน',
-  low_risk: 'เสี่ยงน้อย',
   data_at: 'ข้อมูลวันที่',
   por_sor: 'พ.ศ',
   scan_again: 'สแกนใหม่อีกครั้ง',
-  risk_level: 'ระดับความเสี่ยง',
   wrong_data: 'ข้อมูลไม่ถูกต้อง',
   record_contact_and_estimate_risk:
     'เพื่อบันทึกการเข้าใกล้และตรวจสอบความเสี่ยง',
@@ -271,4 +269,6 @@ export default {
   change_lang: 'เปลี่ยนภาษา',
   back: 'ย้อนกลับ',
   beacon_header: 'คุณได้พบ Beacon',
+  notification_history: 'แจ้งเตือน',
+  notification_history_empty: 'ไม่มีการแจ้งเตือน',
 }

src/App.tsx

@@ -37,6 +37,7 @@ class App extends React.Component {
   state: {
     loaded: boolean
     activateCallback?: Function
+    notificationTriggerNumber?: number
   }
   appState: AppStateStatus
   constructor(props) {
@@ -116,6 +117,8 @@ class App extends React.Component {
     pushNotification.configure(this.onNotification)
   }
   onNotification = (notification) => {
+    this.setState({notificationTriggerNumber:(this.state.notificationTriggerNumber ?? 0) + 1})
+
     const notificationData = notification?.data?.data || notification?.data
     if (!notificationData?.type) {
       return
@@ -150,6 +153,7 @@ class App extends React.Component {
         <ContactTracerProvider
           anonymousId={userPrivateData.getAnonymousId()}
           isPassedOnboarding={applicationState.getData('isPassedOnboarding')}
+          notificationTriggerNumber={this.state.notificationTriggerNumber ?? 0}
         >
           <SafeAreaProvider>
             <HUDProvider>

src/api-notification.ts

@@ -0,0 +1,58 @@
+import _ from 'lodash'
+import { fetch } from 'react-native-ssl-pinning'
+import { getAnonymousHeaders } from './api'
+import { NOTIFICATION_API_URL, SSL_PINNING_CERT_NAME } from './config'
+import { NotificationHistoryModel } from './navigations/3-MainApp/NotificationHistory'
+
+export const getNotifications = async (param: {
+  skip?: number
+  limit?: number
+}) => {
+  try {
+    const res = await fetch(
+      NOTIFICATION_API_URL +
+        '/notifications' +
+        (param
+          ? `?${new URLSearchParams(param as Record<string, string>)}`
+          : ''),
+      {
+        sslPinning: {
+          certs: [SSL_PINNING_CERT_NAME],
+        },
+        headers: getAnonymousHeaders(),
+        method: 'GET',
+      },
+    )
+    const json = await res.json()
+
+    if (_.isArray(json)) {
+      return json as NotificationHistoryModel[]
+    }
+  } catch (error) {
+    // console.error('Failed', json);
+  }
+
+  return []
+}
+
+/*
+export const patchNotifications = async () => {
+  try {
+    const res = await fetch(NOTIFICATION_API_URL + '/notifications', {
+      sslPinning: {
+        certs: [SSL_PINNING_CERT_NAME],
+      },
+      headers: getAnonymousHeaders(),
+      method: 'PATCH',
+    })
+    const text = await res.text()
+    console.log('patchNotifications', text)
+
+  } catch (error) {
+    // console.error('Failed', json);
+    return 'failed' as const
+  }
+
+  return 'ok' as const
+}
+*/

src/config.ts

@@ -15,4 +15,7 @@ export const PUBLIC_KEY_PINNING_CERT = Config.PUBLIC_KEY_PINNING_CERT
 export const SHOP_API_NAME = Config.SHOP_API_NAME
 export const SHOP_API_KEY = Config.SHOP_API_KEY
 export const SHOP_API_URL = Config.SHOP_API_URL
-export const SHOP_QR_PINNING_CERT = Config.SHOP_QR_PINNING_CERT
+export const SHOP_QR_PINNING_CERT = Config.SHOP_QR_PINNING_CERT
+
+// Notification api config
+export const NOTIFICATION_API_URL = Config.NOTIFICATION_API_URL

src/navigations/3-MainApp/MainApp/UpdateProfileButton.tsx

@@ -37,7 +37,7 @@ export const UpdateProfileButton = ({ width, style, onChange }) => {
               if (daySinceCreated >= 3) {
                 Alert.alert(
                   I18n.t('are_you_sure'),
-                  `I18n.t('after_changed_pic_you_will_not_be_able_to_change_until') ${DEFAULT_PERIODS} I18n.t('day_s_have_passed')`,
+                  `${I18n.t('after_changed_pic_you_will_not_be_able_to_change_until')} ${DEFAULT_PERIODS} ${I18n.t('day_s_have_passed')}`,
                   [
                     { text: I18n.t('cancel'), style: 'cancel' },
                     {

src/navigations/3-MainApp/MainAppStack.tsx

@@ -11,7 +11,7 @@ import { MainApp } from './NewMainApp'
 import { MainAppFaceCamera } from './MainAppFaceCamera'
 import { QRCodeScan } from './QRCodeScan'
 import { Settings } from './Settings'
-
+import { NotificationHistory } from './NotificationHistory'
 import I18n from '../../../i18n/i18n';
 
 const TabBarLabel = ({ title, focused }: any) => {
@@ -76,8 +76,23 @@ export const MainAppTab = createBottomTabNavigator(
         ),
       },
     },
-    // Notification: {
-    //   screen: Settings,
+    NotificationHistory: {
+      screen: NotificationHistory,
+      navigationOptions: {
+        tabBarLabel: ({ focused }: any) => (
+          <TabBarLabel title={I18n.t('notification_history')} focused={focused} />
+        ),
+        tabBarIcon: ({ focused }: any) => (
+          <AntIcon
+            name="bells"
+            color={focused ? '#303342' : COLORS.GRAY_2}
+            size={16}
+          />
+        ),
+      },
+    },
+    // Debug: {
+    //   screen: Debug,
     //   navigationOptions: {
     //     tabBarLabel: ({ focused }: any) => (
     //       <TabBarLabel title={I18n.t('settings')} focused={focused} />

src/navigations/3-MainApp/NewMainApp/UpdateProfileButton.tsx

@@ -37,7 +37,7 @@ export const UpdateProfileButton = ({ width, style, onChange }) => {
               if (daySinceCreated >= 3) {
                 Alert.alert(
                   I18n.t('are_you_sure'),
-                  `I18n.t('after_changed_pic_you_will_not_be_able_to_change_until') ${DEFAULT_PERIODS} I18n.t('day_s_have_passed')`,
+                  `${I18n.t('after_changed_pic_you_will_not_be_able_to_change_until')} ${DEFAULT_PERIODS} ${I18n.t('day_s_have_passed')}`,
                   [
                     { text: I18n.t('cancel'), style: 'cancel' },
                     {