Migrate comment.js Vuex store to Pinia

src/components/card/CardSidebarTabComments.vue

@@ -38,12 +38,13 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapState } from 'vuex'
 import { NcAvatar } from '@nextcloud/vue'
 import CommentItem from './CommentItem.vue'
 import CommentForm from './CommentForm.vue'
 import InfiniteLoading from 'vue-infinite-loading'
 import { getCurrentUser } from '@nextcloud/auth'
+import { useCommentStore } from '../../stores/comment.js'
 
 export default {
 	name: 'CardSidebarTabComments',
@@ -64,6 +65,10 @@ export default {
 			default: null,
 		},
 	},
+	setup() {
+		const commentStore = useCommentStore()
+		return { commentStore }
+	},
 	data() {
 		return {
 			newComment: '',
@@ -75,12 +80,16 @@ export default {
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
-			replyTo: state => state.comment.replyTo,
 		}),
-		...mapGetters([
-			'getCommentsForCard',
-			'hasMoreComments',
-		]),
+		replyTo() {
+			return this.commentStore.replyTo
+		},
+		getCommentsForCard() {
+			return this.commentStore.getCommentsForCard
+		},
+		hasMoreComments() {
+			return this.commentStore.hasMoreComments
+		},
 		members() {
 			return this.currentBoard.users
 		},
@@ -110,14 +119,14 @@ export default {
 			}
 		},
 		async loadComments() {
-			this.$store.dispatch('setReplyTo', null)
+			this.commentStore.setReplyTo(null)
 			this.error = null
 			this.isLoading = true
 			try {
-				await this.$store.dispatch('fetchComments', { cardId: this.card.id })
+				await this.commentStore.fetchComments({ cardId: this.card.id })
 				this.isLoading = false
 				if (this.card.commentsUnread > 0) {
-					await this.$store.dispatch('markCommentsAsRead', this.card.id)
+					await this.commentStore.apiMarkCommentsAsRead(this.card.id)
 				}
 			} catch (e) {
 				this.isLoading = false
@@ -130,18 +139,18 @@ export default {
 				cardId: this.card.id,
 				comment: content,
 			}
-			await this.$store.dispatch('createComment', commentObj)
-			this.$store.dispatch('setReplyTo', null)
+			await this.commentStore.createComment(commentObj)
+			this.commentStore.setReplyTo(null)
 			this.newComment = ''
 			await this.loadComments()
 		},
 		async loadMore() {
 			this.isLoading = true
-			await this.$store.dispatch('fetchMore', { cardId: this.card.id })
+			await this.commentStore.fetchMore({ cardId: this.card.id })
 			this.isLoading = false
 		},
 		cancelReply() {
-			this.$store.dispatch('setReplyTo', null)
+			this.commentStore.setReplyTo(null)
 		},
 	},
 }

src/components/card/CommentItem.vue

@@ -84,6 +84,7 @@ import md5 from 'blueimp-md5'
 import relativeDate from '../../mixins/relativeDate.js'
 import ReplyIcon from 'vue-material-design-icons/ReplyOutline.vue'
 import moment from 'moment'
+import { useCommentStore } from '../../stores/comment.js'
 
 const AtMention = {
 	name: 'AtMention',
@@ -124,6 +125,10 @@ export default {
 			default: false,
 		},
 	},
