Add useConfig composable.

src/components/FooterComponent.vue

@@ -42,20 +42,14 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { computed } from "vue";
-import { fetchJson, apiUrl } from "@/composables/useApi.js";
+import { useConfig } from "@/composables/useConfig.js";
 
-const donationHref = ref(null);
+const { config } = useConfig();
-const statusPageHref = ref(null);
-const privacyPolicyHref = ref(null);
 
-onMounted(() => {
+const donationHref = computed(() => config.value?.donationUrl);
-    fetchJson(apiUrl() + "/config").then(config => {
+const statusPageHref = computed(() => config.value?.statusPageUrl);
-        donationHref.value = config?.donationUrl;
+const privacyPolicyHref = computed(() => config.value?.privacyPolicyUrl);
-        statusPageHref.value = config?.statusPageUrl;
-        privacyPolicyHref.value = config?.privacyPolicyUrl;
-    });
-});
 </script>
 
 <style>

src/components/NavBar.vue

@@ -145,8 +145,9 @@ import { useRouter, useRoute } from "vue-router";
 import SearchSuggestions from "./SearchSuggestions.vue";
 import ClearButton from "./ui/ClearButton.vue";
 import hotkeys from "hotkeys-js";
-import { fetchJson, authApiUrl, getAuthToken } from "@/composables/useApi.js";
+import { getAuthToken } from "@/composables/useApi.js";
 import { getPreferenceBoolean, getPreferenceString } from "@/composables/usePreferences.js";
+import { useConfig } from "@/composables/useConfig.js";
 
 const router = useRouter();
 const route = useRoute();
@@ -157,7 +158,9 @@ const searchSuggestions = ref(null);
 const searchText = ref("");
 const suggestionsVisible = ref(false);
 const showTopNav = ref(false);
-const registrationDisabled = ref(false);
+
+const { authConfig } = useConfig();
+const registrationDisabled = computed(() => authConfig.value?.registrationDisabled === true);
 
 const shouldShowLogin = computed(() => {
     return getAuthToken() == null;
@@ -224,12 +227,6 @@ function onSearchTextChange(text) {
     searchText.value = text;
 }
 
-async function fetchAuthConfig() {
-    fetchJson(authApiUrl() + "/config").then(config => {
-        registrationDisabled.value = config?.registrationDisabled === true;
-    });
-}
-
 function onSearchClick(e) {
     submitSearch(e);
 }
@@ -248,7 +245,6 @@ function submitSearch(e) {
 }
 
 onMounted(() => {
-    fetchAuthConfig();
     updateSearchTextFromURLSearchParams();
     focusOnSearchBar();
 });

src/composables/useConfig.js

@@ -0,0 +1,28 @@
+import { ref } from "vue";
+import { fetchJson, apiUrl, authApiUrl } from "./useApi.js";
+
+const configRefs = new Map();
+const configRequests = new Map();
+
+function fetchConfig(url) {
+    if (!configRefs.has(url)) {
+        configRefs.set(url, ref(null));
+        configRequests.set(
+            url,
+            fetchJson(url + "/config").then(data => {
+                configRefs.get(url).value = data;
+                return data;
+            }),
+        );
+    }
+    return configRefs.get(url);
+}
+
+export function useConfig() {
+    return {
+        config: fetchConfig(apiUrl()),
+        // When the auth instance is the same as the regular instance the URLs
+        // match, so this returns the same ref and only one request is made.
+        authConfig: fetchConfig(authApiUrl()),
+    };
+}