From 69b964be7fcf00f243071c69131914cf13cba523 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Fri, 6 Oct 2023 18:43:14 +0800
Subject: [PATCH] feat: reply upvote, like, dislike

---
 src/api/topic/reply.ts                        |  68 +++--
 src/api/topic/types/reply.ts                  |   2 +-
 src/store/modules/topic.ts                    |  76 +++++-
 src/views/topic/components/reply/Reply.vue    |   7 +-
 .../topic/components/reply/ReplyFooter.vue    | 241 ++++++++++++++++--
 5 files changed, 341 insertions(+), 53 deletions(-)

diff --git a/src/api/topic/reply.ts b/src/api/topic/reply.ts
index 1a986822..8fd3855c 100644
--- a/src/api/topic/reply.ts
+++ b/src/api/topic/reply.ts
@@ -1,4 +1,4 @@
-import { fetchGet, fetchPost } from '@/utils/request'
+import { fetchGet, fetchPost, fetchPut } from '@/utils/request'
 // 将对象转为请求参数的函数
 import objectToQueryParams from '@/utils/objectToQueryParams'
 import * as Reply from './types/reply'
@@ -7,34 +7,60 @@ import * as Reply from './types/reply'
 export async function getRepliesByPidApi(
   request: Reply.TopicReplyRequestData
 ): Promise<Reply.TopicReplyResponseData> {
-  try {
-    const queryParams = objectToQueryParams(request, 'tid')
-    const url = `/topics/${request.tid}/replies?${queryParams}`
+  const queryParams = objectToQueryParams(request, 'tid')
+  const url = `/topics/${request.tid}/replies?${queryParams}`
 
-    const response = await fetchGet<Reply.TopicReplyResponseData>(url)
+  const response = await fetchGet<Reply.TopicReplyResponseData>(url)
 
-    return response
-  } catch (error) {
-    console.log(error)
-    throw new Error('Failed to fetch replies')
-  }
+  return response
 }
 
 // 根据 tid 创建一个回复
 export async function postReplyByPidApi(
   request: Reply.TopicCreateReplyRequestData
 ): Promise<Reply.TopicCreateReplyResponseData> {
-  try {
-    const url = `/topics/${request.tid}/reply`
+  const url = `/topics/${request.tid}/reply`
 
-    const response = await fetchPost<Reply.TopicCreateReplyResponseData>(
-      url,
-      request
-    )
+  const response = await fetchPost<Reply.TopicCreateReplyResponseData>(
+    url,
+    request
+  )
 
-    return response
-  } catch (error) {
-    console.log(error)
-    throw new Error('Failed to create reply')
-  }
+  return response
+}
+
+// 推
+export async function updateReplyUpvoteApi(
+  request: Reply.TopicUpvoteReplyRequestData
+): Promise<Reply.TopicUpvoteReplyResponseData> {
+  const queryParams = objectToQueryParams(request, 'tid')
+  const url = `/topics/${request.tid}/reply/upvote?${queryParams}`
+
+  const response = fetchPut<Reply.TopicUpvoteReplyResponseData>(url)
+
+  return response
+}
+
+// 点赞
+export async function updateReplyLikeApi(
+  request: Reply.TopicLikeReplyRequestData
+): Promise<Reply.TopicLikeReplyResponseData> {
+  const queryParams = objectToQueryParams(request, 'tid')
+  const url = `/topics/${request.tid}/reply/like?${queryParams}`
+
+  const response = fetchPut<Reply.TopicLikeReplyResponseData>(url)
+
+  return response
+}
+
+// 点踩
+export async function updateReplyDislikeApi(
+  request: Reply.TopicDislikeReplyRequestData
+): Promise<Reply.TopicDislikeReplyResponseData> {
+  const queryParams = objectToQueryParams(request, 'tid')
+  const url = `/topics/${request.tid}/reply/dislike?${queryParams}`
+
+  const response = fetchPut<Reply.TopicDislikeReplyResponseData>(url)
+
+  return response
 }
