Add mixin for `me` query

client/src/components/HeaderBar.vue

@@ -23,11 +23,10 @@
   import CurrentClass from '@/components/school-class/CurrentClass';
 
   import openSidebar from '@/mixins/open-sidebar';
-
-  import ME_QUERY from '@/graphql/gql/meQuery.gql';
+  import me from '@/mixins/me';
 
   export default {
-    mixins: [openSidebar],
+    mixins: [openSidebar, me],
 
     components: {
       ContentNavigation,
@@ -43,19 +42,6 @@
         return this.$route.meta.subnavigation;
       }
     },
-
-
-    data() {
-      return {
-        me: {}
-      }
-    },
-
-    apollo: {
-      me: {
-        query: ME_QUERY,
-      },
-    },
   }
 </script>
 

client/src/components/school-class/CurrentClass.vue

@@ -1,42 +1,19 @@
 <template>
-  <span class="current-class">Klasse: {{currentClassSelection.name}}</span>
+  <span class="current-class">Klasse: {{currentClassName}}</span>
 </template>
 
 <script>
-  import ME_QUERY from '@/graphql/gql/meQuery.gql';
+  import me from '@/mixins/me';
 
   export default {
-    apollo: {
-      me: {
-        query: ME_QUERY,
-        manual: true,
-        result({data, loading, networkStatus}) {
-          if (!loading) {
-            this.me = this.$getRidOfEdges(data).me;
-          }
-        }
-      }
-    },
-
-    data() {
-      return {
-        me: {
-          selectedClass: {
-            id: ''
-          },
-          permissions: [],
-          schoolClasses: []
-        },
-        showPopover: false
-      }
-    },
+    mixins: [me],
 
     computed: {
-      currentClassSelection() {
+      currentClassName() {
         let currentClass = this.me.schoolClasses.find(schoolClass => {
           return schoolClass.id === this.me.selectedClass.id
         });
-        return currentClass || this.me.schoolClasses[0];
+        return currentClass ? currentClass.name : this.me.schoolClasses.length ? this.me.schoolClasses[0].name : '';
       }
     }
   }

client/src/mixins/me.js

@@ -0,0 +1,28 @@
+import ME_QUERY from '@/graphql/gql/meQuery.gql';
+
+export default {
+  data() {
+    return {
+      me: {
+        selectedClass: {
+          id: ''
+        },
+        permissions: [],
+        schoolClasses: []
+      },
+      showPopover: false
+    }
+  },
+
+  apollo: {
+    me: {
+      query: ME_QUERY,
+      manual: true,
+      result({data, loading, networkStatus}) {
+        if (!loading) {
+          this.me = this.$getRidOfEdges(data).me;
+        }
+      }
+    },
+  },
+}