Finally fixed input

sports-matcher/src/ChatWindow.js

@@ -4,6 +4,7 @@ import React from 'react';
 import './chats.css'
 import Chat from './Chat'
 import Contact from './Contact'
+import { useState } from "react";
 
 class ChatWindow extends React.Component {
     render() {
@@ -11,15 +12,14 @@ class ChatWindow extends React.Component {
             <div class="chatcomponent">
                 <UserList />
                 <MessageList />
+                <ChatInput />
             </div>
         )
     }
-    test() {
-        alert("test")
-    }
 }
 
 class UserList extends React.Component {
+    
     render() {
         return (
             <div class="contactlist">
@@ -35,26 +35,10 @@ class MessageList extends React.Component {
     render() {
         return (
             <div class="messagelist">
-                    <div class="chatbubble-container">                    
-                        <div class="chatbubble right">
-                            Got time for tennis this week, Raiden?
-                        </div>
-                    </div>
-                    <div class="chatbubble-container">                    
-                        <div class="chatbubble left">
-                            Foolish question. If I do not even have free time, How am I to pursue eternity and fulfill my promise to the people of Inazuma?
-                        </div>
-                    </div>
-                    <div class="chatbubble-container">
-                        <div class="chatbubble right">
-                            Aiight, see you at 4
-                        </div>
-                    </div>
-                    <div class="chatbubble-container">                    
-                        <div class="chatbubble left">
-                            As you wish.
-                        </div>
-                    </div>
+                <Chat message="Got time for tennis this week, Raiden?" side="right"/>
+                <Chat message="Foolish question. If I do not even have free time, How am I to pursue eternity and fulfill my promise to the people of Inazuma?" side="left" />
+                <Chat message="Aiight, see you at 4" side="right" />
+                <Chat message="As you wish." side="left" />
                 </div>
         )
     }
@@ -69,9 +53,61 @@ class MessageList extends React.Component {
 //         )
 //     }
 // }
-class ChatInput extends React.Component {
+const ChatInput = () => {
+    const [message, setMessage] = useState( '' );
+    
+    // const onKeyPress = (e) => {
+    //     // if(e.key === 'Enter'){
+    //     //     e.preventDefault(); // Ensure it is only this code that runs
+    //     //     setMessage("")
+    //     // }
+    // }
+
+    const onKeyDown = (e) => {
+        const keyCode = e.which || e.keyCode;
+
+        // 13 represents the Enter key
+        if (keyCode === 13 && !e.shiftKey) {
+            e.preventDefault();
+            setMessage("")
+        }
+    }
+
+    return (
+        // onKeyPress={(e) => onKeyPress(e)}
+      <div>
+        <textarea
+           class="chatinput"
+           value={message}
+           placeholder="Press ENTER to send, SHIFT + ENTER for new line"
+           onChange={e => setMessage(e.target.value)}
+           
+           onKeyDown={onKeyDown}
+         />
+      </div>
+    );
+  };
+class ChatInput2 extends React.Component {
+    
+    constructor(props) {
+        super(props)
+        this.setState({inputVal : ""})
+    }
+
+    handleUserInput(e) {
+        this.setState(this.setState({inputVal : e.target.value}));
+    };
+
     render() {
-        return (<p>Placeholder</p>)
+        return (<textarea class="chatinput" placeholder="Press ENTER to send, Ctrl + ENTER for new line"
+                onKeyPress={(e)=>this.onKeyPress(e)} value="" onChange={(e) => this.handleUserInput(e)} />)
+        
+    }
+    onKeyPress(e) {
+        if(e.key === 'Enter'){
+            e.preventDefault(); // Ensure it is only this code that runs
+            this.setState({inputVal : ""});
+        }
     }
 }
 export default ChatWindow;

sports-matcher/src/Contact.js

@@ -11,13 +11,21 @@ class Contact extends React.Component {
         }
     }
     onClick() {
+        // This toggling of the contact selection is for demo purposes only
+        // Once backend is implemented, only one contact can be selected
+        if (this.state.selected === "false") {
             this.setState({selected : "true"})
+        } else {
+            this.setState({selected : "false"})
+        }
+        
     }
     render() {
         return (
             <div class={this.state.selected === "true" ? "contact dark" : "contact"}>
                         <div class="profilepiccontainer">
-                            <img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()} />
+                            <img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()} 
+                                alt="profile" />
                         </div>
                         <div class="profilenamecontainer">
                             <div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>

sports-matcher/src/chats.css

@@ -1,3 +1,5 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
 .chatcomponent > * {
     display: inline-block;
 }
@@ -29,8 +31,12 @@
     text-align: center;
 }
 .messagelist {
-    height: 500px;
+    height: 400px;
     width: 800px;
+    top: 0px;
+    left: 200px;
+
+    position: absolute;
     background-color: rgb(80, 80, 80);
     overflow-x: hidden;
     overflow-y: scroll;
@@ -86,3 +92,17 @@
     height: auto;
     float: left;
 }
+.chatinput {
+    background-color: rgb(75, 75, 75);
+    top: 400px;
+    left: 200px;
+    position: absolute;
+
+    height: 92px;
+    width: 793px;
+
+    color: antiquewhite;
+
+    border-width: 2px;
+    border-color: rgb(48, 45, 45);
+}