Refactor AppConfig

packages/webapp/public/index.html

@@ -47,22 +47,6 @@
   <!--
       Dynamic runtime configuration properties (https://dev.to/matt_catalfamo/runtime-configurations-with-react-22dl)
     -->
-  <script>
-    (function (i, s, o, g, r, a, m) {
-      i['GoogleAnalyticsObject'] = r;
-      i[r] = i[r] || function () {
-        (i[r].q = i[r].q || []).push(arguments)
-      }, i[r].l = 1 * new Date();
-      a = s.createElement(o),
-        m = s.getElementsByTagName(o)[0];
-      a.async = 1;
-      a.src = g;
-      m.parentNode.insertBefore(a, m)
-    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-
-    ga('create', 'UA-2347723-1', 'wisemapping.com');
-    ga('send', 'pageview');
-  </script>
     
   <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
   <script>

packages/webapp/src/app.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react';
 import { IntlProvider } from 'react-intl';
 import { Route, Switch, Redirect, BrowserRouter as Router } from 'react-router-dom';
-
 import RegistrationSuccessPage from './components/registration-success-page';
 import ForgotPasswordSuccessPage from './components/forgot-password-success-page';
 import RegistationPage from './components/registration-page';
@@ -15,6 +14,10 @@ import AppI18n, { Locales } from './classes/app-i18n';
 import MapsPage from './components/maps-page';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/core/styles';
+import GoogleAnalytics from 'react-ga';
+
+// Google Analytics Initialization.
+GoogleAnalytics.initialize('UA-0000000-0');
 
 const queryClient = new QueryClient({
     defaultOptions: {

packages/webapp/src/classes/server-config/index.ts

@@ -0,0 +1,68 @@
+import { sessionExpired } from "../../redux/clientSlice";
+import Client from "../client";
+import MockClient from "../client/mock-client";
+import RestClient from "../client/rest-client";
+
+
+interface Config {
+    apiBaseUrl: string;
+    analyticsAccount?: string;
+    recaptcha2Enabled: boolean;
+    recaptcha2SiteKey?: string;
+    clientType: 'mock' | 'rest';
+}
+
+class _AppConfig {
+
+    private defaultInstance: Config = {
+        apiBaseUrl: '/',
+        clientType: 'mock',
+        recaptcha2Enabled: true,
+        recaptcha2SiteKey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
+    }
+
+    private getInstance(): Config {
+        // Config can be inserted in the html page to define the global properties ...
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let result = (window as any).serverconfig;
+        if (!result) {
+            result = this.defaultInstance;
+        }
+
+        return result;
+    }
+
+    isRecaptcha2Enabled(): boolean {
+        const config = this.getInstance();
+        return config.recaptcha2Enabled;
+    }
+
+    getRecaptcha2SiteKey(): string | undefined {
+        const config = this.getInstance();
+        return config.recaptcha2SiteKey;
+    }
+
+    getGoogleAnalyticsAccount(): string | undefined {
+        const config = this.getInstance();
+        return config.analyticsAccount;
+    }
+
+    buildClient(): Client {
+
+        const config = this.getInstance();
+        let result: Client;
+        if (config.clientType == 'rest') {
+            result = new RestClient(config.apiBaseUrl, () => {
+                sessionExpired();
+            });
+            console.log('Service using rest client. ' + JSON.stringify(config));
+        } else {
+            console.log('Warning:Service using mockservice client');
+            result = new MockClient();
+        }
+        return result;
+    }
+}
+const AppConfig = new _AppConfig();
+
+export default AppConfig;

packages/webapp/src/components/registration-page/index.tsx

@@ -16,6 +16,7 @@ import GlobalError from '../form/global-error';
 import SubmitButton from '../form/submit-button';
 import Typography from '@material-ui/core/Typography';
 import FormControl from '@material-ui/core/FormControl';
+import AppConfig from '../../classes/server-config';
 
 export type Model = {
     email: string;
@@ -121,16 +122,17 @@ const RegistrationForm = () => {
                         error={error}
                     />
 
+                    { AppConfig.isRecaptcha2Enabled() && 
                         <div style={{ width: '330px', padding: '5px 0px 5px 20px' }}>
                             <ReCAPTCHA
-                            sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
+                                sitekey={AppConfig.getRecaptcha2SiteKey()}
                                 onChange={(value: string) => {
                                     model.recaptcha = value;
                                     setModel(model);
                                 }}
                             />
                         </div>
-
+                    }
                     <div style={{ fontSize: '12px', padding: '10px 0px' }}>
                         <FormattedMessage
                             id="registration.termandconditions"

packages/webapp/src/redux/clientSlice.ts

@@ -2,37 +2,9 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { useQuery } from 'react-query';
 import Client, { AccountInfo, ErrorInfo, MapInfo } from '../classes/client';
-import MockClient from '../classes/client/mock-client';
-import RestClient from '../classes/client/rest-client';
 import { useSelector } from 'react-redux';
+import AppConfig from '../classes/server-config';
 
-interface ConfigInfo {
-    apiBaseUrl: string;
-}
-
-class RutimeConfig {
-    private config: ConfigInfo;
-    load() {
-        // Config can be inserted in the html page to define the global properties ...
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.config = (window as any).serverconfig;
-        return this;
-    }
-
-    buildClient(): Client {
-        let result: Client;
-        if (this.config) {
-            result = new RestClient(this.config.apiBaseUrl, () => {
-                sessionExpired();
-            });
-            console.log('Service using rest client. ' + JSON.stringify(this.config));
-        } else {
-            console.log('Warning:Service using mockservice client');
-            result = new MockClient();
-        }
-        return result;
-    }
-}
 
 export interface ClientStatus {
     state: 'healthy' | 'session-expired';
@@ -45,7 +17,7 @@ export interface ClientState {
 }
 
 const initialState: ClientState = {
-    instance: new RutimeConfig().load().buildClient(),
+    instance: AppConfig.buildClient(),
     status: { state: 'healthy' },
 };