Socket class added

whatsapp-client/package.json

@@ -17,6 +17,7 @@
         "@types/react-redux": "^7.1.18",
         "@types/redux-logger": "^3.0.9",
         "bson": "^4.5.2",
+        "peerjs": "^1.3.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-google-login": "^5.2.2",

whatsapp-client/src/components/ChatContainerBody/components/Messages/Picture.tsx

@@ -23,7 +23,7 @@ export const Picture = connect(
   mapDispatchToProps
 )(
   ({
-    id,
+    _id,
     msgPosition,
     msgParams,
     setGlobalModal,
@@ -69,7 +69,7 @@ export const Picture = connect(
         type: "viewMsgPreview",
         params: { messageType: "image" },
       });
-      setGlobalMsgInFocus(id);
+      setGlobalMsgInFocus(_id);
     };
 
     const downloadImg = () => {

whatsapp-client/src/components/ChatContainerBody/components/Messages/Video.tsx

@@ -37,7 +37,7 @@ export const Video = connect(
   passDispatchToProps
 )(
   ({
-    id,
+    _id,
     msgPosition,
     msgParams,
     timestamp,
@@ -70,7 +70,7 @@ export const Video = connect(
         type: "viewMsgPreview",
         params: {},
       });
-      setGlobalMsgInFocus(id);
+      setGlobalMsgInFocus(_id);
     };
 
     const downloadVideo = () => {

whatsapp-client/src/redux/peerjs/peerJs.ts

@@ -0,0 +1,3 @@
+import Peer from "peerjs";
+
+export const peer = new Peer();

whatsapp-client/src/redux/store.ts

@@ -8,6 +8,7 @@ import { getAccessToken } from "../utils/accessToken";
 import { setAuthFailed, setSocketConnectionSuccess } from "./reducers/auth";
 import { getActiveSocket, initializeSocket } from "./sockets/socketConnection";
 import { createSocketMiddleware } from "./middlewares/socketMiddleware";
+// import { SocketIO } from "../utils/socket";
 
 const sagaMiddleware = createSagaMiddleware();
 const socketMiddleware = createSocketMiddleware();
@@ -28,8 +29,14 @@ const store = configureStore({
     return;
   } else {
     await initializeSocket();
-    const socket = getActiveSocket();
-    if (socket) {
+    const socketConnected = getActiveSocket();
+    // const socket = new SocketIO(
+    //   process.env.REACT_APP_SERVER_URL as string,
+    //   getAccessToken()
+    // );
+    // console.log(socket);
+    // const socketConnected = socket.connectionStatus();
+    if (socketConnected) {
       store.dispatch(setSocketConnectionSuccess());
     }
     return;

whatsapp-client/src/utils/socket.ts

@@ -0,0 +1,125 @@
+import io, { Socket } from "socket.io-client";
+import { DefaultEventsMap } from "socket.io-client/build/typed-events";
+import { setAuthSuccess, socketDisconnected } from "../redux/reducers/auth";
+import {
+  getInitialChats,
+  recieveMessage,
+  sendMsgSuccessful,
+  setTotalAuthUsers,
+  updateActiveAuthUser,
+  updateAuthUsersInfo,
+  updateChats,
+  updateInactiveAuthUser,
+  updateTotalAuthUsers,
+} from "../redux/reducers/chat";
+import { setGlobalModal } from "../redux/reducers/globalModal";
+import store from "../redux/store";
+
+export class SocketIO {
+  private socket: Socket<DefaultEventsMap, DefaultEventsMap>;
+  private connected: boolean = false;
+
+  public constructor(serverUrl: string, accessToken: string) {
+    this.socket = io(serverUrl, {
+      // Set cred to false as no need to send cookies
+      withCredentials: false,
+      auth: (cb) => {
+        cb({
+          accessToken,
+        });
+      },
+    });
+
+    this.connect();
+  }
+
+  private async connect() {
+    return await new Promise((resolve) => {
+      this.socket.on("connect", () => {
+        this.configure();
+        resolve((this.connected = true));
+      });
+    });
+  }
+
+  private configure() {
+    // Socket Verified
+    this.socket?.on("signInSuccess", (mainPayload: any) => {
+      store.dispatch(setAuthSuccess(mainPayload));
+      store.dispatch(getInitialChats());
+      this.socket?.emit("getTotalUsers");
+
+      // Total Users
+      this.socket?.on("updateTotalUsers", (payload: string) => {
+        store.dispatch(updateTotalAuthUsers(payload));
+      });
+
+      // Update Users
+      this.socket?.on("setInitialTotalUsers", (payload: string) => {
+        store.dispatch(setTotalAuthUsers(payload));
+      });
+
+      // Handle User's active status
+      this.socket?.on("online", (payload: string) => {
+        store.dispatch(updateActiveAuthUser(payload));
+      });
+
+      // Handle User's inactive status
+      this.socket?.on("offline", (payload: string) => {
+        store.dispatch(updateInactiveAuthUser(payload));
+      });
+
+      // Message was successfully sent
+      this.socket.on("messageSentSuccessfully", (payload: any) => {
+        store.dispatch(sendMsgSuccessful(payload));
+      });
+
+      this.socket.on("recieveMessage", (payload: any) => {
+        store.dispatch(recieveMessage(payload));
+      });
+
+      this.socket.on("onOtherAuthUsersInfoUpdate", (payload: any) => {
+        store.dispatch(updateAuthUsersInfo(payload));
+      });
+
+      // // Handle others chat switches
+      // this.socket?.on("activeChatsSwitched", (payload: any) => {
+      //   store.dispatch(updateLastViewedChatsTimestampOfOtherUser(payload));
+      // });
+
+      // // Handle others active chats
+      // this.socket?.on("friendCurrentlyOn", (payload: any) => {
+      //   store.dispatch(updateOtherUsersActiveChat(payload));
+      // });
+
+      // Socket Disconnected
+      this.socket?.on("multipleSession", (payload: any) => {
+        store.dispatch(
+          setGlobalModal({
+            type: "multipleSession",
+            params: {},
+          })
+        );
+      });
+
+      this.socket?.on("updateExistingChats", (payload: any) => {
+        store.dispatch(updateChats(payload));
+      });
+
+      // Socket Disconnected
+      this.socket?.on("disconnect", (payload: any) => {
+        store.dispatch(socketDisconnected());
+      });
+    });
+  }
+
+  public connectionStatus() {
+    return this.connected;
+  }
+
+  public getActiveSocket() {
+    return this.socket;
+  }
+}
+
+// const v = new SocketIO();