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

Frontend/src/components/ChatWindow.js

@@ -34,7 +34,9 @@ const ChatWindow = ({ room }) => {
     );
   };
 
-  const onSendMessageToGroupHandler = async () => {
+  const onSendMessageToGroupHandler = async (e) => {
+    e.preventDefault();
+
     const userToFetch = connections.filter(
       (conn) => conn.userId === user.id && conn.roomId === activeRoom.id
     );
@@ -85,43 +87,44 @@ const ChatWindow = ({ room }) => {
 
       <div className="messages p-3 border d-flex flex-column-reverse">
         {/* mapirane poruke */}
-        {user && messages
-          .map((n, index) => (
-            <div
-              key={index}
-              className={
-                n.isAccessMessage === true ? 
-                "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.senderId !== user.id
-                    ? "bg-primary text-light"
-                    : "bg-light text-dark"
-                }`}
+        {user &&
+          messages
+            .map((n, index) => (
+              <div
+                key={index}
+                className={
+                  n.isAccessMessage === true
+                    ? "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"
+                }
               >
-                {n.content}
-              </p>
-              <p className="text-muted small m-0 p-0 mb-4">
-                {n.senderId !== user?.id ? (
-                  activeUsers.some((m) => m === n.senderId) ? (
-                    <BsCircleFill className="me-2 text-success" />
+                {console.log("Message", n, "User id", user.id)}
+                <p
+                  className={`p-2 px-4 mb-0 rounded message ${
+                    n.senderId !== user.id
+                      ? "bg-primary text-light"
+                      : "bg-light text-dark"
+                  }`}
+                >
+                  {n.content}
+                </p>
+                <p className="text-muted small m-0 p-0 mb-4">
+                  {n.senderId !== user?.id ? (
+                    activeUsers.some((m) => m === n.senderId) ? (
+                      <BsCircleFill className="me-2 text-success" />
+                    ) : (
+                      <BsCircleFill className="me-2 text-danger" />
+                    )
                   ) : (
-                    <BsCircleFill className="me-2 text-danger" />
-                  )
-                ) : (
-                  ""
-                )}
-                {n.isAccessMessage !== true && n.username}
-              </p>
-            </div>
-          ))
-          .reverse()}
+                    ""
+                  )}
+                  {n.isAccessMessage !== true && n.username}
+                </p>
+              </div>
+            ))
+            .reverse()}
         <div ref={messagesEndRef} />
       </div>
 
@@ -130,6 +133,7 @@ const ChatWindow = ({ room }) => {
       <Form
         style={{ height: "80px" }}
         className="d-flex align-items-center"
+        onSubmit={onSendMessageToGroupHandler}
       >
         <InputGroup className="mb-3">
           <FormControl
@@ -137,13 +141,14 @@ const ChatWindow = ({ room }) => {
             aria-label="Enter your messagge..."
             aria-describedby="basic-addon2"
             onChange={(e) => messageOnChangeHandler(e)}
+            value={message}
           />
 
           <Button
             className="px-5"
             variant="outline-secondary"
             id="button-addon2"
-            onClick={onSendMessageToGroupHandler}
+            type="submit"
           >
             Send
           </Button>