initial commit

src/App.tsx

@@ -0,0 +1,47 @@
+import {useAppSelector, useAppDispatch} from 'hooks/store';
+import {WebSocketStatusViewComponent, LoginForm} from './components';
+import AuthenticationService from './services/authentication.service';
+import {useEffect, useState} from 'react';
+import {authenticationActions, selectError} from 'store/slices/Authentication.slice';
+import hostService from 'services/url.service';
+import LoggerFactory from './services/logger/LoggerFactory';
+
+export default function App() {
+  const dispatch = useAppDispatch();
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    // Initialize logger after all modules are loaded to avoid circular dependencies
+    LoggerFactory.applyLoggerConfig();
+
+    // Set WebSocket URI only once during initialization
+    if (!isInitialized) {
+      AuthenticationService.setWebSocketUri(hostService.getWebSocketUrl());
+      setIsInitialized(true);
+    }
+
+    // Subscribe to WebSocket status changes
+    AuthenticationService.status?.subscribe(status => 
+      dispatch(authenticationActions.setStatus(status))
+    );
+  }, [dispatch, isInitialized]);
+
+  const error = useAppSelector(selectError);
+
+  return (
+    <>
+      {error && <div>{error}</div>}
+      <div
+        style={{
+          width: '200px',
+          height: '100px',
+          display: 'flex',
+          flexDirection: 'column',
+          margin: 'auto'
+        }}>
+        <WebSocketStatusViewComponent />
+        <LoginForm />
+      </div>
+    </>
+  );
+}