refactor: fix directories and decomposition components

frontend/src/components/chatPage/ChatPage.js

@@ -2,8 +2,13 @@ import { useEffect, useState, useMemo, useRef, Fragment} from 'react';
 import { MessageForm } from './messageForm/MessageForm';
 import {Button,Avatar, Box, Container} from '@mui/material';
 import { UserInfo } from './userInfo/UserInfo';
+import { dateFormat } from './utils/dateFormat';
 import {io} from 'socket.io-client';
 import './chatPage.scss';
+import { scrollToBottom } from './utils/scrollToBottom';
+import { banUser } from './service/banUser';
+import { muteUser } from './service/muteUser';
+import {sendMessage} from './service/sendMessage';
 
 export const ChatPage = ({ onExit, token }) => {
 
@@ -13,38 +18,9 @@ export const ChatPage = ({ onExit, token }) => {
     const [user, setUser] = useState({})
     const [usersOnline, setUsersOnline] = useState([])
     const [allUsers, setAllUsers] = useState([])
-
     const randomColor = require('randomcolor'); 
     const endMessages = useRef(null);
 
-    const sendMessage = (data) => {
-        if (data.message && data.message.length < 200) {
-            socket.emit('message', data); 
-        } 
-    };
-
-    const muteUser = (user, prevStatus) => {
-        socket.emit('muteUser', {user, prevStatus} );
-    }
-
-    const banUser = (user, prevStatus) => {
-        socket.emit('banUser', {user, prevStatus} );
-    }
-
-    const dateFormat = (item) => {
-
-        const res = item.createDate.split('T');
-        const date = {
-            year : res[0],
-            time : res[1].slice(-13, -5)
-        }
-        return date;
-    }
-    
-    const scrollToBottom = () => {
-        endMessages.current?.scrollIntoView({ behavior: "smooth" })
-      }
-
 
     useEffect(() => {
         if(newtoken){
@@ -102,12 +78,11 @@ export const ChatPage = ({ onExit, token }) => {
     }, [socket])
 
     useEffect(() => {
-        scrollToBottom()
+        scrollToBottom(endMessages)
       }, [messages]);
 
     let userColor = useMemo(() => randomColor(),[socket]);//color for myavatar
 
- 
     
     return (
         <Container maxWidth="lg">
@@ -199,7 +174,7 @@ export const ChatPage = ({ onExit, token }) => {
                         <MessageForm 
                         data = {user} 
                         sendMessage = {(data) => {
-                            sendMessage(data)
+                            sendMessage(data, socket)
                         }}>
                         </MessageForm>
                 
@@ -233,7 +208,7 @@ export const ChatPage = ({ onExit, token }) => {
                                         <Button
                                         variant="contained"
                                         onClick={()=>{
-                                            muteUser(item.userName, item.isMutted)
+                                            muteUser(item.userName, item.isMutted, socket)
                                         }}
                                         sx={{
                                             margin:'3px',
@@ -248,7 +223,7 @@ export const ChatPage = ({ onExit, token }) => {
                                         <Button
                                         variant="contained"
                                         onClick={()=>{
-                                            banUser(item.userName, item.isBanned)
+                                            banUser(item.userName, item.isBanned, socket)
                                         }}
                                         sx={{
                                             margin:'3px',

frontend/src/components/chatPage/service/banUser.js

@@ -0,0 +1,3 @@
+export const banUser = (user, prevStatus, socket) => {
+    socket.emit('banUser', {user, prevStatus} );
+}

frontend/src/components/chatPage/service/muteUser.js

@@ -0,0 +1,3 @@
+export const muteUser = (user, prevStatus, socket) => {
+    socket.emit('muteUser', {user, prevStatus} );
+}

frontend/src/components/chatPage/service/sendMessage.js

@@ -0,0 +1,5 @@
+export const sendMessage = (data, socket) => {
+    if (data.message && data.message.length < 200) {
+        socket.emit('message', data); 
+    } 
+};

frontend/src/components/chatPage/usersList/UsersList.js

@@ -1,14 +0,0 @@
-import Container from '@mui/material/Container';
-import TextField from '@mui/material/TextField';
-
-export const Userslist = () => {
-    return (
-        <Container maxWidth="xs">
- 
-        
-        
-        </Container>
-        
-    )
-
-}

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

@@ -0,0 +1,9 @@
+export const dateFormat = (item) => {
+
+    const res = item.createDate.split('T');
+    const date = {
+        year : res[0],
+        time : res[1].slice(-13, -5)
+    }
+    return date;
+}  

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

@@ -0,0 +1,3 @@
+export const scrollToBottom = (endMessages) => {
+    endMessages.current?.scrollIntoView({ behavior: "smooth" })
+}

frontend/src/components/loginForm/LoginForm.js

@@ -5,9 +5,10 @@ import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
 import { useState, useEffect } from 'react';
 import { sendForm } from './utils/sendForm';
+import {isValidPayload} from './utils/validations/isValidPayload';
+import {isValidUserName} from './utils/validations/isValidUserName';
 import { Modal } from '../modal/Modal';
 
-
 export const LoginForm = ({ onSubmit}) => {
 
     const [userData, setUserdata] = useState({userName:'', password: ''});
@@ -16,15 +17,6 @@ export const LoginForm = ({ onSubmit}) => {
 
     const POST_URL = 'http://localhost:5000/login';
 
-    const isValidPayload = ({userName, password}) => {
-        return (userName.trim().length > 2 && password.trim().length > 4) 
-    }
-
-    const isValidUserName = ({userName}) => {
-        const nameRegex = /[^A-Z a-z0-9]/ ;
-        return !nameRegex.test(userName);
-    }
-
     const handleSubmit = async (e) => {
         e.preventDefault();
         if(isValidPayload({...userData}) && isValidUserName({...userData})){

frontend/src/components/loginForm/utils/handleSubmit.js

@@ -0,0 +1,19 @@
+export const handleSubmit = async (e, POST_URL, userData) => {
+    e.preventDefault();
+    if(isValidPayload({...userData}) && isValidUserName({...userData})){
+        const data = await sendForm(POST_URL, userData);
+        const token = data.token;
+        if(token){
+            onSubmit(token);     
+        }
+        setTextModal(data.message)
+        setDisplay('block')
+        setUserdata({userName:'', password: ''});
+        
+        
+    } else {
+        setTextModal('too short or using special symbols')
+        setDisplay('block')
+    }
+    
+}

frontend/src/components/loginForm/utils/validations/isValidPayload.js

@@ -0,0 +1,3 @@
+export const isValidPayload = ({userName, password}) => {
+    return (userName.trim().length > 2 && password.trim().length > 4) 
+}

frontend/src/components/loginForm/utils/validations/isValidUserName.js

@@ -0,0 +1,4 @@
+export const isValidUserName = ({userName}) => {
+    const nameRegex = /[^A-Z a-z0-9]/ ;
+    return !nameRegex.test(userName);
+}