start work on video call

package-lock.json

@@ -57,6 +57,8 @@
         "redux-logger": "^3.0.6",
         "redux-persist": "^6.0.0",
         "redux-toolkit": "^1.1.2",
+        "simple-peer": "^9.11.1",
+        "socket.io-client": "^4.5.1",
         "typescript": "^4.3.5",
         "uuid": "^8.3.1",
         "video-react": "^0.15.0",
@@ -2899,6 +2901,11 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz",
@@ -6976,14 +6983,19 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
       "dependencies": {
         "ms": "2.1.2"
       },
       "engines": {
         "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
     "node_modules/decamelize": {
@@ -7608,6 +7620,46 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.2.tgz",
+      "integrity": "sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
+      "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz",
@@ -7671,6 +7723,11 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
       "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
     },
+    "node_modules/err-code": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz",
+      "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA=="
+    },
     "node_modules/errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -9661,6 +9718,11 @@
         "@scena/event-emitter": "^1.0.2"
       }
     },
+    "node_modules/get-browser-rtc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz",
+      "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ=="
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -17949,6 +18011,25 @@
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
       "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -20014,6 +20095,57 @@
         "simple-concat": "^1.0.0"
       }
     },
+    "node_modules/simple-peer": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz",
+      "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "debug": "^4.3.2",
+        "err-code": "^3.0.1",
+        "get-browser-rtc": "^1.1.0",
+        "queue-microtask": "^1.2.3",
+        "randombytes": "^2.1.0",
+        "readable-stream": "^3.6.0"
+      }
+    },
+    "node_modules/simple-peer/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -20187,6 +20319,32 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "node_modules/socket.io-client": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.1.tgz",
+      "integrity": "sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.1",
+        "socket.io-parser": "~4.2.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+      "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
@@ -23795,6 +23953,14 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -26256,6 +26422,11 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz",
@@ -29721,9 +29892,9 @@
       "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
     },
     "debug": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
       "requires": {
         "ms": "2.1.2"
       }
@@ -30265,6 +30436,31 @@
         "once": "^1.4.0"
       }
     },
+    "engine.io-client": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.2.tgz",
+      "integrity": "sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
+      "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg=="
+    },
     "enhanced-resolve": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz",
@@ -30321,6 +30517,11 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
       "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
     },
+    "err-code": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz",
+      "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA=="
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -31961,6 +32162,11 @@
         "@scena/event-emitter": "^1.0.2"
       }
     },
+    "get-browser-rtc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz",
+      "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ=="
+    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -38670,6 +38876,11 @@
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
       "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
     },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
+    },
     "raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -40390,6 +40601,31 @@
         "simple-concat": "^1.0.0"
       }
     },
+    "simple-peer": {
+      "version": "9.11.1",
+      "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz",
+      "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==",
+      "requires": {
+        "buffer": "^6.0.3",
+        "debug": "^4.3.2",
+        "err-code": "^3.0.1",
+        "get-browser-rtc": "^1.1.0",
+        "queue-microtask": "^1.2.3",
+        "randombytes": "^2.1.0",
+        "readable-stream": "^3.6.0"
+      },
+      "dependencies": {
+        "buffer": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+          "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.2.1"
+          }
+        }
+      }
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -40535,6 +40771,26 @@
         }
       }
     },
+    "socket.io-client": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.1.tgz",
+      "integrity": "sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.1",
+        "socket.io-parser": "~4.2.0"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+      "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      }
+    },
     "sockjs": {
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
@@ -43552,6 +43808,11 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -52,6 +52,8 @@
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-toolkit": "^1.1.2",
+    "simple-peer": "^9.11.1",
+    "socket.io-client": "^4.5.1",
     "typescript": "^4.3.5",
     "uuid": "^8.3.1",
     "video-react": "^0.15.0",

src/api-data/index.ts

@@ -230,6 +230,16 @@ const sortChat = async <T>(id:string): Promise<T | undefined> => {
   }
 };
 
