feat: add rating in card

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
   }
 }
 

src/components/OperationCard.tsx

@@ -1,22 +1,22 @@
-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'
 
-export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
+export const NeoOperationCard = ({ operation, updateOperation }: { operation: Operation, updateOperation: (id: number, type: number) => Promise<void> }) => {
   const { data: levels } = useLevels()
 
   return (
@@ -106,12 +106,12 @@ export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
         </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 = ({ operation }: { operation: Operation }) => {
+export const OperationCard = ({ operation, updateOperation }: { operation: Operation, updateOperation: (id: number, type: number) => Promise<void> }) => {
   const { data: levels } = useLevels()
 
   return (
@@ -197,6 +197,7 @@ export const OperationCard = ({ operation }: { operation: Operation }) => {
       <CardActions
         className="absolute top-4 xl:top-12 right-[18px]"
         operation={operation}
+        updateOperation={updateOperation}
       />
     </Card>
   )
@@ -235,44 +236,87 @@ const OperatorTags = ({ operation }: { operation: Operation }) => {
 const CardActions = ({
   className,
   operation,
+  updateOperation,
 }: {
   className?: string
   operation: Operation
+  updateOperation: (id: number, type: number) => Promise<void>
 }) => {
   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={() => {
+                const type = operation.ratingType === OpRatingType.Like ? OpRatingType.None : OpRatingType.Like
+                handleRating(type, operation.id)
+                updateOperation(operation.id, type)
+              }}
+            />
+          </Tooltip2>
+          <Tooltip2 content=" ヽ(。>д<)ｐ" placement="bottom">
+            <Button
+              small
+              icon="thumbs-down"
+              intent={
+                operation.ratingType === OpRatingType.Dislike
+                  ? 'danger'
+                  : 'none'
+              }
+              active={operation.ratingType === OpRatingType.Dislike}
+              onClick={() => {
+                const type = operation.ratingType === OpRatingType.Dislike ? OpRatingType.None : OpRatingType.Dislike
+                handleRating(type, operation.id)
+                updateOperation(operation.id, type)
+              }}
+            />
+          </Tooltip2>
+        </ButtonGroup>
+      </div>
+    </>
   )
-}
+}

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 operation={operation} key={operation.id} />
+            <NeoOperationCard operation={operation} key={operation.id} updateOperation={updateOperation} />
           ))}
         </div>
       ) : (
         operations.map((operation) => (
-          <OperationCard operation={operation} 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'],
     },
-  )
+  )

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,
@@ -158,24 +156,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 +213,6 @@ export const OperationViewer: ComponentType<{
           <OperationViewerInner
             levels={levels}
             operation={operation}
-            handleRating={handleRating}
           />
         </ErrorBoundary>
       </DrawerLayout>
@@ -276,11 +255,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 +295,10 @@ function OperationViewerInner({
                   }
                   className="mr-2"
                   active={operation.ratingType === OpRatingType.Like}
-                  onClick={() => handleRating(OpRatingType.Like)}
+                  onClick={() => {
+                    const type = operation.ratingType === OpRatingType.Like ? OpRatingType.None : OpRatingType.Like;
+                    handleRating(type, operation.id)
+                  }}
                 />
               </Tooltip2>
               <Tooltip2 content=" ヽ(。>д<)ｐ" placement="bottom">
@@ -330,7 +310,10 @@ function OperationViewerInner({
                       : 'none'
                   }
                   active={operation.ratingType === OpRatingType.Dislike}
-                  onClick={() => handleRating(OpRatingType.Dislike)}
+                  onClick={() => {
+                    const type = operation.ratingType === OpRatingType.Dislike ? OpRatingType.None : OpRatingType.Dislike;
+                    handleRating(type, operation.id)
+                  }}
                 />
               </Tooltip2>
             </ButtonGroup>

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(['operation', operationId], async (val) => {
+      await rateOperation({
+        id: operationId,
+        rating: decision,
+      })
+      return val
+    }),
+  ).catch(console.warn)
+}