Merge branch 'feature/showing_date_and_time_of_sending_message' of stefan.stamenovic/WebAPISignalRChat into development

Frontend/src/components/ChatList.js

@@ -97,7 +97,6 @@ const ChatList = () => {
           dispatch(
             chatActions.saveContextId({ connId: data.connId, userId: user.id })
           );
-          console.log("Join room", data);
           setChatMessage(data);
         }
       });
@@ -143,7 +142,6 @@ const ChatList = () => {
             chatActions.saveContextId({ connId: data.connId, userId: user.id })
           );
         }
-        console.log("Send group message", data);
         setChatMessage(data);
       });
     }
@@ -327,7 +325,7 @@ const ChatList = () => {
         open={showModal}
         acceptHandler={dialogHandler}
       />
-      <div className="p-0 h-100-auto-overflow">
+      <div className="p-0 h-100-auto-overflow overflow-x">
         <div className="pe-4 bg-transparent w-100 mb-3 p-0 border-bottom border-light d-flex justify-content-between align-items-center">
           <h4 className="p-0 m-0 py-3 w-100 text-start ps-3 text-light bg-transparent">
             Chat Rooms

Frontend/src/components/ChatWindow.js

@@ -5,6 +5,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { chatActions } from "../store/chat-slice";
 import { BsCircleFill } from "react-icons/bs";
 import TypingBar from "./TypingBar";
+import {getDate,getMonth} from '../helpers'
 
 const ChatWindow = ({ room }) => {
   const messagesEndRef = useRef(null);
@@ -16,6 +17,53 @@ const ChatWindow = ({ room }) => {
   const activeRoom = useSelector((state) => state.chat.activeRoom);
   const messages = useSelector((state) => state.chat.messages);
   const dispatch = useDispatch();
+  const [proba,setProba] = useState([])
+
+  useEffect(() => {
+    showDate()
+  },[messages])
+
+  const showDate = () => {
+    let temp = [...messages];
+    if(temp[0] !== undefined){
+      let date = getDate(temp[0].createdAtUtc)
+      let d = date.getDate();
+      let m = date.getMonth();
+      let y = date.getFullYear();
+      temp.splice(0,0,{
+        content:getMonth(m) + " " + d.toString() + ", " +  y.toString(),
+        senderId:undefined,  //is information about date not message
+        username:undefined,
+        id:null,
+        createdAtUtc: undefined,
+      })
+      for (let index = 0; index < temp.length; index++) {
+        const element = temp[index];
+        let day = getDate(element.createdAtUtc).getDate();
+        if(temp[index + 1] !== undefined){
+          if(temp[index + 1].createdAtUtc !== undefined)
+          {
+            if(temp[index].isAccessMessage === undefined){
+              if(getDate(temp[index + 1].createdAtUtc).getDate() > day ){
+                let elem = temp[index + 1].createdAtUtc;
+                let d = getDate(elem).getDate()
+                let m = getDate(elem).getMonth()
+                let y = getDate(elem).getFullYear()
+                temp.splice(index+1,0,{
+                      content:getMonth(m) + " " + d.toString() + ", " +  y.toString(),
+                      senderId:undefined, //is information about date not message
+                      username:undefined,
+                      id:null,
+                      createdAtUtc: undefined,
+                    })
+              }
+            }
+          }
+        }
+      }
+    }
+    setProba(temp)
+  }
 
   useEffect(() => {
     dispatch(chatActions.setMessages(room.messages));
@@ -84,32 +132,42 @@ const ChatWindow = ({ room }) => {
         <div className="overlay p-3 px-4 d-flex flex-column-reverse">
         {/* mapirane poruke */}
         {user &&
-          messages
+          proba
             .map((n, index) => (
               <div
                 key={index}
                 className={
-                  n.isAccessMessage === true
+                  n.isAccessMessage === true || n.senderId === undefined
                     ? "d-flex flex-column align-items-center"
                     : n.senderId === user.id
                     ? "d-flex flex-column align-items-end"
                     : "d-flex flex-column align-items-start"
                 }
               >
-                {console.log("Message", n, "User id", user.id)}
-                <p
-                  className={`p-2 px-4 mb-0 rounded message ${
-                    n.isAccessMessage === true
+                <div
+                  className={`p-2 px-3 mb-0 rounded message ${
+                    n.isAccessMessage === true || n.senderId === undefined
                     ? "text-muted small"
                     : n.senderId !== user.id
                       ? "bg-main-primary text-light chatMsg"
                       : "bg-light text-dark chatMsg"
                   }`}
                 >
+                  <div style={{display:'flex',flexDirection:'column'}}>
                   {n.content}
-                </p>
+                  {
+                  n.senderId !== undefined ? 
+                  <div style={{fontSize:12,alignSelf:'flex-end'}}>
+                    {(new Date(Date.parse(n.createdAtUtc))).getHours().toString()}
+                    :
+                    {(new Date(Date.parse(n.createdAtUtc))).getMinutes().toString()}
+                  </div> : ''
+                  }
+                  
+                </div>
+                </div>
                 <p className="text-muted small m-0 p-0 mb-4">
-                  {n.senderId !== user?.id && !n.isAccessMessage ? (
+                  {n.senderId !== user?.id && !n.isAccessMessage && n.senderId !== undefined ? (
                     activeUsers.some((m) => m === n.senderId) ? (
                       <BsCircleFill className="me-2 text-success" />
                     ) : (

Frontend/src/helpers.js

@@ -0,0 +1,34 @@
+export const getMonth = (monthNumber) => {
+    switch(monthNumber){
+      case 0:
+        return "January";
+      case 1:
+        return "February";
+      case 2:
+        return "March"
+      case 3:
+        return "April"
+      case 4:
+        return "May"
+      case 5:
+        return "June"
+      case 6:
+        return "July"
+      case 7:
+        return "August"
+      case 8:
+        return "September"
+      case 9:
+        return "October"
+      case 10:
+        return "November"
+      case 11:
+        return "December"
+      default:
+        return "January"
+    }
+}
+
+export const getDate = (date) => {
+    return new Date(Date.parse(date))
+}

Frontend/src/index.css

@@ -76,7 +76,7 @@ button.button-block{
 }
 .roomsBtn:hover{
   transition: 0.35s;
-  padding: 0 20px;
+  padding: 0 10px;
   transform: scale(1.1);
 }
 /* ======================================= flex */
@@ -144,3 +144,6 @@ input[type=submit]{
 .chatMsg{
   font-size: 1.25rem;
 }
+.overflow-x{
+  overflow-x: hidden;
+}

Frontend/src/store/chat-slice.js

@@ -123,15 +123,12 @@ const chatSlice = createSlice({
       state.messages = action.payload;
     },
     addNotification: (state, action) => {
-      console.log(1, action.payload);
       if (state.notifications.length !== 0) {
-        console.log(2);
         const room = state.notifications.find(
           (notification) => notification.roomId === action.payload
         );
 
         if (room) {
-          console.log(3);
           room.notificationCount++;
         } else {
           state.notifications.push({
@@ -140,7 +137,6 @@ const chatSlice = createSlice({
           });
         }
       } else {
-        console.log(4);
         state.notifications.push({
           roomId: action.payload,
           notificationCount: 1,