Fill out some more components + add application state enums

web/components/stores/ClientConfigStore.tsx

@@ -1,9 +1,11 @@
 import { useEffect } from 'react';
-import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { atom, useRecoilState } from 'recoil';
 import { makeEmptyClientConfig, ClientConfig } from '../../interfaces/client-config.model';
 import ClientConfigService from '../../services/client-config-service';
+import ChatService from '../../services/chat-service';
 import { ChatMessage } from '../../interfaces/chat-message.model';
+import { getLocalStorage, setLocalStorage } from '../../utils/helpers';
+import { ChatVisibilityState } from '../../interfaces/application-state';
 
 // The config that comes from the API.
 export const clientConfigState = atom({
@@ -11,14 +13,19 @@ export const clientConfigState = atom({
   default: makeEmptyClientConfig(),
 });
 
-export const chatCurrentlyVisible = atom({
-  key: 'chatvisible',
-  default: false,
+export const chatVisibility = atom<ChatVisibilityState>({
+  key: 'chatVisibility',
+  default: ChatVisibilityState.Hidden,
 });
 
 export const chatDisplayName = atom({
   key: 'chatDisplayName',
-  default: '',
+  default: null,
+});
+
+export const accessTokenAtom = atom({
+  key: 'accessToken',
+  default: null,
 });
 
 export const chatMessages = atom({
@@ -26,8 +33,11 @@ export const chatMessages = atom({
   default: [] as ChatMessage[],
 });
 
-export function ClientConfigStore(): ReactElement {
+export function ClientConfigStore() {
   const [, setClientConfig] = useRecoilState<ClientConfig>(clientConfigState);
+  const [, setChatMessages] = useRecoilState<ChatMessage[]>(chatMessages);
+  const [accessToken, setAccessToken] = useRecoilState<string>(accessTokenAtom);
+  const [, setChatDisplayName] = useRecoilState<string>(chatDisplayName);
 
   const updateClientConfig = async () => {
     try {
@@ -39,9 +49,41 @@ export function ClientConfigStore(): ReactElement {
     }
   };
 
+  const handleUserRegistration = async (optionalDisplayName: string) => {
+    try {
+      const response = await ChatService.registerUser(optionalDisplayName);
+      console.log(`ChatService -> registerUser() response: \n${JSON.stringify(response)}`);
+      const { accessToken: newAccessToken, displayName } = response;
+      if (!newAccessToken) {
+        return;
+      }
+      setAccessToken(accessToken);
+      setLocalStorage('accessToken', newAccessToken);
+      setChatDisplayName(displayName);
+    } catch (e) {
+      console.error(`ChatService -> registerUser() ERROR: \n${e}`);
+    }
+  };
+
+  // TODO: Requires access token.
+  const getChatHistory = async () => {
+    try {
+      const messages = await ChatService.getChatHistory(accessToken);
+      console.log(`ChatService -> getChatHistory() messages: \n${JSON.stringify(messages)}`);
+      setChatMessages(messages);
+    } catch (error) {
+      console.error(`ChatService -> getChatHistory() ERROR: \n${error}`);
+    }
+  };
+
   useEffect(() => {
     updateClientConfig();
+    handleUserRegistration();
   }, []);
 
+  useEffect(() => {
+    getChatHistory();
+  }, [accessToken]);
+
   return null;
 }

web/components/stores/ServerStatusStore.tsx

@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { atom, useRecoilState } from 'recoil';
 import { ServerStatus, makeEmptyServerStatus } from '../../interfaces/server-status.model';
 import ServerStatusService from '../../services/status-service';
@@ -9,7 +8,7 @@ export const serverStatusState = atom({
   default: makeEmptyServerStatus(),
 });
 
-export function ServerStatusStore(): ReactElement {
+export function ServerStatusStore() {
   const [, setServerStatus] = useRecoilState<ServerStatus>(serverStatusState);
 
   const updateServerStatus = async () => {