+	setup() {
+		const commentStore = useCommentStore()
+		return { commentStore }
+	},
 	data() {
 		return {
 			edit: false,
@@ -179,7 +184,7 @@ export default {
 
 	methods: {
 		replyTo() {
-			this.$store.dispatch('setReplyTo', this.comment)
+			this.commentStore.setReplyTo(this.comment)
 		},
 		showUpdateForm() {
 			this.edit = true
@@ -197,15 +202,15 @@ export default {
 				cardId: this.comment.objectId,
 				id: this.comment.id,
 			}
-			await this.$store.dispatch('updateComment', data)
+			await this.commentStore.apiUpdateComment(data)
 			this.hideUpdateForm()
 		},
 		deleteComment() {
 			const data = {
 				id: this.comment.id,
 				cardId: this.comment.objectId,
 			}
-			this.$store.dispatch('deleteComment', data)
+			this.commentStore.apiDeleteComment(data)
 		},
 	},
 }

src/store/main.js

@@ -13,7 +13,6 @@ import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import { BoardApi } from '../services/BoardApi.js'
 import stackModuleFactory from './stack.js'
 import cardModuleFactory from './card.js'
-import comment from './comment.js'
 import trashbin from './trashbin.js'
 import attachment from './attachment.js'
 import overview from './overview.js'
@@ -36,7 +35,6 @@ export default function storeFactory() {
 		modules: {
 			stack: stackModuleFactory(),
 			card: cardModuleFactory(),
-			comment,
 			trashbin,
 			attachment,
 			overview,

src/stores/comment.js

@@ -0,0 +1,103 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import { CommentApi } from '../services/CommentApi.js'
+
+const apiClient = new CommentApi()
+
+const COMMENT_FETCH_LIMIT = 10
+
+export const useCommentStore = defineStore('comment', {
+	state: () => ({
+		comments: {},
+		replyTo: null,
+	}),
+	getters: {
+		getCommentsForCard: (state) => (id) => {
+			if (state.comments[id]) {
+				return [...state.comments[id].comments].sort((a, b) => b.id - a.id)
+			}
+			return []
+		},
+		hasMoreComments: (state) => (cardId) => {
+			return state.comments[cardId] && state.comments[cardId].hasMore
+		},
+	},
+	actions: {
+		endReached(cardId) {
+			if (this.comments[cardId]) {
+				this.comments[cardId].hasMore = false
+			}
+		},
+		addComments({ comments, cardId }) {
+			if (this.comments[cardId] === undefined) {
+				this.comments[cardId] = {
+					hasMore: comments.length > 0,
+					comments: [...comments],
+				}
+			} else {
+				const newComments = comments.filter((comment) => {
+					return this.comments[cardId].comments.findIndex((item) => item.id === comment.id) === -1
+				})
+				this.comments[cardId].comments.push(...newComments)
+			}
+		},
+		updateComment({ cardId, comment }) {
+			const existingIndex = this.comments[cardId].comments.findIndex(c => c.id === comment.id)
+			if (existingIndex !== -1) {
+				Object.assign(this.comments[cardId].comments[existingIndex], comment)
+			}
+		},
+		deleteComment(comment) {
+			const existingIndex = this.comments[comment.cardId].comments.findIndex(_comment => _comment.id === comment.id)
+			if (existingIndex !== -1) {
+				this.comments[comment.cardId].comments.splice(existingIndex, 1)
+			}
+		},
+		markCommentsAsRead(cardId) {
+			this.comments[cardId].comments.forEach(_comment => {
+				_comment.isUnread = false
+			})
+		},
+		setReplyTo(comment) {
+			this.replyTo = comment
+		},
+		async fetchComments({ cardId, offset }) {
+			const comments = await apiClient.loadComments({
+				cardId,
+				limit: COMMENT_FETCH_LIMIT,
+				offset: offset || 0,
+			})
+
+			this.addComments({ cardId, comments })
+
+			if (comments.length < COMMENT_FETCH_LIMIT) {
+				this.endReached(cardId)
+			}
+		},
+		async fetchMore({ cardId }) {
+			// fetch newer comments first
+			await this.fetchComments({ cardId })
+			await this.fetchComments({ cardId, offset: this.getCommentsForCard(cardId).length })
+		},
+		async createComment({ cardId, comment }) {
+			await apiClient.createComment({ cardId, comment, replyTo: this.replyTo })
+			await this.fetchComments({ cardId })
+		},
+		async apiDeleteComment(data) {
+			await apiClient.deleteComment(data)
+			this.deleteComment(data)
+		},
+		async apiUpdateComment(data) {
+			const comment = await apiClient.updateComment(data)
+			this.updateComment({ cardId: data.cardId, comment })
+		},
+		async apiMarkCommentsAsRead(cardId) {
+			await apiClient.markCommentsAsRead(cardId)
+			this.markCommentsAsRead(cardId)
+		},
+	},
+})