Paginate notifications, reusable component w/ test

webapp/components/Paginate/Paginate.spec.js

@@ -0,0 +1,71 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Styleguide from '@human-connection/styleguide'
+import Paginate from './Paginate'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('Paginate.vue', () => {
+  let propsData, wrapper, Wrapper, nextButton, backButton
+
+  beforeEach(() => {
+    propsData = {}
+  })
+
+  Wrapper = () => {
+    return mount(Paginate, { propsData, localVue })
+  }
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+    describe('next button', () => {
+      beforeEach(() => {
+        propsData.hasNext = true
+        wrapper = Wrapper()
+        nextButton = wrapper.findAll('.ds-button').at(0)
+      })
+
+      it('is disabled by default', () => {
+        propsData = {}
+        wrapper = Wrapper()
+        nextButton = wrapper.findAll('.ds-button').at(0)
+        expect(nextButton.attributes().disabled).toEqual('disabled')
+      })
+
+      it('is not disabled if hasNext is true', () => {
+        expect(nextButton.attributes().disabled).toBeUndefined()
+      })
+
+      it('emits back when clicked', async () => {
+        await nextButton.trigger('click')
+        expect(wrapper.emitted().next).toHaveLength(1)
+      })
+    })
+
+    describe('back button', () => {
+      beforeEach(() => {
+        propsData.hasPrevious = true
+        wrapper = Wrapper()
+        backButton = wrapper.findAll('.ds-button').at(1)
+      })
+
+      it('is disabled by default', () => {
+        propsData = {}
+        wrapper = Wrapper()
+        backButton = wrapper.findAll('.ds-button').at(1)
+        expect(backButton.attributes().disabled).toEqual('disabled')
+      })
+
+      it('is not disabled if hasPrevious is true', () => {
+        expect(backButton.attributes().disabled).toBeUndefined()
+      })
+
+      it('emits back when clicked', async () => {
+        await backButton.trigger('click')
+        expect(wrapper.emitted().back).toHaveLength(1)
+      })
+    })
+  })
+})

webapp/components/Paginate/Paginate.vue

@@ -0,0 +1,26 @@
+<template>
+  <ds-flex direction="row-reverse">
+    <ds-flex-item width="50px">
+      <ds-button @click="next" :disabled="!hasNext" icon="arrow-right" primary />
+    </ds-flex-item>
+    <ds-flex-item width="50px">
+      <ds-button @click="back" :disabled="!hasPrevious" icon="arrow-left" primary />
+    </ds-flex-item>
+  </ds-flex>
+</template>
+<script>
+export default {
+  props: {
+    hasNext: { type: Boolean, default: false },
+    hasPrevious: { type: Boolean, default: false },
+  },
+  methods: {
+    back() {
+      this.$emit('back')
+    },
+    next() {
+      this.$emit('next')
+    },
+  },
+}
+</script>

webapp/graphql/User.js

