Merge branch 'dev' of github.com:LucasVbr/projet-web4 into dev

2026-05-13 17:21:53 +00:00 · 2023-04-03 19:17:42 +02:00
parent 018af6890c 35c4137faa
commit 05ae0eedd8
8 changed files with 360 additions and 26 deletions
@@ -13,6 +13,7 @@
        "@emotion/styled": "^11.10.6",
        "@premieroctet/next-crud": "^2.2.0",
        "@prisma/client": "^4.11.0",
+        "@reduxjs/toolkit": "^1.9.3",
        "@types/react": "18.0.28",
        "@types/react-dom": "18.0.11",
        "bcrypt": "^5.1.0",
@@ -27,7 +28,9 @@
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-hook-form": "^7.43.5",
-        "react-icons": "^4.8.0"
+        "react-icons": "^4.8.0",
+        "socket.io": "^4.6.1",
+        "socket.io-client": "^4.6.1"
      },
      "devDependencies": {
        "@types/bcrypt": "^5.0.0",
@@ -2129,11 +2132,39 @@
      "integrity": "sha512-KV+IrVh8LdwBfJjDGdbZZDg+KwQ6b4Ee7/hLiTpL8ZHLI2IdGOufRxvmZSTuio28wfAporSA+N0YdzAdx43gWA==",
      "optional": true
    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.3.tgz",
+      "integrity": "sha512-GU2TNBQVofL09VGmuSioNPQIu6Ml0YLf4EJhgj0AvBadRlCGzUWet8372LjvO4fqKZF2vH1xU0htAa7BrK9pZg==",
+      "dependencies": {
+        "immer": "^9.0.16",
+        "redux": "^4.2.0",
+        "redux-thunk": "^2.4.2",
+        "reselect": "^4.1.7"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.0.2"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@rushstack/eslint-patch": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
      "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
    },
+    "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/@swc/helpers": {
      "version": "0.4.14",
      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
@@ -2184,6 +2215,19 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.13",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz",
+      "integrity": "sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/cross-spawn": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/@types/cross-spawn/-/cross-spawn-6.0.2.tgz",
@@ -2229,8 +2273,7 @@
    "node_modules/@types/node": {
      "version": "18.15.1",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.1.tgz",
-      "integrity": "sha512-U2TWca8AeHSmbpi314QBESRk7oPjSZjDsR+c+H4ECC1l+kFgpZf8Ydhv3SJpPy51VyZHHqxlb6mTTqYNNRVAIw==",
-      "devOptional": true
+      "integrity": "sha512-U2TWca8AeHSmbpi314QBESRk7oPjSZjDsR+c+H4ECC1l+kFgpZf8Ydhv3SJpPy51VyZHHqxlb6mTTqYNNRVAIw=="
    },
    "node_modules/@types/normalize-package-data": {
      "version": "2.4.1",
@@ -2388,6 +2431,18 @@
      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/acorn": {
      "version": "8.8.2",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
@@ -2794,6 +2849,14 @@
      ],
      "optional": true
    },
+    "node_modules/base64id": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+      "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+      "engines": {
+        "node": "^4.5.0 || >= 5.9"
+      }
+    },
    "node_modules/bcrypt": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-5.1.0.tgz",
@@ -3154,6 +3217,18 @@
      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
      "optional": true
    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
    "node_modules/cosmiconfig": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -3434,6 +3509,54 @@
        "once": "^1.4.0"
      }
    },
+    "node_modules/engine.io": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.4.1.tgz",
+      "integrity": "sha512-JFYQurD/nbsA5BSPmbaOSLa3tSVj8L6o4srSwXXY3NqE+gGUNmmPTbhn8tjzcCtSqhFgIeqef81ngny8JM25hw==",
+      "dependencies": {
+        "@types/cookie": "^0.4.1",
+        "@types/cors": "^2.8.12",
+        "@types/node": ">=10.0.0",
+        "accepts": "~1.3.4",
+        "base64id": "2.0.0",
+        "cookie": "~0.4.1",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.11.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io-client": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.4.0.tgz",
+      "integrity": "sha512-GyKPDyoEha+XZ7iEqam49vz6auPnNJ9ZBfy89f+rMMas8AuiMWOZ9PVzu8xb9ZC6rafUqiGHSCfu22ih66E+1g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.11.0",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.6.tgz",
+      "integrity": "sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/engine.io/node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/enhanced-resolve": {
      "version": "5.12.0",
      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
@@ -4815,6 +4938,15 @@
        "node": ">=10"
      }
    },
