Change class list to display only currently selected class

client/src/components/profile/ProfileSidebar.vue

@@ -11,7 +11,7 @@
       <h3 class="profile-sidebar__subtitle">Klasse</h3>
       <class-selection-widget></class-selection-widget>
       <div @click="closeSidebar">
-        <router-link :to="{name: 'my-classes'}" class="profile-sidebar__link">Klassenliste anzeigen</router-link>
+        <router-link :to="{name: 'my-class'}" class="profile-sidebar__link">Klassenliste anzeigen</router-link>
       </div>
     </div>
     <div class="profile-sidebar__item" @click="closeSidebar">

client/src/graphql/gql/mySchoolClass.gql

@@ -0,0 +1,19 @@
+query  {
+  me {
+    id
+    selectedClass {
+      id
+      name
+      users {
+        edges {
+          node {
+            id
+            firstName
+            lastName
+            permissions
+          }
+        }
+      }
+    }
+  }
+}

client/src/graphql/gql/mySchoolClasses.gql

@@ -1,23 +0,0 @@
-query  {
-  me {
-    id
-    schoolClasses {
-      edges {
-        node {
-          id
-          name
-          users {
-            edges {
-              node {
-                id
-                firstName
-                lastName
-                permissions
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

client/src/pages/joinClass.vue

@@ -65,7 +65,7 @@
           }
         })
           .then(() => {
-            this.$router.push({name: 'my-classes'});
+            this.$router.push({name: 'my-class'});
           })
           .catch(e => {
             console.debug(e);

client/src/pages/myClass.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="my-class">
+    <h1 class="my-class__header" data-cy="class-list-title">Klassenliste</h1>
+    <classlist v-bind="selectedClass" class="my-class__class"></classlist>
+  </div>
+</template>
+
+<script>
+
+  import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass.gql';
+  import Classlist from '@/components/profile/Classlist';
+
+  export default {
+    components: {
+      Classlist
+    },
+
+    apollo: {
+      selectedClass: {
+        query: MY_SCHOOL_CLASS_QUERY,
+        update(data) {
+          return this.$getRidOfEdges(data).me.selectedClass
+        }
+      }
+    },
+
+    data() {
+      return {
+        selectedClass: {
+          name: ''
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .my-class {
+    &__class {
+      margin-bottom: $large-spacing;
+    }
+  }
+
+</style>

client/src/pages/myClasses.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="myclasses">
-    <h1 class="myclasses__header" data-cy="class-list-title">Klassenliste</h1>
-    <classlist v-for="schoolClass in schoolClasses" v-bind="schoolClass" :key="schoolClass.name" class="myclasses__class"></classlist>
-  </div>
-</template>
-
-<script>
-
-  import MY_SCHOOL_CLASSES_QUERY from '@/graphql/gql/mySchoolClasses.gql';
-  import Classlist from '@/components/profile/Classlist';
-
-  export default {
-    components: {
-      Classlist
-    },
-
-    apollo: {
-      schoolClasses: {
-        query: MY_SCHOOL_CLASSES_QUERY,
-        update(data) {
-          return this.$getRidOfEdges(data).me.schoolClasses
-        }
-      }
-    },
-
-    data() {
-      return {
-        schoolClasses: []
-      }
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-
-  .myclasses {
-    &__class {
-      margin-bottom: $large-spacing;
-    }
-  }
-
-</style>

client/src/router/index.js

@@ -19,7 +19,7 @@ import portfolio from '@/pages/portfolio'
 import project from '@/pages/project'
 import profilePage from '@/pages/profile'
 import profile from '@/components/profile/Profile'
-import myClasses from '@/pages/myClasses'
+import myClass from '@/pages/myClass'
 import activity from '@/pages/activity'
 import Router from 'vue-router'
 import editProject from '@/pages/editProject'
@@ -108,7 +108,7 @@ const routes = [
     component: profilePage,
     children: [
       {path: 'profile', name: 'profile', component: profile, meta: {isProfile: true}},
-      {path: 'myclasses', name: 'my-classes', component: myClasses, meta: {isProfile: true}},
+      {path: 'my-class', name: 'my-class', component: myClass, meta: {isProfile: true}},
       {path: 'activity', name: 'activity', component: activity, meta: {isProfile: true}},
       {path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}},
     ]