Separate react components

react/src/app.jsx

@@ -1,24 +1,14 @@
 import React from "react";
 
 function App() {
-    const [message, setMessage] = React.useState('');
     const [alerts, setAlerts] = React.useState([]);
     const ws = React.useRef(null);
     const timeout = React.useRef(null);
 
-    const handleChange = e => {
-        setMessage(e.target.value);
-    }
-
-    const sendMessage = e => {
-        e.preventDefault();
-
+    const sendMessage = (message) => {
         if (ws.current.readyState != 1) {
             return false;
         }
-        if (!message) {
-            return false;
-        }
 
         let msg = JSON.stringify({
             text: message,
@@ -28,7 +18,8 @@ function App(){
 
         ws.current.send(msg);
         addAlert(msg);
-        setMessage('');
+
+        return true;
     }
 
     const addAlert = (msg) => {
@@ -44,11 +35,11 @@ function App(){
             // ws.current.send("Hello from the client!");
         }
         ws.current.onclose = () => console.log('Disconnected');
+        ws.current.onerror = () => console.log('Websocket error')
         
         return () => {
             ws.current.close();
         }
-
     }, []);
 
     // Sets a received message handler,
@@ -60,7 +51,6 @@ function App(){
             const msg = e.data;
             addAlert(msg);
         }
-
     }, [alerts]);
 
     // Clears out alerts with a delay,
@@ -73,7 +63,6 @@ function App(){
         return () => {
             clearTimeout(timeout.current);
         }
-
     }, [alerts]);
 
     return (
@@ -81,16 +70,7 @@ function App(){
             <div className="position-absolute top-50 start-0 w-100 translate-middle-y">
                 <div className="row">
                     <div className="col col-md-8 col-lg-6 mx-auto">
-                        <form onSubmit={sendMessage}>
-                            <div className="input-group">
-                                <input
-                                    type="text" className="form-control" placeholder="Enter message" aria-label="Enter message" aria-describedby="button-send"
-                                    value={message}
-                                    onChange={handleChange}
-                                />
-                                <button className="btn btn-success" type="submit" id="button-send">Send</button>
-                            </div>
-                        </form>
+                        <Form sendMessage={sendMessage} />
                     </div>    
                 </div>
             </div>
@@ -98,13 +78,7 @@ function App(){
                 <div className="row">
                     <div className="col col-md-8 col-lg-6 mx-auto mt-5">
                         {alerts.map((alert) => (
-                            <div
-                                key={alert.time}
-                                className={`alert alert-${alert.source == "back" ? "success" : "primary"}`}
-                                role="alert"
-                            >
-                                <em>{alert.source == "back" ? "Received" : "Sent"}</em>: {alert.text}
-                            </div>
+                            <Alert key={alert.time} alert={alert} />
                         ))}
                     </div>
                 </div>
@@ -113,4 +87,57 @@ function App(){
     )
 }
 
+function Alert({alert}) {
+    const alertType = alert.source == "back" ? "success" : "primary";
+    const alertLabel = alert.source == "back" ? "Received" : "Sent";
+
+    return (
+        <div
+            className={"alert alert-"+alertType}
+            role="alert"
+        >
+            <em>{alertLabel}</em>: {alert.text}
+        </div>
+    );
+}
+
+function Form({sendMessage}) {
+    const [message, setMessage] = React.useState('');
+
+    const submitMessage = (e) => {
+        e.preventDefault();
+
+        if (!message) {
+            return false;
+        }
+
+        if (sendMessage(message)) {
+            setMessage('');
+        }
+    }
+
+    return (
+        <form onSubmit={submitMessage}>
+            <div className="input-group">
+                <input
+                    type="text"
+                    className="form-control"
+                    placeholder="Enter message"
+                    aria-label="Enter message"
+                    aria-describedby="button-send"
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                />
+                <button
+                    id="button-send"
+                    className="btn btn-success"
+                    type="submit"
+                >
+                    Send
+                </button>
+            </div>
+        </form>
+    )
+}
+
 export default App;