central.vue

<template>
  <page-template title="Central de Notificações">
    <notification-center
      :notification-types="notificationTypes"
      :pagination="pagination"
      :items="notifications"
      @paginate="paginate"
    />

    <div v-if="!isLoading" v-observe-visibility="observePagination" />
  </page-template>
</template>

<script>
import { ObserveVisibility } from 'vue-observe-visibility'
import { mapActions, mapState } from 'vuex'

import { PageTemplate } from '@/components/templates'
import { NotificationCenter } from '@/components/organisms'

export default {
  name: 'NotificationCentral',

  layout: 'internal',

  components: {
    PageTemplate,
    NotificationCenter
  },

  directives: {
    ObserveVisibility
  },

  data: () => ({
    isLoading: true,
    loadingPagination: false
  }),

  computed: {
    ...mapState({
      notificationTypes: state => state.notifications.notificationTypes,
      notifications: state => state.notifications.pagination.items,
      pagination: ({
        notifications: {
          pagination: { items, ...data }
        }
      }) => data
    })
  },

  async mounted() {
    await Promise.all([
      this.paginateNotifications(),
      this.getNotificationTypes()
    ])

    this.isLoading = false
  },

  beforeDestroy() {
    this.clearPagination()
  },

  methods: {
    ...mapActions({
      paginateNotifications: 'notifications/PAGINATE',
      clearPagination: 'notifications/CLEAR_PAGINATION',
      getNotificationTypes: 'notifications/GET_TYPES'
    }),

    observePagination(isVisible) {
      if (this.loadingPagination) return

      const { perPage, total } = this.pagination
      if (isVisible && perPage < total)
        this.paginate({ ...this.pagination, perPage: perPage + 10 })
    },

    async paginate({ perPage, archived, types }) {
      this.loadingPagination = true
      await this.paginateNotifications({ perPage, archived, types })
      this.loadingPagination = false
    }
  },

  head: () => ({ title: 'Castlight - Central de Notificações' })
}
</script>