Added notification generation on SMS. Added FCM Token saving on login.

client/src/App/App.container.jsx

@@ -9,13 +9,12 @@ import apolloLogger from "apollo-link-logger";
 import { RetryLink } from "apollo-link-retry";
 import { WebSocketLink } from "apollo-link-ws";
 import { getMainDefinition } from "apollo-utilities";
+import LogRocket from "logrocket";
 import React, { Component } from "react";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
-import { auth, messaging } from "../firebase/firebase.utils";
+import { auth } from "../firebase/firebase.utils";
 import errorLink from "../graphql/apollo-error-handling";
 import App from "./App";
-import LogRocket from "logrocket";
-import { notification } from "antd";
 
 if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp");
 
@@ -117,29 +116,6 @@ export default class AppContainer extends Component {
     this.state = { client };
   }
 
-  async componentDidMount() {
-    messaging
-      .requestPermission()
-      .then(async function () {
-        const token = await messaging.getToken();
-        console.log("messaging -> token", token);
-      })
-      .catch(function (err) {
-        console.log("Unable to get permission to notify.", err);
-      });
-    navigator.serviceWorker.addEventListener("message", (message) => {
-      console.log("Comp Did Mount", message);
-      notification["info"]({ message: JSON.stringify(message.data) });
-      navigator.serviceWorker
-        .getRegistration()
-        .then((registration) =>
-          registration.showNotification(
-            "Comp Did" + JSON.stringify(message.data)
-          )
-        );
-    });
-  }
-
   render() {
     const { client } = this.state;
 

client/src/components/fcm-notification/fcm-notification.component.jsx

@@ -0,0 +1,60 @@
+import { notification } from "antd";
+import React, { Component } from "react";
+import { messaging } from "../../firebase/firebase.utils";
+import { withApollo } from "react-apollo";
+import { UPDATE_FCM_TOKEN } from "../../graphql/user.queries";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectCurrentUser } from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+class FcmNotificationComponent extends Component {
+  async componentDidMount() {
+    const { client, currentUser } = this.props;
+    messaging
+      .requestPermission()
+      .then(async function () {
+        const token = await messaging.getToken();
+
+        client.mutate({
+          mutation: UPDATE_FCM_TOKEN,
+          variables: { authEmail: currentUser.email, token: { [token]: true } },
+        });
+      })
+      .catch(function (err) {
+        console.log("Unable to get permission to notify.", err);
+      });
+    navigator.serviceWorker.addEventListener("message", (message) => {
+      const { payload } = message.data.firebaseMessaging;
+      // notification["info"]({ message: JSON.stringify(payload) });
+
+      navigator.serviceWorker.getRegistration().then((registration) =>
+        registration.showNotification(payload.notification.title, {
+          body: payload.notification.body,
+          icon: "logo240.png",
+          badge: "logo240.png",
+          actions: [
+            {
+              action: "respond",
+              title: "Respond",
+            },
+          ],
+        })
+      );
+    });
+  }
+
+  render() {
+    return <div></div>;
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withApollo(FcmNotificationComponent));

client/src/graphql/user.queries.js

@@ -1,7 +1,7 @@
 import { gql } from "apollo-boost";
 
 export const UPSERT_USER = gql`
-  mutation upsert_user($authEmail: String!, $authToken: String!) {
+  mutation UPSERT_USER($authEmail: String!, $authToken: String!) {
     insert_users(
       objects: [{ email: $authEmail, authid: $authToken }]
       on_conflict: { constraint: users_pkey, update_columns: [authid] }
@@ -12,3 +12,17 @@ export const UPSERT_USER = gql`
     }
   }
 `;
+
+export const UPDATE_FCM_TOKEN = gql`
+  mutation UPDATE_FCM_TOKEN($authEmail: String!, $token: jsonb!) {
+    update_users(
+      where: { email: { _eq: $authEmail } }
+      _append: { fcmtokens: $token }
+    ) {
+      affected_rows
+      returning {
+        fcmtokens
+      }
+    }
+  }
+`;

client/src/pages/manage/manage.page.component.jsx

@@ -11,7 +11,7 @@ import "./manage.page.styles.scss";
 import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
 import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
-
+import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
 const ManageRootPage = lazy(() =>
   import("../manage-root/manage-root.page.container")
 );
@@ -100,6 +100,7 @@ export default function Manage({ match }) {
         <Content
           className='content-container'
           style={{ padding: "0em 4em 4em" }}>
+          <FcmNotification />
           <ErrorBoundary>
             <Suspense
               fallback={