Only load GA when valid key is provided; closes #2678

resources/scripts/api/server/getServer.ts

@@ -13,7 +13,7 @@ export interface Allocation {
 
 export interface Server {
     id: string;
-    internalId: number;
+    internalId: number | string;
     uuid: string;
     name: string;
     node: string;

resources/scripts/components/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import ReactGA from 'react-ga';
 import { hot } from 'react-hot-loader/root';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Switch, useLocation } from 'react-router-dom';
 import { StoreProvider } from 'easy-peasy';
 import { store } from '@/state';
 import DashboardRouter from '@/routers/DashboardRouter';
@@ -30,6 +30,16 @@ interface ExtendedWindow extends Window {
     };
 }
 
+const Pageview = () => {
+    const { pathname } = useLocation();
+
+    useEffect(() => {
+        ReactGA.pageview(pathname);
+    }, [ pathname ]);
+
+    return null;
+};
+
 const App = () => {
     const { PterodactylUser, SiteConfiguration } = (window as ExtendedWindow);
     if (PterodactylUser && !store.getState().user.data) {
@@ -50,8 +60,9 @@ const App = () => {
     }
 
     useEffect(() => {
+        if (SiteConfiguration?.analytics) {
             ReactGA.initialize(SiteConfiguration!.analytics);
-        ReactGA.pageview(location.pathname);
+        }
     }, []);
 
     return (
@@ -62,6 +73,7 @@ const App = () => {
                     <ProgressBar/>
                     <div css={tw`mx-auto w-auto`}>
                         <BrowserRouter basename={'/'} key={'root-router'}>
+                            {SiteConfiguration?.analytics && <Pageview/>}
                             <Switch>
                                 <Route path="/server/:id" component={ServerRouter}/>
                                 <Route path="/auth" component={AuthenticationRouter}/>

resources/scripts/routers/AuthenticationRouter.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
-import ReactGA from 'react-ga';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import LoginContainer from '@/components/auth/LoginContainer';
 import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
@@ -7,12 +6,7 @@ import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
 import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
 import NotFound from '@/components/screens/NotFound';
 
-export default ({ location, history, match }: RouteComponentProps) => {
+export default ({ location, history, match }: RouteComponentProps) => (
-    useEffect(() => {
-        ReactGA.pageview(location.pathname);
-    }, [ location.pathname ]);
-
-    return (
     <div className={'pt-8 xl:pt-32'}>
         <Switch location={location}>
             <Route path={`${match.path}/login`} component={LoginContainer} exact/>
@@ -26,4 +20,3 @@ export default ({ location, history, match }: RouteComponentProps) => {
         </Switch>
     </div>
 );
-};

resources/scripts/routers/DashboardRouter.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
-import ReactGA from 'react-ga';
 import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
 import NavigationBar from '@/components/NavigationBar';
@@ -9,12 +8,7 @@ import NotFound from '@/components/screens/NotFound';
 import TransitionRouter from '@/TransitionRouter';
 import SubNavigation from '@/components/elements/SubNavigation';
 
-export default ({ location }: RouteComponentProps) => {
+export default ({ location }: RouteComponentProps) => (
-    useEffect(() => {
-        ReactGA.pageview(location.pathname);
-    }, [ location.pathname ]);
-
-    return (
     <>
         <NavigationBar/>
         {location.pathname.startsWith('/account') &&
@@ -35,4 +29,3 @@ export default ({ location }: RouteComponentProps) => {
         </TransitionRouter>
     </>
 );
-};

resources/scripts/routers/ServerRouter.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import ReactGA from 'react-ga';
 import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import NavigationBar from '@/components/NavigationBar';
 import ServerConsole from '@/components/server/ServerConsole';
@@ -40,9 +39,9 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
     const id = ServerContext.useStoreState(state => state.server.data?.id);
     const uuid = ServerContext.useStoreState(state => state.server.data?.uuid);
     const isInstalling = ServerContext.useStoreState(state => state.server.data?.isInstalling);
+    const serverId = ServerContext.useStoreState(state => state.server.data?.internalId);
     const getServer = ServerContext.useStoreActions(actions => actions.server.getServer);
     const clearServerState = ServerContext.useStoreActions(actions => actions.clearServerState);
-    const serverId = ServerContext.useStoreState(state => state.server.data?.internalId);
 
     useEffect(() => () => {
         clearServerState();
@@ -70,10 +69,6 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
         };
     }, [ match.params.id ]);
 
-    useEffect(() => {
-        ReactGA.pageview(location.pathname);
-    }, [ location.pathname ]);
-
     return (
         <React.Fragment key={'server-router'}>
             <NavigationBar/>