more clean up

webapp/frontend/src/components/NodeNeighborsModal.vue

@@ -4,11 +4,16 @@ import { state } from '@/store';
 import CloseActionButton from '@/components/CloseActionButton.vue';
 
 const emit = defineEmits(['dismiss']);
+const props = defineProps({
+    node: {
+        type: Object,
+        required: false,
+        validator(value) {
+            return value === null || typeof value === 'object';
+        },
+    }
+});
 
-function dismissShowingNodeNeighbours() {
-  state.selectedNodeToShowNeighbours = null;
-  emit('dismiss');
-}
 </script>
 
 <template>
@@ -21,30 +26,30 @@ function dismissShowingNodeNeighbours() {
       leave-from-class="translate-y-0"
       leave-to-class="translate-y-full"
     >
-      <div v-show="state.selectedNodeToShowNeighbours" class="fixed left-0 right-0 bottom-0">
-        <div v-if="state.selectedNodeToShowNeighbours" class="mx-auto w-screen max-w-md p-4">
+      <div v-show="props.node !== null" class="fixed left-0 right-0 bottom-0">
+        <div v-if="props.node !== null" class="mx-auto w-screen max-w-md p-4">
           <div class="flex h-full flex-col bg-white shadow-xl rounded-xl border">
             <div class="p-2">
               <div class="flex items-start justify-between">
                 <div>
                   <h2 class="font-bold">
-                    {{ state.selectedNodeToShowNeighbours.short_name }} Neighbors
+                    {{ props.node.short_name }} Neighbors
                   </h2>
                   <h3
-                    v-if="state.selectedNodeToShowNeighboursType === 'weHeard'"
+                    v-if="state.neighborsModalType === 'weHeard'"
                     class="text-sm"
                   >
-                    Nodes heard by {{ state.selectedNodeToShowNeighbours.short_name }}
+                    Nodes heard by {{ props.node.short_name }}
                   </h3>
                   <h3
-                    v-if="state.selectedNodeToShowNeighboursType === 'theyHeard'"
+                    v-if="state.neighborsModalType === 'theyHeard'"
                     class="text-sm"
                   >
-                    Nodes that heard {{ state.selectedNodeToShowNeighbours.short_name }}
+                    Nodes that heard {{ props.node.short_name }}
                   </h3>
                 </div>
                 <CloseActionButton
-                  @click="dismissShowingNodeNeighbours"
+                  @click="$emit('dismiss')"
                   class="my-auto ml-3"
                 />
               </div>