Move announcements module to store

src/components/announcement/announcement.js

@@ -2,6 +2,7 @@ import { mapState } from 'vuex'
 import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
 import RichContent from '../rich_content/rich_content.jsx'
 import localeService from '../../services/locale/locale.service.js'
+import { useAnnouncementsStore } from '../../stores/announcements'
 
 const Announcement = {
   components: {
@@ -67,11 +68,11 @@ const Announcement = {
   methods: {
     markAsRead () {
       if (!this.isRead) {
-        return this.$store.dispatch('markAnnouncementAsRead', this.announcement.id)
+        return useAnnouncementsStore().markAnnouncementAsRead(this.announcement.id)
       }
     },
     deleteAnnouncement () {
-      return this.$store.dispatch('deleteAnnouncement', this.announcement.id)
+      return useAnnouncementsStore().deleteAnnouncement(this.announcement.id)
     },
     formatTimeOrDate (time, locale) {
       const d = new Date(time)
@@ -85,7 +86,7 @@ const Announcement = {
       this.editing = true
     },
     submitEdit () {
-      this.$store.dispatch('editAnnouncement', {
+      useAnnouncementsStore().editAnnouncement({
         id: this.announcement.id,
         ...this.editedAnnouncement
       })

src/components/announcements_page/announcements_page.js

@@ -1,6 +1,7 @@
 import { mapState } from 'vuex'
 import Announcement from '../announcement/announcement.vue'
 import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
+import { useAnnouncementsStore } from '../../stores/announcements'
 
 const AnnouncementsPage = {
   components: {
@@ -20,14 +21,14 @@ const AnnouncementsPage = {
     }
   },
   mounted () {
-    this.$store.dispatch('fetchAnnouncements')
+    useAnnouncementsStore().fetchAnnouncements()
   },
   computed: {
     ...mapState({
       currentUser: state => state.users.currentUser
     }),
     announcements () {
-      return this.$store.state.announcements.announcements
+      return useAnnouncementsStore().announcements
     },
     canPostAnnouncement () {
       return this.currentUser && this.currentUser.privileges.includes('announcements_manage_announcements')
@@ -36,7 +37,7 @@ const AnnouncementsPage = {
   methods: {
     postAnnouncement () {
       this.posting = true
-      this.$store.dispatch('postAnnouncement', this.newAnnouncement)
+      useAnnouncementsStore().postAnnouncement(this.newAnnouncement)
         .then(() => {
           this.newAnnouncement.content = ''
           this.startsAt = undefined

src/components/mobile_nav/mobile_nav.js

@@ -5,6 +5,7 @@ import { unseenNotificationsFromStore } from '../../services/notification_utils/
 import GestureService from '../../services/gesture_service/gesture_service'
 import NavigationPins from 'src/components/navigation/navigation_pins.vue'
 import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
@@ -13,6 +14,7 @@ import {
   faArrowUp,
   faMinus
 } from '@fortawesome/free-solid-svg-icons'
+import { useAnnouncementsStore } from '../../stores/announcements'
 
 library.add(
   faTimes,
@@ -57,7 +59,8 @@ const MobileNav = {
     isChat () {
       return this.$route.name === 'chat'
     },
-    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount']),
+    ...mapState(useAnnouncementsStore, ['unreadAnnouncementCount']),
+    ...mapGetters(['unreadChatCount']),
     chatsPinned () {
       return new Set(this.$store.state.serverSideStorage.prefsStorage.collections.pinnedNavItems).has('chats')
     },

src/components/nav_panel/nav_panel.js

@@ -1,5 +1,6 @@
 import ListsMenuContent from 'src/components/lists_menu/lists_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'
+import { mapState as mapPiniaState } from 'pinia'
 import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
 import { filterNavigation } from 'src/components/navigation/filter.js'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
@@ -21,6 +22,7 @@ import {
   faList,
   faBullhorn
 } from '@fortawesome/free-solid-svg-icons'
+import { useAnnouncementsStore } from '../../stores/announcements'
 
 library.add(
   faUsers,
@@ -82,13 +84,16 @@ const NavPanel = {
     }
   },
   computed: {
+    ...mapPiniaState(useAnnouncementsStore, {
+      unreadAnnouncementCount: 'unreadAnnouncementCount',
+      supportsAnnouncements: store => store.supportsAnnouncements
+    }),
     ...mapState({
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating,
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
-      supportsAnnouncements: state => state.announcements.supportsAnnouncements,
       pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems),
       collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav
     }),
@@ -120,7 +125,7 @@ const NavPanel = {
         }
       )
     },
-    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
+    ...mapGetters(['unreadChatCount'])
   }
 }
 

src/components/navigation/navigation.js

@@ -76,6 +76,7 @@ export const ROOT_ITEMS = {
     route: 'announcements',
     icon: 'bullhorn',
     label: 'nav.announcements',
+    store: 'announcements',
     badgeGetter: 'unreadAnnouncementCount',
     criteria: ['announcements']
   }

src/components/navigation/navigation_entry.js

@@ -3,6 +3,8 @@ import { routeTo } from 'src/components/navigation/navigation.js'
 import OptionalRouterLink from 'src/components/optional_router_link/optional_router_link.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
+import { mapStores } from 'pinia'
+import { useAnnouncementsStore } from '../../stores/announcements'
 
 library.add(faThumbtack)
 
@@ -31,6 +33,7 @@ const NavigationEntry = {
     getters () {
       return this.$store.getters
     },
+    ...mapStores(useAnnouncementsStore),
     ...mapState({
       currentUser: state => state.users.currentUser,
       pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)

src/components/navigation/navigation_entry.vue

@@ -39,6 +39,12 @@
       >
         {{ getters[item.badgeGetter] }}
       </div>
+      <div
+        v-else-if="item.badgeGetter && item.store && this[`${item.store}Store`][item.badgeGetter]"
+        class="badge badge-notification"
+      >
+        {{ this[`${item.store}Store`][item.badgeGetter] }}
+      </div>
       <button
         v-if="showPin && currentUser"
         type="button"

src/components/notifications/notifications.js

@@ -1,5 +1,6 @@
 import { computed } from 'vue'
 import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 import Notification from '../notification/notification.vue'
 import NotificationFilters from './notification_filters.vue'
 import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
@@ -12,6 +13,7 @@ import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faArrowUp, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { useInterfaceStore } from '../../stores/interface'
+import { useAnnouncementsStore } from '../../stores/announcements'
 
 library.add(
   faCircleNotch,
@@ -95,7 +97,8 @@ const Notifications = {
       return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
-    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
+    ...mapState(useAnnouncementsStore, ['unreadAnnouncementCount']),
+    ...mapGetters(['unreadChatCount'])
   },
   mounted () {
     this.scrollerRef = this.$refs.root.closest('.column.-scrollable')

src/components/side_drawer/side_drawer.js

@@ -1,4 +1,5 @@
 import { mapState, mapGetters } from 'vuex'
+import { mapState as mapPiniaState } from 'pinia'
 import UserCard from '../user_card/user_card.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
@@ -21,6 +22,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { useShoutStore } from '../../stores/shout'
 import { useInterfaceStore } from '../../stores/interface'
+import { useAnnouncementsStore } from '../../stores/announcements'
 
 library.add(
   faSignInAlt,
@@ -96,11 +98,14 @@ const SideDrawer = {
         return { name }
       }
     },
-    ...mapState({
-      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
-      supportsAnnouncements: state => state.announcements.supportsAnnouncements
+    ...mapPiniaState(useAnnouncementsStore, {
+      supportsAnnouncements: store => store.supportsAnnouncements,
+      unreadAnnouncementCount: 'unreadAnnouncementCount'
     }),
-    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
+    ...mapState({
+      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
+    }),
+    ...mapGetters(['unreadChatCount'])
   },
   methods: {
     toggleDrawer () {