Merge pull request #2 from craig-dsilva/ui

Main UI

Author: craig-dsilva

chat-app/client/src/App.css

@@ -0,0 +1,42 @@
+.messages {
+  list-style: none;
+}
+
+.message {
+  margin-bottom: 0.5em;
+}
+
+.chat-box {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 16px;
+  display: flex;
+  height: 7vh;
+  gap: 8px;
+}
+
+.chat-input {
+  flex: 1;
+  border-radius: 8px;
+  border: 1px solid #777;
+}
+
+.send-button {
+  background-color: #12bc00;
+  color: #fff;
+  border-radius: 8px;
+  border: none;
+}
+
+@media screen and (min-width: 800px) {
+  .container {
+    margin: auto 30%;
+  }
+  .chat-box {
+    height: 5vh;
+    left: 25%;
+    right: 25%;
+  }
+}

chat-app/client/src/App.jsx

@@ -1,16 +1,38 @@
-import { io } from "socket.io-client";
+import { useState } from "react";
+import useSocket from "./hooks/useSocket";
 import "./App.css";
 
 const App = () => {
-  const socket = io("http://localhost:3000");
+  const { messages, sendMessage } = useSocket("http://localhost:3000");
+  const [input, setInput] = useState("");
 
-  socket.on("connect", () => {
-    console.log(socket.id);
-  });
+  const handleSend = () => {
+    if (!input.trim()) return;
+    sendMessage(input.trim());
+    setInput("");
+  };
 
-  socket.on("message", (data) => console.log(data));
-
-  return <></>;
+  return (
+    <div className="container">
+      <ul className="messages">
+        {messages.map((message, i) => (
+          <li className="message" key={i}>
+            {message.text}
+          </li>
+        ))}
+      </ul>
+      <div className="chat-box">
+        <input
+          className="chat-input"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+        />
+        <button className="send-button" onClick={handleSend}>
+          Send
+        </button>
+      </div>
+    </div>
+  );
 };
 
 export default App;

chat-app/client/src/hooks/useSocket.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from "react";
+import { io } from "socket.io-client";
+
+const useSocket = (url) => {
+  const socketRef = useRef(null);
+  const [messages, setMessages] = useState([]);
+
+  useEffect(() => {
+    socketRef.current = io(url);
+
+    socketRef.current.on("history", (history) => {
+      setMessages(history.map((message) => ({ ...message })));
+    });
+
+    socketRef.current.on("message", (message) => {
+      setMessages((prev) => [...prev, message]);
+    });
+
+    return () => socketRef.current.disconnect();
+  }, [url]);
+
+  const sendMessage = (text) => {
+    const message = {
+      text,
+      time: new Date().toISOString(),
+    };
+    socketRef.current.emit("message", message);
+    setMessages((prev) => [...prev, { ...message }]);
+  };
+
+  return { messages, sendMessage };
+};
+
+export default useSocket;

chat-app/server/data/chat.json

@@ -0,0 +1,18 @@
+[
+  {
+    "text": "Hello",
+    "time": "2026-05-22T14:53:00.281Z"
+  },
+  {
+    "text": "How are you?",
+    "time": "2026-05-22T14:54:49.729Z"
+  },
+  {
+    "text": "I'm good. How are you?",
+    "time": "2026-05-22T14:55:22.839Z"
+  },
+  {
+    "text": "I'm not too bad",
+    "time": "2026-05-22T14:55:54.424Z"
+  }
+]

chat-app/server/index.js

@@ -1,6 +1,7 @@
 import express from 'express';
 import { createServer } from 'http';
 import { Server } from 'socket.io';
+import chat from './data/chat.json' with { type: 'json' };
 
 const app = express();
 const server = createServer(app);
@@ -11,14 +12,11 @@ const io = new Server(server, {
 });
 
 io.on('connection', (socket) => {
-  console.log(`Client connected: ${socket.id}`);
+  socket.emit('history', chat);
 
-  socket.on('message', ({ from, message }) => {
-    socket.broadcast.emit('message', { from, message });
-  });
-
-  socket.on('disconnect', () => {
-    console.log(`Client disconnected: ${socket.id}`);
+  socket.on('message', (msg) => {
+    chat.push(msg);
+    socket.broadcast.emit('message', msg);
   });
 });