add notifications for new incoming messages

backend/app.js

@@ -22,7 +22,7 @@ app.use(fileupload())
 app.use(express.static('avatars')); //folder for static files
 
 const io = require("socket.io")(server, {
-    cors: 'no-cors'
+    cors: ORIGIN_URL
 });
 const PORT = process.env.PORT || 5000;
 const TOKEN_KEY = process.env.TOKEN_KEY || 'rGH4r@3DKOg06hgj'; 
@@ -54,7 +54,6 @@ const getOneUser = async (userName) => {
     return userInDb;
 }
 app.post('/login', async (req, res) => {
-    console.log(req)
 
     try {
         const {userName,password} = req.body;

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

@@ -9,7 +9,8 @@ import { StyledAvatar } from './StyledAvatar';
 import { MessageEditorMenu } from '../MessageEditorMenu.jsx';
 import imgBtn from '../../../assets/img/gg.png';
 import useSound from 'use-sound';
-import notifSound from '../../../assets/sendSound.mp3'
+import notifSound from '../../../assets/get.mp3'
+import { useMemo } from 'react';
 
 
 export const MessageForm = () => {
@@ -37,14 +38,17 @@ export const MessageForm = () => {
     useEffect(() => {
         if (!isEditing) {
             scrollToBottom((endMessages)) 
-        }
-        if(newMessages.length > 0){
-            newMessages.map(i => console.log('newmessage', i.userName === user.userName))
-        }
-      }, [startMessages, newMessages]);
+        } 
+      }, [startMessages]);
            
     const messages = startMessages.concat(newMessages)  
 
+    useEffect(()=> {
+        if(newMessages.length > 0 && newMessages[newMessages.length-1].userName !== user.userName){
+            play()                 
+        }
+    }, [newMessages])
+
     return (             
             <Box className='messageBox'>  
                 {

frontend/src/reducers/messageReducer.js

@@ -11,7 +11,10 @@ const initialState = {
     ref: null
 }
 
-const POST_FILES_URL = 'http://localhost:5000/files';
+const SERVER_URL = process.env.REACT_APP_SERVER_URL;
+
+
+const POST_FILES_URL = SERVER_URL + '/files';
 
 
 export const sendMessageToSocket = (state, data) => {

frontend/src/serviceWorkerRegistration.js

@@ -11,7 +11,7 @@
 // opt-in, read https://cra.link/PWA
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
-    window.location.hostname === '192.168.0.107' ||
+    window.location.hostname === '192.168.0.109' ||
       // [::1] is the IPv6 localhost address.
       window.location.hostname === '[::1]' ||
       // 127.0.0.0/8 are considered localhost for IPv4.