feat(notifications): notification basics (#4307)

* feat(notification): wip on noti * feat(notifications): alerts show in notifications * feat(notifications): alerts show in notifications * feat(notifications: make notifications clickable rework notification structure) * feat(notifications: noti only missing delete) * fix(noti): hover pointer for alert * fix(noti): update * fix(noti): update * feat(noti): wip * fix(notification): update and rebase * fix(subscription): remove console * feat(notifications): notification basics * feat(notifications): notification basics * feat(notifications): notification basics
Satellite-im · Aug 16, 2022 · c792caf · c792caf
1 parent 20ad4f8
commit c792caf
Show file tree

Hide file tree

Showing 23 changed files with 293 additions and 1,167 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,7 +8,7 @@ yarn-debug.log*
 yarn-error.log*
 package-lock.json
 yarn.lock
-
+pnpm-lock.yaml
 # Runtime data
 pids
 *.pid
@@ -103,4 +103,4 @@ scratchpad.js
 
 solana-localnet
 
-iridium
+iridium
diff --git a/components/views/navigation/toolbar/Toolbar.html b/components/views/navigation/toolbar/Toolbar.html
@@ -13,32 +13,28 @@
   <div class="controls">
     <div class="toggle-alerts" data-cy="toolbar-alerts">
       <UiCircle
-        v-if="allUnseenNotifications.length"
+        v-if="notifications.length"
         class="notification-alert"
         :size="15"
         color="red"
         type="icon"
-        :data="allUnseenNotifications.length"
+        :data="notifications.length"
         @click="toggleAlerts"
       >
-        {{ allUnseenNotifications.length }}
+        {{notifications.length}}
       </UiCircle>
+      <ToolbarAlerts
+        v-if="showAlerts && $device.isDesktop"
+        v-click-outside="toggleAlerts"
+      />
       <bell-icon
         v-tooltip.bottom="$t('pages.chat.alerts')"
         size="1x"
         :class="`control-icon ${showAlerts ? 'primary' : ''}`"
         color="primary"
         @click="toggleAlerts"
       />
-      <ToolbarAlerts
-        v-if="showAlerts && $device.isDesktop"
-        v-click-outside="toggleAlerts"
-      />
     </div>
-    <ToolbarAlerts
-      v-if="showAlerts && !$device.isDesktop"
-      v-click-outside="toggleAlerts"
-    />
     <div
       v-if="conversation"
       v-tooltip.bottom="callTooltipText"

diff --git a/components/views/navigation/toolbar/Toolbar.less b/components/views/navigation/toolbar/Toolbar.less
@@ -16,6 +16,7 @@
 
   .notification-alert {
     position: fixed;
+    z-index: 1;
   }
 
   .toggle-alerts {

diff --git a/components/views/navigation/toolbar/Toolbar.vue b/components/views/navigation/toolbar/Toolbar.vue
@@ -22,6 +22,10 @@ import type { Friend, User } from '~/libraries/Iridium/friends/types'
 import { RootState } from '~/types/store/store'
 import { Conversation } from '~/libraries/Iridium/chat/types'
 import { GroupMemberDetails } from '~/libraries/Iridium/groups/types'
+import {
+  Notification,
+  NotificationType,
+} from '~/libraries/Iridium/notifications/types'
 
 export default Vue.extend({
   components: {
@@ -50,13 +54,13 @@ export default Vue.extend({
   },
   computed: {
     ...mapState({
+      notifications: () => Object.entries(iridium.notifications?.state),
       ui: (state) => (state as RootState).ui,
       audio: (state) => (state as RootState).audio,
       video: (state) => (state as RootState).video,
       webrtc: (state) => (state as RootState).webrtc,
       modals: (state) => (state as RootState).ui.modals,
     }),
-    ...mapGetters('ui', ['allUnseenNotifications']),
     ModalWindows: () => ModalWindows,
     conversationId(): Conversation['id'] | undefined {
       return this.$route.params.id

diff --git a/components/views/navigation/toolbar/alerts/Alerts.html b/components/views/navigation/toolbar/alerts/Alerts.html
@@ -4,15 +4,17 @@
     <TypographySubtitle :size="6" :text="$t('pages.chat.alerts')" />
   </div>
   <template v-if="notifications.length">
-    <InteractablesButton
-      @click="clearNotifications"
-      class="alerts-clear-button"
-      color="primary"
-      :text="$t('ui.clear_all')"
-    />
+<!--    <InteractablesButton-->
+<!--      @click="clearNotifications"-->
+<!--      class="alerts-clear-button"-->
+<!--      color="primary"-->
+<!--      :text="$t('ui.clear_all')"-->
+<!--    />-->
     <ToolbarAlertsAlert
       v-for="notification in notifications"
-      :alert="notification"
+      v-if="notification[1].type !== 'EMPTY'"
+      :alert="notification[1]"
+      :alertDid="notification[0]"
       :key="notification.id"
     />
   </template>

diff --git a/components/views/navigation/toolbar/alerts/Alerts.vue b/components/views/navigation/toolbar/alerts/Alerts.vue
@@ -2,20 +2,29 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'vuex'
 import { FlaskConicalIcon } from 'satellite-lucide-icons'
-import { AlertState } from '~/libraries/ui/Alerts'
-import { RootState } from '~/types/store/store'
+import iridium from '~/libraries/Iridium/IridiumManager'
 export default Vue.extend({
   components: {
     FlaskConicalIcon,
   },
+  data() {
+    return {
+      messages: [],
+    }
+  },
   computed: {
     ...mapState({
-      notifications: (state) => (state as RootState).ui.notifications,
+      notifications: () =>
+        Object.entries(iridium.notifications?.state)
+          .sort((a: any, b: any) => {
+            return b.at - a.at
+          })
+          .filter((a) => {
+            return a
+          }),
     }),
-    ...mapGetters('ui', ['allUnseenNotifications']),
-    AlertState: () => AlertState,
   },
   methods: {
     clearNotifications() {

diff --git a/components/views/navigation/toolbar/alerts/alert/Alert.html b/components/views/navigation/toolbar/alerts/alert/Alert.html
@@ -1,15 +1,13 @@
-<div class="alert">
-  <UiCircle
-    :type="alertImage ? 'image' : 'random'"
-    :source="alertImage"
-    :data-cy="{'circle-without-picture' : !alertImage}"
-  />
-  <div class="info-container">
+<div class="alert" >
+<!--  <UiCircle-->
+<!--    :type="alertImage ? 'image' : 'random'"-->
+<!--    :source="alertImage"-->
+<!--    :data-cy="{'circle-without-picture' : !alertImage}"-->
+<!--  />-->
+  <div class="info-container"  @click="notificationLink(alert.type)">
     <div class="head">
-      <TypographySubtitle :size="6" :text="alert.content.title" />
-      <TypographyText color="dark" size="xs">
-        {{ $dayjs(alert.at).fromNow() }}
-      </TypographyText>
+      <TypographySubtitle :size="6" :text="setTranslateText" />
+      <TypographyText :text="$dayjs(alert.at).fromNow()" class="timestamp" />
     </div>
     <TypographyText class="ellipsis" :title="setTranslateText">
       {{ setTranslateText }}

diff --git a/components/views/navigation/toolbar/alerts/alert/Alert.less b/components/views/navigation/toolbar/alerts/alert/Alert.less
@@ -7,6 +7,7 @@
   &:extend(.round-corners);
   padding: @light-spacing @large-spacing @light-spacing @light-spacing;
   align-items: center;
+  cursor: pointer;
   position: relative;
   transition: all @animation-speed ease;
 

diff --git a/components/views/navigation/toolbar/alerts/alert/Alert.vue b/components/views/navigation/toolbar/alerts/alert/Alert.vue
@@ -4,41 +4,62 @@
 import Vue, { PropType } from 'vue'
 
 import { TranslateResult } from 'vue-i18n'
-import { Alert, AlertType } from '~/libraries/ui/Alerts'
+import {
+  Notification,
+  NotificationType,
+} from '~/libraries/Iridium/notifications/types'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
   props: {
     alert: {
-      type: Object as PropType<Alert>,
+      type: Object as PropType<Notification>,
+      required: true,
+    },
+    alertDid: {
+      type: String,
       required: true,
     },
   },
   computed: {
     setTranslateText(): TranslateResult | undefined {
       switch (this.alert?.type) {
-        case AlertType.DIRECT_MESSAGE: {
+        case NotificationType.DIRECT_MESSAGE: {
           return this.$t('messaging.user_sent.user', {
             user: this.alert.fromName,
             msgType: this.alert.type,
           })
         }
-        case AlertType.GROUP_MESSAGE: {
-          return this.$t('messaging.user_sent_group_message.user', {
+        case NotificationType.FRIEND_REQUEST: {
+          return this.$t('friends.new_friend_request', {
             user: this.alert.fromName,
-            group: this.alert.groupName,
           })
         }
       }
       return this.$t('user_sent_something.user')
     },
-    alertImage(): string {
-      const hash = this.alert?.content?.image
-      return hash ? `${this.$Config.ipfs.gateway}${hash}` : ''
-    },
+    // alertImage(): string {
+    //   const hash = this.alert?.image
+    //   return hash ? `${this.$Config.textile.browser}/ipfs/${hash}` : ''
+    // },
   },
   methods: {
-    removeNotification() {
-      this.$store.commit('ui/removeNotification', this.alert.id)
+    removeNotification(id: string) {
+      iridium.notifications.deleteNotification(this.alertDid)
+    },
+    notificationLink(alertType: NotificationType) {
+      switch (alertType) {
+        case NotificationType.FRIEND_REQUEST: {
+          this.$router.push({ path: '/friends' })
+          break
+        }
+        case NotificationType.DIRECT_MESSAGE: {
+          this.$router.push(
+            this.alert.fromAddress ? `/chat/${this.alert.fromAddress}` : `/`,
+          )
+          break
+        }
+      }
     },
   },
 })

diff --git a/components/views/user/User.vue b/components/views/user/User.vue
diff --git a/layouts/chat.vue b/layouts/chat.vue
diff --git a/libraries/Iridium/IridiumManager.ts b/libraries/Iridium/IridiumManager.ts
@@ -10,6 +10,7 @@ import logger from '~/plugins/local/logger'
 import { Config } from '~/config'
 import FilesManager from '~/libraries/Iridium/files/FilesManager'
 import SettingsManager from '~/libraries/Iridium/settings/SettingsManager'
+import NotificationManager from '~/libraries/Iridium/NotificationManager'
 
 export class IridiumManager extends Emitter {
   ready: boolean = false
@@ -19,6 +20,7 @@ export class IridiumManager extends Emitter {
   chat: ChatManager
   friends: FriendsManager
   files: FilesManager
+  notifications: NotificationManager
   settings: SettingsManager
 
   constructor() {
@@ -29,6 +31,7 @@ export class IridiumManager extends Emitter {
     this.chat = new ChatManager(this)
     this.files = new FilesManager(this)
     this.settings = new SettingsManager(this)
+    this.notifications = new NotificationManager(this)
   }
 
   /**
@@ -76,6 +79,7 @@ export class IridiumManager extends Emitter {
         friends: {},
         conversations: {},
         files: {},
+        notifications: {},
         settings: {},
         indexes: {},
       }
@@ -97,6 +101,8 @@ export class IridiumManager extends Emitter {
     await this.files.init()
     logger.log('iridium/manager', 'initializing settings')
     await this.settings.init()
+    logger.log('iridium/manager', 'notification settings')
+    await this.notifications.init()
     logger.log('iridium/manager', 'ready')
 
     this.ready = true