more work on notifications + status edits

src/components/notification/notification.js

@@ -18,6 +18,7 @@ import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
 import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 import { useUsersStore } from 'src/stores/users.js'
+import { useStatusesStore } from 'src/stores/statuses.js'
 
 import { approveUser, denyUser } from 'src/api/user.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -182,6 +183,11 @@ const Notification = {
     },
   },
   computed: {
+    status() {
+      if (this.notification.status) {
+        return useStatusesStore().allStatuses.get(this.notification.status.id)
+      }
+    },
     userClass() {
       return highlightClass(this.notification.from_profile)
     },

src/components/notification/notification.vue

@@ -6,7 +6,7 @@
     <Status
       class="Notification panel-body"
       :compact="true"
-      :statusoid="notification.status"
+      :statusoid="status"
       @click="interacted"
     />
   </article>
@@ -261,7 +261,7 @@
           <StatusContent
             class="status-content"
             :compact="!statusExpanded"
-            :status="notification.status"
+            :status="status"
             :collapse="!statusExpanded"
             @click="onContentClick"
           />

src/services/notifications_fetcher/notifications_fetcher.service.js

@@ -22,10 +22,7 @@ const mastoApiNotificationTypes = new Set([
   'pleroma:report',
 ])
 
-const fetchAndUpdate = (
-  { credentials },
-  { older = false, sinceId }
-) => {
+const fetchAndUpdate = ({ credentials }, { older = false, sinceId }) => {
   useNotificationsStore().setLoading(true)
   const args = { credentials }
   const timelineData = useNotificationsStore()
@@ -115,7 +112,6 @@ const fetchNotifications = ({ args, older }) => {
     })
 }
 
-
 const notificationsFetcher = (credentials) => {
   const state = {
     interval: null,

src/stores/notifications.js

@@ -1,5 +1,15 @@
 import { defineStore } from 'pinia'
 
+import { useI18nStore } from 'src/stores/i18n.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useOAuthStore } from 'src/stores/oauth.js'
+import { useReportsStore } from 'src/stores/reports.js'
+import { useStatusesStore } from 'src/stores/statuses.js'
+import { useStreamingStore } from 'src/stores/streaming.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+import { useUsersStore } from 'src/stores/users.js'
+
+import { dismissNotification, markNotificationsAsSeen } from 'src/api/user.js'
 import {
   closeAllDesktopNotifications,
   closeDesktopNotification,
@@ -11,17 +21,6 @@ import {
 import { isStatusNotification } from 'src/services/notification_utils/notification_utils_sw.js'
 import notificationsFetcher from 'src/services/notifications_fetcher/notifications_fetcher.service.js'
 
-import { useI18nStore } from 'src/stores/i18n.js'
-import { useMergedConfigStore } from 'src/stores/merged_config.js'
-import { useOAuthStore } from 'src/stores/oauth.js'
-import { useReportsStore } from 'src/stores/reports.js'
-import { useStatusesStore } from 'src/stores/statuses.js'
-import { useSyncConfigStore } from 'src/stores/sync_config.js'
-import { useStreamingStore } from 'src/stores/streaming.js'
-import { useUsersStore } from 'src/stores/users.js'
-
-import { dismissNotification, markNotificationsAsSeen } from 'src/api/user.js'
-
 export const defaultState = () => ({
   desktopNotificationSilence: true,
   maxId: '',
@@ -42,8 +41,7 @@ export const useNotificationsStore = defineStore('notifications', {
     attachSocket() {
       const et = new EventTarget()
       const handleNotificationMessage = ({ data, timestamp }) => {
-        console.log(data)
-        this.addNewNotifications({ statuses: [data.notification], timestamp })
+        this.addNewNotifications({ data: [data.notification], timestamp })
       }
       const notificationHandler = ({ detail: message }) => {
         handleNotificationMessage(message)
@@ -56,7 +54,7 @@ export const useNotificationsStore = defineStore('notifications', {
           openHandler,
           closeHandler,
           notificationHandler,
-        }
+        },
       }
 
       et.addEventListener('notification', notificationHandler)
@@ -72,10 +70,7 @@ export const useNotificationsStore = defineStore('notifications', {
       // Initially there's set flag to silence all desktop notifications so
       // that there won't spam of them when user just opened up the FE we
       // reset that flag after a while to show new notifications once again.
-      setTimeout(
-        () => this.desktopNotificationSilence = false,
-        10000,
-      )
+      setTimeout(() => (this.desktopNotificationSilence = false), 10000)
 
       if (this.fetcher) throw new Error('Fetcher already exists!')
       this.fetcher = notificationsFetcher(useOAuthStore().token)
@@ -87,7 +82,8 @@ export const useNotificationsStore = defineStore('notifications', {
       }
 
       useStreamingStore().removeSubscriber(this.socket)
-        const { openHandler, closeHandler, notificationHandler } = timeline.socket.handlers
+      const { openHandler, closeHandler, notificationHandler } =
+        this.socket.handlers
 
       this.socket.et.removeEventListener('notification', openHandler)
       this.socket.et.removeEventListener('notification', closeHandler)
@@ -111,11 +107,19 @@ export const useNotificationsStore = defineStore('notifications', {
       this.startFetching('Socket disconnected')
     },
     startFetching(reason) {
-      console.debug('[Notifications] Starting fetching notifications', 'Reason:', reason)
+      console.debug(
+        '[Notifications] Starting fetching notifications',
+        'Reason:',
+        reason,
+      )
       this.fetcher.startFetching()
     },
     stopFetching(reason) {
-      console.debug('[Notifications] Stopped fetching notifications', 'Reason:', reason)
+      console.debug(
+        '[Notifications] Stopped fetching notifications',
+        'Reason:',
+        reason,
+      )
       this.fetcher.stopFetching()
     },
 

src/stores/statuses.js

@@ -93,8 +93,9 @@ export const useStatusesStore = defineStore('statuses', {
       const socket = {
         et,
         handlers: {
-          handleUpdate, handleDelete
-        }
+          handleUpdate,
+          handleDelete,
+        },
       }
 
       et.addEventListener('update', handleUpdate)
@@ -106,7 +107,10 @@ export const useStatusesStore = defineStore('statuses', {
     },
     resetStatuses() {
       this.socket.et.removeEventListener('update', this.socket.handleUpdate)
-      this.socket.et.removeEventListener('status.update', this.socket.handleUpdate)
+      this.socket.et.removeEventListener(
+        'status.update',
+        this.socket.handleUpdate,
+      )
       this.socket.et.removeEventListener('delete', this.socket.handleDelete)
 
       const emptyState = defaultState()

src/stores/timelines.js

@@ -100,9 +100,12 @@ export const useTimelinesStore = defineStore('timelines', {
       if (streamName) {
         const et = new EventTarget()
         const openHandler = () => this.onStreamConnect(timelineName, argument)
-        const closeHandler = () => this.onStreamDisconnect(timelineName, argument)
-        const messageHandler = () => ({ detail: message }) =>
-          this.onStreamMessage(timelineName, argument, message)
+        const closeHandler = () =>
+          this.onStreamDisconnect(timelineName, argument)
+        const messageHandler =
+          () =>
+          ({ detail: message }) =>
+            this.onStreamMessage(timelineName, argument, message)
 
         et.addEventListener('open', openHandler)
         et.addEventListener('close', closeHandler)
@@ -118,7 +121,7 @@ export const useTimelinesStore = defineStore('timelines', {
             openHandler,
             closeHandler,
             messageHandler,
-          }
+          },
         }
 
         useStreamingStore().addSubscriber(timeline.socket)
@@ -131,12 +134,14 @@ export const useTimelinesStore = defineStore('timelines', {
         this.stopFetchingTimeline(timelineName, 'Timeline deactivation')
       }
 
-      if (data.socket) {
+      if (timeline.socket) {
         useStreamingStore().removeSubscriber(timeline.socket)
-        const { openHandler, closeHandler, messageHandler } = timeline.socket.handlers
-        et.removeEventListener('open', openHandler)
-        et.removeEventListener('close', closeHandler)
-        et.removeEventListener('message', messageHandler)
+
+        const { openHandler, closeHandler, messageHandler } =
+          timeline.socket.handlers
+        timeline.socket.et.removeEventListener('open', openHandler)
+        timeline.socket.et.removeEventListener('close', closeHandler)
+        timeline.socket.et.removeEventListener('message', messageHandler)
       }
 
       this[timelineName] = emptyTl(timelineName)
@@ -247,12 +252,23 @@ export const useTimelinesStore = defineStore('timelines', {
       this.startFetchingTimeline(timeline, argument, 'Socket disconnected')
     },
     startFetchingTimeline(timelineName, argument, reason) {
-      console.debug('[Timelines] Starting fetching timeline', timelineName, argument, 'Reason:', reason)
+      console.debug(
+        '[Timelines] Starting fetching timeline',
+        timelineName,
+        argument,
+        'Reason:',
+        reason,
+      )
       const timeline = this[timelineName]
       timeline.fetcher.startFetching()
     },
     stopFetchingTimeline(timelineName, reason) {
-      console.debug('[Timelines] Stopped fetching timeline', timelineName, 'Reason:', reason)
+      console.debug(
+        '[Timelines] Stopped fetching timeline',
+        timelineName,
+        'Reason:',
+        reason,
+      )
       const timeline = this[timelineName]
       timeline.fetcher.stopFetching()
     },
@@ -287,8 +303,6 @@ export const useTimelinesStore = defineStore('timelines', {
 
       this.updateTimelineExtremes(timeline, [...timeline.statuses.keys()])
     },
-    clearTimeline(timeline) {
-    },
     queueFlush(timeline, id) {
       this[timeline].flushMarker = id
     },