diff --git a/src/api/topic/types/reply.ts b/src/api/topic/types/reply.ts
index d4c91d3f..818dfc54 100644
--- a/src/api/topic/types/reply.ts
+++ b/src/api/topic/types/reply.ts
@@ -21,7 +21,7 @@ export interface TopicReply {
   to_user: TopicToUserInfo
   edited: number
   content: string
-  upvote: number[]
+  upvotes: number[]
   likes: number[]
   dislikes: number[]
   tags: string[]
diff --git a/src/store/modules/topic.ts b/src/store/modules/topic.ts
index 2f990910..fa10af6b 100644
--- a/src/store/modules/topic.ts
+++ b/src/store/modules/topic.ts
@@ -3,23 +3,21 @@ import { defineStore } from 'pinia'
 // 话题
 import {
   getTopicByTidApi,
+  getRelatedTopicsByTagsApi,
+  getPopularTopicsByUserUidApi,
+  updateTopicUpvoteApi,
+  updateTopicLikeApi,
+  updateTopicDislikeApi,
+} from '@/api'
+import type {
   TopicDetailResponseData,
   TopicAsideOtherTagRequestData,
-  getRelatedTopicsByTagsApi,
   TopicAsideMasterRequestData,
-  getPopularTopicsByUserUidApi,
   TopicAsideResponseData,
-} from '@/api'
-
-// 点赞等动作
-import {
-  updateTopicUpvoteApi,
   TopicUpvoteTopicRequestData,
   TopicUpvoteTopicResponseData,
-  updateTopicLikeApi,
   TopicLikeTopicRequestData,
   TopicLikeTopicResponseData,
-  updateTopicDislikeApi,
   TopicDislikeTopicRequestData,
   TopicDislikeTopicResponseData,
 } from '@/api'
@@ -28,10 +26,22 @@ import {
 import {
   getRepliesByPidApi,
   postReplyByPidApi,
+  updateReplyUpvoteApi,
+  updateReplyLikeApi,
+  updateReplyDislikeApi,
+} from '@/api'
+
+import type {
   TopicReplyRequestData,
   TopicReplyResponseData,
   TopicCreateReplyRequestData,
   TopicCreateReplyResponseData,
+  TopicUpvoteReplyRequestData,
+  TopicUpvoteReplyResponseData,
+  TopicLikeReplyRequestData,
+  TopicLikeReplyResponseData,
+  TopicDislikeReplyRequestData,
+  TopicDislikeReplyResponseData,
 } from '@/api'
 
 // 评论
@@ -154,7 +164,7 @@ export const useKUNGalgameTopicStore = defineStore({
     },
 
     // 获取回复
-    async getReplies(tid: number): Promise<TopicDislikeTopicResponseData> {
+    async getReplies(tid: number): Promise<TopicReplyResponseData> {
       // 这里的默认值用于初始化
       const requestData: TopicReplyRequestData = {
         tid: tid,
@@ -179,6 +189,52 @@ export const useKUNGalgameTopicStore = defineStore({
       return await postReplyByPidApi(requestData)
     },
 
+    // 推回复
+    async updateReplyUpvote(
+      tid: number,
+      toUid: number,
+      rid: number
+    ): Promise<TopicUpvoteReplyResponseData> {
+      const requestData: TopicUpvoteReplyRequestData = {
+        tid: tid,
+        to_uid: toUid,
+        rid: rid,
+      }
+      return await updateReplyUpvoteApi(requestData)
+    },
+
+    // 点赞回复
+    async updateReplyLike(
+      tid: number,
+      toUid: number,
+      rid: number,
+      isPush: boolean
+    ): Promise<TopicLikeReplyResponseData> {
+      const requestData: TopicLikeReplyRequestData = {
+        tid: tid,
+        to_uid: toUid,
+        rid: rid,
+        isPush: isPush,
+      }
+      return await updateReplyLikeApi(requestData)
+    },
+
+    // 点踩回复
+    async updateReplyDislike(
+      tid: number,
+      toUid: number,
+      rid: number,
+      isPush: boolean
+    ): Promise<TopicDislikeReplyResponseData> {
+      const requestData: TopicDislikeReplyRequestData = {
+        tid: tid,
+        to_uid: toUid,
+        rid: rid,
+        isPush: isPush,
+      }
+      return await updateReplyDislikeApi(requestData)
+    },
+
     // 获取评论
     async getComments(
       tid: number,
diff --git a/src/views/topic/components/reply/Reply.vue b/src/views/topic/components/reply/Reply.vue
index 034aa1b4..c3049447 100644
--- a/src/views/topic/components/reply/Reply.vue
+++ b/src/views/topic/components/reply/Reply.vue
@@ -98,16 +98,17 @@ const handleClickComment = (rid: number) => {
           </div>
 
           <!-- 其它人回复的底部 -->
-          <!-- info 代表 footer 的点赞等信息，rUser 表示当前的回复用户信息 -->
+          <!-- info 代表 footer 的点赞等信息，master 表示当前的回复用户信息 -->
           <!-- 这里传入了回复的插槽，因为只有回复可以被评论 -->
           <ReplyFooter
             :info="{
+              rid: reply.rid,
               likes: reply.likes,
               dislikes: reply.dislikes,
-              upvotes: reply.upvote,
+              upvotes: reply.upvotes,
               to_floor: reply.floor,
             }"
-            :rUser="reply.r_user"
+            :master="reply.r_user"
           >
             <template #comment>
               <span @click="handleClickComment(reply.rid)" class="icon">
diff --git a/src/views/topic/components/reply/ReplyFooter.vue b/src/views/topic/components/reply/ReplyFooter.vue
index 892d8c18..59ac3e9e 100644
--- a/src/views/topic/components/reply/ReplyFooter.vue
+++ b/src/views/topic/components/reply/ReplyFooter.vue
@@ -1,13 +1,25 @@
 <!-- 话题的底部区域，推话题，回复，点赞等 -->
 <script setup lang="ts">
-import { nextTick } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { Icon } from '@iconify/vue'
 
+import { useRouter } from 'vue-router'
+// 全局消息组件（底部）
+import { useKUNGalgameMessageStore } from '@/store/modules/message'
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
+// throttle 函数
+import { throttle } from '@/utils/throttle'
+
 import { TopicUserInfo } from '@/api'
 
+// 导入编辑界面的 store
+import { useKUNGalgameEditStore } from '@/store/modules/edit'
 // 导入话题页面 store
 import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+// 导入用户的 store
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 import { storeToRefs } from 'pinia'
 
 // 当前的话题 tid
@@ -20,31 +32,206 @@ const { isEdit, replyDraft } = storeToRefs(topicStore)
 // 接受父组件的传值
 const props = defineProps<{
   info: {
-    views?: number
+    rid: number
     likes: number[]
     dislikes: number[]
     upvotes: number[]
     // 被回复人的 floor
     to_floor: number
   }
-  rUser: TopicUserInfo
+  master: TopicUserInfo
 }>()
 
+/**
+ * 这里只是简单起见，不显示重新编辑
+ * 实际上如果用户自己修改了 localStorage 中保存的信息，这个验证就失效了
+ * 但是修改了也没有用，验证逻辑位于后端
+ */
+// 当前登录用户的 uid
+const currUserUid = useKUNGalgameUserStore().uid
+// 话题发布者的 uid
+const masterUid = props.master.uid
+// 是否具有重新编辑的权限
+const isShowRewrite = currUserUid === masterUid
+
+// footer 左侧的动作，点赞等
+const actions = reactive({
+  upvotes: props.info.upvotes,
+  likes: props.info.likes,
+  dislikes: props.info.dislikes,
+})
+
+// 是否已经点过赞，点过踩
+const isActive = reactive({
+  isUpvote: false,
+  isLiked: false,
+  isDisliked: false,
+  isShared: false,
+})
+
+// throttle 回调函数
+const throttleCallback = () => {
+  message(
+    'You can only perform one operation within 1007 milliseconds',
+    '您在 1007 毫秒内只能进行一次操作',
+    'warn'
+  )
+}
+
+// throttle 函数，1007 毫秒仅会触发一次点赞
+const handleClickLikeThrottled = throttle(
+  async () => {
+    // 当前用户不可以给自己点赞
+    if (currUserUid === masterUid) {
+      message(
+        'You cannot like your own reply',
+        '您不可以给自己的回复点赞',
+        'warn'
+      )
+      return
+    }
+
+    // 切换点赞激活状态
+    isActive.isLiked = !isActive.isLiked
+
+    const res = await useKUNGalgameTopicStore().updateReplyLike(
+      tid,
+      masterUid,
+      props.info.rid,
+      isActive.isLiked
+    )
+
+    if (res.code === 200) {
+      // 更新点赞数
+      actions.likes.length = isActive.isLiked
+        ? actions.likes.length + 1
+        : actions.likes.length - 1
+    } else {
+      message('Reply like failed!', '点赞回复失败', 'error')
+    }
+  },
+  1007,
+  throttleCallback
+)
+
+// throttle 函数，1007 毫秒仅会触发一次点踩
+const handleClickDislikeThrottled = throttle(
+  async () => {
+    if (currUserUid === masterUid) {
+      message(
+        'You cannot dislike your own reply',
+        '您不可以给自己的回复点踩',
+        'warn'
+      )
+      return
+    }
+
+    isActive.isDisliked = !isActive.isDisliked
+    const res = await useKUNGalgameTopicStore().updateReplyDislike(
+      tid,
+      masterUid,
+      props.info.rid,
+      isActive.isDisliked
+    )
+
+    if (res.code === 200) {
+      // 更新点赞数
+      actions.dislikes.length = isActive.isDisliked
+        ? actions.dislikes.length + 1
+        : actions.dislikes.length - 1
+    } else {
+      message('Reply dislike failed!', '点踩回复失败', 'error')
+    }
+  },
+  1007,
+  throttleCallback
+)
+
+// 推话题
+const handleClickUpvote = async () => {
+  // 当前用户不可以推自己的话题
+  if (currUserUid === masterUid) {
+    message('You cannot upvote your own reply', '您不可以推自己的回复', 'warn')
+    return
+  }
+
+  // TODO: 该功能必须有错误处理
+  // if (useKUNGalgameUserStore().moemoepoint < 1100) {
+  //   message(
+  //     'Your Moe Moe Points are less than 1100, and you cannot use the upvote feature',
+  //     '您的萌萌点小于 1100，无法使用推功能',
+  //     'warn'
+  //   )
+  //   return
+  // }
+
+  // 调用弹窗确认
+  const res = await useKUNGalgameMessageStore().alert(
+    'AlertInfo.edit.upvote',
+    true
+  )
+
+  // 这里实现用户的点击确认取消逻辑
+  if (res) {
+    // 请求推话题的接口
+    const res = await useKUNGalgameTopicStore().updateReplyUpvote(
+      tid,
+      masterUid,
+      props.info.rid
+    )
+
+    if (res.code === 200) {
+      // 更新推数
+      actions.upvotes.length++
+
+      message('Topic upvote successfully', '推话题成功', 'success')
+    } else {
+      message('Topic upvote failed!', '推话题失败', 'error')
+    }
+  }
+}
+
+// 点赞
+const handleClickLike = () => {
+  handleClickLikeThrottled()
+}
+
+// 点踩
+const handleClickDislike = () => {
+  handleClickDislikeThrottled()
+}
+
 // 点击回复打开回复面板
 const handelReply = async () => {
   // 保存必要信息，以便发表回复
   replyDraft.value.tid = tid
-  replyDraft.value.replyUserName = props.rUser.name
-  replyDraft.value.to_uid = props.rUser.uid
+  replyDraft.value.replyUserName = props.master.name
+  replyDraft.value.to_uid = props.master.uid
   replyDraft.value.to_floor = props.info.to_floor
 
-  // 打开回复面板
-  await nextTick()
   isEdit.value = true
 }
 
 // 重新编辑
 const handleClickEdit = () => {}
+
+// 初始化按钮的状态，是否已点赞等
+onMounted(() => {
+  // 已经推过
+  if (props.info.upvotes.includes(currUserUid)) {
+    isActive.isUpvote = true
+  }
+
+  // 已经点赞
+  if (props.info.likes.includes(currUserUid)) {
+    isActive.isLiked = true
+  }
+
+  // 已经点踩
+  if (props.info.dislikes.includes(currUserUid)) {
+    isActive.isDisliked = true
+  }
+})
 </script>
 
 <template>
@@ -55,23 +242,36 @@ const handleClickEdit = () => {}
       <ul>
         <!-- 推话题 -->
         <li>
-          <span class="icon"><Icon icon="bi:rocket" /></span>
-          {{ info?.upvotes?.length }}
-        </li>
-        <!-- 查看数量 -->
-        <li v-if="info.views">
-          <span class="icon"><Icon icon="ic:outline-remove-red-eye" /></span>
-          {{ info.views }}
+          <span
+            class="icon"
+            :class="isActive.isUpvote ? 'active' : ''"
+            @click="handleClickUpvote"
+          >
+            <Icon icon="bi:rocket" />
+          </span>
+          {{ actions.upvotes.length }}
         </li>
         <!-- 点赞 -->
         <li>
-          <span class="icon"><Icon icon="line-md:thumbs-up-twotone" /></span>
-          {{ info?.likes?.length }}
+          <span
+            class="icon"
+            :class="isActive.isLiked ? 'active' : ''"
+            @click="handleClickLike"
+          >
+            <Icon icon="line-md:thumbs-up-twotone" />
+          </span>
+          {{ actions.likes.length }}
         </li>
         <!-- 踩 -->
         <li>
-          <span class="icon"><Icon icon="line-md:thumbs-down-twotone" /></span>
-          {{ info?.dislikes?.length }}
+          <span
+            class="icon"
+            :class="isActive.isDisliked ? 'active' : ''"
+            @click="handleClickDislike"
+          >
+            <Icon icon="line-md:thumbs-down-twotone" />
+          </span>
+          {{ actions.dislikes.length }}
         </li>
       </ul>
     </div>
@@ -204,6 +404,11 @@ const handleClickEdit = () => {}
   }
 }
 
+/* 激活后的样式 */
+.active {
+  color: var(--kungalgame-blue-4);
+}
+
 @media (max-width: 700px) {
   .footer {
     flex-direction: column;