feat: add rating in card

[xxfttkx]

#328 相关

改动后ui表现如下：

如果有代码问题请告诉我，我对react并不熟悉

[martinwang2002]

wrapErrorMessage(
    (e) => `提交评分失败：${formatError(e)}`,
    mutate(
      `rateOperation-${operationId}-${decision}`,
      async (val) => {
        await rateOperation({
          id: operationId,
          rating: decision,
        })
        return val
      }),
  ).catch(console.warn)

for mutex of http requests.

@guansss , previously, multple like and dislike post operations were sent to the server.

In other words, I would doubt the validity of the data if they were sent from the browser.

[guansss]

@martinwang2002 mutate() 的 key 不是用来做 mutex 的吧，是用来与 useSWR() 里同样的 key 对应起来，以更新缓存并触发 revalidate

短时间发送多个请求是没问题的，反正最后都会 revalidate，以服务器返回的数据为准

[guansss]

我试了一下，这请求确实太多了点……

edit: 原因是这个 mutate() 的第一个参数是 key，这里传了个发请求的函数进去作为 key，所以实际上是整个页面里有多少个 useSWR() 就发了多少个 rating 请求，并且刷新了所有的 useSWR()……

[martinwang2002]

我试了一下，这请求确实太多了点……

edit: 原因是这个 mutate() 的第一个参数是 key，这里传了个发请求的函数进去作为 key，所以实际上是整个页面里有多少个 useSWR() 就发了多少个 rating 请求，并且刷新了所有的 useSWR()……

一个函数作为key传入后，被当成了filter，这就导致了“整个页面里有多少个 useSWR() 就发了多少个 rating 请求”。

ref: https://swr.vercel.app/docs/mutation#parameters

[martinwang2002]

Also, another problem is that the state of the button requires refreshes, which requires the whole page of opeartions from the server side if my manual tests are undergoing correctly.

[xxfttkx]

Also, another problem is that the state of the button requires refreshes, which requires the whole page of opeartions from the server side if my manual tests are undergoing correctly.

是说点赞的操作会导致别的operation也会从服务器重新获取吗，我在useOperation中打了断点，点赞时发现只有对应id的operation会进入，你测试的步骤是什么。

[martinwang2002]

Also, another problem is that the state of the button requires refreshes, which requires the whole page of opeartions from the server side if my manual tests are undergoing correctly.

This is not caused by the update in rating, sorry for my misinterpretation.

这不是由于评分api产生的，不好意思x

[guansss]

把 useOperation() 放在 OperationCard 里的做法会导致大量的额外请求

mutate() 的使用方式有误，可以参考上面的解释

另外，代码看起来没有经过格式化，建议运行 yarn lint:check:eslint 或者在 IDE 里装个 eslint 插件来检查一下

[xxfttkx]

把 useOperation() 放在 OperationCard 里的做法会导致大量的额外请求

mutate() 的使用方式有误，可以参考上面的解释

另外，代码看起来没有经过格式化，建议运行 yarn lint:check:eslint 或者在 IDE 里装个 eslint 插件来检查一下

感谢反馈！我来研究一下该怎么修改

[xxfttkx]

@guansss
改了mutate使用key，目前这样行吗？

之前useOperation() 放在 OperationCard 里导致大量的额外请求是mutate造成的，它本身还会有问题吗？

[guansss]

现在 mutate 的用法就没问题了

大量请求不仅仅是 mutate 造成的，列表里每个 useOperation() 都会发送一次请求，比如一页有 10 个作业，本来只需要发 1 个请求，现在要发 11 个 （之前的 mutate 导致每次点赞还会额外发 20 多个）

[xxfttkx]

现在 mutate 的用法就没问题了

大量请求不仅仅是 mutate 造成的，列表里每个 useOperation() 都会发送一次请求，比如一页有 10 个作业，本来只需要发 1 个请求，现在要发 11 个 （之前的 mutate 导致每次点赞还会额外发 20 多个）

啊，了解了，我再改改

[xxfttkx]

@guansss

将更新operation的逻辑移到了OperationList中，现在是纯前端表现了，没有同步后端的ratingType，这种表现能接受吗。

另外，useOperations中获得的operations的ratingType都是0，尝试使用getOperation获得到的operation能带有正确的ratingType，这是后端的问题吗，我对排查这个问题没有头绪

[martinwang2002]

@guansss

将更新operation的逻辑移到了OperationList中，现在是纯前端表现了，没有同步后端的ratingType，这种表现能接受吗。

另外，useOperations中获得的operations的ratingType都是0，尝试使用getOperation获得到的operation能带有正确的ratingType，这是后端的问题吗，我对排查这个问题没有头绪

带authorization: Bearer TOKEN 请求的会返回ratingType。

详见： ZOOT-Plus/ZootPlusBackend#179

https://github.com/MaaAssistantArknights/maa-copilot-frontend/blob/3a48c6104b71935f2eabb9a8ae57ee500ba8ca22/src/apis/operation.ts#L98-L102 以上请求未携带Bearer token

https://github.com/MaaAssistantArknights/maa-copilot-frontend/blob/3a48c6104b71935f2eabb9a8ae57ee500ba8ca22/src/apis/operation.ts#L169-L172 以上请求携带Bearer token，目的是为了获取用户是否获得点赞了该作业

可能需要后端确认一下query api是否支持带token访问，（毕竟有一些有cache）

[xxfttkx]

@martinwang2002
感谢解答！看来我需要多了解token、cache相关的知识

[dragove]

后端目前未处理列表页的点赞信息，ref: 列表查询逻辑

要支持该功能，后端需要在查询到数据后（不管是否为缓存中数据）都执行一次点赞信息查询。可以考虑先做上去观察一下会不会出现性能问题。