jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-21 22:41:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add optimistic reaction update

Browse Source
This commit is contained in:
Tim
2025-08-03 01:16:06 +08:00
parent 2ad3275753
commit 561a622c26
1 changed files with 39 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
open-isle-cli/src/components/ReactionsGroup.vue
View File

@@ -128,10 +128,23 @@ export default {
toast.error('请先登录')
return
}
const url = props.contentType === 'post'
? `${API_BASE_URL}/api/posts/${props.contentId}/reactions`
: `${API_BASE_URL}/api/comments/${props.contentId}/reactions`
// optimistic update
const existingIdx = reactions.value.findIndex(r => r.type === type && r.user === authState.username)
let tempReaction = null
let removedReaction = null
if (existingIdx > -1) {
removedReaction = reactions.value.splice(existingIdx, 1)[0]
} else {
tempReaction = { type, user: authState.username }
reactions.value.push(tempReaction)
}
emit('update:modelValue', reactions.value)
try {
const url = props.contentType === 'post'
? `${API_BASE_URL}/api/posts/${props.contentId}/reactions`
: `${API_BASE_URL}/api/comments/${props.contentId}/reactions`
const res = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
@@ -139,20 +152,40 @@ export default {
})
if (res.ok) {
if (res.status === 204) {
const idx = reactions.value.findIndex(r => r.type === type && r.user === authState.username)
if (idx > -1) reactions.value.splice(idx, 1)
// removal already reflected
} else {
const data = await res.json()
reactions.value.push(data)
const idx = tempReaction ? reactions.value.indexOf(tempReaction) : -1
if (idx > -1) {
reactions.value.splice(idx, 1, data)
} else if (removedReaction) {
// server added back reaction even though we removed? restore data
reactions.value.push(data)
}
if (data.reward && data.reward > 0) {
toast.success(`获得 ${data.reward} 经验值`)
}
}
emit('update:modelValue', reactions.value)
} else {
// revert optimistic update on failure
if (tempReaction) {
const idx = reactions.value.indexOf(tempReaction)
if (idx > -1) reactions.value.splice(idx, 1)
} else if (removedReaction) {
reactions.value.push(removedReaction)
}
emit('update:modelValue', reactions.value)
toast.error('操作失败')
}
} catch (e) {
if (tempReaction) {
const idx = reactions.value.indexOf(tempReaction)
if (idx > -1) reactions.value.splice(idx, 1)
} else if (removedReaction) {
reactions.value.push(removedReaction)
}
emit('update:modelValue', reactions.value)
toast.error('操作失败')
}
}