Refresh user and config on every route change (#5425)

* Refresh user and config on every route change

* Fix build error

* Remove stray log

frontend/components/App/App.tsx

@@ -1,10 +1,9 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { AxiosResponse } from "axios";
 import { InjectedRouter } from "react-router";
 import { QueryClient, QueryClientProvider } from "react-query";
 import classnames from "classnames";
 
-import PATHS from "router/paths";
 import TableProvider from "context/table";
 import QueryProvider from "context/query";
 import PolicyProvider from "context/policy";
@@ -28,9 +27,11 @@ import Spinner from "components/Spinner";
 interface IAppProps {
   children: JSX.Element;
   router: InjectedRouter;
-  location?: {
-    pathname: string;
-  };
+  location:
+    | {
+        pathname: string;
+      }
+    | undefined;
 }
 
 const App = ({ children, location, router }: IAppProps): JSX.Element => {
@@ -48,42 +49,38 @@ const App = ({ children, location, router }: IAppProps): JSX.Element => {
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  useDeepEffect(() => {
-    const fetchCurrentUser = async () => {
-      try {
-        const { user, available_teams } = await usersAPI.me();
-        setCurrentUser(user);
-        setAvailableTeams(available_teams);
-      } catch (error) {
-        console.error(error);
+  const fetchConfig = async () => {
+    try {
+      const config = await configAPI.loadAll();
+      setConfig(config);
+    } catch (error) {
+      console.error(error);
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+    return true;
+  };
 
-        local.removeItem("auth_token");
-        return router.push(PATHS.LOGIN);
-      }
-    };
+  const fetchCurrentUser = async () => {
+    try {
+      const { user, available_teams } = await usersAPI.me();
+      setCurrentUser(user);
+      setAvailableTeams(available_teams);
+      fetchConfig();
+    } catch (error) {
+      console.log(error);
+      local.removeItem("auth_token");
+      window.location.href = "/login";
+    }
+    return true;
+  };
 
-    const fetchConfig = async () => {
-      try {
-        const config = await configAPI.loadAll();
-        setConfig(config);
-      } catch (error) {
-        console.error(error);
-        return false;
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    // on page refresh
-    if (!currentUser && authToken()) {
+  useEffect(() => {
+    if (authToken()) {
       fetchCurrentUser();
     }
-
-    if (currentUser) {
-      setIsLoading(true);
-      fetchConfig();
-    }
-  }, [currentUser, location]);
+  }, [location?.pathname]);
 
   useDeepEffect(() => {
     const canGetEnrollSecret =
@@ -108,7 +105,7 @@ const App = ({ children, location, router }: IAppProps): JSX.Element => {
     if (canGetEnrollSecret) {
       getEnrollSecret();
     }
-  }, [currentUser, isGlobalObserver, isOnlyObserver, location]);
+  }, [currentUser, isGlobalObserver, isOnlyObserver]);
 
   // "any" is used on purpose. We are using Axios but this
   // function expects a native React Error type, which is incompatible.

frontend/components/PageHeader/TeamsDropdownHeader.tsx

@@ -1,9 +1,7 @@
 import React, { useCallback, useContext, useEffect } from "react";
-import { useQuery } from "react-query";
 import { InjectedRouter } from "react-router/lib/Router";
 
 import { AppContext, IAppContext } from "context/app";
-import usersAPI, { IGetMeResponse } from "services/entities/users";
 
 import TeamsDropdown from "../TeamsDropdown/TeamsDropdown";
 
@@ -80,13 +78,6 @@ const TeamsDropdownHeader = ({
     isOnlyObserver,
   };
 
-  useQuery(["me"], () => usersAPI.me(), {
-    onSuccess: ({ user, available_teams }: IGetMeResponse) => {
-      setCurrentUser(user);
-      setAvailableTeams(available_teams);
-    },
-  });
-
   const findAvailableTeam = (id: number) => {
     return availableTeams?.find((t) => t.id === id);
   };

frontend/pages/LoginPage/LoginPage.tsx

@@ -82,7 +82,6 @@ const LoginPage = ({ router }: ILoginPageProps) => {
       if (user.force_password_reset) {
         return router.push(RESET_PASSWORD);
       }
-
       return router.push(redirectLocation || HOME);
     } catch (response) {
       const errorObject = formatErrorResponse(response);

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx

@@ -131,6 +131,7 @@ const TeamDetailsWrapper = ({
   }>({});
 
   const { refetch: refetchMe } = useQuery(["me"], () => usersAPI.me(), {
+    enabled: false,
     onSuccess: ({ user, available_teams }: IGetMeResponse) => {
       setCurrentUser(user);
       setAvailableTeams(available_teams);

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx

@@ -10,7 +10,6 @@ import FileSaver from "file-saver";
 import enrollSecretsAPI from "services/entities/enroll_secret";
 import labelsAPI from "services/entities/labels";
 import teamsAPI from "services/entities/teams";
-import usersAPI, { IGetMeResponse } from "services/entities/users";
 import globalPoliciesAPI from "services/entities/global_policies";
 import teamPoliciesAPI from "services/entities/team_policies";
 import hostsAPI, {
@@ -146,32 +145,24 @@ const ManageHostsPage = ({
     isOnlyObserver,
     isPremiumTier,
     isFreeTier,
-    setAvailableTeams,
     setCurrentTeam,
-    setCurrentUser,
   } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
 
-  useQuery(["me"], () => usersAPI.me(), {
-    onSuccess: ({ user, available_teams }: IGetMeResponse) => {
-      setCurrentUser(user);
-      setAvailableTeams(available_teams);
-      if (queryParams.team_id) {
-        const teamIdParam = parseInt(queryParams.team_id, 10);
-        if (
-          isNaN(teamIdParam) ||
-          (teamIdParam &&
-            available_teams &&
-            !available_teams.find((t) => t.id === teamIdParam))
-        ) {
-          router.replace({
-            pathname: location.pathname,
-            query: omit(queryParams, "team_id"),
-          });
-        }
-      }
-    },
-  });
+  if (queryParams.team_id) {
+    const teamIdParam = parseInt(queryParams.team_id, 10);
+    if (
+      isNaN(teamIdParam) ||
+      (teamIdParam &&
+        availableTeams &&
+        !availableTeams.find((team) => team.id === teamIdParam))
+    ) {
+      router.replace({
+        pathname: location.pathname,
+        query: omit(queryParams, "team_id"),
+      });
+    }
+  }
 
   const { selectedOsqueryTable, setSelectedOsqueryTable } = useContext(
     QueryContext

frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx

@@ -17,7 +17,6 @@ import configAPI from "services/entities/config";
 import globalPoliciesAPI from "services/entities/global_policies";
 import teamPoliciesAPI from "services/entities/team_policies";
 import teamsAPI from "services/entities/teams";
-import usersAPI, { IGetMeResponse } from "services/entities/users";
 
 import Button from "components/buttons/Button";
 import RevealButton from "components/buttons/RevealButton";
@@ -30,7 +29,7 @@ import AddPolicyModal from "./components/AddPolicyModal";
 import RemovePoliciesModal from "./components/RemovePoliciesModal";
 
 interface IManagePoliciesPageProps {
-  router: InjectedRouter; // v3
+  router: InjectedRouter;
   location: {
     action: string;
     hash: string;
@@ -97,13 +96,6 @@ const ManagePolicyPage = ({
     setLastEditedQueryPlatform(null);
   }, []);
 
-  useQuery(["me"], () => usersAPI.me(), {
-    onSuccess: ({ user, available_teams }: IGetMeResponse) => {
-      setCurrentUser(user);
-      setAvailableTeams(available_teams);
-    },
-  });
-
   const {
     data: globalPolicies,
     error: globalPoliciesError,

frontend/pages/schedule/ManageSchedulePage/ManageSchedulePage.tsx

@@ -19,7 +19,6 @@ import fleetQueriesAPI from "services/entities/queries";
 import globalScheduledQueriesAPI from "services/entities/global_scheduled_queries";
 import teamScheduledQueriesAPI from "services/entities/team_scheduled_queries";
 import teamsAPI from "services/entities/teams";
-import usersAPI, { IGetMeResponse } from "services/entities/users";
 import sortUtils from "utilities/sort";
 import paths from "router/paths";
 
@@ -122,8 +121,6 @@ const ManageSchedulePage = ({
     isPremiumTier,
     isFreeTier,
     currentTeam,
-    setAvailableTeams,
-    setCurrentUser,
     setCurrentTeam,
   } = useContext(AppContext);
 
@@ -144,13 +141,6 @@ const ManageSchedulePage = ({
     return filteredSortedTeams;
   };
 
-  useQuery(["me"], () => usersAPI.me(), {
-    onSuccess: ({ user, available_teams }: IGetMeResponse) => {
-      setCurrentUser(user);
-      setAvailableTeams(available_teams);
-    },
-  });
-
   const { data: teams, isLoading: isLoadingTeams } = useQuery(
     ["teams"],
     () => teamsAPI.loadAll({}),

frontend/router/index.tsx

@@ -56,13 +56,18 @@ import RoutingProvider from "context/routing";
 interface IAppWrapperProps {
   children: JSX.Element;
   router: InjectedRouter;
+  location?: {
+    pathname: string;
+  };
 }
 
 // App.tsx needs the context for user and config
-const AppWrapper = ({ children, router }: IAppWrapperProps) => (
+const AppWrapper = ({ children, router, location }: IAppWrapperProps) => (
   <AppProvider>
     <RoutingProvider>
-      <App router={router}>{children}</App>
+      <App router={router} location={location}>
+        {children}
+      </App>
     </RoutingProvider>
   </AppProvider>
 );