add alert for userkey error

src/MancalaApp.tsx

@@ -15,6 +15,8 @@ import { getColorByBrightness } from './util/ColorUtil';
 import { ConnectionState } from './models/ConnectionState';
 import { Theme } from './theme/Theme';
 import LobyPage from './routes/LobyPage';
+import swal from 'sweetalert';
+
 const context = initContext();
 
 const MancalaApp: FunctionComponent = () => {
@@ -40,9 +42,15 @@ const MancalaApp: FunctionComponent = () => {
         setTheme(theme)
     }
     const connectToServer = async () => {
+        try {
             const userKey = await context.userKeyStore.getUserKey();
             setUserKey(userKey);
             (context.rtmt as RTMTWS).initWebSocket(userKey);
+        } catch (error) {
+            //TODO: check if it is network error!
+            swal(context.texts.Error + "!", context.texts.ErrorWhenRetrievingInformation, "error");
+            console.error(error);
+        }
     };
 
     React.useEffect(() => {
@@ -74,7 +82,6 @@ const MancalaApp: FunctionComponent = () => {
         context.themeManager.theme.textColor,
         context.themeManager.theme.textLightColor
     );
-    if (!userKey) return <></>;
     return (
         <>
             <BrowserRouter>

src/const/texts.ts

@@ -27,6 +27,8 @@ export type Texts = {
     GameNotFound: string,
     Loading: string,
     Playing: string,
+    Error: string,
+    ErrorWhenRetrievingInformation: string;
 }
 
 export const EnUs: Texts = {
@@ -57,6 +59,8 @@ export const EnUs: Texts = {
     GameNotFound: "Game Not Found",
     Loading: "Loading",
     Playing: "Playing",
+    Error: "Error",
+    ErrorWhenRetrievingInformation: "An error occured when retrieving information!"
 }
 
 export const TrTr: Texts = {
@@ -87,4 +91,6 @@ export const TrTr: Texts = {
     GameNotFound: "Oyun Bulunamadı",
     Loading: "Yükleniyor",
     Playing: "Oynuyor",
+    Error: "Hata",
+    ErrorWhenRetrievingInformation: "Bilgiler toplanırken bir hata oluştu!"
 }