From dcfaae7955e44ad4ef0c55ea24d2d52e3752c1df Mon Sep 17 00:00:00 2001
From: baldo <baldo@toppoint.de>
Date: Wed, 24 Aug 2022 23:46:56 +0200
Subject: [PATCH] Make sure config and version are loaded before app runs to
 avoid null checks.

---
 .../nodes/NodeDeleteConfirmationForm.vue      |  4 ++--
 .../src/components/nodes/NodeDeleteForm.vue   |  6 ++---
 .../src/components/nodes/NodeDeletedPanel.vue |  4 ++--
 .../src/components/nodes/NodePreviewCard.vue  | 10 ++++----
 .../src/components/nodes/NodesFilterPanel.vue |  4 ++--
 frontend/src/components/page/PageFooter.vue   |  2 +-
 frontend/src/components/page/PageHeader.vue   |  2 +-
 frontend/src/main.ts                          | 23 +++++++++++--------
 frontend/src/stores/config.ts                 |  7 +++---
 frontend/src/stores/version.ts                |  7 +++---
 10 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/nodes/NodeDeleteConfirmationForm.vue b/frontend/src/components/nodes/NodeDeleteConfirmationForm.vue
index 53ccc1c..5fa15fc 100644
--- a/frontend/src/components/nodes/NodeDeleteConfirmationForm.vue
+++ b/frontend/src/components/nodes/NodeDeleteConfirmationForm.vue
@@ -19,7 +19,7 @@ interface Props {
 const props = defineProps<Props>();
 const nodeStore = useNodeStore();
 const configStore = useConfigStore();
-const email = computed(() => configStore.getConfig?.community.contactEmail);
+const email = computed(() => configStore.getConfig.community.contactEmail);
 
 const errorDeletingNode = ref<boolean>(false);
 
@@ -70,7 +70,7 @@ async function onAbort() {
             Beim Löschen des Knotens ist ein Fehler aufgetreten. Bitte probiere
             es später nochmal. Sollte dieses Problem weiter bestehen, so wende
             dich bitte per E-Mail an
-            <a v-if="email" :href="`mailto:${email}`">{{ email }}</a
+            <a :href="`mailto:${email}`">{{ email }}</a
             >.
         </ErrorCard>
 
diff --git a/frontend/src/components/nodes/NodeDeleteForm.vue b/frontend/src/components/nodes/NodeDeleteForm.vue
index 4ed8782..2835c81 100644
--- a/frontend/src/components/nodes/NodeDeleteForm.vue
+++ b/frontend/src/components/nodes/NodeDeleteForm.vue
@@ -15,7 +15,7 @@ import RouteButton from "@/components/form/RouteButton.vue";
 import { ApiError } from "@/utils/Api";
 
 const configStore = useConfigStore();
-const email = computed(() => configStore.getConfig?.community.contactEmail);
+const email = computed(() => configStore.getConfig.community.contactEmail);
 
 const nodeStore = useNodeStore();
 
@@ -67,7 +67,7 @@ async function onSubmit() {
                 <strong>
                     Solltest Du den Token nicht mehr haben, wende Dich einfach
                     per E-Mail an
-                    <a v-if="email" :href="`mailto:${email}`">{{ email }}</a
+                    <a :href="`mailto:${email}`">{{ email }}</a
                     >.
                 </strong>
             </p>
@@ -80,7 +80,7 @@ async function onSubmit() {
                 Beim Abrufen des Knotens ist ein Fehler aufgetreten. Bitte
                 probiere es später nochmal. Sollte dieses Problem weiter
                 bestehen, so wende dich bitte per E-Mail an
-                <a v-if="email" :href="`mailto:${email}`">{{ email }}</a
+                <a :href="`mailto:${email}`">{{ email }}</a
                 >.
             </ErrorCard>
 
diff --git a/frontend/src/components/nodes/NodeDeletedPanel.vue b/frontend/src/components/nodes/NodeDeletedPanel.vue
index e91fb7e..8aff44c 100644
--- a/frontend/src/components/nodes/NodeDeletedPanel.vue
+++ b/frontend/src/components/nodes/NodeDeletedPanel.vue
@@ -8,8 +8,8 @@ import RouteButton from "@/components/form/RouteButton.vue";
 import { route, RouteName } from "@/router";
 
 const configStore = useConfigStore();
-const email = computed(() => configStore.getConfig?.community.contactEmail);
-const mapUrl = computed(() => configStore.getConfig?.map.mapUrl);
+const email = computed(() => configStore.getConfig.community.contactEmail);
+const mapUrl = computed(() => configStore.getConfig.map.mapUrl);
 
 interface Props {
     hostname: Hostname;
diff --git a/frontend/src/components/nodes/NodePreviewCard.vue b/frontend/src/components/nodes/NodePreviewCard.vue
index cb7f24e..246cd33 100644
--- a/frontend/src/components/nodes/NodePreviewCard.vue
+++ b/frontend/src/components/nodes/NodePreviewCard.vue
@@ -21,7 +21,8 @@ const props = defineProps<Props>();
         </h3>
 
         <div class="field">
-            <strong>Token:</strong> <code>{{ props.node.token }}</code>
+            <strong>Token: </strong>
+            <code>{{ props.node.token }}</code>
         </div>
 
         <div class="field">
@@ -30,16 +31,17 @@ const props = defineProps<Props>();
         </div>
 
         <div class="field">
-            <strong>MAC-Adresse:</strong> <code>{{ props.node.mac }}</code>
+            <strong>MAC-Adresse: </strong>
+            <code>{{ props.node.mac }}</code>
         </div>
 
         <div class="field">
-            <strong>VPN-Schlüssel:</strong>
+            <strong>VPN-Schlüssel: </strong>
             <code>{{ props.node.key || "nicht angegeben" }}</code>
         </div>
 
         <div class="field">
-            <strong>Monitoring:</strong>
+            <strong>Monitoring: </strong>
             <span v-if="props.node.monitoringState === MonitoringState.PENDING">
                 Bestätigung ausstehend
             </span>
diff --git a/frontend/src/components/nodes/NodesFilterPanel.vue b/frontend/src/components/nodes/NodesFilterPanel.vue
index b405ce4..30ca72f 100644
--- a/frontend/src/components/nodes/NodesFilterPanel.vue
+++ b/frontend/src/components/nodes/NodesFilterPanel.vue
@@ -91,8 +91,8 @@ function pushFilter(filterGroup: Filter[], filter: Filter): void {
 
 const suggestedFilters = computed<Filter[][]>(() => {
     const cfg = configStore.getConfig;
-    const sites = cfg?.community.sites || [];
-    const domains = cfg?.community.domains || [];
+    const sites = cfg.community.sites;
+    const domains = cfg.community.domains;
 
     const filterGroups: Filter[][] = [];
 
diff --git a/frontend/src/components/page/PageFooter.vue b/frontend/src/components/page/PageFooter.vue
index 51c397c..a523a8b 100644
--- a/frontend/src/components/page/PageFooter.vue
+++ b/frontend/src/components/page/PageFooter.vue
@@ -7,7 +7,7 @@ const versionStore = useVersionStore();
 </script>
 
 <template>
-    <footer v-if="configStore.getConfig">
+    <footer>
         ffffng ({{ versionStore.getVersion }})
         <a href="https://github.com/freifunkhamburg/ffffng" target="_blank">
             <i class="fa fa-code" aria-hidden="true" /> Source Code
diff --git a/frontend/src/components/page/PageHeader.vue b/frontend/src/components/page/PageHeader.vue
index 2f8b594..a0e692c 100644
--- a/frontend/src/components/page/PageHeader.vue
+++ b/frontend/src/components/page/PageHeader.vue
@@ -6,7 +6,7 @@ const configStore = useConfigStore();
 </script>
 
 <template>
-    <header v-if="configStore.getConfig">
+    <header>
         <nav>
             <RouterLink class="logo" :to="route(RouteName.HOME)">
                 <img
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 5b124e6..795f79f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -6,16 +6,19 @@ import router from "./router";
 import { useConfigStore } from "@/stores/config";
 import { useVersionStore } from "@/stores/version";
 
-const app = createApp(App);
+async function main() {
+    const app = createApp(App);
 
-app.use(createPinia());
-app.use(router);
+    app.use(createPinia());
+    app.use(router);
 
-useConfigStore()
-    .refresh()
-    .catch((err) => console.error(err));
-useVersionStore()
-    .refresh()
-    .catch((err) => console.error(err));
+    const configLoaded = useConfigStore().refresh();
+    const versionLoaded = useVersionStore().refresh();
 
-app.mount("#app");
+    await configLoaded;
+    await versionLoaded;
+
+    app.mount("#app");
+}
+
+main().catch((error) => console.error("Unhandled error:", error));
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts
index a0d3730..dc21947 100644
--- a/frontend/src/stores/config.ts
+++ b/frontend/src/stores/config.ts
@@ -3,18 +3,19 @@ import { type ClientConfig, isClientConfig } from "@/types";
 import { api } from "@/utils/Api";
 
 interface ConfigStoreState {
-    config: ClientConfig | null;
+    config: ClientConfig;
 }
 
 export const useConfigStore = defineStore({
     id: "config",
     state(): ConfigStoreState {
         return {
-            config: null,
+            // Initialized in main.ts before mounting app.
+            config: undefined as unknown as ClientConfig,
         };
     },
     getters: {
-        getConfig(state: ConfigStoreState): ClientConfig | null {
+        getConfig(state: ConfigStoreState): ClientConfig {
             return state.config;
         },
     },
diff --git a/frontend/src/stores/version.ts b/frontend/src/stores/version.ts
index 6ff5674..5e64664 100644
--- a/frontend/src/stores/version.ts
+++ b/frontend/src/stores/version.ts
@@ -11,18 +11,19 @@ function isVersionResponse(arg: unknown): arg is VersionResponse {
 }
 
 interface VersionStoreState {
-    version: Version | null;
+    version: Version;
 }
 
 export const useVersionStore = defineStore({
     id: "version",
     state(): VersionStoreState {
         return {
-            version: null,
+            // Initialized in main.ts before mounting app.
+            version: undefined as unknown as Version,
         };
     },
     getters: {
-        getVersion(state: VersionStoreState): Version | null {
+        getVersion(state: VersionStoreState): Version {
             return state.version;
         },
     },