Implemented the who is typing feature

client/.env

@@ -0,0 +1 @@
+REACT_APP_API_URL=http://localhost:5000

client/package.json

@@ -13,9 +13,9 @@
     "socket.io-client": "^2.2.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+     "start": "react-scripts --openssl-legacy-provider start",
+  "build": "react-scripts --openssl-legacy-provider build",
+  "test": "react-scripts --openssl-legacy-provider test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

client/src/App.js

@@ -4,6 +4,7 @@ import Chat from './components/Chat/Chat';
 import Join from './components/Join/Join';
 
 import { BrowserRouter as Router, Route } from "react-router-dom";
+const ENDPOINT = 'https://project-chat-application-tbfm.onrender.com';
 
 const App = () => {
   return (

client/src/components/Chat/Chat.css

@@ -5,6 +5,13 @@
   height: 100vh;
   background-color: #1A1A1D;
 }
+.typing {
+  font-style: italic;
+  color: gray;
+  margin: 5px 10px;
+  font-size: 14px;
+}
+
 
 .container {
   display: flex;

client/src/components/Chat/Chat.js

@@ -1,68 +1,89 @@
 import React, { useState, useEffect } from "react";
-import queryString from 'query-string';
+import queryString from "query-string";
 import io from "socket.io-client";
 
-import TextContainer from '../TextContainer/TextContainer';
-import Messages from '../Messages/Messages';
-import InfoBar from '../InfoBar/InfoBar';
-import Input from '../Input/Input';
+import TextContainer from "../TextContainer/TextContainer";
+import Messages from "../Messages/Messages";
+import InfoBar from "../InfoBar/InfoBar";
+import Input from "../Input/Input";
 
-import './Chat.css';
-
-const ENDPOINT = 'https://project-chat-application.herokuapp.com/';
+import "./Chat.css";
 
+const ENDPOINT = "http://localhost:5000";
 let socket;
 
 const Chat = ({ location }) => {
-  const [name, setName] = useState('');
-  const [room, setRoom] = useState('');
-  const [users, setUsers] = useState('');
-  const [message, setMessage] = useState('');
+  const [name, setName] = useState("");
+  const [room, setRoom] = useState("");
+  const [users, setUsers] = useState([]);
+  const [message, setMessage] = useState("");
   const [messages, setMessages] = useState([]);
+  const [typing, setTyping] = useState("");
 
   useEffect(() => {
     const { name, room } = queryString.parse(location.search);
-
     socket = io(ENDPOINT);
 
     setRoom(room);
-    setName(name)
+    setName(name);
 
-    socket.emit('join', { name, room }, (error) => {
-      if(error) {
+    socket.emit("join", { name, room }, (error) => {
+      if (error) {
         alert(error);
       }
     });
-  }, [ENDPOINT, location.search]);
-  
+  }, [location.search]);
+
   useEffect(() => {
-    socket.on('message', message => {
-      setMessages(messages => [ ...messages, message ]);
+    socket.on("message", (message) => {
+      setMessages((msgs) => [...msgs, message]);
     });
-    
+
     socket.on("roomData", ({ users }) => {
       setUsers(users);
     });
-}, []);
+
+    // ✅ Handle typing events
+    socket.on("showTyping", (msg) => {
+      setTyping(msg);
+    });
+
+    return () => {
+      socket.off("message");
+      socket.off("roomData");
+      socket.off("showTyping");
+    };
+  }, []);
 
   const sendMessage = (event) => {
     event.preventDefault();
 
-    if(message) {
-      socket.emit('sendMessage', message, () => setMessage(''));
+    if (message) {
+      socket.emit("sendMessage", message, () => setMessage(""));
+      socket.emit("stopTyping"); // stop typing after sending
     }
-  }
+  };
 
   return (
     <div className="outerContainer">
       <div className="container">
-          <InfoBar room={room} />
-          <Messages messages={messages} name={name} />
-          <Input message={message} setMessage={setMessage} sendMessage={sendMessage} />
+        <InfoBar room={room} />
+        <Messages messages={messages} name={name} />
+
+        {/* 👇 Typing indicator */}
+        {typing && <p className="typing">{typing}</p>}
+
+        <Input
+          message={message}
+          setMessage={setMessage}
+          sendMessage={sendMessage}
+          socket={socket}
+        />
       </div>
-      <TextContainer users={users}/>
+
+      <TextContainer users={users} />
     </div>
   );
-}
+};
 
 export default Chat;

client/src/components/Input/Input.js

@@ -1,19 +1,40 @@
-import React from 'react';
-
-import './Input.css';
-
-const Input = ({ setMessage, sendMessage, message }) => (
-  <form className="form">
-    <input
-      className="input"
-      type="text"
-      placeholder="Type a message..."
-      value={message}
-      onChange={({ target: { value } }) => setMessage(value)}
-      onKeyPress={event => event.key === 'Enter' ? sendMessage(event) : null}
-    />
-    <button className="sendButton" onClick={e => sendMessage(e)}>Send</button>
-  </form>
-)
-
-export default Input;
+import React, { useEffect, useRef } from "react";
+
+import "./Input.css";
+
+const Input = ({ message, setMessage, sendMessage, socket }) => {
+  const typingTimeoutRef = useRef(null);
+
+  const handleChange = (e) => {
+    setMessage(e.target.value);
+
+    // Emit typing event
+    socket.emit("typing");
+
+    // Clear old timeout
+    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+
+    // After 1.5s of no typing, send stopTyping
+    typingTimeoutRef.current = setTimeout(() => {
+      socket.emit("stopTyping");
+    }, 1500);
+  };
+
+  return (
+    <form className="form" onSubmit={sendMessage}>
+      <input
+        className="input"
+        type="text"
+        placeholder="Type a message..."
+        value={message}
+        onChange={handleChange}
+        onKeyPress={(e) => (e.key === "Enter" ? sendMessage(e) : null)}
+      />
+      <button className="sendButton" type="submit">
+        Send
+      </button>
+    </form>
+  );
+};
+
+export default Input;

server/index.js

@@ -4,48 +4,89 @@ const socketio = require('socket.io');
 const cors = require('cors');
 
 const { addUser, removeUser, getUser, getUsersInRoom } = require('./users');
-
 const router = require('./router');
 
 const app = express();
 const server = http.createServer(app);
 const io = socketio(server);
+const path = require("path");
+
 
 app.use(cors());
+
 app.use(router);
 
 io.on('connect', (socket) => {
+  // User joins a room
   socket.on('join', ({ name, room }, callback) => {
     const { error, user } = addUser({ id: socket.id, name, room });
 
-    if(error) return callback(error);
+    if (error) return callback(error);
 
     socket.join(user.room);
 
-    socket.emit('message', { user: 'admin', text: `${user.name}, welcome to room ${user.room}.`});
-    socket.broadcast.to(user.room).emit('message', { user: 'admin', text: `${user.name} has joined!` });
+    // ✅ Save user info on socket for typing events
+    socket.data = { name: user.name, room: user.room };
+
+    socket.emit('message', {
+      user: 'admin',
+      text: `${user.name}, welcome to room ${user.room}.`
+    });
+
+    socket.broadcast.to(user.room).emit('message', {
+      user: 'admin',
+      text: `${user.name} has joined!`
+    });
 
-    io.to(user.room).emit('roomData', { room: user.room, users: getUsersInRoom(user.room) });
+    io.to(user.room).emit('roomData', {
+      room: user.room,
+      users: getUsersInRoom(user.room)
+    });
 
     callback();
   });
 
+  // ✅ User typing
+  socket.on('typing', () => {
+    const { name, room } = socket.data;
+    socket.to(room).emit('showTyping', `${name} is typing...`);
+  });
+
+  // ✅ User stopped typing
+  socket.on('stopTyping', () => {
+    const { room } = socket.data;
+    socket.to(room).emit('showTyping', '');
+  });
+
+  // User sends message
   socket.on('sendMessage', (message, callback) => {
     const user = getUser(socket.id);
 
-    io.to(user.room).emit('message', { user: user.name, text: message });
+    io.to(user.room).emit('message', {
+      user: user.name,
+      text: message
+    });
 
     callback();
   });
 
+  // User disconnects
   socket.on('disconnect', () => {
     const user = removeUser(socket.id);
 
-    if(user) {
-      io.to(user.room).emit('message', { user: 'Admin', text: `${user.name} has left.` });
-      io.to(user.room).emit('roomData', { room: user.room, users: getUsersInRoom(user.room)});
+    if (user) {
+      io.to(user.room).emit('message', {
+        user: 'Admin',
+        text: `${user.name} has left.`
+      });
+      io.to(user.room).emit('roomData', {
+        room: user.room,
+        users: getUsersInRoom(user.room)
+      });
     }
-  })
+  });
 });
 
-server.listen(process.env.PORT || 5000, () => console.log(`Server has started.`));
+server.listen(process.env.PORT || 5000, () =>
+  console.log(`Server has started.`)
+);