<template>
  <div class="activity">
    <h1 class="activity__header">Meine Aktivitäten</h1>
    <activity-filter
      :filter="filter"
      @change-filter="filter = $event"
    />
    <div class="modules">
      <module-activity
        :filter="filter"
        :module="module"
        :key="id"
        class="activity"
        v-for="(module, id) in modules"/>
    </div>
    <instrument-activity
      :key="id"
      :filter="filter"
      :instrument="instrument"
      v-for="(instrument, id) in instruments"/>

  </div>
</template>

<script>
  import ModuleActivity from '@/components/profile/ModuleActivity';
  import InstrumentActivity from '@/components/profile/InstrumentActivity';
  import ActivityFilter from '@/components/profile/ActivityFilter';
  import MY_ACTIVITY_QUERY from '@/graphql/gql/queries/myActivity.gql';

  export default {
    components: {
      ModuleActivity,
      InstrumentActivity,
      ActivityFilter
    },

    apollo: {
      modules: {
        query: MY_ACTIVITY_QUERY,
        update(data) {
          return this.$getRidOfEdges(data).myActivity;
        },
        pollInterval: 5000,
      },
      instruments: {
        query: MY_ACTIVITY_QUERY,
        update(data) {
          return this.$getRidOfEdges(data).myInstrumentActivity;
        },
        pollInterval: 5000,
      }
    },

    data() {
      return {
        modules: [],
        instruments: [],
        filter: ''
      };
    }
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  .module-activity {
    margin-bottom: $large-spacing;
  }

</style>
