before presenting application

Frontend/src/components/ChatList.js

@@ -51,13 +51,12 @@ const ChatList = () => {
     }
   }, [user, dispatch, loadedNotification]);
 
-  // Maybe don't work
   useEffect(() => {
     user !== null && user.roles.includes("Support")
       ? dispatch(fetchSupportRoomsAsync(user.id))
       : user !== null && dispatch(fetchChatRoomsAsync(user.id));
     dispatch(fetchRequestsAsync());
-  }, [dispatch]);
+  }, [dispatch,user]);
 
   useEffect(() => {
     if (requests && rooms) {
@@ -95,10 +94,12 @@ const ChatList = () => {
       connection.on("ReceiveMessage", (data) => {
         // When user enter room first time after login, generated Context.ConnectionId will be saved in redux
         if (data.connId) {
-          dispatch(
-            chatActions.saveContextId({ connId: data.connId, userId: user.id })
-          );
-          setChatMessage(data);
+            dispatch(
+              chatActions.saveContextId({ connId: data.connId, userId: user.id })
+            );
+          if(user.id !== data.userId){
+            setChatMessage(data);
+          }
         }
       });
 
@@ -135,7 +136,6 @@ const ChatList = () => {
     }
   };
 
-  // Maybe don't work
   useEffect(() => {
     if (myConnection) {
       myConnection.on("ReceiveMessage", (data) => {
@@ -150,7 +150,6 @@ const ChatList = () => {
     }
   }, [myConnection, dispatch]);
 
-  // Maybe don't work
   useEffect(() => {
     if (chatMessage && activeRoom.id === chatMessage.roomId) {
       dispatch(
@@ -171,7 +170,6 @@ const ChatList = () => {
     }
   }, [chatMessage, dispatch]);
 
-  // Maybe don't work
   useEffect(() => {
     if (notificationRoom && activeRoom) {
       if (notificationRoom === activeRoom.id) {
@@ -244,7 +242,6 @@ const ChatList = () => {
           >
             <button
               className="text-start w-100 py-2 px-3 btn btn-light h-100"
-              // onClick={showRoomMessagesHandler.bind(this, room)}
             >
               {room.name}
             </button>
@@ -274,7 +271,6 @@ const ChatList = () => {
                 )}
                 <button
                   className="text-start w-100 py-2 px-3 btn btn-light h-100"
-                  // onClick={showRoomMessagesHandler.bind(this, n)}
                 >
                   {n.name}
                 </button>

Frontend/src/components/ChatWindow.js

@@ -5,7 +5,8 @@ import { useSelector, useDispatch } from "react-redux";
 import { chatActions } from "../store/chat-slice";
 import { BsCircleFill } from "react-icons/bs";
 import TypingBar from "./TypingBar";
-import { fetchChatRoomsAsync } from "../store/chat-slice";
+import { fetchChatRoomsAsync,fetchSupportRoomsAsync } from "../store/chat-slice";
+import { fetchRequestsAsync } from "../store/request-slice";
 import { getDate, getMonth } from "../Helpers";
 
 const ChatWindow = ({ room }) => {
@@ -80,10 +81,10 @@ const ChatWindow = ({ room }) => {
   };
 
   useEffect(() => {
-    // dispatch(chatActions.setMessages(room.messages));
-    if (user) {
-      dispatch(fetchChatRoomsAsync(user.id));
-    }
+    user !== null && user.roles.includes("Support")
+      ? dispatch(fetchSupportRoomsAsync(user.id))
+      : user !== null && dispatch(fetchChatRoomsAsync(user.id));
+      dispatch(fetchRequestsAsync());
   }, [dispatch, room, user]);
 
   useEffect(() => {
@@ -146,6 +147,14 @@ const ChatWindow = ({ room }) => {
     return minutes < 10 ? "0" + minutes : minutes;
   };
 
+  const calculatesHours = (createdAt) => {
+    const date = getDate(createdAt);
+
+    const hours = date.getHours();
+
+    return hours < 10 ? "0" + hours : hours;
+  }
+
   return (
     <div className="p-2 position-relative bg-main rounded h-100 d-flex flex-column">
       <div className="p-2 px-3 pt-3 position-relative bg-light rounded h-100 d-flex flex-column">
@@ -187,10 +196,9 @@ const ChatWindow = ({ room }) => {
                     >
                       <div style={{ display: "flex", flexDirection: "column" }}>
                         {n.content}
-
                         {n.senderId !== undefined ? (
                           <div style={{ fontSize: 12, alignSelf: "flex-end" }}>
-                            {getDate(n.createdAtUtc).getHours().toString()}:
+                            {calculatesHours(n.createdAtUtc)}:
                             {calculateMinutes(n.createdAtUtc)}
                           </div>
                         ) : (
@@ -242,6 +250,7 @@ const ChatWindow = ({ room }) => {
               variant="outline-secondary"
               id="button-addon2"
               type="submit"
+              disabled={message.length === 0}
             >
               Send
             </Button>

Frontend/src/components/LogInForm.js

@@ -77,7 +77,6 @@ const LogInForm = () => {
         >
             <Form.Control value={password} onChange={e => setPassword(e.target.value)} type="password" className={`bg-dark responsive-input text-light ${err.password ? 'border-danger' : ''}`} placeholder="Enter your password..." />
         </FloatingLabel>
-        <Link className='text-light my-3' to='/'>Forgott password? Click here</Link><br></br>
         <input type='submit' className='btn py-2 mt-4 w-100 btn-main text-dark' value={'log in'} />
         <p className='text-light m-0 p-0 py-3'>or</p>
         <p className='text-light m-0 p-0'>No account yet?</p>

Frontend/src/components/MiddleContainer.js

@@ -42,7 +42,6 @@ const MiddleContainer = ({ showTerm }) => {
     connection.start().then(fulfilled, rejected);
   }
 
-  // Maybe don't work
   useEffect(() => {
     connect();
   }, []);

Frontend/src/components/RegisterForm.js

@@ -44,12 +44,12 @@ const RegisterForm = () => {
       <p className="text-muted p-0 m-0 py-3 pb-4 text-start">
         Please enter your valid credentials
       </p>
-      <div style={{width:"570px"}} className='text-start alert alert-danger'>
       {error &&
         error.map((n) => n.trim().length > 0 &&
-          " " +n.trim()+"."
+        <div style={{width:"570px"}} className='text-start alert alert-danger py-1'>
+          {" " +n.trim()+"."}
+          </div>
         )}
-        </div>
       <FormGroup as={Row}>
         <Col md="6" className="pe-1">
           <FloatingLabel label="First Name" className="mb-3">

Frontend/src/components/SideNavbar.js

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { FiBell, FiUser, FiMessageSquare, FiLogOut } from "react-icons/fi";
+import { FiMessageSquare, FiLogOut } from "react-icons/fi";
 import { UserContext } from "../contexts/userContext";
 import { useDispatch } from "react-redux";
 import { chatActions } from "../store/chat-slice";

Frontend/src/components/UI/Dialog.js

@@ -36,8 +36,7 @@ const Dialog = ({ changeModalVisibility, open, acceptHandler }) => {
             <Typography className="text-light" id="transition-modal-title" variant="h5" component="h2">
               Are you sure you want to send a request?
             </Typography>
-            <Typography className="text-light" id="transition-modal-description" sx={{ mt: 2 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            <Typography className="text-light py-3" id="transition-modal-description" sx={{ mt: 2 }}>
             </Typography>
             <div style={{marginTop: '2rem', display: 'flex', justifyContent: 'right'}}>
                 <button className="btn-main text-light w-50 btn" style={{marginLeft: '0.5rem'}} onClick={handleClose}>Close</button>

Frontend/src/index.css

@@ -116,7 +116,7 @@ input[type=submit]{
   background: url('/public/background.jpg');
 }
 .overlay{
-  height: 575px;
+  height: 100%;
   background-color: rgba(255,255,255,0.9);
   overflow-y: scroll;
 }

Frontend/src/screens/ChatsScreen.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Container } from 'react-bootstrap'
 import MainContainer from '../components/MainContainer'
 import MiddleContainer from '../components/MiddleContainer'

Frontend/src/store/chat-slice.js

@@ -90,12 +90,6 @@ const chatSlice = createSlice({
     },
     // New message sent from user
     newMessage: (state, action) => {
-      // if (action.payload.changedRoom) {
-      //   state.messages = [];
-      // } else {
-      //   state.messages = [...state.messages, action.payload];
-      // }
-
       console.log(action.payload);
       const room = state.rooms.find((r) => r.id === action.payload.room);
       room.messages.push(action.payload.message);
@@ -187,6 +181,7 @@ const chatSlice = createSlice({
       }
     },
     setTrackedRoom: (state, action) => {
+      console.log(action.payload)
       state.trackedRoom = state.rooms.find((r) => r.id === action.payload);
     },
   },
@@ -213,7 +208,7 @@ const chatSlice = createSlice({
     });
     builder.addCase(fetchSupportRoomsAsync.fulfilled, (state, action) => {
       state.rooms = action.payload;
-      state.status = "idle";
+      state.status = "fetchRoomsFulfilled idle";
       state.error = null;
     });
     builder.addCase(fetchSupportRoomsAsync.rejected, (state, action) => {