<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>
