fix: use useEffect to update the analytics (#1021)

* fix: use `useEffect` to update the analytics * Update frontend/packages/launcher-app/src/app/launcher-app.tsx Co-Authored-By: Andy Damevin <[email protected]>
fabric8-launcher · Apr 22, 2020 · 3fdda3e · 3fdda3e
1 parent c221d10
commit 3fdda3e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 23 deletions.
diff --git a/frontend/packages/launcher-app/src/app/launcher-app.tsx b/frontend/packages/launcher-app/src/app/launcher-app.tsx
@@ -1,22 +1,21 @@
 import '@patternfly/react-core/dist/styles/base.css';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Redirect, Route, Switch } from 'react-router';
 import { BrowserRouter } from 'react-router-dom';
 import { AuthenticationApiContext, useAuthenticationApiStateProxy } from '../auth/auth-context';
 import { newAuthApi } from '../auth/authentication-api-factory';
 import { createRouterLink, getRequestedRoute, useRouter } from '../router/use-router';
-import { authConfig, authMode, creatorApiUrl, launcherApiUrl, publicUrl } from './config';
+import { authConfig, authMode, creatorApiUrl, launcherApiUrl, publicUrl, trackerToken } from './config';
 import './launcher-app.scss';
 import { Layout } from './layout';
 import { LoginPage } from './login-page';
 import { LauncherMenu } from '../launcher/launcher';
 import { CreateNewAppFlow } from '../flows/create-new-app-flow';
 import { ImportExistingFlow } from '../flows/import-existing-flow';
 import { DeployExampleAppFlow } from '../flows/deploy-example-app-flow';
-import { DataLoader, AnalyticsContext } from '@launcher/component';
+import { DataLoader, AnalyticsContext, useAnalytics, Analytics, GoogleAnalytics } from '@launcher/component';
 import { LauncherDepsProvider } from '../contexts/launcher-client-provider';
 
-
 function Routes(props: {}) {
   const analytics = useContext(AnalyticsContext);
   const router = useRouter();
@@ -76,20 +75,33 @@ function HomePage(props: {}) {
 const authApi = newAuthApi(authMode, authConfig);
 
 export function LauncherApp() {
+  const [analytics, setAnalytics] = useState<Analytics>(useAnalytics());
+
+  useEffect(() => {
+    setAnalytics((prev) => {
+      const newAnalytics = trackerToken ? new GoogleAnalytics(trackerToken) : prev;
+      newAnalytics.init();
+      return newAnalytics;
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const proxyAuthApi = useAuthenticationApiStateProxy(authApi);
   const authLoader = () => {
     return proxyAuthApi.init().catch(e => console.error(e));
   };
   return (
     <DataLoader loader={authLoader}>
       <AuthenticationApiContext.Provider value={proxyAuthApi}>
-        <LauncherDepsProvider
-          authorizationsManager={proxyAuthApi}
-          creatorUrl={creatorApiUrl}
-          launcherUrl={launcherApiUrl}
-        >
-          <HomePage />
-        </LauncherDepsProvider>
+        <AnalyticsContext.Provider value={analytics}>
+          <LauncherDepsProvider
+            authorizationsManager={proxyAuthApi}
+            creatorUrl={creatorApiUrl}
+            launcherUrl={launcherApiUrl}
+          >
+            <HomePage />
+          </LauncherDepsProvider>
+        </AnalyticsContext.Provider>
       </AuthenticationApiContext.Provider>
     </DataLoader >
   );

diff --git a/frontend/packages/launcher-app/src/launcher/launcher.tsx b/frontend/packages/launcher-app/src/launcher/launcher.tsx
@@ -1,13 +1,12 @@
+import React from 'react';
 import { Card, CardBody, CardFooter, CardHeader, Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
-import React, { useContext } from 'react';
 import { CreateNewAppFlow } from '../flows/create-new-app-flow';
 import { DeployExampleAppFlow } from '../flows/deploy-example-app-flow';
 import style from './launcher.module.scss';
 import { ImportExistingFlow } from '../flows/import-existing-flow';
 import { CatalogIcon, FileImportIcon, TopologyIcon } from '@patternfly/react-icons';
 import { useSessionStorage } from 'react-use-sessionstorage';
-import { ButtonLink, useAnalytics, GoogleAnalytics, Analytics } from '@launcher/component';
-import { trackerToken } from '../app/config';
+import { ButtonLink } from '@launcher/component';
 
 enum Type {
   NEW = 'NEW', EXAMPLE = 'EXAMPLE', IMPORT = 'IMPORT'
@@ -25,15 +24,7 @@ export interface LauncherMenuProps {
 }
 
 export function LauncherMenu({createNewApp, createExampleApp, importExistingApp}: LauncherMenuProps) {
-  let analyticsImpl = useAnalytics();
-  if (trackerToken) {
-    analyticsImpl = new GoogleAnalytics(trackerToken!);
-  }
-  const AnalyticsContext = React.createContext<Analytics>(analyticsImpl)
-  const analytics = useContext(AnalyticsContext);
-
   return (
-    <AnalyticsContext.Provider value={analytics}>
     <Grid gutter="md" className={style.menu}>
       <GridItem span={12}>
         <Text component={TextVariants.h1} className={style.title}>Launcher</Text>
@@ -75,7 +66,6 @@ export function LauncherMenu({createNewApp, createExampleApp, importExistingApp}
         </Card>
       </GridItem>
     </Grid>
-    </AnalyticsContext.Provider>
   );
 }