wip

fix cors
react logic implemented
chatmessage fmt refactored

Author: psytraxx

README.md

@@ -31,3 +31,9 @@ run outside docker
 ## References
 
 https://medium.com/hacktive-devs/building-the-backend-of-chat-applications-with-spring-webflux-and-reactive-mongodb-26347a1ddce4
+
+## TODO's
+
+- Proper Input Validation on the react client side
+- Generally a lot of error handling on the react side (EventSource onError - fetch errors etc, check HTTP status codes )
+- Monitoring of the springboot app (actuator)

backend/src/main/java/com/ssechat/controller/ChatMessageController.java

@@ -10,6 +10,9 @@
 
 import javax.validation.Valid;
 
+@CrossOrigin(value = { "*" },
+        maxAge = 900
+)
 @RestController
 public class ChatMessageController {
     @Autowired

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

@@ -1,22 +1,25 @@
 package com.ssechat.model;
 
+import org.springframework.data.annotation.CreatedDate;
 import org.springframework.data.annotation.Id;
 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;
-    private String recipient;
+    @CreatedDate
+    private Instant createdDate = Instant.now();
     private String channelId;
 
-    public ChatMessage(String message, String sender, String recipient, String channelId) {
+    public ChatMessage(String id, String message, String channelId) {
         this.message = message;
-        this.sender = sender;
-        this.recipient = recipient;
         this.channelId = channelId;
+        this.id = id;
     }
 
     public String getMessage() {
@@ -27,27 +30,27 @@ public void setMessage(String message) {
         this.message = message;
     }
 
-    public String getSender() {
-        return sender;
+    public String getChannelId() {
+        return channelId;
     }
 
-    public void setSender(String sender) {
-        this.sender = sender;
+    public void setChannelId(String channelId) {
+        this.channelId = channelId;
     }
 
-    public String getRecipient() {
-        return recipient;
+    public String getId() {
+        return id;
     }
 
-    public void setRecipient(String recipient) {
-        this.recipient = recipient;
+    public void setId(String id) {
+        this.id = id;
     }
 
-    public String getChannelId() {
-        return channelId;
+    public Instant getCreatedDate() {
+        return createdDate;
     }
 
-    public void setChannelId(String channelId) {
-        this.channelId = channelId;
+    public void setCreatedDate(Instant createdDate) {
+        this.createdDate = createdDate;
     }
 }

client/src/App.css

@@ -3,7 +3,7 @@
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 4vmin;
   pointer-events: none;
 }
 
@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 10vh;
   display: flex;
   flex-direction: column;
   align-items: center;

client/src/App.tsx

@@ -1,24 +1,16 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import logo from "./logo.svg";
+import "./App.css";
+import { ChatList, ChatForm } from "./components";
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
       </header>
+      <ChatList channelId={1} />
+      <ChatForm channelId={1} />
     </div>
   );
 }

client/src/components/ChatForm.tsx

@@ -0,0 +1,50 @@
+import React, { ChangeEvent, KeyboardEvent, MouseEvent } from "react";
+import { addMessage } from "../lib/api";
+
+interface ChatFormProps {
+  channelId: number;
+}
+
+const ChatForm = ({ channelId }: ChatFormProps) => {
+  const [message, setMessage] = React.useState("");
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setMessage(event.target.value);
+  };
+
+  const sendMessage = () => {
+    if (message !== "") {
+      addMessage({ channelId, message });
+      setMessage("");
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      sendMessage();
+    }
+  };
+
+  const handleSubmit = (e: MouseEvent) => {
+    e.preventDefault();
+    sendMessage();
+  };
+
+  return (
+    <form>
+      <input
+        id="message"
+        type="text"
+        placeholder="Please Enter"
+        value={message}
+        onKeyDown={handleKeyDown}
+        onChange={handleChange}
+      />
+
+      <button onClick={handleSubmit} type="submit">
+        Send
+      </button>
+    </form>
+  );
+};
+
+export default ChatForm;

client/src/components/ChatList.tsx

@@ -0,0 +1,40 @@
+import React, { Component } from "react";
+import { ChatMessage } from "../lib/types";
+import { ChatRow } from "./";
+
+interface ChatListState {
+  messages: ChatMessage[];
+}
+
+interface ChatListProps {
+  channelId: number;
+}
+
+const url = process.env.API_BASE_URL
+  ? process.env.API_BASE_URL
+  : "http://localhost:8080";
+
+class ChatList extends Component<ChatListProps, ChatListState> {
+  state: ChatListState = { messages: [] };
+
+  // After the component did mount, we set the state each second.
+  componentDidMount() {
+    const source = new EventSource(
+      `${url}/chats/stream?channelId=${this.props.channelId}`
+    );
+
+    source.onmessage = (event) => {
+      const messages = this.state.messages.concat(JSON.parse(event.data));
+      this.setState({ messages });
+    };
+  }
+
+  render() {
+    const list = this.state.messages.map((row) => {
+      return <ChatRow key={row.id} message={row} />;
+    });
+
+    return <ul>{list}</ul>;
+  }
+}
+export default ChatList;

client/src/components/ChatRow.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ChatMessage } from "../lib/types";
+
+interface ChatRowProps {
+  message: ChatMessage;
+}
+
+const ChatRow = ({ message }: ChatRowProps) => {
+  return (
+    <li>
+      {message.createdDate && new Date(message.createdDate).toLocaleString()}
+      {message.message}
+    </li>
+  );
+};
+
+export default ChatRow;

client/src/components/index.ts

@@ -0,0 +1,3 @@
+export { default as ChatForm } from "./ChatForm";
+export { default as ChatList } from "./ChatList";
+export { default as ChatRow } from "./ChatRow";

client/src/lib/api.ts

@@ -0,0 +1,16 @@
+import { ChatMessage } from "./types";
+
+const url = process.env.API_BASE_URL
+  ? process.env.API_BASE_URL
+  : "http://localhost:8080";
+
+export async function addMessage(item: ChatMessage) {
+  const data = await fetch(`${url}/chats`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(item),
+  });
+  return data.status;
+}