sender was missing - add to frontend and backend

Author: psytraxx

backend/src/main/java/com/ssechat/model/ChatMessage.java

@@ -5,19 +5,20 @@
 import org.springframework.data.mongodb.core.mapping.Document;
 
 import java.time.Instant;
-import java.util.Date;
 
 @Document(collection = "chatmessages")
 public class ChatMessage {
     @Id
     private String id;
     private String message;
+    private String sender;
     @CreatedDate
     private Instant createdDate = Instant.now();
     private String channelId;
 
-    public ChatMessage(String id, String message, String channelId) {
+    public ChatMessage(String id, String message, String sender, String channelId) {
         this.message = message;
+        this.sender = sender;
         this.channelId = channelId;
         this.id = id;
     }
@@ -53,4 +54,12 @@ public Instant getCreatedDate() {
     public void setCreatedDate(Instant createdDate) {
         this.createdDate = createdDate;
     }
+
+    public String getSender() {
+        return sender;
+    }
+
+    public void setSender(String sender) {
+        this.sender = sender;
+    }
 }

client/src/App.tsx

@@ -6,7 +6,7 @@ function App() {
   return (
     <div className="App">
       <ChatList channelId={1} />
-      <ChatForm channelId={1} />
+      <ChatForm channelId={1} sender="sender name" />
     </div>
   );
 }

client/src/components/ChatForm.tsx

@@ -3,17 +3,18 @@ import { addMessage } from "../lib/api";
 
 interface ChatFormProps {
   channelId: number;
+  sender: string;
 }
 
-const ChatForm = ({ channelId }: ChatFormProps) => {
+const ChatForm = ({ channelId, sender }: ChatFormProps) => {
   const [message, setMessage] = React.useState("");
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setMessage(event.target.value);
   };
 
   const sendMessage = () => {
     if (message !== "") {
-      addMessage({ channelId, message });
+      addMessage({ channelId, message, sender });
       setMessage("");
     }
   };

client/src/components/ChatList.tsx

@@ -32,7 +32,7 @@ class ChatList extends Component<ChatListProps, ChatListState> {
 
   render() {
     const list = this.state.messages.map((row) => {
-      return <ChatRow key={row.id} message={row} />;
+      return <ChatRow key={row.id} item={row} />;
     });
 
     return <ul className="chatlist">{list}</ul>;

client/src/components/ChatRow.tsx

@@ -2,16 +2,17 @@ import React from "react";
 import { ChatMessage } from "../lib/types";
 
 interface ChatRowProps {
-  message: ChatMessage;
+  item: ChatMessage;
 }
 
-const ChatRow = ({ message }: ChatRowProps) => {
+const ChatRow = ({ item }: ChatRowProps) => {
   return (
     <li>
+      <small>{item.sender}</small>
+      <p>{item.message}</p>
       <small>
-        {message.createdDate && new Date(message.createdDate).toLocaleString()}
+        {item.createdDate && new Date(item.createdDate).toLocaleString()}
       </small>
-      <p>{message.message}</p>
     </li>
   );
 };

client/src/lib/types.ts

@@ -4,6 +4,7 @@
 export interface ChatMessage {
   createdDate?: Date;
   message: string;
+  sender: string;
   id?: string;
   channelId: number;
 }