Added chat microservice, removed air

client/components/chat/index.tsx

@@ -0,0 +1,35 @@
+import { FC, useEffect, useState } from "react"
+import { CHAT_URL } from "../../config"
+import { ChatMessage as Message } from "../../types"
+import Input from "../common/Input"
+import ChatMessage from "../message/ChatMessage"
+
+const Chat: FC = () => {
+  const [messages, setMessages] = useState<Message[]>([])
+
+  useEffect(() => {
+    const ws = new WebSocket(CHAT_URL)
+    ws.onmessage = (ev) => {
+      const newMsg = JSON.parse(ev.data) as Message
+      setMessages((old) => [...old, newMsg])
+    }
+  }, [])
+
+  return (
+    <div className="bg-zinc-900 w-80 border-l border-l-zinc-700 flex flex-col">
+      <div className="flex flex-row justify-center items-center border-b border-b-zinc-700 p-2 h-12">
+        <p className="uppercase font-semibold text-sm">Stream Chat</p>
+      </div>
+      <div className="flex-1 overflow-scrollbar">
+        {messages.map((message) => (
+          <ChatMessage key={message.messageId.toString()} message={message} />
+        ))}
+      </div>
+      <div className="m-2">
+        <Input className="w-full p-2" placeholder="Send a message" />
+      </div>
+    </div>
+  )
+}
+
+export default Chat

client/components/message/ChatMessage.tsx

@@ -6,12 +6,12 @@ export interface ChatMessageProps {
 }
 
 const ChatMessage: FC<ChatMessageProps> = ({
-  message: { author, content },
+  message: { fromUser, content },
 }) => {
   return (
     <div className="mx-2 p-2 hover:bg-neutral-700 text-sm rounded-md">
       <div className="space-x-1 inline">
-        <span className="align-middle">{author}: </span>
+        <span className="align-middle">{fromUser}: </span>
       </div>
       <span className="break-all align-middle">{content}</span>
     </div>

client/config/index.ts

@@ -1 +1,2 @@
 export const KRATOS_URL = "http://127.0.0.1:4433"
+export const CHAT_URL = "ws://localhost:1323"

client/pages/[channel]/index.tsx

@@ -3,6 +3,7 @@ import Input from "../../components/common/Input"
 import { NextPage } from "next"
 import BrowseLayout from "../../components/layout/BrowseLayout"
 import { createRandomMessage } from "../../placeholder/chatMessages"
+import Chat from "../../components/chat"
 
 const ChannelPage: NextPage = () => {
   return (
@@ -18,19 +19,7 @@ const ChannelPage: NextPage = () => {
             <div>1:14:32</div>
           </div>
         </div>
-        <div className="bg-zinc-900 w-80 border-l border-l-zinc-700 flex flex-col">
-          <div className="flex flex-row justify-center items-center border-b border-b-zinc-700 p-2 h-12">
-            <p className="uppercase font-semibold text-sm">Stream Chat</p>
-          </div>
-          <div className="flex-1 overflow-scrollbar">
-            {new Array(60).fill(0).map((_, i) => (
-              <ChatMessage message={createRandomMessage()} key={i} />
-            ))}
-          </div>
-          <div className="m-2">
-            <Input className="w-full p-2" placeholder="Send a message" />
-          </div>
-        </div>
+        <Chat />
       </div>
     </BrowseLayout>
   )

client/placeholder/chatMessages.ts

@@ -1,9 +0,0 @@
-import { ChatMessage } from "../types"
-import { faker } from "@faker-js/faker"
-
-export const createRandomMessage = (): ChatMessage => {
-  return {
-    author: faker.name.firstName(),
-    content: faker.lorem.words(10),
-  }
-}

client/types/index.ts

@@ -1,4 +1,9 @@
 export interface ChatMessage {
-  author: string
+  messageId: bigint
+  fromUserId: bigint
+  fromUser: string
+  toUserId: bigint
+  toUser: string
   content: string
+  createdAt: bigint
 }