Using context to get the necessery services.

Author: inbarbarkai

web/src/app.tsx

@@ -3,17 +3,50 @@ import { Routes, Route, Navigate } from "react-router-dom";
 import SecureRoute from './components/secureRoute';
 import { SigninCallback } from "./components/signinCallback";
 import { UserInvitations } from './components/user/userInvitations';
+import { SettingsService } from './services/settingsService';
+import { AuthenticationService } from './services/authenticationService';
+import { InviterService } from './services/inviterService';
+import { ApplicationContext } from './utilities/applicationContext';
 
 function App() {
-
+  const context = new AppContext();
   return (
-    <Routes>
-      <Route path='/' element={<Navigate to="/index" />}>
-      </Route>
-      <Route path="signin-callback" element={<SigninCallback />} />
-      <Route path='index' element={<SecureRoute><UserInvitations /></SecureRoute>} />
-    </Routes>
+    <ApplicationContext.Provider value={context}>
+      <Routes>
+        <Route path='/' element={<Navigate to="/index" />}>
+        </Route>
+        <Route path="signin-callback" element={<SigninCallback />} />
+        <Route path='index' element={<SecureRoute><UserInvitations /></SecureRoute>} />
+      </Routes>
+    </ApplicationContext.Provider>
   );
 }
 
-export default App;
+export default App;
+
+class AppContext {
+  private settingsService: SettingsService;
+  private authenticationService: AuthenticationService;
+  private inviterService: InviterService;
+
+  public getAuthenticationService(): AuthenticationService {
+    if (!this.authenticationService) {
+      this.authenticationService = new AuthenticationService(this.getSettingsService().getAuthenticationSettings());
+    }
+    return this.authenticationService;
+  }
+
+  public getSettingsService(): SettingsService {
+    if (!this.settingsService) {
+      this.settingsService = new SettingsService();
+    }
+    return this.settingsService;
+  }
+
+  public getInviterService(): InviterService {
+    if (!this.inviterService) {
+      this.inviterService = new InviterService(this.getSettingsService().getServerUrl(), this.getAuthenticationService().userManager);
+    }
+    return this.inviterService;
+  }
+}

web/src/components/secureRoute.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { useEffect } from 'react';
-import { AuthenticationService } from '../services/authenticationService';
-import { SettingsService } from '../services/settingsService';
+import { useApplicationContext } from '../utilities/applicationContext';
 
 export default function SecureRoute(props: any) {
-    let authSettings = new SettingsService().getAuthenticationSettings();
-    let authService = new AuthenticationService(authSettings);
+    const context = useApplicationContext();
+    const authService = context.getAuthenticationService();
     useEffect(() => {
         authService.getUser().then(user => {
             if (!user) {

web/src/components/user/userInvitations.tsx

@@ -2,20 +2,16 @@
 import * as React from 'react';
 import { Invitation } from '../../models/invitation';
 import Moment from 'react-moment';
-import { SettingsService } from '../../services/settingsService';
-import { AuthenticationService } from '../../services/authenticationService';
-import { InviterService } from '../../services/inviterService';
+import { useApplicationContext } from '../../utilities/applicationContext';
 
 export function UserInvitations() {
   const [userInvitations, setUserInvitations] = React.useState([] as Invitation[]);
+  const context = useApplicationContext();
 
   React.useEffect(() => {
-    const settingsService = new SettingsService();
-    let authSettings = settingsService.getAuthenticationSettings();
-    let authService = new AuthenticationService(authSettings);
-    let inviterService = new InviterService(settingsService.getServerUrl(), authService.userManager);
+    const inviterService = context.getInviterService();
     inviterService.getInvitations()
-      .then(r => setUserInvitations(r));
+      .then(r => setUserInvitations(r));  
   }, userInvitations);
 
   const renderRows = function () {

web/src/utilities/applicationContext.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { AuthenticationService } from '../services/authenticationService';
+import { InviterService } from '../services/inviterService';
+import { SettingsService } from '../services/settingsService';
+
+export interface IApplicationContext {
+    getAuthenticationService(): AuthenticationService;
+    getSettingsService(): SettingsService;
+    getInviterService(): InviterService;
+}
+
+export const ApplicationContext = React.createContext({} as IApplicationContext);
+
+export function useApplicationContext(): IApplicationContext {
+    return React.useContext(ApplicationContext);
+}