@@ -51,8 +51,8 @@ export const notificationQuery = i18n => {
     ${commentFragment(lang)}
     ${postFragment(lang)}
 
-    query($read: Boolean, $orderBy: NotificationOrdering) {
+    query($read: Boolean, $orderBy: NotificationOrdering, $first: Int, $offset: Int) {
-      notifications(read: $read, orderBy: $orderBy) {
+      notifications(read: $read, orderBy: $orderBy, first: $first, offset: $offset) {
         read
         reason
         createdAt

webapp/pages/notifications/index.vue

@@ -5,158 +5,52 @@
         <ds-heading tag="h3">{{ $t('notifications.title') }}</ds-heading>
       </ds-flex-item>
       <ds-flex-item class="sorting-dropdown">
-        <dropdown>
+        <client-only>
-          <a
+          <notifications-dropdown-filter @sortNotifications="sortNotifications" />
-            slot="default"
+        </client-only>
-            slot-scope="{ toggleMenu }"
-            class="locale-menu"
-            href="#"
-            @click.prevent="toggleMenu()"
-          >
-            <ds-icon style="margin-right: 2px;" name="sort" />
-            {{ selected }}
-            <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
-          </a>
-          <ds-menu
-            slot="popover"
-            slot-scope="{ toggleMenu }"
-            class="locale-menu-popover"
-            :routes="routes"
-          >
-            <ds-menu-item
-              slot="menuitem"
-              slot-scope="item"
-              class="locale-menu-item"
-              :route="item.route"
-              :parents="item.parents"
-              @click.stop.prevent="sortNotifications(item.route, toggleMenu)"
-            >
-              {{ item.route.label }}
-            </ds-menu-item>
-          </ds-menu>
-        </dropdown>
       </ds-flex-item>
     </ds-flex>
     <ds-space />
-    <ds-table
+    <notifications-table
-      v-if="selectedNotifications && selectedNotifications.length"
+      @markNotificationAsRead="markNotificationAsRead"
-      :data="selectedNotifications"
+      :notifications="notifications"
-      :fields="fields"
+    />
-      class="notifications-table"
+    <paginate :hasNext="hasNext" :hasPrevious="hasPrevious" @back="back" @next="next" />
-    >
-      <template slot="icon" slot-scope="scope">
-        <ds-icon
-          v-if="scope.row.from.post"
-          name="comment"
-          v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
-        />
-        <ds-icon
-          v-else
-          name="bookmark"
-          v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
-        />
-      </template>
-      <template slot="user" slot-scope="scope">
-        <ds-space margin-bottom="base">
-          <hc-user
-            :user="scope.row.from.author"
-            :date-time="scope.row.from.createdAt"
-            :trunc="35"
-            :class="{ 'notification-status': scope.row.read }"
-          />
-        </ds-space>
-        <ds-text :class="{ 'notification-status': scope.row.read }">
-          {{ $t(`notifications.reason.${scope.row.reason}`) }}
-        </ds-text>
-      </template>
-      <template slot="post" slot-scope="scope">
-        <nuxt-link
-          class="notification-mention-post"
-          :class="{ 'notification-status': scope.row.read }"
-          :to="{
-            name: 'post-id-slug',
-            params: {
-              id:
-                scope.row.from.__typename === 'Comment'
-                  ? scope.row.from.post.id
-                  : scope.row.from.id,
-              slug:
-                scope.row.from.__typename === 'Comment'
-                  ? scope.row.from.post.slug
-                  : scope.row.from.slug,
-            },
-            hash: scope.row.from.__typename === 'Comment' ? `#commentId-${scope.row.from.id}` : {},
-          }"
-          @click.native="markNotificationAsRead(scope.row.from.id)"
-        >
-          <b>{{ scope.row.from.title || scope.row.from.post.title | truncate(50) }}</b>
-        </nuxt-link>
-      </template>
-      <template slot="content" slot-scope="scope">
-        <b :class="{ 'notification-status': scope.row.read }">
-          {{ scope.row.from.contentExcerpt || scope.row.from.contentExcerpt | removeHtml }}
-        </b>
-      </template>
-    </ds-table>
-    <hc-empty v-else icon="alert" :message="$t('notifications.empty')" />
   </ds-card>
 </template>
 
 <script>
-import HcUser from '~/components/User/User'
+import NotificationsTable from '~/components/NotificationsTable/NotificationsTable'
-import HcEmpty from '~/components/Empty.vue'
+import NotificationsDropdownFilter from '~/components/NotificationsDropdownFilter/NotificationsDropdownFilter'
-import Dropdown from '~/components/Dropdown'
+import Paginate from '~/components/Paginate/Paginate'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 
 export default {
   components: {
-    HcUser,
+    NotificationsDropdownFilter,
-    Dropdown,
+    NotificationsTable,
-    HcEmpty,
+    Paginate,
   },
   data() {
+    const pageSize = 12
     return {
-      selectedNotifications: [],
+      offset: 0,
-      selected: this.$t('notifications.sortingLabel.all'),
+      notifications: [],
-      sortingOptions: [
-        { label: this.$t('notifications.sortingLabel.all'), value: null },
-        { label: this.$t('notifications.sortingLabel.read'), value: true },
-        { label: this.$t('notifications.sortingLabel.unread'), value: false },
-      ],
       nofiticationRead: null,
+      pageSize,
+      first: pageSize,
+      hasNext: false,
     }
   },
   computed: {
-    fields() {
+    hasPrevious() {
-      return {
+      return this.offset > 0
-        icon: {
-          label: ' ',
-          width: '60px',
-        },
-        user: {
-          label: this.$t('notifications.user'),
-          width: '33.333%',
-        },
-        post: this.$t('notifications.post'),
-        content: this.$t('notifications.content'),
-      }
-    },
-    routes() {
-      let routes = this.sortingOptions.map(option => {
-        return {
-          label: option.label,
-          value: option.value,
-        }
-      })
-      return routes
     },
   },
   methods: {
-    sortNotifications(option, toggleMenu) {
+    sortNotifications(option) {
       this.notificationRead = option.value
-      this.selected = option.label
       this.$apollo.queries.notifications.refresh()
-      toggleMenu()
     },
     async markNotificationAsRead(notificationSourceId) {
       try {
@@ -168,6 +62,12 @@ export default {
         this.$toast.error(error.message)
       }
     },
+    back() {
+      this.offset = Math.max(this.offset - this.pageSize, 0)
+    },
+    next() {
+      this.offset += this.pageSize
+    },
   },
   apollo: {
     notifications: {
@@ -175,13 +75,21 @@ export default {
         return notificationQuery(this.$i18n)
       },
       variables() {
+        const { first, offset } = this
         return {
           read: this.notificationRead,
           orderBy: 'updatedAt_desc',
+          first,
+          offset,
         }
       },
       update({ notifications }) {
-        this.selectedNotifications = notifications
+        if (!notifications) return []
+        this.hasNext = notifications.length >= this.pageSize
+        if (notifications.length <= 0 && this.offset > 0) return this.notifications // edge case, avoid a blank page
+        return notifications.map((notification, index) =>
+          Object.assign({}, notification, { index: this.offset + index }),
+        )
       },
       fetchPolicy: 'cache-and-network',
       error(error) {