code formating and components split

frontend/src/components/chatPage/ChatPage.js

@@ -1,282 +0,0 @@
-import { useEffect, useMemo, useRef, Fragment} from 'react';
-import {Button,Avatar, Box} from '@mui/material';
-import { UserInfo } from './userInfo/UserInfo';
-import { dateFormat } from './utils/dateFormat';
-import './chatPage.scss';
-import { scrollToBottom } from './utils/scrollToBottom';
-import { banUser } from './service/banUser';
-import { muteUser } from './service/muteUser';
-import { store } from '../../store';
-import { removeToken} from '../../reducers/userDataReducer'
-import { useDispatch, useSelector } from 'react-redux';
-import {getSocket} from'../../reducers/socketReducer';
-import { useState } from 'react';
-import TextareaAutosize from '@mui/material/TextareaAutosize';
-import { sendMessage, storeMessage } from '../../reducers/messageReducer';
-
-export const ChatPage = () => {
-
-
-    const SOCKET_EVENTS = process.env.REACT_APP_SERVER_URL || ['allmessages', 'usersOnline', 'allDbUsers']
-
-    const dispatch = useDispatch();
-    const token = useSelector(state => localStorage.getItem('token') || state.userDataReducer.token);
-
-    const startMessages = useSelector(state => state.getUserSocketReducer.startMessages)
-    const user = useSelector(state => state.getUserSocketReducer.socketUserData)
-    const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
-    const allUsers = useSelector(state => state.getUserSocketReducer.allUsers)
-    const socket = useSelector(state => state.getUserSocketReducer.socket)
-
-    const [message, setMessage] = useState({message: ''});
-
-
-    const randomColor = require('randomcolor'); 
-    const endMessages = useRef(null);
-    
-    useEffect(() => {
-        if(token){
-            SOCKET_EVENTS.map(event => dispatch(getSocket(event)))       
-        }
-    }, [token])
-
-
-    useEffect(() => {
-        console.log('useEffect chat page')
-        scrollToBottom(endMessages)
-      }, [startMessages]);
-
-    const userColor = useMemo(() => randomColor(),[]);//color for myavatar
-
-    return (
-        <div className='rootContainer'>
-            <Box 
-                sx={{
-                    display: 'flex',
-                    height: '100vh'
-                }}>
-                <Box
-                sx={{
-                    display: 'flex',
-                    flexGrow:'2',
-                    maxWidth: '75%',
-                    flexDirection: 'column',                    
-                }}>
-                    <Box className='messageBox'>                     
-                        {
-                        startMessages.map((item, i) =>
-                        <Fragment key={i} >
-                            <Avatar 
-                                sx={
-                                    (item.userName == user.userName)
-                                    ? 
-                                    {
-                                        alignSelf: 'flex-end',
-                                        fontSize: 10,
-                                        width: '60px',
-                                        height: '60px',
-                                        color:'black',
-                                        backgroundColor: userColor
-                                    }
-                                    :
-                                    {
-                                        backgroundColor:  (usersOnline.map(current => {
-                                            if(item.userName === current.userName ) {
-                                                return current.color
-                                            }
-                                          
-                                        } )),
-                                        fontSize: 10,
-                                        width: '60px',
-                                        height: '60px',
-                                        color:'black'
-                                    }
-                                    }> 
-                                    {item.userName}
-                            </Avatar>   
-                            <div 
-                                key={item._id}
-                                onClick = {(e) => {
-                                    if(e.target.className.includes('myMessage')){
-                                        e.currentTarget.className += ' editMessage' 
-                                    }
-                                    //add function to edit message
-                                }}
-
-                                className={ 
-                                (item.userName === user.userName)
-                                ? 
-                                'message myMessage' 
-                                :
-                                'message'}
-                                >
-                                    <p>{item.text}</p>  
-                                    <div
-                                     style={{fontStyle:'italic',
-                                            color: 'grey',
-                                            fontSize: 14}}>
-                                            {dateFormat(item).time}
-                                    </div> 
-                                    <div 
-                                    style={{fontStyle:'italic',
-                                            fontSize: 12,
-                                            color: 'grey'}}>
-                                            {dateFormat(item).year}
-                                    </div>
-                            </div>
-                     
-                        </Fragment>
-                        )}
-                        <div ref={endMessages}></div>
-    
-                        </Box>
-                        <Box 
-            component="form" 
-            onSubmit = {e  =>
-                {
-                    e.preventDefault()
-                     dispatch(sendMessage({user, socket}))
-                     dispatch(getSocket('allmessages'))
-                     setMessage({message: ''})
-                }}
-                
-                sx={{
-                    display: 'flex',
-                    margin: '20px 5px'
-                }}>
-        
-                    <TextareaAutosize
-                        id="outlined-basic" 
-                        label="Type a message..." 
-                        variant="outlined" 
-                        value={message.message}
-                        placeholder='type you message...'
-                        minRows={3}
-                        maxRows={4}
-                        onKeyPress={(e) => {
-                            if (e.key === "Enter")   {
-                                e.preventDefault();
-                                dispatch(sendMessage({user, socket}))
-                                dispatch(getSocket('allmessages'))
-                                setMessage({message: ''})
-                            }
-                        }}
-                        onChange={e => { 
-                            dispatch(storeMessage({message: e.target.value}))
-                            setMessage({message: e.target.value})}
-                        } 
-                        style={{
-                            width: '80%',
-                            resize: 'none',
-                            borderRadius: '4px',
-                        }}
-                        /> 
-                    <Button 
-                        variant="contained" 
-                        type='submit'
-                        disabled={user?.isMutted}
-                        style={{
-                            width: '20%',
-                        }}
-                    >
-                        Send
-                    </Button>
-        </Box>            
-                        </Box>
-
-                        <Box
-                        className='usersBox'
-                        sx={{
-                            overflow: 'scroll',  
-                        }}>
-                        <Button 
-                                sx={{margin:'10px 5px'}}
-                                variant="outlined"
-                                onClick={()=> {
-                                        localStorage.removeItem('token');
-                                        socket.disconnect(); 
-                                        dispatch(removeToken());
-                                            }}>
-                                Logout
-                        </Button>
-
-                        <UserInfo 
-                            data = {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>
-                                           { (user.userName === item.userName )? 
-                                           'admin'
-                                           :   
-                                           <>      
-                                                <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>
-        </div>
-    )
-}

frontend/src/components/chatPage/ChatPage.jsx

@@ -0,0 +1,112 @@
+import { useEffect, useState} from 'react';
+import {Button, Box} from '@mui/material';
+import TextareaAutosize from '@mui/material/TextareaAutosize';
+import { MessageForm } from './messageForm/MessegaForm';
+import { UserInfo } from './userInfo/UserInfo';
+import { store } from '../../store';
+import { removeToken} from '../../reducers/userDataReducer'
+import { useDispatch, useSelector } from 'react-redux';
+import {getSocket} from'../../reducers/socketReducer';
+import { sendMessage, storeMessage } from '../../reducers/messageReducer';
+import './chatPage.scss';
+
+
+export const ChatPage = () => {
+
+    const SOCKET_EVENTS = process.env.REACT_APP_SERVER_URL || ['allmessages', 'usersOnline', 'allDbUsers']
+
+    const dispatch = useDispatch();
+
+    const token = useSelector(state => localStorage.getItem('token') || state.userDataReducer.token);
+    const user = useSelector(state => state.getUserSocketReducer.socketUserData)
+    const socket = useSelector(state => state.getUserSocketReducer.socket)
+
+    const [message, setMessage] = useState({message: ''});
+
+    useEffect(() => {
+        if(token){
+            SOCKET_EVENTS.map(event => dispatch(getSocket(event)))       
+        }
+    }, [token])
+
+
+    return (
+        <div className='rootContainer'>
+
+            <Box className = 'rootBox'>
+
+                <Box className = 'rootMessageForm'>
+                    
+                    <MessageForm/>
+
+                    <Box 
+                        component="form" 
+                        onSubmit = {e  => {
+                                        e.preventDefault()
+                                        dispatch(sendMessage({user, socket}))
+                                        dispatch(getSocket('allmessages'))
+                                        setMessage({message: ''})
+                                    }}
+                        sx={{
+                            display: 'flex',
+                            margin: '20px 5px'
+                        }}
+                    >
+            
+                        <TextareaAutosize
+                            id="outlined-basic" 
+                            label="Type a message..." 
+                            variant="outlined" 
+                            value={message.message}
+                            placeholder='type you message...'
+                            minRows={3}
+                            maxRows={4}
+                            className='textArea'
+                            onKeyPress={(e) => {
+                                if (e.key === "Enter")   {
+                                    e.preventDefault();
+                                    dispatch(sendMessage({user, socket}))
+                                    dispatch(getSocket('allmessages'))
+                                    setMessage({message: ''})
+                                }
+                            }}
+                            onChange={e => { 
+                                dispatch(storeMessage({message: e.target.value}))
+                                setMessage({message: e.target.value})}
+                            } 
+                        
+                        /> 
+
+                        <Button 
+                            variant="contained" 
+                            type='submit'
+                            disabled={user?.isMutted}
+                            style={{width: '20%'}}
+                        >
+                            Send
+                        </Button>
+
+                    </Box>            
+                </Box>
+
+                <Box className='usersBox'>
+
+                    <Button 
+                        sx={{margin:'10px 5px'}}
+                        variant="outlined"
+                        onClick={()=> {
+                                localStorage.removeItem('token');
+                                socket.disconnect(); 
+                                dispatch(removeToken());
+                                }}>
+                        Logout
+                    </Button>
+
+                    <UserInfo/>
+
+                </Box>
+
+            </Box>
+        </div>
+    )
+}

frontend/src/components/chatPage/chatPage.scss

@@ -3,10 +3,38 @@
     margin: 0 auto;
 }
 
+.rootBox {
+    display: flex;
+    height: 100vh;
+}
+.rootMessageForm {
+    display: flex;
+    flex-grow:2;
+    max-width: 75%;
+    flex-direction: column;                    
+}
+.time {
+    font-style:italic;
+    color: rgb(80, 80, 80);
+    font-size: 12px;
+}
+
+.date {
+    font-style:italic;
+    color: rgb(80, 80, 80);
+    font-size: 8px;
+}
+.textArea {
+    width: 80%;
+    resize: none;
+    border-radius: 4px;
+}
+
 .message {
     padding: 10px;
     margin: 5px;
     max-width: 50%;
+    align-self: flex-start;
     border-radius: 10px;
     background-color: rgb(182, 230, 176);
     p {
@@ -24,14 +52,14 @@
 
 .myMessage {
     align-self: flex-end;
+    max-width: 50%;
     background-color: rgb(240, 231, 136);
     cursor: pointer;
 }
-.editMessage{
-    // background-color: rgb(246, 245, 235);
-    // transform:translate(-120px, -90px);
-
-}
+// .editMessage{
+//     background-color: rgb(246, 245, 235);
+//     transform:translate(-120px, -90px);
+// }
 
 .messageBox { 
     display: flex;
@@ -51,6 +79,7 @@
     padding: 20px;
     margin-left: 10px;
     width: 20%;
+    overflow: 'scroll';
     border-radius: 10px;
     background-color:rgb(243, 243, 243);
     .online {

frontend/src/components/chatPage/messageForm/MessageForm.js

@@ -1,71 +0,0 @@
-import TextareaAutosize from '@mui/material/TextareaAutosize';
-import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
-import { useDispatch, useSelector } from 'react-redux';
-import { sendMessage, storeMessage } from '../../../reducers/messageReducer';
-import { useState } from 'react';
-
-
-export const MessageForm = () => {
-
-    const dispatch = useDispatch();  
-      
-    const user = useSelector(state => state.getUserSocketReducer.socketUserData)
-    const socket = useSelector(state => state.getUserSocketReducer.socket)
-    const [message, setMessage] = useState({message: ''});
-
-
-    return (
-        <Box 
-            component="form" 
-            onSubmit = {e  =>
-                {
-                    e.preventDefault()
-                     dispatch(sendMessage({user, socket}))
-                     setMessage({message: ''})
-                }}
-                
-                sx={{
-                    display: 'flex',
-                    margin: '20px 5px'
-                }}>
-        
-                    <TextareaAutosize
-                        id="outlined-basic" 
-                        label="Type a message..." 
-                        variant="outlined" 
-                        value={message.message}
-                        placeholder='type you message...'
-                        minRows={3}
-                        maxRows={4}
-                        // onKeyPress={(e) => {
-                        //     if (e.key === "Enter")   {
-                        //         e.preventDefault();
-                        //         dispatch(sendStoreMessage())
-                        //         dispatch(setMessage({message: ''}));// add localstorage save message later
-                        //     }
-                        // }}
-                        onChange={e => { 
-                            dispatch(storeMessage({message: e.target.value}))
-                            setMessage({message: e.target.value})}
-                        } 
-                        style={{
-                            width: '80%',
-                            resize: 'none',
-                            borderRadius: '4px',
-                        }}
-                        /> 
-                    <Button 
-                        variant="contained" 
-                        type='submit'
-                        disabled={user?.isMutted}
-                        style={{
-                            width: '20%',
-                        }}
-                    >
-                        Send
-                    </Button>
-        </Box>            
-    )
-
-}

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

@@ -0,0 +1,88 @@
+import {Avatar, Box} from '@mui/material';
+import { dateFormat } from '../utils/dateFormat';
+import { useSelector } from 'react-redux';   
+import { Fragment, useRef, useEffect, useMemo} from 'react';
+import { scrollToBottom } from '../utils/scrollToBottom';
+           
+export const MessageForm = () => {
+
+    const randomColor = require('randomcolor');  
+    const startMessages = useSelector(state => state.getUserSocketReducer.startMessages)
+    const user = useSelector(state => state.getUserSocketReducer.socketUserData)
+    const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
+    const userColor = useMemo(() => randomColor(),[]);
+       
+    const endMessages = useRef(null);
+ 
+
+    useEffect(() => {
+        scrollToBottom(endMessages)
+      }, [startMessages]);
+                  
+    return (             
+            <Box className='messageBox'>                     
+                {
+                startMessages.map((item, i) =>
+                    <Fragment key={i} >
+
+                        <Avatar 
+                            sx={
+                                (item.userName == user.userName)
+                                ? 
+                                {
+                                    alignSelf: 'flex-end',
+                                    fontSize: 10,
+                                    width: '60px',
+                                    height: '60px',
+                                    color:'black',
+                                    backgroundColor: userColor
+                                }
+                                :
+                                {
+                                    backgroundColor:  (usersOnline.map(current => {
+                                        if(item.userName === current.userName ) {
+                                            return current.color
+                                        }
+                                    
+                                    } )),
+                                    fontSize: 10,
+                                    width: '60px',
+                                    height: '60px',
+                                    color:'black'
+                                }
+                            }> 
+                            {item.userName}
+                        </Avatar>   
+
+                        <div 
+                            key={item._id}
+                            onClick = {(e) => {
+                                if(e.target.className.includes('myMessage')){
+                                    e.currentTarget.className += ' editMessage' 
+                                    }
+                                //add function to edit message
+                            }}
+
+                            className={ 
+                                (item.userName === user.userName)? 'message myMessage' :'message'}
+                        >
+
+                            <p>{item.text}</p>  
+
+                            <div className='time'>
+                                {dateFormat(item).time}
+                            </div> 
+                            
+                            <div className='date'>
+                                {dateFormat(item).year}
+                            </div>
+                        </div>
+                
+                    </Fragment>
+                )}
+
+                <div ref={endMessages}></div>
+
+            </Box>
+    )
+} 

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

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

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

@@ -0,0 +1,96 @@
+import {Button,Avatar} from '@mui/material';
+import { useSelector } from 'react-redux';
+import { banUser } from '../service/banUser';
+import { muteUser } from '../service/muteUser';
+
+
+export const UserInfo = () => {
+
+    //add foto loading function
+    const allUsers = useSelector(state => state.getUserSocketReducer.allUsers)
+    const user = useSelector(state => state.getUserSocketReducer.socketUserData)
+    const usersOnline = useSelector(state => state.getUserSocketReducer.usersOnline)
+    const socket = useSelector(state => state.getUserSocketReducer.socket)
+
+    return (
+            <>
+                <Avatar sx={{ 
+                    bgcolor: 'grey',
+                    width: '100px',
+                    height: '100px',
+                    fontSize: 14,
+                    margin: '20px auto'
+                    }}>
+                    {user.userName}
+                </Avatar>
+                    {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>
+                                    {(user.userName === item.userName )?   
+                                        "admin"
+                                    :   
+                                    <>      
+                                        <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>)
+                }
+            </>
+        )
+}

frontend/src/components/chatPage/utils/dateFormat.js

@@ -1,5 +1,5 @@
 export const dateFormat = (item) => {
-
+//need to change on  Moment js
     const res = item.createDate.split('T');
     const date = {
         year : res[0],

frontend/src/components/loginForm/LoginForm.js

@@ -25,6 +25,7 @@ export const LoginForm = () => {
                     display: 'flex',
                     flexDirection: 'column',
                 }}>
+                    
                 <TextField
                         margin="normal"
                         required
@@ -35,7 +36,9 @@ export const LoginForm = () => {
                         autoComplete="email"
                         autoFocus
                         value={userName}
-                        onChange={e => dispatch(setUserName({userName: e.target.value}))}/>
+                        onChange={e => dispatch(setUserName({userName: e.target.value}))
+                        }/>
+
                 <TextField
                         margin="normal"
                         required
@@ -49,13 +52,16 @@ export const LoginForm = () => {
                         onChange={e => 
                             dispatch(setUserPassword({password: e.target.value}))
                         }/>
+
                 <Modal/>
+
                 <Button 
                     type="submit"
                     variant="contained"
                     fullWidth>
                         Login
                 </Button>
+
             </Box>
         </Container>
     )

frontend/src/components/modalMessage/Modal.js

@@ -6,13 +6,14 @@ export const Modal = () => {
     
     let text = useSelector(state=> state.userDataReducer.responseMessage)
     const dispatch =useDispatch();
+    
     if (text){
             setTimeout(() => {
                dispatch(deleteResponseMessage())
                 }, 2500)
     }
     
-    return <Alert 
+    return  <Alert 
                 severity="error"
                 sx={{display: (text ? 'block':'none' )}}>
                 {text}

frontend/src/index.css

@@ -0,0 +1,15 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+

frontend/src/reducers/userDataReducer.js

@@ -1,6 +1,6 @@
-import { isValidPayload } from "../components/loginForm/utils/validations/isValidPayload";
-import { isValidUserName } from '../components/loginForm/utils/validations/isValidUserName';
-import { sendForm } from '../components/loginForm/utils/sendForm';
+import { isValidPayload } from "../utils/validations/isValidPayload";
+import { isValidUserName } from '../utils/validations/isValidUserName';
+import { sendForm } from '../utils/sendForm';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
@@ -27,8 +27,7 @@ export const getUserData = createAsyncThunk(
                     console.log('error getUserData thunk', err)
                     return err?.message
                 }
-            }
-        
+            }  
     });