+    "node_modules/immer": {
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -5704,6 +5836,14 @@
      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/new-github-issue-url": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/new-github-issue-url/-/new-github-issue-url-0.2.1.tgz",
@@ -6903,6 +7043,22 @@
        "node": ">=10"
      }
    },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
    "node_modules/regenerator-runtime": {
      "version": "0.13.11",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -6947,6 +7103,11 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/reselect": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz",
+      "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
+    },
    "node_modules/resolve": {
      "version": "1.22.1",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -7162,6 +7323,56 @@
        "node": ">=8"
      }
    },
+    "node_modules/socket.io": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.6.1.tgz",
+      "integrity": "sha512-KMcaAi4l/8+xEjkRICl6ak8ySoxsYG+gG6/XfRCPJPQ/haCRIJBTL4wIl8YCsmtaBovcAXGLOShyVWQ/FG8GZA==",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "debug": "~4.3.2",
+        "engine.io": "~6.4.1",
+        "socket.io-adapter": "~2.5.2",
+        "socket.io-parser": "~4.2.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-adapter": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz",
+      "integrity": "sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==",
+      "dependencies": {
+        "ws": "~8.11.0"
+      }
+    },
+    "node_modules/socket.io-client": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.6.1.tgz",
+      "integrity": "sha512-5UswCV6hpaRsNg5kkEHVcbBIXEYoVbMQaHJBXJCyEQ+CiFPV1NIOY0XOFWG4XR4GZcB8Kn6AsRs/9cy9TbqVMQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.4.0",
+        "socket.io-parser": "~4.2.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.2.tgz",
+      "integrity": "sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/source-map": {
      "version": "0.5.7",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -7875,6 +8086,14 @@
        "spdx-expression-parse": "^3.0.0"
      }
    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/wcwidth": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -7981,6 +8200,34 @@
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
    },
+    "node_modules/ws": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
+      "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
+      "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/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/yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -14,6 +14,7 @@
    "@emotion/styled": "^11.10.6",
    "@premieroctet/next-crud": "^2.2.0",
    "@prisma/client": "^4.11.0",
