Wait for Maps API Key to be retrieved before first render

docker/ui/Dockerfile

@@ -1,6 +1,6 @@
 FROM node:20-alpine
-COPY musiccatalogue.ui-1.21.0.0 /opt/musiccatalogue.ui-1.21.0.0
-WORKDIR /opt/musiccatalogue.ui-1.21.0.0
+COPY musiccatalogue.ui-1.22.0.0 /opt/musiccatalogue.ui-1.22.0.0
+WORKDIR /opt/musiccatalogue.ui-1.22.0.0
 RUN npm install
 RUN npm run build
 ENTRYPOINT [ "npm", "start" ]

src/music-catalogue-ui/components/app.js

@@ -78,14 +78,16 @@ const App = () => {
       } catch {}
     };
 
-    fetchMapsApiKey();
-  }, [logout]);
+    if (mapsApiKey == null) {
+      fetchMapsApiKey();
+    }
+  }, [mapsApiKey, logout]);
 
   // If the user's logged in, show the banner and current component. Otherwise,
   // show the login page
   return (
     <>
-      {isLoggedIn ? (
+      {isLoggedIn && mapsApiKey != null ? (
         <>
           <div>
             <MenuBar navigate={navigate} logout={logout} />

src/music-catalogue-ui/helpers/secrets.js

@@ -0,0 +1,5 @@
+const secrets = {
+  mapsApiKey: "Maps API Key",
+};
+
+export default secrets;

src/music-catalogue-ui/hooks/useMapsApiKey.js

@@ -0,0 +1,34 @@
+import { apiFetchSecret, apiGetSecret } from "@/helpers/apiSecrets";
+import { useState, useEffect } from "react";
+import secrets from "@/helpers/secrets";
+
+/**
+ * Hook that uses the API helpers to retrieve the maps API key from the
+ * Music Catalogue REST API
+ * @param {*} logout
+ * @returns
+ */
+const useMapsApiKey = (logout) => {
+  // Current list of artists and the method to change it
+  const [apiKey, setApiKey] = useState(null);
+
+  useEffect(() => {
+    const fetchApiKey = async () => {
+      try {
+        // Get a list of artists via the service and store it in state
+        var fetchedApiKey = await apiFetchSecret(secrets.mapsApiKey);
+        setApiKey(fetchedApiKey);
+        apiSetSecret(fetchedApiKey);
+      } catch {}
+    };
+
+    const currentApiKey = apiGetSecret(secrets.mapsApiKey);
+    if (currentApiKey == null) {
+      fetchApiKey();
+    }
+  }, [logout]);
+
+  return { apiKey, setApiKey };
+};
+
+export default useMapsApiKey;