Refactor AppConfig

This commit is contained in:
Paulo Gustavo Veiga 2021-02-27 12:15:48 -08:00
parent 0d58fd5e90
commit cb5c488263
5 changed files with 87 additions and 58 deletions

View File

@ -47,22 +47,6 @@
<!-- <!--
Dynamic runtime configuration properties (https://dev.to/matt_catalfamo/runtime-configurations-with-react-22dl) 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 async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script> <script>

View File

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

View File

@ -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;

View File

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

View File

@ -2,37 +2,9 @@
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';
import Client, { AccountInfo, ErrorInfo, MapInfo } from '../classes/client'; 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 { 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 { export interface ClientStatus {
state: 'healthy' | 'session-expired'; state: 'healthy' | 'session-expired';
@ -45,7 +17,7 @@ export interface ClientState {
} }
const initialState: ClientState = { const initialState: ClientState = {
instance: new RutimeConfig().load().buildClient(), instance: AppConfig.buildClient(),
status: { state: 'healthy' }, status: { state: 'healthy' },
}; };