From d65579ae9e3554c4c15aa9ab4bc81aae6f928dd5 Mon Sep 17 00:00:00 2001
From: lauirf <592184299@qq.com>
Date: Tue, 4 Feb 2025 01:26:58 +0800
Subject: [PATCH 1/4] add rating in card

---
 src/components/OperationCard.tsx          | 160 ++++++++++++++++------
 src/components/OperationList.tsx          |   4 +-
 src/components/viewer/OperationViewer.tsx |  36 ++---
 src/services/operation.ts                 |  34 +++++
 4 files changed, 167 insertions(+), 67 deletions(-)

diff --git a/src/components/OperationCard.tsx b/src/components/OperationCard.tsx
index 7bee455a..2f9ff430 100644
--- a/src/components/OperationCard.tsx
+++ b/src/components/OperationCard.tsx
@@ -1,23 +1,49 @@
-import { Button, Card, Elevation, H4, H5, Icon, Tag } from '@blueprintjs/core'
+import { Button, ButtonGroup, Card, Elevation, H4, H5, Icon, Tag } from '@blueprintjs/core'
 import { Tooltip2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
-import { copyShortCode, handleDownloadJSON } from 'services/operation'
+import { copyShortCode, handleDownloadJSON, handleRating } from 'services/operation'
 
 import { ReLink } from 'components/ReLink'
 import { RelativeTime } from 'components/RelativeTime'
 import { AddToOperationSetButton } from 'components/operation-set/AddToOperationSet'
 import { OperationRating } from 'components/viewer/OperationRating'
-import { OpDifficulty, Operation } from 'models/operation'
+import { OpDifficulty, Operation, OpRatingType } from 'models/operation'
 
 import { useLevels } from '../apis/level'
 import { createCustomLevel, findLevelByStageName } from '../models/level'
 import { Paragraphs } from './Paragraphs'
 import { EDifficulty } from './entity/EDifficulty'
 import { EDifficultyLevel, NeoELevel } from './entity/ELevel'
+import { useEffect } from 'react'
+import { useOperation } from 'apis/operation'
+import { AppToaster } from './Toaster'
+import { formatError } from 'utils/error'
 
-export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
+export const NeoOperationCard = ({operationId}:{operationId: Operation['id']}) => {
   const { data: levels } = useLevels()
+  const {
+    data: operation,
+    error,
+  } = useOperation({
+    id: operationId,
+    suspense: true,
+  })
+
+  // make eslint happy: we got Suspense out there
+  if (!operation) throw new Error('unreachable')
+
+  useEffect(() => {
+  }, [operation])
+
+  useEffect(() => {
+    if (error) {
+      AppToaster.show({
+        intent: 'danger',
+        message: `刷新作业失败：${formatError(error)}`,
+      })
+    }
+  }, [error])
 
   return (
     <Card interactive={true} elevation={Elevation.TWO} className="relative">
@@ -111,9 +137,32 @@ export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
   )
 }
 
-export const OperationCard = ({ operation }: { operation: Operation }) => {
+export const OperationCard = ({operationId}:{operationId: Operation['id']}) => {
   const { data: levels } = useLevels()
 
+  const {
+    data: operation,
+    error,
+  } = useOperation({
+    id: operationId,
+    suspense: true,
+  })
+
+  // make eslint happy: we got Suspense out there
+  if (!operation) throw new Error('unreachable')
+
+  useEffect(() => {
+  }, [operation])
+
+  useEffect(() => {
+    if (error) {
+      AppToaster.show({
+        intent: 'danger',
+        message: `刷新作业失败：${formatError(error)}`,
+      })
+    }
+  }, [error])
+
   return (
     <Card
       interactive={true}
@@ -240,39 +289,72 @@ const CardActions = ({
   operation: Operation
 }) => {
   return (
-    <div className={clsx('flex gap-1', className)}>
-      <Tooltip2
-        placement="bottom"
-        content={
-          <div className="max-w-sm dark:text-slate-900">下载原 JSON</div>
-        }
-      >
-        <Button
-          small
-          icon="download"
-          onClick={() => handleDownloadJSON(operation.parsedContent)}
-        />
-      </Tooltip2>
-      <Tooltip2
-        placement="bottom"
-        content={
-          <div className="max-w-sm dark:text-slate-900">复制神秘代码</div>
-        }
-      >
-        <Button
-          small
-          icon="clipboard"
-          onClick={() => copyShortCode(operation)}
-        />
-      </Tooltip2>
-      <Tooltip2
-        placement="bottom"
-        content={
-          <div className="max-w-sm dark:text-slate-900">添加到作业集</div>
-        }
-      >
-        <AddToOperationSetButton small icon="plus" operationId={operation.id} />
-      </Tooltip2>
-    </div>
+    <>
+      <div className={clsx('flex gap-1', className)}>
+        <Tooltip2
+          placement="bottom"
+          content={
+            <div className="max-w-sm dark:text-slate-900">下载原 JSON</div>
+          }
+        >
+          <Button
+            small
+            icon="download"
+            onClick={() => handleDownloadJSON(operation.parsedContent)}
+          />
+        </Tooltip2>
+        <Tooltip2
+          placement="bottom"
+          content={
+            <div className="max-w-sm dark:text-slate-900">复制神秘代码</div>
+          }
+        >
+          <Button
+            small
+            icon="clipboard"
+            onClick={() => copyShortCode(operation)}
+          />
+        </Tooltip2>
+        <Tooltip2
+          placement="bottom"
+          content={
+            <div className="max-w-sm dark:text-slate-900">添加到作业集</div>
+          }
+        >
+          <AddToOperationSetButton small icon="plus" operationId={operation.id} />
+        </Tooltip2>
+      </div>
+      <div className={clsx('mt-8 flex', className)}>
+        <ButtonGroup className="flex items-center">
+          <Tooltip2 content="o(*≧▽≦)ツ" placement="bottom">
+            <Button
+              small
+              icon="thumbs-up"
+              intent={
+                operation.ratingType === OpRatingType.Like
+                  ? 'success'
+                  : 'none'
+              }
+              className="mr-2"
+              active={operation.ratingType === OpRatingType.Like}
+              onClick={() => handleRating(operation.ratingType === OpRatingType.Like ? OpRatingType.None : OpRatingType.Like, operation.id)}
+            />
+          </Tooltip2>
+          <Tooltip2 content=" ヽ(。>д<)ｐ" placement="bottom">
+            <Button
+              small
+              icon="thumbs-down"
+              intent={
+                operation.ratingType === OpRatingType.Dislike
+                  ? 'danger'
+                  : 'none'
+              }
+              active={operation.ratingType === OpRatingType.Dislike}
+              onClick={() => handleRating(operation.ratingType === OpRatingType.Dislike ? OpRatingType.None : OpRatingType.Dislike, operation.id)}
+            />
+          </Tooltip2>
+        </ButtonGroup>
+      </div>
+    </>
   )
 }
diff --git a/src/components/OperationList.tsx b/src/components/OperationList.tsx
index a9890a8a..48d137f7 100644
--- a/src/components/OperationList.tsx
+++ b/src/components/OperationList.tsx
@@ -31,12 +31,12 @@ export const OperationList: ComponentType<UseOperationsParams> =
           }}
         >
           {operations.map((operation) => (
-            <NeoOperationCard operation={operation} key={operation.id} />
+            <NeoOperationCard operationId = {operation.id} key={operation.id} />
           ))}
         </div>
       ) : (
         operations.map((operation) => (
-          <OperationCard operation={operation} key={operation.id} />
+          <OperationCard operationId={operation.id} key={operation.id} />
         ))
       )
 
diff --git a/src/components/viewer/OperationViewer.tsx b/src/components/viewer/OperationViewer.tsx
index 085fd746..bf059a4d 100644
--- a/src/components/viewer/OperationViewer.tsx
+++ b/src/components/viewer/OperationViewer.tsx
@@ -17,14 +17,13 @@ import { ErrorBoundary } from '@sentry/react'
 
 import {
   deleteOperation,
-  rateOperation,
   useOperation,
   useRefreshOperations,
 } from 'apis/operation'
 import { useAtom } from 'jotai'
 import { ComponentType, FC, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { copyShortCode, handleDownloadJSON } from 'services/operation'
+import { copyShortCode, handleDownloadJSON, handleRating } from 'services/operation'
 
 import { FactItem } from 'components/FactItem'
 import { Paragraphs } from 'components/Paragraphs'
@@ -123,7 +122,6 @@ export const OperationViewer: ComponentType<{
     const {
       data: operation,
       error,
-      mutate,
     } = useOperation({
       id: operationId,
       suspense: true,
@@ -131,6 +129,7 @@ export const OperationViewer: ComponentType<{
 
     useEffect(() => {
       // on finished loading, scroll to #fragment if any
+      console.log("update operation")
       if (operation) {
         const fragment = window.location.hash
         if (fragment) {
@@ -158,24 +157,6 @@ export const OperationViewer: ComponentType<{
       }
     }, [error])
 
-    const handleRating = async (decision: OpRatingType) => {
-      // cancel rating if already rated by the same type
-      if (decision === operation.ratingType) {
-        decision = OpRatingType.None
-      }
-
-      wrapErrorMessage(
-        (e) => `提交评分失败：${formatError(e)}`,
-        mutate(async (val) => {
-          await rateOperation({
-            id: operationId,
-            rating: decision,
-          })
-          return val
-        }),
-      ).catch(console.warn)
-    }
-
     return (
       <DrawerLayout
         title={
@@ -233,7 +214,6 @@ export const OperationViewer: ComponentType<{
           <OperationViewerInner
             levels={levels}
             operation={operation}
-            handleRating={handleRating}
           />
         </ErrorBoundary>
       </DrawerLayout>
@@ -276,11 +256,9 @@ const EmptyOperator: FC<{
 function OperationViewerInner({
   levels,
   operation,
-  handleRating,
 }: {
   levels: Level[]
   operation: Operation
-  handleRating: (decision: OpRatingType) => Promise<void>
 }) {
   return (
     <div className="h-full overflow-auto py-4 px-8 pt-8">
@@ -318,7 +296,10 @@ function OperationViewerInner({
                   }
                   className="mr-2"
                   active={operation.ratingType === OpRatingType.Like}
-                  onClick={() => handleRating(OpRatingType.Like)}
+                  onClick={() => {
+                    var type = operation.ratingType === OpRatingType.Like ? OpRatingType.None : OpRatingType.Like;
+                    handleRating(type, operation.id)
+                  }}
                 />
               </Tooltip2>
               <Tooltip2 content=" ヽ(。>д<)ｐ" placement="bottom">
@@ -330,7 +311,10 @@ function OperationViewerInner({
                       : 'none'
                   }
                   active={operation.ratingType === OpRatingType.Dislike}
-                  onClick={() => handleRating(OpRatingType.Dislike)}
+                  onClick={() => {
+                    var type = operation.ratingType === OpRatingType.Dislike ? OpRatingType.None : OpRatingType.Dislike;
+                    handleRating(type, operation.id)
+                  }}
                 />
               </Tooltip2>
             </ButtonGroup>
diff --git a/src/services/operation.ts b/src/services/operation.ts
index 2ee7bb5f..ac9bffde 100644
--- a/src/services/operation.ts
+++ b/src/services/operation.ts
@@ -4,6 +4,10 @@ import { CopilotDocV1 } from '../models/copilot.schema'
 import { ShortCodeContent, toShortCode } from '../models/shortCode'
 import { formatError } from '../utils/error'
 import { snakeCaseKeysUnicode } from '../utils/object'
+import { wrapErrorMessage } from 'utils/wrapErrorMessage'
+import { OpRatingType } from 'models/operation'
+import { rateOperation } from 'apis/operation'
+import { mutate } from 'swr'
 
 export const handleDownloadJSON = (operationDoc: CopilotDocV1.Operation) => {
   // pretty print the JSON
@@ -52,3 +56,33 @@ export const copyShortCode = async (target: { id: number }) => {
     })
   }
 }
+
+export const handleRating = async (decision: OpRatingType, operationId: number) => {
+  const getMessage = (decision: OpRatingType): string => {
+    switch (decision) {
+      case OpRatingType.None:
+        return '已取消评价~';
+      case OpRatingType.Like:
+        return '已点赞~';
+      case OpRatingType.Dislike:
+        return '已点踩~';
+      default:
+        return '未知评价';
+    }
+  };
+  const message = getMessage(decision);
+  AppToaster.show({
+    message: message,
+    intent: 'success',
+  })
+  wrapErrorMessage(
+    (e) => `提交评分失败：${formatError(e)}`,
+    mutate(async (val) => {
+      await rateOperation({
+        id: operationId,
+        rating: decision,
+      })
+      return val
+    }),
+  ).catch(console.warn)
+}

From d6e997ced728743cdc8b105d1f3c271a3bca0491 Mon Sep 17 00:00:00 2001
From: lauirf <592184299@qq.com>
Date: Tue, 4 Feb 2025 11:19:23 +0800
Subject: [PATCH 2/4] remove unnecessary useEffect

---
 src/components/OperationCard.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/OperationCard.tsx b/src/components/OperationCard.tsx
index 2f9ff430..bcfb6ef1 100644
--- a/src/components/OperationCard.tsx
+++ b/src/components/OperationCard.tsx
@@ -33,9 +33,6 @@ export const NeoOperationCard = ({operationId}:{operationId: Operation['id']}) =
   // make eslint happy: we got Suspense out there
   if (!operation) throw new Error('unreachable')
 
-  useEffect(() => {
-  }, [operation])
-
   useEffect(() => {
     if (error) {
       AppToaster.show({
@@ -151,9 +148,6 @@ export const OperationCard = ({operationId}:{operationId: Operation['id']}) => {
   // make eslint happy: we got Suspense out there
   if (!operation) throw new Error('unreachable')
 
-  useEffect(() => {
-  }, [operation])
-
   useEffect(() => {
     if (error) {
       AppToaster.show({

From a8f019d87c4d63d9d07c7007d3b24626d7d348b7 Mon Sep 17 00:00:00 2001
From: lauirf <592184299@qq.com>
Date: Thu, 6 Feb 2025 16:31:17 +0800
Subject: [PATCH 3/4] fix mutate key

---
 src/components/OperationCard.tsx          | 6 +++---
 src/components/OperationList.tsx          | 2 +-
 src/components/viewer/OperationViewer.tsx | 5 ++---
 src/services/operation.ts                 | 2 +-
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/OperationCard.tsx b/src/components/OperationCard.tsx
index bcfb6ef1..d62bdc8d 100644
--- a/src/components/OperationCard.tsx
+++ b/src/components/OperationCard.tsx
@@ -20,7 +20,7 @@ import { useOperation } from 'apis/operation'
 import { AppToaster } from './Toaster'
 import { formatError } from 'utils/error'
 
-export const NeoOperationCard = ({operationId}:{operationId: Operation['id']}) => {
+export const NeoOperationCard = ({ operationId }: { operationId: Operation['id'] }) => {
   const { data: levels } = useLevels()
   const {
     data: operation,
@@ -134,7 +134,7 @@ export const NeoOperationCard = ({operationId}:{operationId: Operation['id']}) =
   )
 }
 
-export const OperationCard = ({operationId}:{operationId: Operation['id']}) => {
+export const OperationCard = ({ operationId }: { operationId: Operation['id'] }) => {
   const { data: levels } = useLevels()
 
   const {
@@ -351,4 +351,4 @@ const CardActions = ({
       </div>
     </>
   )
-}
+}
\ No newline at end of file
diff --git a/src/components/OperationList.tsx b/src/components/OperationList.tsx
index 48d137f7..edab0c1d 100644
--- a/src/components/OperationList.tsx
+++ b/src/components/OperationList.tsx
@@ -31,7 +31,7 @@ export const OperationList: ComponentType<UseOperationsParams> =
           }}
         >
           {operations.map((operation) => (
-            <NeoOperationCard operationId = {operation.id} key={operation.id} />
+            <NeoOperationCard operationId={operation.id} key={operation.id} />
           ))}
         </div>
       ) : (
diff --git a/src/components/viewer/OperationViewer.tsx b/src/components/viewer/OperationViewer.tsx
index bf059a4d..d9691e38 100644
--- a/src/components/viewer/OperationViewer.tsx
+++ b/src/components/viewer/OperationViewer.tsx
@@ -129,7 +129,6 @@ export const OperationViewer: ComponentType<{
 
     useEffect(() => {
       // on finished loading, scroll to #fragment if any
-      console.log("update operation")
       if (operation) {
         const fragment = window.location.hash
         if (fragment) {
@@ -297,7 +296,7 @@ function OperationViewerInner({
                   className="mr-2"
                   active={operation.ratingType === OpRatingType.Like}
                   onClick={() => {
-                    var type = operation.ratingType === OpRatingType.Like ? OpRatingType.None : OpRatingType.Like;
+                    const type = operation.ratingType === OpRatingType.Like ? OpRatingType.None : OpRatingType.Like;
                     handleRating(type, operation.id)
                   }}
                 />
@@ -312,7 +311,7 @@ function OperationViewerInner({
                   }
                   active={operation.ratingType === OpRatingType.Dislike}
                   onClick={() => {
-                    var type = operation.ratingType === OpRatingType.Dislike ? OpRatingType.None : OpRatingType.Dislike;
+                    const type = operation.ratingType === OpRatingType.Dislike ? OpRatingType.None : OpRatingType.Dislike;
                     handleRating(type, operation.id)
                   }}
                 />
diff --git a/src/services/operation.ts b/src/services/operation.ts
index ac9bffde..1e30ce15 100644
--- a/src/services/operation.ts
+++ b/src/services/operation.ts
@@ -77,7 +77,7 @@ export const handleRating = async (decision: OpRatingType, operationId: number)
   })
   wrapErrorMessage(
     (e) => `提交评分失败：${formatError(e)}`,
-    mutate(async (val) => {
+    mutate(['operation', operationId], async (val) => {
       await rateOperation({
         id: operationId,
         rating: decision,

From 2a360efb24db90f9f0d763ad2bcf7f4c31753620 Mon Sep 17 00:00:00 2001
From: lauirf <592184299@qq.com>
Date: Fri, 7 Feb 2025 21:41:22 +0800
Subject: [PATCH 4/4] remove useOperation

---
 src/apis/operation.ts            |  6 ++-
 src/components/OperationCard.tsx | 64 ++++++++------------------------
 src/components/OperationList.tsx | 31 +++++++++++++---
 3 files changed, 46 insertions(+), 55 deletions(-)

diff --git a/src/apis/operation.ts b/src/apis/operation.ts
index d2378b49..2319aaf2 100644
--- a/src/apis/operation.ts
+++ b/src/apis/operation.ts
@@ -44,6 +44,7 @@ export function useOperations({
     data: pages,
     setSize,
     isValidating,
+    mutate
   } = useSWRInfinite(
     (pageIndex, previousPage: { hasNext: boolean }) => {
       if (disabled) {
@@ -128,8 +129,8 @@ export function useOperations({
   // 按 operationIds 的顺序排序
   const operations = operationIds?.length
     ? operationIds
-        ?.map((id) => _operations?.find((v) => v.id === id))
-        .filter((v) => !!v)
+      ?.map((id) => _operations?.find((v) => v.id === id))
+      .filter((v) => !!v)
     : _operations
 
   return {
@@ -138,6 +139,7 @@ export function useOperations({
     setSize,
     isValidating,
     isReachingEnd,
+    mutate
   }
 }
 
diff --git a/src/components/OperationCard.tsx b/src/components/OperationCard.tsx
index d62bdc8d..a19a59d1 100644
--- a/src/components/OperationCard.tsx
+++ b/src/components/OperationCard.tsx
@@ -15,32 +15,9 @@ import { createCustomLevel, findLevelByStageName } from '../models/level'
 import { Paragraphs } from './Paragraphs'
 import { EDifficulty } from './entity/EDifficulty'
 import { EDifficultyLevel, NeoELevel } from './entity/ELevel'
-import { useEffect } from 'react'
-import { useOperation } from 'apis/operation'
-import { AppToaster } from './Toaster'
-import { formatError } from 'utils/error'
 
-export const NeoOperationCard = ({ operationId }: { operationId: Operation['id'] }) => {
+export const NeoOperationCard = ({ operation, updateOperation }: { operation: Operation, updateOperation: (id: number, type: number) => Promise<void> }) => {
   const { data: levels } = useLevels()
-  const {
-    data: operation,
-    error,
-  } = useOperation({
-    id: operationId,
-    suspense: true,
-  })
-
-  // make eslint happy: we got Suspense out there
-  if (!operation) throw new Error('unreachable')
-
-  useEffect(() => {
-    if (error) {
-      AppToaster.show({
-        intent: 'danger',
-        message: `刷新作业失败：${formatError(error)}`,
-      })
-    }
-  }, [error])
 
   return (
     <Card interactive={true} elevation={Elevation.TWO} className="relative">
@@ -129,34 +106,14 @@ export const NeoOperationCard = ({ operationId }: { operationId: Operation['id']
         </div>
       </ReLink>
 
-      <CardActions className="absolute top-4 right-4" operation={operation} />
+      <CardActions className="absolute top-4 right-4" operation={operation} updateOperation={updateOperation} />
     </Card>
   )
 }
 
-export const OperationCard = ({ operationId }: { operationId: Operation['id'] }) => {
+export const OperationCard = ({ operation, updateOperation }: { operation: Operation, updateOperation: (id: number, type: number) => Promise<void> }) => {
   const { data: levels } = useLevels()
 
-  const {
-    data: operation,
-    error,
-  } = useOperation({
-    id: operationId,
-    suspense: true,
-  })
-
-  // make eslint happy: we got Suspense out there
-  if (!operation) throw new Error('unreachable')
-
-  useEffect(() => {
-    if (error) {
-      AppToaster.show({
-        intent: 'danger',
-        message: `刷新作业失败：${formatError(error)}`,
-      })
-    }
-  }, [error])
-
   return (
     <Card
       interactive={true}
@@ -240,6 +197,7 @@ export const OperationCard = ({ operationId }: { operationId: Operation['id'] })
       <CardActions
         className="absolute top-4 xl:top-12 right-[18px]"
         operation={operation}
+        updateOperation={updateOperation}
       />
     </Card>
   )
@@ -278,9 +236,11 @@ const OperatorTags = ({ operation }: { operation: Operation }) => {
 const CardActions = ({
   className,
   operation,
+  updateOperation,
 }: {
   className?: string
   operation: Operation
+  updateOperation: (id: number, type: number) => Promise<void>
 }) => {
   return (
     <>
@@ -331,7 +291,11 @@ const CardActions = ({
               }
               className="mr-2"
               active={operation.ratingType === OpRatingType.Like}
-              onClick={() => handleRating(operation.ratingType === OpRatingType.Like ? OpRatingType.None : OpRatingType.Like, operation.id)}
+              onClick={() => {
+                const type = operation.ratingType === OpRatingType.Like ? OpRatingType.None : OpRatingType.Like
+                handleRating(type, operation.id)
+                updateOperation(operation.id, type)
+              }}
             />
           </Tooltip2>
           <Tooltip2 content=" ヽ(。>д<)ｐ" placement="bottom">
@@ -344,7 +308,11 @@ const CardActions = ({
                   : 'none'
               }
               active={operation.ratingType === OpRatingType.Dislike}
-              onClick={() => handleRating(operation.ratingType === OpRatingType.Dislike ? OpRatingType.None : OpRatingType.Dislike, operation.id)}
+              onClick={() => {
+                const type = operation.ratingType === OpRatingType.Dislike ? OpRatingType.None : OpRatingType.Dislike
+                handleRating(type, operation.id)
+                updateOperation(operation.id, type)
+              }}
             />
           </Tooltip2>
         </ButtonGroup>
diff --git a/src/components/OperationList.tsx b/src/components/OperationList.tsx
index edab0c1d..2e74b90b 100644
--- a/src/components/OperationList.tsx
+++ b/src/components/OperationList.tsx
@@ -13,8 +13,7 @@ export const OperationList: ComponentType<UseOperationsParams> =
   withSuspensable(
     (props) => {
       const neoLayout = useAtomValue(neoLayoutAtom)
-
-      const { operations, setSize, isValidating, isReachingEnd } =
+      const { operations, setSize, isValidating, isReachingEnd, mutate } =
         useOperations({
           ...props,
           suspense: true,
@@ -23,6 +22,28 @@ export const OperationList: ComponentType<UseOperationsParams> =
       // make TS happy: we got Suspense out there
       if (!operations) throw new Error('unreachable')
 
+      const updateOperation = async (id, ratingType) => {
+        mutate((val) => {
+          if (!val || !Array.isArray(val)) return val;
+          return val.map((page) => {
+            if ('data' in page && Array.isArray(page.data)) {
+              const updatedData = page.data.map((operation) =>
+                operation.id === id
+                  ? { ...operation, ratingType: ratingType }
+                  : operation
+              );
+              return {
+                ...page,
+                data: updatedData,
+                page: ('page' in page ? page.page : 1),
+                total: ('total' in page ? page.total : 0),
+              };
+            }
+            return page;
+          });
+        }, false);
+      }
+
       const items: ReactNode = neoLayout ? (
         <div
           className="grid gap-4"
@@ -31,12 +52,12 @@ export const OperationList: ComponentType<UseOperationsParams> =
           }}
         >
           {operations.map((operation) => (
-            <NeoOperationCard operationId={operation.id} key={operation.id} />
+            <NeoOperationCard operation={operation} key={operation.id} updateOperation={updateOperation} />
           ))}
         </div>
       ) : (
         operations.map((operation) => (
-          <OperationCard operationId={operation.id} key={operation.id} />
+          <OperationCard operation={operation} key={operation.id} updateOperation={updateOperation} />
         ))
       )
 
@@ -75,4 +96,4 @@ export const OperationList: ComponentType<UseOperationsParams> =
     {
       retryOnChange: ['orderBy', 'keyword', 'levelKeyword', 'operator'],
     },
-  )
+  )
\ No newline at end of file