From a68122f3e771c6646f4872721f58730128ca6f73 Mon Sep 17 00:00:00 2001
From: Pawel Kowalski <pawel.kowalski@iterativ.ch>
Date: Thu, 23 Aug 2018 16:36:36 +0200
Subject: [PATCH] Fix problem with reactive property and use computed to get
 the length of the rooms

---
 client/src/layouts/DefaultLayout.vue |  1 -
 client/src/pages/room.vue            | 28 +++++++++++++++++-----------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 31c70bd4..97b2e9e3 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -41,7 +41,6 @@
         }
       }
     }
-
   }
 </script>
 
diff --git a/client/src/pages/room.vue b/client/src/pages/room.vue
index 6747d5e5..83eff27c 100644
--- a/client/src/pages/room.vue
+++ b/client/src/pages/room.vue
@@ -9,7 +9,7 @@
       <div class="room__meta">
         <room-group-widget :group="'Fábrica Nacional de Moneda y Timbre'"></room-group-widget>
 
-        <room-entry-count-widget :entry-count="room.roomEntries.length"></room-entry-count-widget>
+        <room-entry-count-widget :entry-count="roomEntryCount"></room-entry-count-widget>
       </div>
     </div>
     <div class="room__content">
@@ -47,27 +47,33 @@
       this.$store.dispatch('setSpecialContainerClass', 'red');
     },
 
+    data() {
+      return {
+        room: []
+      }
+    },
+
+    computed: {
+      roomEntryCount() {
+        return (this.room && this.room.roomEntries) ? this.room.roomEntries.length : 0
+      }
+    },
+
     apollo: {
       modules: {
         query: ROOM_ENTRIES_QUERY,
-        variables: {
-          slug: this.slug
-          // slug: "ein-historisches-festival"
+        variables() {
+          return {
+            slug: this.slug
+          }
         },
         manual: true,
         result({data, loading, networkStatus}) {
           if (!loading) {
-            debugger
             this.room = this.$getRidOfEdges(data).room
           }
         }
       }
-    },
-
-    data() {
-      return {
-        room: []
-      }
     }
 
     // data() {