+const socketIdChat = async <T>(socketId:string): Promise<T | undefined> => {
+  try {
+    const { data: { data } } = await axios.patch('/chats/socketId', {socketId});
+    return data
+  } catch (e) {
+    forbidden(e)
+    return undefined
+  }
+};
+
 const seenChat = async <T>(id:string): Promise<T | undefined> => {
   try {
     const { data: { data } } = await axios.patch('/chats/seen', { id });
@@ -443,6 +453,7 @@ export {
   getChatById,
   muteChat,
   sortChat,
+  socketIdChat,
   seenChat,
   typingChat,
   pinChat,

src/components/HomePage/CentralBar/HeaderBar/Buttons/CallModal/index.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, Typography } from '@material-ui/core'
-import { useState } from 'react';
+import { useState,useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
@@ -174,6 +174,25 @@ const CallModal = ({setModalCall,shareRef,videoRef}:ICallModal) => {
   }
   const handleCloseCallModal = () => setModalCall(false)
   // requesting, waiting ,ringing, hanging up,line busy
+  // useEffect(() => {
+  //   socket.on('connect', () => {
+  //     setIsConnected(true);
+  //   });
+
+  //   socket.on('disconnect', () => {
+  //     setIsConnected(false);
+  //   });
+
+  //   socket.on('pong', () => {
+  //     setLastPong(new Date().toISOString());
+  //   });
+
+  //   return () => {
+  //     socket.off('connect');
+  //     socket.off('disconnect');
+  //     socket.off('pong');
+  //   };
+  // }, []);
 
   return (
     <div className={classes.overlay} >

src/components/HomePage/CentralBar/HeaderBar/Buttons/index.tsx

@@ -3,14 +3,18 @@ import IconButton from '@mui/material/IconButton';
 import SearchIcon from '@mui/icons-material/Search';
 import PhoneIcon from '@mui/icons-material/Phone';
 import { makeStyles } from '@material-ui/core'
-import { useDispatch } from 'react-redux';
-import { useState,useRef } from 'react';
+import { useDispatch,useSelector } from 'react-redux';
+import { useState, useRef, useEffect } from 'react';
 
 import MenuList from './MenuList'
 import DeleteModal from './DeleteModal';
 import CallModal from './CallModal';
+import { getAuthorizationState } from '../../../../../redux/authorization/selector';
 import { actionRightIsOpen } from '../../../../../redux/control/action'
 
+const Peer = require('simple-peer')
+
+
 const useStyles = makeStyles({
   container: {
     marginLeft: 20,
@@ -22,24 +26,73 @@ const useStyles = makeStyles({
 
 interface IButtons {
   setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
+  socket:any
 }
 
-const Buttons = ({setIsSomeSelected}:IButtons) => {
+const Buttons = ({setIsSomeSelected,socket}:IButtons) => {
   const classes = useStyles()
   const dispatch = useDispatch()
+  const { name, lastName } = useSelector(getAuthorizationState)
   const shareRef = useRef<any>(null)
   const videoRef = useRef<any>(null)
   const [modalDelete, setModalDelete] = useState<boolean>(false)
-  const [modalCall, setModalCall] = useState<boolean>(true)
+  const [modalCall, setModalCall] = useState<boolean>(false)
+  const [mySocketId, setMySocketId] = useState<string>('')
   const handleOpenSearch = (e: any) => {
     e.stopPropagation()
     dispatch(actionRightIsOpen('search'))
   }
-  const handleStartCall = (e: any) => {
+  const handleStartCall = async (e: any) => {
     e.stopPropagation()
     setModalCall(true)
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: true,
+      audio: true
+    })
+    const peer = new Peer({
+      initiator: true,
+      trickle: false, 
+      stream 
+    });
+    peer.on("signal", (data:any) => {
+      socket.emit("call", {
+        userToCall: 'FUCeH4L8nAtPu7DlAAAN',
+        signalData: data,
+        from: socket.id,
+        name: `${name} ${lastName}`,
+       })
+    });
+    peer.on("stream", (companionStream:any) => {});
+    socket.on("accepted", ({ signal }:any) => {
+      peer.signal(signal);
+    });
+    // connectionRef.current = peer; 
   }
 
+  const handleAnswerCall = async () => {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: true,
+      audio: true
+    })
+    const peer = new Peer({
+      initiator: false,
+      trickle: false,
+      stream,
+    });
+    peer.on("signal", (data:any) => {
+      socket.emit("answer", { signal: data, to: 'caller' });
+    });
+    peer.on("stream", (companionStream:any) => {});
+    peer.signal();
+    // connectionRef.current = peer;
+  };
+
+//leaveCall function to destroy the peer-to-peer connection
+
+const HandleLeaveCall = () => {
+    // connectionRef.current.destroy();
+  };  
+
   return (
     <Stack className={classes.container} direction="row">
       <IconButton onClick={handleOpenSearch} aria-label="delete" size="medium">

src/components/HomePage/CentralBar/HeaderBar/index.tsx

@@ -89,10 +89,11 @@ interface IHeaderBar {
   setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
   handleClearSelect: () => void,
   openPinned: boolean,
-  pinnedMessagesMemo:TPinnedMessages
+  pinnedMessagesMemo: TPinnedMessages,
+  socket:any
 }
 
-const HeaderBar = ({chatDivRef,selectedArr,isSomeSelected,setIsSomeSelected,handleClearSelect,openPinned,pinnedMessagesMemo}:IHeaderBar) => {
+const HeaderBar = ({chatDivRef,selectedArr,isSomeSelected,setIsSomeSelected,handleClearSelect,openPinned,pinnedMessagesMemo,socket}:IHeaderBar) => {
   const classes = useStyles()
   const dispatch = useDispatch()
   const { companionId } = useSelector(getChatMemo)
@@ -134,7 +135,7 @@ const HeaderBar = ({chatDivRef,selectedArr,isSomeSelected,setIsSomeSelected,hand
               {`${pinnedMessagesMemo.length} pinned messages`}
             </Typography>
           </div>
-          <Buttons setIsSomeSelected={setIsSomeSelected}/>
+          <Buttons setIsSomeSelected={setIsSomeSelected} socket={socket} />
        </Toolbar>
      </AppBar>}
     {!openPinned && !isSomeSelected &&
@@ -143,7 +144,7 @@ const HeaderBar = ({chatDivRef,selectedArr,isSomeSelected,setIsSomeSelected,hand
           <Credentials/>
           <div className={classes.toolBarRight}>
             <PinnedBar chatDivRef={chatDivRef} handleOpenPinned={handleOpenPinned}/>
-            <Buttons setIsSomeSelected={setIsSomeSelected}/>
+            <Buttons setIsSomeSelected={setIsSomeSelected} socket={socket}/>
           </div>
         </Toolbar>
       </AppBar>} 

src/components/HomePage/CentralBar/index.tsx

@@ -15,9 +15,10 @@ interface ICentralBar {
   chatDivRef: any | null,
   companionId: string,
   backgroundImage: string,
+  socket:any
 }
 
-const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentralBar) => {
+const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage,socket}:ICentralBar) => {
   const dispatch = useDispatch()
   const pinnedMessagesMemo = useSelector(getPinnedMessagesMemo)
   const openPinned = useSelector(getOpenPinned)
@@ -48,7 +49,7 @@ const CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage}:ICentra
         <Grid item lg={12} >
           <HeaderBar chatDivRef={chatDivRef} selectedArr={selectedArr} isSomeSelected={isSomeSelected}
             handleClearSelect={handleClearSelect} setIsSomeSelected={setIsSomeSelected}
-            openPinned={openPinned} pinnedMessagesMemo={pinnedMessagesMemo}/>
+            openPinned={openPinned} pinnedMessagesMemo={pinnedMessagesMemo} socket={socket}/>
         </Grid>          
         <Grid item lg={12} style={{backgroundImage}}>
           <ChatBar chatDivRef={chatDivRef} selectedArr={selectedArr} setSelectedArr={setSelectedArr}

src/components/HomePage/index.tsx

@@ -1,7 +1,9 @@
 import Grid from '@mui/material/Grid'
 import { makeStyles } from '@material-ui/core'
 import { useSelector } from 'react-redux'
-import { useRef } from 'react'
+import { useRef,useEffect } from 'react'
+import io from 'socket.io-client';
+
 import LeftBar from './LeftBar'
 import CentralBar from './CentralBar'
 import RightBar from './RightBar'
@@ -10,7 +12,10 @@ import { getChatMemo } from '../../redux/chat/selector'
 import { getNightMode } from '../../redux/authorization/selector'
 import wallpaper from '../../img/wallpaper.jpg'
 import wallpaperNight from '../../img/wallpaperNight.jpg'
+import { prodSocketURL } from '../../helpers';
+import { socketIdChat } from '../../api-data';
 
+const socket = io(prodSocketURL)
 
 const useStyles = makeStyles({
   container: {
@@ -29,14 +34,29 @@ const HomePage = () => {
   const nightMode = useSelector(getNightMode)
   const { companionId } = useSelector(getChatMemo)
   const backgroundImage =  `url(${nightMode ? wallpaperNight : wallpaper})`
- 
+  
+  useEffect(() => {
+    socket.on("connect", () => {
+      const socketId = socket.id
+      socketIdChat(socketId)
+    });
+    socket.on('disconnect', () => {
+      socketIdChat('')
+    });
+    return () => {
+      socket.off('connect');
+      socket.off('disconnect');
+    };
+  }, [])
+
 return (
     <Grid className={classes.container} container spacing={0} >
       <LeftBar chatDivRef={chatDivRef} />
       {companionId ?
       <Grid item lg={9} className={classes.centralAndRight}>
         <CentralBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef}
-          companionId={companionId} backgroundImage={backgroundImage}/>
+          companionId={companionId} backgroundImage={backgroundImage}
+          socket={socket}/>
         <RightBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef} />
       </Grid> :
       <Grid item lg={9} style={{backgroundImage}}/>}

src/helpers/index.ts

@@ -157,6 +157,9 @@ const emojisArr = ['💘','😀','😍','😲','😡']
 
 let prodBaseURL = 'https://w-telegram.herokuapp.com'
 prodBaseURL = 'http://localhost:3000'
+let prodSocketURL = 'https://w-telegram.herokuapp.com'
+prodSocketURL = 'http://localhost:3001'
+prodBaseURL = 'http://localhost:3000'
 
 const prodAwsS3 = 'https://my-telegram-bucket.s3.eu-west-1.amazonaws.com'
 
@@ -181,6 +184,7 @@ export {
   filteredMessages,
   filterBy,
   emojisArr,
+  prodSocketURL,
   prodBaseURL,
   prodAwsS3,
   refreshAppTime,

src/redux/chat/reducer/index.ts

@@ -30,6 +30,7 @@ const initialState: TChat = {
      number: '',
      country: '',
      pinned: false,
+     socketId:"",
      _id: '',
      companionId: '',
      owner: '',

src/typescript/redux/chat/types.ts

@@ -19,6 +19,7 @@ export type TChat = {
   number: string,
   country: string,
   pinned: boolean,
+  socketId: string,
   _id: string,
   companionId: string,
   owner: any,

src/typescript/redux/chats/types.ts

@@ -18,6 +18,7 @@ export type TChat = {
   typing: boolean,
   number: string,
   pinned: boolean,
+  socketId: string,
   _id: string,
   companionId: string,
   owner: any,