IO-1551 Refactor messaging.

client/src/components/chat-affix/chat-affix.component.jsx

@@ -1,43 +0,0 @@
-import { MessageOutlined } from "@ant-design/icons";
-import { Badge, Card } from "antd";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { toggleChatVisible } from "../../redux/messaging/messaging.actions";
-import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
-import ChatPopupComponent from '../chat-popup/chat-popup.component'
-
-const mapStateToProps = createStructuredSelector({
-  chatVisible: selectChatVisible,
-});
-const mapDispatchToProps = (dispatch) => ({
-  toggleChatVisible: () => dispatch(toggleChatVisible()),
-});
-
-export function ChatAffixComponent({
-  chatVisible,
-  toggleChatVisible,
-  conversationList,
-  unreadCount,
-}) {
-  const { t } = useTranslation();
-
-  return (
-    <Badge count={unreadCount}>
-      <Card size='small'>
-        {chatVisible ? (
-          <ChatPopupComponent conversationList={conversationList} />
-        ) : (
-          <div
-            onClick={() => toggleChatVisible()}
-            style={{ cursor: "pointer" }}>
-            <MessageOutlined />
-            <strong>{t("messaging.labels.messaging")}</strong>
-          </div>
-        )}
-      </Card>
-    </Badge>
-  );
-}
-export default connect(mapStateToProps, mapDispatchToProps)(ChatAffixComponent);

client/src/components/chat-affix/chat-affix.container.jsx

@@ -1,13 +1,16 @@
-import { useSubscription } from "@apollo/client";
-import React from "react";
+import { useApolloClient } from "@apollo/client";
+import { getToken, onMessage } from "@firebase/messaging";
+import { Button, notification, Space } from "antd";
+import axios from "axios";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries";
+import { messaging, requestForToken } from "../../firebase/firebase.utils";
 import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import AlertComponent from "../alert/alert.component";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import ChatAffixComponent from "./chat-affix.component";
+import FcmHandler from "../../utils/fcm-handler";
+import ChatPopupComponent from "../chat-popup/chat-popup.component";
 import "./chat-affix.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
@@ -16,32 +19,85 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function ChatAffixContainer({ bodyshop, chatVisible }) {
-  const { loading, error, data } = useSubscription(
-    CONVERSATION_LIST_SUBSCRIPTION,
-    {
-      skip: !bodyshop || (bodyshop && !bodyshop.messagingservicesid),
-    }
-  );
+  const { t } = useTranslation();
+  const client = useApolloClient();
+  useEffect(() => {
+    if (!bodyshop || !bodyshop.messagingservicesid) return;
 
-  if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+    async function SubscribeToTopic() {
+      try {
+        const r = await axios.post("/notifications/subscribe", {
+          fcm_tokens: await getToken(messaging, {
+            vapidKey: process.env.REACT_APP_FIREBASE_PUBLIC_VAPID_KEY,
+          }),
+          type: "messaging",
+          imexshopid: bodyshop.imexshopid,
+        });
+        console.log("FCM Topic Subscription", r.data);
+      } catch (error) {
+        console.log(
+          "Error attempting to subscribe to messaging topic: ",
+          error
+        );
+        notification.open({
+          type: "warning",
+          message: t("general.errors.fcm"),
+          btn: (
+            <Space>
+              <Button
+                onClick={async () => {
+                  const resp = await requestForToken();
+                  console.log(
+                    "🚀  ~ file: chat-affix.container.jsx  ~ line 44  ~ resp",
+                    resp
+                  );
+                  SubscribeToTopic();
+                }}
+              >
+                {t("general.actions.tryagain")}
+              </Button>
+              <Button
+                onClick={() => {
+                  const win = window.open(
+                    "https://help.imex.online/en/article/enabling-notifications-o978xi/",
+                    "_blank"
+                  );
+                  win.focus();
+                }}
+              >
+                {t("general.labels.help")}
+              </Button>
+            </Space>
+          ),
+        });
+      }
+    }
+
+    SubscribeToTopic();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bodyshop]);
+
+  useEffect(() => {
+    function handleMessage(payload) {
+      FcmHandler({
+        client,
+        payload: (payload && payload.data && payload.data.data) || payload.data,
+      });
+    }
+    const stopMessageListenr = onMessage(messaging, handleMessage);
+    const channel = new BroadcastChannel("imex-sw-messages");
+    channel.addEventListener("message", handleMessage);
+    return () => {
+      stopMessageListenr();
+      channel.removeEventListener("message", handleMessage);
+    };
+  }, [client]);
 
   if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
 
   return (
     <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      {bodyshop && bodyshop.messagingservicesid ? (
-        <ChatAffixComponent
-          conversationList={(data && data.conversations) || []}
-          unreadCount={
-            (data &&
-              data.conversations.reduce((acc, val) => {
-                return (acc = acc + val.messages_aggregate.aggregate.count);
-              }, 0)) ||
-            0
-          }
-        />
-      ) : null}
+      {bodyshop && bodyshop.messagingservicesid ? <ChatPopupComponent /> : null}
     </div>
   );
 }