Fill out some more components + add application state enums

web/components/chat/ChatContainer.tsx

@@ -1,9 +1,21 @@
+import { Spin } from 'antd';
 import { ChatMessage } from '../../interfaces/chat-message.model';
+import { ChatState } from '../../interfaces/application-state';
 
 interface Props {
   messages: ChatMessage[];
+  state: ChatState;
 }
 
 export default function ChatContainer(props: Props) {
-  return <div>Chat container goes here</div>;
+  const { messages, state } = props;
+  const loading = state === ChatState.Loading;
+
+  return (
+    <div>
+      <Spin tip="Loading..." spinning={loading}>
+        Chat container with scrolling chat messages go here
+      </Spin>
+    </div>
+  );
 }

web/components/chat/ChatTextField.tsx

@@ -1,5 +1,35 @@
+import { useState } from 'react';
+
 interface Props {}
 
 export default function ChatTextField(props: Props) {
-  return <div>Component goes here</div>;
+  const [value, setValue] = useState('');
+  const [showEmojis, setShowEmojis] = useState(false);
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        placeholder="Type a message here then hit ENTER"
+      />
+      <button type="button" onClick={() => setShowEmojis(!showEmojis)}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="icon"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </button>
+    </div>
+  );
 }

web/components/chat/ChatUserMessage.tsx

@@ -2,8 +2,21 @@ import { ChatMessage } from '../../interfaces/chat-message.model';
 
 interface Props {
   message: ChatMessage;
+  showModeratorMenu: boolean;
 }
 
 export default function ChatUserMessage(props: Props) {
-  return <div>Component goes here</div>;
+  const { message, showModeratorMenu } = props;
+  const { body, user, timestamp } = message;
+  const { displayName, displayColor } = user;
+
+  // TODO: Convert displayColor (a hue) to a usable color.
+
+  return (
+    <div>
+      <div>{displayName}</div>
+      <div>{body}</div>
+      {showModeratorMenu && <div>Moderator menu</div>}
+    </div>
+  );
 }