Add server data to room entries

client/src/components/UserWidget.vue

@@ -2,14 +2,14 @@
   <div class="user-widget">
     <img class="user-widget__avatar"
          :src="avatar">
-    <span class="user-widget__name">{{name}}</span>
+    <span class="user-widget__name">{{firstName}} {{lastName}}</span>
     <span class="user-widget__date" v-if="date">{{date}}</span>
   </div>
 </template>
 
 <script>
   export default {
-    props: ['name', 'avatar', 'date']
+    props: ['firstName', 'lastName', 'avatar', 'date']
   }
 </script>
 

client/src/components/rooms/RoomEntry.vue

@@ -17,11 +17,28 @@
   import UserWidget from '@/components/UserWidget.vue';
 
   export default {
-    props: ['title', 'teaser', 'image', 'author'],
+    props: ['title', 'author', 'contents'],
 
     components: {
       UserWidget
+    },
+
+    computed: {
+      image() {
+        if (this.contents) {
+          let found = this.contents.find(c => c.type === 'image_url');
+          return found ? found.value.url : '';
+        }
+        return '';
+      },
+      teaser() {
+        // if (this.contents && this.contents.length) {
+        //   if (this.contents[0].type === 'link')
+        // }
+        return '';
+      }
     }
+
   }
 </script>
 

client/src/pages/room.vue

@@ -12,7 +12,7 @@
     </div>
     <div class="room__content">
       <add-room-entry></add-room-entry>
-      <room-entry v-for="entry in entries" v-bind="entry" :key="entry.id"></room-entry>
+      <room-entry v-for="entry in room.roomEntries" v-bind="entry" :key="entry.id"></room-entry>
     </div>
   </div>
 </template>
@@ -42,7 +42,6 @@
 
     created() {
       this.$store.dispatch('hideFilter');
-      // this.$store.dispatch('setSpecialContainerClass', 'red');
     },
 
     data() {
@@ -139,9 +138,7 @@
         manual: true,
         result({data, loading, networkStatus}) {
           if (!loading) {
-            this.room = this.$getRidOfEdges(data).room
+            this.room = Object.assign({}, this.$getRidOfEdges(data).room);
-            this.roomAppearance = this.room.appearance
-            this.roomEntries = this.room.roomEntries
           }
         }
       }