Added props and their values

frontend/src/Components/ChatWindow/ChatWindow.js

@@ -3,7 +3,6 @@ import Button from '@mui/material/Button';
 import Message from '../Message/Message';
 import './ChatWindow.css';
 
-
 const ChatWindow = (props) => {
     return (
         <div className='window'>

frontend/src/Components/Login/Login.js

@@ -8,7 +8,7 @@ import Spinner from "../UI/Spinner/Spinner";
 import './Login.css';
 
 
-const Login = ({loginState}) => {
+const Login = (props) => {
     const {loginError, isLoading} = useSelector(state => state.users, shallowEqual);
     const navigate = useNavigate('/');
     const dispatch = useDispatch();
@@ -32,7 +32,7 @@ const Login = ({loginState}) => {
     };
 
     return(
-        <div className={loginState}>
+        <div className={props.loginState}>
             {isLoading ? <Spinner/> : null}
             {loginError && <MyAlert alertText={loginError.error}/>}
             <Form 

frontend/src/Components/Message/Message.js

@@ -2,11 +2,11 @@ import React from "react";
 import './Message.css';
 
 
-const Message = ({author, message}) => {
+const Message = (props) => {
     return (
         <div className="Message">
-            <h3 className="author">{author}:</h3>
-            <p className="authorMessage">{message}</p>
+            <h3 className="author">{props.author}:</h3>
+            <p className="authorMessage">{props.message}</p>
         </div>
     );
 };

frontend/src/Components/Navigation/Navigation.js

@@ -3,10 +3,10 @@ import { NavLink } from "react-router-dom";
 import './Navigation.css';
 
 
-const Navigation = ({to, end, children}) => {
+const Navigation = (props) => {
     return (
         <span className="NavLink">
-            <NavLink to={to} end={end}>{children}</NavLink>
+            <NavLink to={props.to} end={props.end}>{props.children}</NavLink>
         </span>
     );
 };

frontend/src/Components/ProtectedRoute/ProtectedRoute.js

 import React from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 
-const ProtectedRoute = ({ isAllowed, redirectedPath, children }) => {
-    if(!isAllowed) {
-        return <Navigate to={redirectedPath} replace />
+const ProtectedRoute = (props) => {
+    if(!props.isAllowed) {
+        return <Navigate to={props.redirectedPath} replace />
     }
 
     return (
         <>
-            {children || <Outlet/>}
+            {props.children || <Outlet/>}
         </>
     );
 };

frontend/src/Components/Register/Register.js

@@ -7,7 +7,7 @@ import Spinner from "../UI/Spinner/Spinner";
 import './Register.css';
 
 
-const Register = ({registerState}) => {
+const Register = (props) => {
     const {registerError, isLoading} = useSelector(state => state.users, shallowEqual);
     const dispatch = useDispatch();
 
@@ -21,15 +21,15 @@ const Register = ({registerState}) => {
         setState(prevState => ({...prevState, [name]: value}));
     };
 
-    const submitHandler = async (e) => {
+    const submitHandler = (e) => {
         e.preventDefault();
-        await dispatch(registerUser({
+        dispatch(registerUser({
             userData: {...state}
         }));
     };
 
     return(
-        <div className={registerState}>
+        <div className={props.registerState}>
             {isLoading ? <Spinner/> : null}
             {registerError && <MyAlert alertText={registerError.errors['username'].message}/>}
             <Form 

frontend/src/Components/User/User.js

@@ -5,7 +5,7 @@ import Avatar from '@mui/material/Avatar';
 import './User.css';
 
 
-const User = ({user}) => {
+const User = (props) => {
     const StyledBadge = styled(Badge)(({ theme }) => ({
         '& .MuiBadge-badge': {
           backgroundColor: '#44b700',
@@ -42,9 +42,9 @@ const User = ({user}) => {
                 anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                 variant="dot"
             >
-                <Avatar sx={{ bgcolor: 'blueviolet'}}>{user}</Avatar>
+                <Avatar sx={{ bgcolor: 'blueviolet'}}>{props.user}</Avatar>
             </StyledBadge>
-            <p className="username">{user}</p>
+            <p className="username">{props.user}</p>
         </div>
     );
 };  

frontend/src/Components/UserList/UserList.js

@@ -3,12 +3,12 @@ import User from "../User/User";
 import './UserList.css';
 
 
-const UserList = ({users}) => {
+const UserList = (props) => {
     return (
         <div className="UserList">
             <p className="onlineUser">Online users</p>
             {
-                users.map((user, idx) => {
+                props.users.length && props.users.map((user, idx) => {
                     return (
                         <User key={user._id + idx} user={user.username}/>
                     )