refactor: comment store

packages/home/src/pages/home/HomeArticle.vue

@@ -37,25 +37,28 @@
 import lozad from 'lozad'
 import prismjs from 'prismjs'
 import {PageContext} from 'vike/types'
-import {inject, onMounted, ref} from 'vue'
+import {inject, onMounted} from 'vue'
 import {useRoute} from 'vue-router'
 import FreyjaArticleComment from '../../components/home/article-comment.vue'
 import {useArticleStore} from '../../store/article.ts'
+import {useCommentStore} from '../../store/comment.ts'
 
 const articleStore = useArticleStore()
+const commentStore = useCommentStore()
 const route = useRoute()
 
-onMounted(() => {
+const articleId = route.params.id as string
+
+onMounted(async () => {
   prismjs.highlightAll()
   lozad().observe()
+  await commentStore.list(articleId, 1)
 })
 
 const pageContext = inject<PageContext>('pageContext')
-const articleId = route.params.id as string
 await articleStore.get(articleId)
-// this.$store.dispatch('comment/list', {articleId, page: 1})
 const article = articleStore.article
-const comments = ref([])
+const comments = commentStore.comments
 if (pageContext) {
   pageContext.exports.title = article.title
 }

packages/home/src/store/comment.ts

@@ -0,0 +1,91 @@
+/**
+ * Created by bangbang93 on 2017/9/6.
+ */
+'use strict'
+
+import {defineStore} from 'pinia'
+import {Fetch} from '../utils/fetch'
+
+
+export interface IComment {
+  _id: string
+  replies?: IComment[]
+}
+export interface ICommentState {
+  comments: IComment[]
+  publisher: {
+    name: string
+    email: string
+    website: string
+  }
+}
+
+export const useCommentStore = defineStore('comment', {
+  state: (): ICommentState => {
+    let publisher = {
+      name: '',
+      email: '',
+      website: '',
+    }
+    if (typeof localStorage !== 'undefined') {
+      const item = localStorage.getItem('freyja:publisher')
+      if (item) {
+        publisher = JSON.parse(item) as ICommentState['publisher']
+      }
+    }
+    return {
+      comments: [],
+      publisher,
+    }
+  },
+  actions: {
+    async create(articleId: string, content: string, replyId?: string) {
+      const resp = await Fetch.post(`/api/comment/article/${articleId}`, {
+        content,
+        publisher: this.publisher,
+        reply: replyId,
+      })
+      if (resp.status !== 201) {
+        throw new Error('add commit failed')
+      }
+
+      const comment = await resp.json() as IComment
+
+      if (replyId) {
+        this.reply(replyId, comment)
+      } else {
+        this.comments.unshift(comment)
+      }
+      return comment
+    },
+    async list(articleId: string, page: number) {
+      const resp = await Fetch.get(`/api/comment/article/${articleId}`, {
+        page,
+      })
+      if (resp.status !== 200) {
+        throw new Error('fetch comments failed')
+      }
+
+      this.comments = await resp.json() as IComment[]
+    },
+    savePublisher(publisher: ICommentState['publisher']) {
+      this.publisher = publisher
+      localStorage?.setItem('freyja:publisher', JSON.stringify(publisher))
+    },
+    reply(replyId: string, newComment: IComment) {
+      return walk(this.comments)
+      function walk(comments: IComment[]): void {
+        for (const comment of comments) {
+          if (comment._id === replyId) {
+            comment.replies = comment.replies ?? []
+            comment.replies.push(newComment)
+            return
+          }
+          if (comment.replies) {
+            walk(comment.replies)
+          }
+        }
+      }
+    },
+  },
+})

packages/home/src/store/index.ts

@@ -6,7 +6,6 @@ import {defineStore} from 'pinia'
 // @ts-expect-error vuex type error
 import {createStore} from 'vuex'
 import {Fetch} from '../utils/fetch.ts'
-import CommentStore from './comment.js'
 
 
 export interface State {
@@ -34,7 +33,6 @@ export function createRootStore() {
   return createStore({
     state: {},
     modules: {
-      comment: CommentStore,
     },
   })
 }