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,19 +87,20 @@ const ChatWindow = ({ room }) => {
 
       <div className="messages p-3 border d-flex flex-column-reverse">
         {/* mapirane poruke */}
-        {user && messages
+        {user &&
+          messages
             .map((n, index) => (
               <div
                 key={index}
                 className={
-                n.isAccessMessage === true ? 
-                "d-flex flex-column align-items-center" :
-                (n.senderId === user.id
+                  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")
+                    : "d-flex flex-column align-items-start"
                 }
               >
-              {console.log("Message",n,"User id",user.id)}
+                {console.log("Message", n, "User id", user.id)}
                 <p
                   className={`p-2 px-4 mb-0 rounded message ${
                     n.senderId !== user.id
@@ -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>