feat: initial implementation of notifications

src/App.vue

@@ -4,11 +4,11 @@
       <ProvideWebsocket>
         <ProvideBreadcrumbs>
           <div id="wrapper">
-              <Header></Header>
-              <main>
-                <div id="public-content">
-                  <router-view />
-                </div>
+            <Header></Header>
+            <main>
+              <div id="public-content">
+                <router-view />
+              </div>
             </main>
           </div>
         </ProvideBreadcrumbs>

src/api/index.js

@@ -162,13 +162,20 @@ export const reportsApi = {
 }
 
 export const mentionsApi = {
+  page: params => $http('/api/mentions', { params }),
   pageIgnored: params => $http('/api/mentions/ignored', { params }),
   ignore: data => $http(`/api/mentions/ignore`, { method: 'POST', data }),
   unignore: data => $http(`/api/mentions/unignore`, { method: 'POST', data }),
   settings: () => $http('/api/mentions/settings'),
+  remove: params => $http('/api/mentions', { method: 'DELETE', params }),
   emailNotifications: enabled => $http('/api/mentions/settings', { method: 'PUT', data:{enabled}})
 }
 
+export const notificationsApi = {
+  dismiss: data => $http('/api/notifications/dismiss', { method: 'POST', data }),
+  counts: params => $http('/api/notifications/counts', { params })
+}
+
 export const breadcrumbsApi = {
   find: (id, type) => $http('/api/breadcrumbs', { params: { id, type } })
 }

src/composables/services/websocket.js

@@ -1,4 +1,5 @@
 import alertStore from '@/composables/stores/alert'
+import notificationsStore from '@/composables/stores/notifications'
 import { clearUser, AuthStore } from '@/composables/stores/auth'
 import { provide, inject, reactive } from 'vue'
 
@@ -26,8 +27,8 @@ export const WebsocketService = Symbol(WEBSOCKET_KEY)
 export const socketLogin = socketUser => {
   Object.assign(session.user, socketUser)
   socket.authenticate(socketUser.token)
-  // NotificationSvc.refresh()
-  // NotificationSvc.refreshMentionsList()
+  notificationsStore.refresh()
+  notificationsStore.refreshMentionsList()
 }
 
 export const socketLogout = socketUser => {
@@ -75,11 +76,11 @@ export default {
            clearUser() // Handles clearing authed user from a out of focus tab
            alertStore.warn('You have been logged out from another window.')
          }
-         // else if (d.action === 'newMessage') { NotificationSvc.refresh() }
-         // else if (d.action === 'refreshMentions') {
-         //   NotificationSvc.refresh()
-         //   NotificationSvc.refreshMentionsList()
-         // }
+         else if (d.action === 'newMessage') { notificationsStore.refresh() }
+         else if (d.action === 'refreshMentions') {
+           notificationsStore.refresh()
+           notificationsStore.refreshMentionsList()
+         }
        })
      }
      else if (JSON.parse(channelName).type === 'public') {

src/composables/stores/notifications.js

@@ -0,0 +1,81 @@
+import { toRefs, reactive, readonly } from 'vue'
+import { mentionsApi, notificationsApi } from '@/api'
+import alertStore from '@/composables/stores/alert'
+
+const store = reactive({ messages: 0, mentions: 0, mentionsList: [] })
+
+// const addAlert = (msg, type) => {
+//   // Destructure and handle SWRV object's errors in here to make Vue Component code cleaner
+//   if (typeof msg === 'object') {
+//     const error = msg.error
+//     if (error) { // detect error in swrv object
+//       switch (error.message) {
+//         case 'Network Error':
+//           msg = `${error.message}. Cannot connect to server, please try again later or contact an administrator`
+//           break
+//         default:
+//           msg = `${error.name}: ${error.message}`
+//       }
+//     }
+//     else return // no error do nothing
+//   }
+
+//   store.alerts.unshift({ id: id, type: type, message: msg })
+// }
+
+// const success = message => addAlert(message, 'success')
+// const info = message => addAlert(message, 'info')
+// const warn = message => addAlert(message, 'warning')
+// const error = message => addAlert(message, 'error')
+
+const refreshMentionsList = () => {
+  return mentionsApi.page({ limit: 10 })
+  .then(mentions => Object.assign(store.mentionsList, mentions.data))
+  .catch(console.log)
+}
+
+const refresh = () => {
+  return notificationsApi.counts({ max: 99 })
+  .then(counts => {
+    store.messages = counts.message
+    store.mentions = counts.mention
+  })
+  .catch(console.log)
+}
+
+const dismiss = opts => {
+  if (opts.viewed) return
+  else {
+    delete opts.viewed
+    return notificationsApi.dismiss(opts)
+    .catch(err => {
+      alertStore.error('There was an error dismissing your notifications.')
+      console.log(err)
+    })
+  }
+}
+
+const deleteMention = opts => {
+  return notificationsApi.dismiss({ type: opts.type, id: opts.notification_id })
+  .then(() => mentionsApi.remove(opts))
+  .catch(err => {
+    alertStore.error('There was an error dismissing your mentions.')
+    console.log(err)
+  })
+}
+
+// function getMentionsList() {
+//   return mentionsList;
+// }
+
+// function getMessages() { return messages; }
+
+// function getMentions() { return mentions; }
+
+export default readonly({
+  ...toRefs(store),
+  refreshMentionsList,
+  refresh,
+  dismiss,
+  deleteMention
+})