add editing function to backend and sound effect for sending message , need to be refreshed

backend/app.js

@@ -384,7 +384,6 @@ io.on("connection", async (socket) => {
     }
 });
 
-
 //server and database start
 const start = async () => {
     try {

frontend/package-lock.json

@@ -30,6 +30,7 @@
         "redux-thunk": "^2.4.1",
         "sass": "^1.53.0",
         "socket.io-client": "^4.4.1",
+        "use-sound": "^4.0.1",
         "uuid": "^8.3.2",
         "web-vitals": "^2.1.3"
       },
@@ -8536,6 +8537,11 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "node_modules/hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -15853,6 +15859,17 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sound": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/use-sound/-/use-sound-4.0.1.tgz",
+      "integrity": "sha512-hykJ86kNcu6y/FzlSHcQxhjSGMslZx2WlfLpZNoPbvueakv4OF3xPxEtGV2YmculrIaH0tPp9LtG4jgy17xMWg==",
+      "dependencies": {
+        "howler": "^2.1.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
@@ -23052,6 +23069,11 @@
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
       "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ=="
     },
+    "howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -28228,6 +28250,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "use-sound": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/use-sound/-/use-sound-4.0.1.tgz",
+      "integrity": "sha512-hykJ86kNcu6y/FzlSHcQxhjSGMslZx2WlfLpZNoPbvueakv4OF3xPxEtGV2YmculrIaH0tPp9LtG4jgy17xMWg==",
+      "requires": {
+        "howler": "^2.1.3"
+      }
+    },
     "use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

frontend/package.json

@@ -25,6 +25,7 @@
     "redux-thunk": "^2.4.1",
     "sass": "^1.53.0",
     "socket.io-client": "^4.4.1",
+    "use-sound": "^4.0.1",
     "uuid": "^8.3.2",
     "web-vitals": "^2.1.3"
   },

frontend/src/components/chatPage/ChatPage.jsx

@@ -15,7 +15,8 @@ import imgBtn from '../../assets/img/gg.png';
 import imgBtnPhoto from '../../assets/img/photo.png'
 import './chatPage.scss';
 import WebcamCapture from './service/webCam/WebcamCapture';
-
+import useSound from 'use-sound';
+import getNotif from '../../assets/get.mp3'
 
 export const ChatPage = () => {
 
@@ -35,6 +36,8 @@ export const ChatPage = () => {
     
     const isTabletorMobile = (window.screen.width < 730);
 
+    const [play] = useSound(getNotif);
+
 
     const webcamEventHandler = () => {
         setisCamActiv(!isCamActiv)
@@ -96,6 +99,7 @@ export const ChatPage = () => {
                                         dispatch(getSocket('allmessages'))
                                         dispatch(editMessage({editMessage: ''}))
                                         setMessage({message: ''})
+                                        play()
                                     }}
                         sx={(isTabletorMobile)?{
                             display: 'flex',

frontend/src/components/chatPage/messageForm/MessegaForm.jsx

@@ -25,7 +25,7 @@ export const MessageForm = () => {
 
     let endMessages = useRef(null);
     const [isEditing, setIsEditing] = useState(false)   
-    const [isEditiedMessage, setisEditiedMessage] = useState(false) 
+    const [isEditiedMessage, setisEditiedMessage] = useState(false) //need to type in the bottom of message after message was edited
 
     const regYoutube = /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?/; //for youtube video
 

frontend/src/reducers/socketReducer.js

@@ -91,7 +91,11 @@ export const getUserSocketSlice = createSlice({
         getAllMessages: (state, action) => {state.startMessages = action.payload},
         getUsersOnline: (state, action) => {state.usersOnline = action.payload},
         getAllUsers: (state, action) => {state.allUsers = action.payload},
-        addNewMessage: (state, action) => {state.startMessages.push(action.payload)}, 
+        addNewMessage: (state, action) => {
+            state.startMessages.push(action.payload)
+            
+        }, 
+
         // writing: (state, action) => {
         //                             state.writing = true;
         //                             state.usersWriting.push(action.payload)