Patch auth bug

src/App.tsx

@@ -27,10 +27,12 @@ function App() {
     initialBaselayersState
   );
 
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+
   /** query the bands to use as the baselayers of the map */
   useQuery<BandWithCmapValues[] | undefined>({
     initialData: undefined,
-    queryKey: [],
+    queryKey: [isAuthenticated],
     queryFn: async () => {
       // Fetch the maps and the map metadata in order to get the list of bands used as
       // map baselayers
@@ -69,7 +71,7 @@ function App() {
   /** sourceLists are used as FeatureGroups in the map, which can be toggled on/off in the map legend */
   const { data: sourceLists } = useQuery<SourceList[] | undefined>({
     initialData: undefined,
-    queryKey: [],
+    queryKey: [isAuthenticated],
     queryFn: async () => {
       // Fetch the source catalogs and sources
       const { catalogs, sources } = await fetchProducts('sources');
@@ -93,7 +95,7 @@ function App() {
     // The optimistic version of highlightBoxes for when we add boxes in the UI
     optimisticHighlightBoxes,
     addOptimisticHighlightBox,
-  } = useHighlightBoxes();
+  } = useHighlightBoxes(isAuthenticated);
 
   /** tracks highlight boxes that are "checked" and visible on the map  */
   const [activeBoxIds, setActiveBoxIds] = useState<number[]>([]);
@@ -168,24 +170,30 @@ function App() {
   const { activeBaselayer, internalBaselayersState } = baselayersState;
   return (
     <>
-      <Login />
-      {activeBaselayer && internalBaselayersState && (
-        <OpenLayersMap
-          baselayersState={baselayersState}
-          dispatchBaselayersChange={dispatchBaselayersChange}
-          sourceLists={sourceLists}
-          activeSourceListIds={activeSourceListIds}
-          onSelectedSourceListsChange={onSelectedSourceListsChange}
-          highlightBoxes={optimisticHighlightBoxes}
-          setBoxes={updateHighlightBoxes}
-          activeBoxIds={activeBoxIds}
-          setActiveBoxIds={setActiveBoxIds}
-          onSelectedHighlightBoxChange={onSelectedHighlightBoxChange}
-          submapData={submapData}
-          addOptimisticHighlightBox={addOptimisticHighlightBox}
-        />
-      )}
-      {assertBand(activeBaselayer) &&
+      <Login
+        isAuthenticated={isAuthenticated}
+        setIsAuthenticated={setIsAuthenticated}
+      />
+      {isAuthenticated !== null &&
+        activeBaselayer &&
+        internalBaselayersState && (
+          <OpenLayersMap
+            baselayersState={baselayersState}
+            dispatchBaselayersChange={dispatchBaselayersChange}
+            sourceLists={sourceLists}
+            activeSourceListIds={activeSourceListIds}
+            onSelectedSourceListsChange={onSelectedSourceListsChange}
+            highlightBoxes={optimisticHighlightBoxes}
+            setBoxes={updateHighlightBoxes}
+            activeBoxIds={activeBoxIds}
+            setActiveBoxIds={setActiveBoxIds}
+            onSelectedHighlightBoxChange={onSelectedHighlightBoxChange}
+            submapData={submapData}
+            addOptimisticHighlightBox={addOptimisticHighlightBox}
+          />
+        )}
+      {isAuthenticated !== null &&
+        assertBand(activeBaselayer) &&
         activeBaselayer.cmap &&
         activeBaselayer.cmapValues && (
           <ColorMapControls

src/components/Login.tsx

@@ -1,11 +1,15 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { LOGIN_URL, LOGOUT_URL } from '../configs/mapSettings';
 import { getCookie } from '../utils/fetchUtils';
 import './styles/login.css';
 
-export function Login() {
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
-
+export function Login({
+  isAuthenticated,
+  setIsAuthenticated,
+}: {
+  isAuthenticated: boolean | null;
+  setIsAuthenticated: (isAuthenticated: boolean) => void;
+}) {
   useEffect(() => {
     const hasAccessToken = getCookie('validate_access_token');
     const hasRefreshToken = getCookie('valid_refresh_token');

src/hooks/useHighlightBoxes.ts

@@ -9,7 +9,9 @@ type UseHighlightBoxesReturn = {
   addOptimisticHighlightBox: (action: Box) => void;
 };
 
-export function useHighlightBoxes(): UseHighlightBoxesReturn {
+export function useHighlightBoxes(
+  isAuthenticated: boolean | null
+): UseHighlightBoxesReturn {
   // Represents the box regions users can add to maps
   const [highlightBoxes, updateHighlightBoxes] = useState<Box[] | undefined>(
     undefined
@@ -34,7 +36,7 @@ export function useHighlightBoxes(): UseHighlightBoxesReturn {
       updateHighlightBoxes(boxes);
     }
     getBoxes();
-  }, []);
+  }, [isAuthenticated]);
 
   return {
     highlightBoxes,

src/hooks/useQuery.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 
 type UseQueryParams<T> = {
   queryFn: () => Promise<T>;
-  queryKey: string[];
+  queryKey: any[];
   initialData: T;
 };