Refactor page components

Author: rickkoh

frontend/src/app/socket/_components/Message.tsx

@@ -0,0 +1,9 @@
+export default function Message({ text }: { text: String }) {
+  return (
+    <div className="flex flex-row">
+      <div className="flex flex-col">
+        <div>{text}</div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/socket/_components/MessageComposer.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { Socket } from "socket.io-client";
+
+export default function MessageComposer() {
+  const [socket, setSocket] = useState<Socket | undefined>(undefined);
+  const [message, setMessage] = useState<string>("");
+
+  function handleSend() {
+    if (socket) {
+      socket.emit("message", message);
+      setMessage("");
+    }
+  }
+  return (
+    <div className="flex flex-row gap-4 mt-auto">
+      {/* These two can even be broken down further into smaller components, i.e. MessageInput and MessageSendButton */}
+      <input
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        className="flex-1 p-2 border border-black rounded"
+      />
+      <button
+        className="px-4 py-1 border border-black rounded-md"
+        onClick={handleSend}
+      >
+        send
+      </button>
+    </div>
+  );
+}

frontend/src/app/socket/_components/Messages.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Message from "./Message";
+import { io, Socket } from "socket.io-client";
+
+export default function Messages() {
+  const [socket, setSocket] = useState<Socket | undefined>(undefined);
+  const [isConnected, setIsConnected] = useState(false);
+  const [transport, setTransport] = useState("N/A");
+
+  const [messages, setMessages] = useState<string[]>(["hello", "world"]);
+
+  useEffect(() => {
+    const newSocket = io("http://localhost:3000");
+
+    newSocket.on("connect", () => {
+      setIsConnected(true);
+      setTransport(newSocket.io.engine.transport.name); // You can set transport type here
+    });
+
+    newSocket.on("message", (message: string) => {
+      setMessages((prevMessages) => [...prevMessages, message]);
+    });
+
+    newSocket.on("disconnect", () => {
+      setIsConnected(false);
+    });
+
+    setSocket(newSocket);
+
+    // Cleanup function to disconnect the socket when the component unmounts
+    return () => {
+      newSocket.disconnect();
+    };
+  }, []); // Only run on mount/unmount
+
+  return (
+    <div className="flex flex-col">
+      {messages.map((message, index) => (
+        <Message key={index} text={message} />
+      ))}
+    </div>
+  );
+}

frontend/src/app/socket/page.tsx

@@ -1,70 +1,11 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { io, Socket } from "socket.io-client";
+import Messages from "./_components/Messages";
+import MessageComposer from "./_components/MessageComposer";
 
 export default function Page() {
-  const [socket, setSocket] = useState<Socket | undefined>(undefined);
-  const [message, setMessage] = useState<string>("");
-  const [messages, setMessages] = useState<string[]>(["hello", "world"]);
-  const [isConnected, setIsConnected] = useState(false);
-  const [transport, setTransport] = useState("N/A");
-
-  function handleSend() {
-    if (socket) {
-      socket.emit("message", message);
-      setMessage("");
-    }
-  }
-
-  useEffect(() => {
-    const newSocket = io("http://localhost:3000");
-
-    newSocket.on("connect", () => {
-      setIsConnected(true);
-      setTransport(newSocket.io.engine.transport.name); // You can set transport type here
-    });
-
-    newSocket.on("message", (message: string) => {
-      setMessages((prevMessages) => [...prevMessages, message]);
-    });
-
-    newSocket.on("disconnect", () => {
-      setIsConnected(false);
-    });
-
-    setSocket(newSocket);
-
-    // Cleanup function to disconnect the socket when the component unmounts
-    return () => {
-      newSocket.disconnect();
-    };
-  }, []); // Only run on mount/unmount
-
   return (
-    <div className="flex flex-col w-full h-full p-24 bg-white text-black">
-      <div className="flex flex-col">
-        {messages.map((message, index) => (
-          <div key={index} className="flex flex-row">
-            <div className="flex flex-col">
-              <div>{message}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-      <div className="flex flex-row mt-auto gap-4">
-        <input
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          className="flex-1 p-2 border border-black rounded"
-        />
-        <button
-          className="border border-black rounded-md px-4 py-1"
-          onClick={handleSend}
-        >
-          send
-        </button>
-      </div>
+    <div className="flex flex-col w-full h-full p-24 text-black bg-white">
+      <Messages />
+      <MessageComposer />
     </div>
   );
 }