refactor: fix code and simple

backend/app.js

@@ -137,19 +137,15 @@ io.use( async (socket, next) => {
         socket.disconnect();
         return;
     }
-
     next();
 });
 
 io.on("connection", async (socket) => {
     const userName = socket.user.userName;
-
     const sockets = await io.fetchSockets();
-
     const dbUser = await getOneUser(userName);
 
-    io.emit('usersOnline', sockets.map((sock) => sock.user)); // send array online users
-    
+    io.emit('usersOnline', sockets.map((sock) => sock.user)); // send array online users  
     socket.emit('connected', dbUser); //socket.user
    
     if(socket.user.isAdmin){
@@ -160,9 +156,7 @@ io.on("connection", async (socket) => {
 
     socket.emit('allmessages', messagesToShow.reverse());
     socket.on("message", async (data) => {
-
-        const userName = socket.user.userName;
-        const dateNow = Date.now();
+        const dateNow = Date.now(); // for correct working latest post 
         const post = await Message.findOne({userName}).sort({ 'createDate': -1 })
         const oneUser = await getOneUser(userName);
       
@@ -176,7 +170,7 @@ io.on("connection", async (socket) => {
                     try {
                         await message.save(); 
                     } catch (error) {
-                        console.log(error);   
+                        console.log('Message save to db error', error);   
                     }
                     io.emit('message', message);
             }

backend/controlers/token.js

@@ -1,6 +1,5 @@
 const jwt = require('jsonwebtoken');
 
-
 const KEY = '777'
 
 export const generateToken = (id, userName, isAdmin) => {

backend/db/models/User.js

@@ -1,6 +1,5 @@
 const {model, Schema} = require('mongoose');
 
-
 const User = new Schema({
     userName: {type: String, unique: true, required: true},
     hashPassword: {type: String, required: true},

frontend/src/components/chatPage/ChatPage.js

@@ -12,7 +12,6 @@ import {sendMessage} from './service/sendMessage';
 
 export const ChatPage = ({ onExit, token }) => {
 
-    const newtoken = token;
     const [socket, setSocket] = useState(null);
     const [messages, setMessages] = useState([])
     const [user, setUser] = useState({})
@@ -22,18 +21,17 @@ export const ChatPage = ({ onExit, token }) => {
     const endMessages = useRef(null);
 
     useEffect(() => {
-        if(newtoken){
+        if(token){
             try {
-                const SERVER_URL = process.env.REACT_APP_SERVER_URL || 'http://localhost:5000';
-                setSocket(io.connect(SERVER_URL, {
-                    auth: {token: newtoken}
-                }) )
-    
+                setSocket(io.connect( 
+                        process.env.REACT_APP_SERVER_URL || 'http://localhost:5000', 
+                        {auth: {token}})
+                        )
             } catch (error) {
                 console.log(error)
             } 
         }
-    }, [newtoken])
+    }, [token])
 
     useEffect(() => {
     
@@ -41,12 +39,12 @@ export const ChatPage = ({ onExit, token }) => {
             socket.on('connected', (data) => {
                 setUser(data);
                 }).on('error', (e) => {
-                console.log(e)
+                console.log('On connected', e)
             }); 
             socket.on('allmessages', (data) => {
                     setMessages(data)
                     }).on('error', (e) => {
-                    console.log(e)
+                    console.log('allmessages', e)
             }); 
             socket.on('usersOnline', (data) => {
                 setUsersOnline(data)
@@ -81,7 +79,6 @@ export const ChatPage = ({ onExit, token }) => {
 
     let userColor = useMemo(() => randomColor(),[]);//color for myavatar
 
-    
     return (
         <Container maxWidth="lg">
             <Box 
@@ -94,8 +91,7 @@ export const ChatPage = ({ onExit, token }) => {
                     display: 'flex',
                     flexGrow:'2',
                     flexDirection: 'column',                    
-                }}
-                >
+                }}>
                     <Box                 
                     className='messageBox'
                     sx={{
@@ -103,10 +99,8 @@ export const ChatPage = ({ onExit, token }) => {
                         flexGrow:'2',
                         flexDirection: 'column',
                         overflow: 'scroll',
-                        height: '100vh'
-                        
-                    }}
->                     
+                        height: '100vh'  
+                    }}>                     
                         {
                         messages.map((item, i) =>
                         <Fragment key={i} >
@@ -134,7 +128,6 @@ export const ChatPage = ({ onExit, token }) => {
                                         width: '60px',
                                         height: '60px',
                                         color:'black'
-                                    
                                     }
                                     }> 
                                     {item.userName}
@@ -144,26 +137,16 @@ export const ChatPage = ({ onExit, token }) => {
                                 className={ 
                                 (item.userName == user.userName)
                                 ? 
-                                'message myMessage' :
+                                'message myMessage' 
+                                :
                                 'message'}
-                                
-                                // style={{
-                                //     backgroundColor:  
-                                //     (usersOnline.map(current =>{
-                                //         if(item.userName !== current.userName ) {
-                                //             return current.color
-                                //         } 
-                                //     }))}}
                                 >
-                                    
                                     <p>{item.text}</p>  
-                                   
                                     <div
                                      style={{fontStyle:'italic',
                                             color: 'grey',
-                                            fontSize: 14}}
-                                     >
-                                         {dateFormat(item).time}
+                                            fontSize: 14}}>
+                                            {dateFormat(item).time}
                                     </div> 
                                     <div 
                                     style={{fontStyle:'italic',
@@ -176,94 +159,100 @@ export const ChatPage = ({ onExit, token }) => {
                         </Fragment>
                         )}
                         <div ref={endMessages}></div>
-                        
-                    </Box>
-                        <MessageForm 
-                        data = {user} 
-                        sendMessage = {(data) => {
-                            sendMessage(data, socket)
-                        }}>
-                        </MessageForm>
-                
-                    </Box>
+    
+                        </Box>
+                            <MessageForm 
+                                    data = {user} 
+                                    sendMessage = {(data) => {
+                                                    sendMessage(data, socket)
+                                                }}>
+                            </MessageForm>
+                        </Box>
 
-                    <Box
+                        <Box
                         className='usersBox'
                         sx={{
                             overflow: 'scroll',  
                         }}>
                         <Button 
-                        sx={{
-                            margin:'10px 5px'
-                        }}
-                        variant="outlined"
-                        onClick={(e)=> {
-                                socket.disconnect()
-                                onExit()
-                                }}>
-                        Logout</Button>
-
-                        <UserInfo user={user.userName} color={userColor}/>
-                            {user.isAdmin 
-                            ? 
-                            allUsers.map((item) =>
-                            <div 
-                                key={item._id}
-                                className='online'>
-                                <div style={
-                                    {color: (usersOnline.map(current =>{
-                                            if(item.userName == current.userName ) {
-                                                return current.color
-                                            }
-                                          
-                                        }))}}>{item.userName}</div>
-                                    <div>
-                                        <Button
-                                        variant="contained"
-                                        onClick={()=>{
-                                            muteUser(item.userName, item.isMutted, socket)
-                                        }}
-                                        sx={{
-                                            margin:'3px',
-                                            height: '25px'
+                                sx={{margin:'10px 5px'}}
+                                variant="outlined"
+                                onClick={(e)=> {
+                                        socket.disconnect()
+                                        onExit()
                                         }}>
-                                        {item.isMutted
-                                        ? 
-                                        'unmute'
-                                        : 'mute'}
-                                        </Button>
+                                Logout
+                        </Button>
 
-                                        <Button
-                                        variant="contained"
-                                        onClick={()=>{
-                                            banUser(item.userName, item.isBanned, socket)
-                                        }}
-                                        sx={{
-                                            margin:'3px',
-                                            height: '25px'
-                                        }}>
-                                            {item.isBanned
-                                        ? 'unban'
-                                        : 'ban'}
-                                        </Button>
-
-                                    </div>
+                        <UserInfo 
+                            data = {user.userName} 
+                            color={userColor}/>
                             {
-                            usersOnline.map((user, i) =>{
-                                                if(item.userName == user.userName){
-                                                return <span key={i} style={{color: 'green'}}>online</span>
-                                            }})
-                            }
-                            </div>) 
-                            :
-                            usersOnline.map((item, i) =>
+                                user.isAdmin 
+                                ? 
+                                allUsers.map((item) =>
                                 <div 
-                                    key={i}
-                                    className='online'>  
-                                    <div style={{color: item.color}}>{item.userName}</div>
-                                    <span style={{color: 'green'}}>online</span>
-                                </div>)}
-                    
+                                    key={item._id}
+                                    className='online'>
+                                    <div style={
+                                        {color: (usersOnline.map(current =>{
+                                                if(item.userName == current.userName ) {
+                                                    return current.color
+                                                }
+                                            
+                                            }))}}>{item.userName}</div>
+                                        <div>
+                                            <Button
+                                                variant="contained"
+                                                onClick={()=>{
+                                                    muteUser(item.userName, item.isMutted, socket)
+                                                    }}
+                                                sx={{
+                                                    margin:'3px',
+                                                    height: '25px'
+                                                }}>
+                                                    {item.isMutted
+                                                    ? 
+                                                    'unmute'
+                                                    : 'mute'}
+                                            </Button>
+
+                                            <Button
+                                                variant="contained"
+                                                onClick={()=>{
+                                                    banUser(item.userName, item.isBanned, socket)
+                                                }}
+                                                sx={{
+                                                    margin:'3px',
+                                                    height: '25px'
+                                                }}>
+                                                    {item.isBanned
+                                                ? 'unban'
+                                                : 'ban'}
+                                            </Button>
+
+                                        </div>
+                                {
+                                usersOnline.map((user, i) =>{
+                                                    if(item.userName == user.userName){
+                                                    return <span key={i} style={{color: 'green'}}>online</span>
+                                                    }
+                                                })
+                                }
+                                </div>) 
+                                :
+                                usersOnline.map((item, i) =>
+                                        <div 
+                                            key={i}
+                                            className='online'>  
+                                            <div style={{color: item.color}}>
+                                                {item.userName}
+                                            </div>
+                                            <span style={{color: 'green'}}>
+                                                online
+                                            </span>
+                                        </div>)
+                            }
                 </Box>
             </Box>
         </Container>

frontend/src/components/chatPage/userInfo/UserInfo.js

@@ -1,15 +1,14 @@
 import Avatar from '@mui/material/Avatar';
 
-export const UserInfo = (user) => {
+export const UserInfo = (data) => {
     return (
         <Avatar sx={{ 
-            bgcolor: user.color,
+            bgcolor: data.color,
             width: '100px',
             height: '100px',
             fontSize: 14,
             margin: '20px auto'
     
-         }}>{user.user}</Avatar>
+         }}>{data.user}</Avatar>
     )
-
 }

frontend/src/components/loginForm/LoginForm.js

@@ -15,7 +15,7 @@ export const LoginForm = ({ onSubmit}) => {
     const [textModal, setTextModal] = useState('')
     const [display, setDisplay] = useState('none');
 
-    const POST_URL = 'http://localhost:5000/login';
+    const POST_URL =  process.env.REACT_APP_POST_URL || 'http://localhost:5000/login';//do simple?add on handlesubmit
 
     const handleSubmit = async (e) => {
         e.preventDefault();
@@ -29,12 +29,10 @@ export const LoginForm = ({ onSubmit}) => {
             setDisplay('block')
             setUserdata({userName:'', password: ''});
             
-            
         } else {
             setTextModal('too short or using special symbols')
             setDisplay('block')
-        }
-        
+        }   
     }
 
     useEffect(()=>{
@@ -47,50 +45,50 @@ export const LoginForm = ({ onSubmit}) => {
     return (
         <Container maxWidth="xs">
             <Box
-            component="form" 
-            onSubmit={(e) => handleSubmit(e)}
-            sx={{
-                marginTop: 40,
-                display: 'flex',
-                flexDirection: 'column',
-            }}
-            >
-                <TextField
-                margin="normal"
-                required
-                fullWidth
-                id="userName"
-                label="user name"
-                name="userName"
-                autoComplete="email"
-                autoFocus
-                value={userData.userName}
-                onChange={e => {
-                    setUserdata({...userData, userName: e.target.value})
-                    setDisplay('none')
+                component="form" 
+                onSubmit={(e) => handleSubmit(e)}
+                sx={{
+                    marginTop: 40,
+                    display: 'flex',
+                    flexDirection: 'column',
                 }}
+                >
+                <TextField
+                        margin="normal"
+                        required
+                        fullWidth
+                        id="userName"
+                        label="user name"
+                        name="userName"
+                        autoComplete="email"
+                        autoFocus
+                        value={userData.userName}
+                        onChange={e => {
+                            setUserdata({...userData, userName: e.target.value})
+                            setDisplay('none')
+                        }}
                 />
                 <TextField
-                margin="normal"
-                required
-                fullWidth
-                name="password"
-                label="Password"
-                type="password"
-                id="password"
-                autoComplete="current-password"
-                value={userData.password}
-                onChange={e => setUserdata({...userData, password: e.target.value})}
+                        margin="normal"
+                        required
+                        fullWidth
+                        name="password"
+                        label="Password"
+                        type="password"
+                        id="password"
+                        autoComplete="current-password"
+                        value={userData.password}
+                        onChange={e => setUserdata({...userData, password: e.target.value})}
                 />
                 <Modal 
-                text={textModal}
-                propDisplay = {display}
+                    text={textModal}
+                    propDisplay = {display}
                 
                 ></Modal>
                 <Button 
-                type="submit"
-                variant="contained"
-                fullWidth>Login
+                    type="submit"
+                    variant="contained"
+                    fullWidth>Login
                 </Button>
             </Box>
         </Container>

frontend/src/components/modal/Modal.js

@@ -1,11 +1,12 @@
 import Alert from '@mui/material/Alert';
 
 export const Modal = ({text, propDisplay}) => {
-
     return <Alert 
-    severity="error"
-    sx={{
-        display: propDisplay,
-    }}
-    >{text}</Alert>
+            severity="error"
+            sx={{
+                display: propDisplay,
+            }}
+            >
+            {text}
+            </Alert>
 }