+    "@reduxjs/toolkit": "^1.9.3",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "bcrypt": "^5.1.0",
@@ -28,7 +29,9 @@
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.43.5",
-    "react-icons": "^4.8.0"
+    "react-icons": "^4.8.0",
+    "socket.io": "^4.6.1",
+    "socket.io-client": "^4.6.1"
  },
  "devDependencies": {
    "@types/bcrypt": "^5.0.0",
@@ -1,27 +1,32 @@
 import {Button, Flex, Input} from '@chakra-ui/react';
 import {useState} from 'react';
 import {User} from '@prisma/client';
+import {io, Socket} from 'socket.io-client';
+import Message from '@/components/chat/Message';

 type Props = {
  user: User,
-  chatId: Props
+  chatId: Props,
+  socket: any
 }

 export default function FormMessage(props: Props) {
-  const {user, chatId} = props;
+  const {user, socket} = props;
  const [text, setText] = useState("");

  const handleSubmit = () => {
    if (text !== "") {
-      fetch("/api/messages", {
-        method: "POST",
-        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({
-          text,
-          'User': {"connect": {'id': user.id}},
-          'Chat': {"connect": {'id': chatId}}
-        })
-      }).then(res => res.json()).then(res => console.log(res)).catch(err => console.error(err))
+      socket.emit("createdMessage", {text, sender: user.id})
+
+      // fetch("/api/messages", {
+      //   method: "POST",
+      //   headers: {'Content-Type': 'application/json'},
+      //   body: JSON.stringify({
+      //     text,
+      //     'User': {"connect": {'id': user.id}},
+      //     'Chat': {"connect": {'id': chatId}}
+      //   })
+      // }).then(res => res.json()).then(res => console.log(res)).catch(err => console.error(err))
    }
  }

@@ -0,0 +1,42 @@
+import {Server} from 'socket.io';
+import prismaClient from '@/lib/prismaClient';
+
+export default async function SocketHandler(req: any, res: any) {
+  const {id: chatId} = req.query;
+
+  // It means that socket server was already initialised
+  if (res.socket.server.io) {
+    console.log('Already set up');
+    res.end();
+    return;
+  }
+
+  const io = new Server(res.socket.server);
+  res.socket.server.io = io;
+
+  // Define actions inside
+  io.on('connection', async (socket) => {
+    console.log(socket.id);
+
+    await prismaClient.chat.findFirst({
+      where: {id: chatId},
+      include: {Message: true},
+    }).then(chat => {
+      // @ts-ignore
+      return socket.emit('allOldMessages', chat.Message);
+    });
+
+    socket.on('createdMessage', async (msgInput) => {
+      await prismaClient.message.create({
+        data: {
+          text: msgInput.text,
+          User: {connect: {id: msgInput.sender}},
+          Chat: {connect: {id: chatId}},
+        },
+      }).then((newMessage) => socket.emit('newIncomingMessage', newMessage));
+    });
+  });
+
+  console.log('Setting up socket');
+  res.end();
+}
@@ -1,36 +1,73 @@
-import {Container, Flex, Input, Text} from '@chakra-ui/react';
+import {Button, Container, Flex, Input, Text} from '@chakra-ui/react';
 import Head from 'next/head';
 import {websiteName} from '@/lib/constants';
 import {useSession} from 'next-auth/react';
 import {useRouter} from 'next/router';
-import {useEffect, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';

 import MessageList from '@/components/chat/MessageList';
-import FormMessage from '@/components/form/FormMessage';
+
+import {io, Socket} from 'socket.io-client';
+import {Message} from '@prisma/client';

 export default function ChatId() {
  const router = useRouter();
  const {data: session, status} = useSession();
-  const {id} = router.query;
-  const [messages, setMessages] = useState([])
+  const {id: chatId} = router.query;
+
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [text, setText] = useState('');
+  const [socket, setSocket] = useState<Socket>()

  useEffect(() => {
-    if (status === "authenticated")
-    fetch(`/api/messages?where={"ChatID": "${id}"}`)
-    .then(res => res.json())
-    .then(msgs => setMessages(msgs))
+    if (status === 'authenticated') socketInitializer()
  }, [status]);

+
+  const socketInitializer = async () => {
+    await fetch(`/api/socket/chat/${chatId}`)
+    const soc = io()
+
+    soc.on('connect', () => {
+      console.log('connected')
+    })
+
+    soc.on("allOldMessages", (allOldMessages: Message[]) => {
+      console.log("allOldMessages", allOldMessages);
+      setMessages(allOldMessages);
+    })
+
+    soc.on("newIncomingMessage", (newIncomingMessage: Message) => {
+      console.log("newIncomingMessage", newIncomingMessage);
+      console.log("messages", messages);
+      setMessages(messages => ([...messages, newIncomingMessage]));
+    });
+
+    setSocket(soc);
+  }
+
  if (status === 'loading') return <Text>Loading...</Text>;

-  if (session && messages)
+  const handleSubmit = () => {
+    if (text !== "" && socket) {
+      // @ts-ignore
+      socket.emit("createdMessage", {text, sender: session.user.id})
+      setText("");
+    }
+  }
+
+  if (session && session.user && messages)
  return (
      <>
        <Head><title>{websiteName}</title></Head>

        <Container>
          <MessageList user={session.user} messages={messages}/>
-          <FormMessage user={session.user} chatId={id} />
+
+          <Flex gap={5} mt={5}>
+            <Input type={"text"} colorScheme={'purple'} onChange={(evt) => setText(evt.target.value) } value={text} />
+            <Button colorScheme={'purple'} onClick={handleSubmit}>Envoyer</Button>
+          </Flex>
        </Container>
      </>
  );