🐞 fix(视频列表): 删除视频或UP时，刷新列表

Author: Darcrandex

src/components/BVListItem/index.tsx

@@ -4,22 +4,21 @@
  * @author darcrand
  */
 
-import { hasSameKeys, pickVideoInfo } from '@/components/DownloadModal/utils'
-import { mediaService } from '@/services/media'
+import { ALL_BV_DATA_KEY } from '@/queries/useAllBVData'
 import type { BVItemFromFile } from '@/types/global'
 import UImage from '@/ui/UImage'
 import { cls } from '@/utils/cls'
 import { formatSeconds } from '@/utils/common'
-import { DatabaseOutlined, DeleteOutlined, FolderOpenOutlined, LinkOutlined, MoreOutlined } from '@ant-design/icons'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { removeDir, writeTextFile } from '@tauri-apps/api/fs'
+import { DeleteOutlined, FolderOpenOutlined, LinkOutlined, MoreOutlined } from '@ant-design/icons'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { removeDir } from '@tauri-apps/api/fs'
 import { open as openShell } from '@tauri-apps/api/shell'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
-import { Button, Dropdown, Modal } from 'antd'
+import { App, Button, Dropdown, Modal } from 'antd'
 import dayjs from 'dayjs'
 import * as R from 'ramda'
 import { useMemo, useState } from 'react'
-import { NavLink, useNavigate } from 'react-router-dom'
+import { NavLink } from 'react-router-dom'
 
 export type BVListItemProps = {
   data: BVItemFromFile
@@ -29,6 +28,7 @@ export type BVListItemProps = {
 
 export default function BVListItem(props: BVListItemProps) {
   const { videoInfo, bvid, path: bvPath, children } = props.data
+  const { message } = App.useApp()
 
   const dateLabel = useMemo(() => {
     if (!videoInfo) return ''
@@ -68,34 +68,20 @@ export default function BVListItem(props: BVListItemProps) {
     await openShell(`https://www.bilibili.com/video/${bvid}`)
   }
 
-  const navigate = useNavigate()
   const queryClient = useQueryClient()
   const [openRemove, setOpenRemove] = useState(false)
 
-  const removeVideoFolder = async () => {
-    await removeDir(bvPath, { recursive: true })
-    setOpenRemove(false)
-    queryClient.invalidateQueries({ queryKey: ['bv', 'all'] })
-    navigate('/home/space')
-  }
+  const removeMutation = useMutation({
+    mutationFn: () => removeDir(bvPath, { recursive: true }),
+    onSuccess() {
+      message.success('视频删除成功')
+      setOpenRemove(false)
+      queryClient.invalidateQueries({ queryKey: ALL_BV_DATA_KEY })
+    }
+  })
 
   const pageCount = children?.filter((v) => v.name?.endsWith('.mp4')).length || 0
 
-  // 优化功能
-  // 对应 videoInfo 进行压缩
-  const infoCompressed = hasSameKeys(videoInfo)
-  const compressInfo = async () => {
-    // 重新获取最新的视频信息
-    const latestInfo = await mediaService.info(bvid || '')
-
-    const compressed = pickVideoInfo(latestInfo)
-    const jsonFilePath = children?.find((v) => v.name?.endsWith('.json'))?.path
-    if (jsonFilePath) {
-      await writeTextFile(jsonFilePath, JSON.stringify(compressed))
-      queryClient.invalidateQueries({ queryKey: ['bv', 'all'] })
-    }
-  }
-
   return (
     <>
       <article className={cls(props.className)}>
@@ -142,27 +128,21 @@ export default function BVListItem(props: BVListItemProps) {
                   label: '从B站打开',
                   onClick: openInBrowser
                 },
-                { key: 'remove', icon: <DeleteOutlined />, label: '删除文件夹', onClick: () => setOpenRemove(true) },
-                {
-                  key: 'compress',
-                  icon: <DatabaseOutlined />,
-                  disabled: infoCompressed,
-                  label: '压缩视频信息',
-                  onClick: compressInfo
-                }
+                { key: 'remove', icon: <DeleteOutlined />, label: '删除文件夹', onClick: () => setOpenRemove(true) }
               ]
             }}
           >
-            <Button
-              shape='circle'
-              type='text'
-              icon={<MoreOutlined className={cls(!infoCompressed && 'text-red-500')} />}
-            />
+            <Button shape='circle' type='text' icon={<MoreOutlined />} />
           </Dropdown>
         </div>
       </article>
 
-      <Modal title='删除文件夹' open={openRemove} onCancel={() => setOpenRemove(false)} onOk={removeVideoFolder}>
+      <Modal
+        title='删除文件夹'
+        open={openRemove}
+        onCancel={() => setOpenRemove(false)}
+        onOk={() => removeMutation.mutateAsync()}
+      >
         <p>当前的 BV 视频文件夹中的所有文件都会被删除噢</p>
         <p>确定要删除文件夹吗？</p>
       </Modal>

src/main.tsx

@@ -1,6 +1,6 @@
 import { StyleProvider } from '@ant-design/cssinjs'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ConfigProvider } from 'antd'
+import { App as AntdApp, ConfigProvider } from 'antd'
 import zhCN from 'antd/locale/zh_CN'
 import 'dayjs/locale/zh-cn'
 import ReactDOM from 'react-dom/client'
@@ -23,7 +23,9 @@ ReactDOM.createRoot(root).render(
     <QueryClientProvider client={client}>
       <ConfigProvider locale={zhCN} theme={{ token: { colorPrimary: '#fb7299', colorLink: '#fb7299' } }}>
         <StyleProvider hashPriority='high'>
-          <App />
+          <AntdApp>
+            <App />
+          </AntdApp>
         </StyleProvider>
       </ConfigProvider>
     </QueryClientProvider>

src/pages/root/home/space/[id]/index.tsx

@@ -6,7 +6,7 @@
 
 import BVListItem from '@/components/BVListItem'
 import { useRootDirPath } from '@/hooks/use-root-dir-path'
-import { useAllBVData } from '@/queries/useAllBVData'
+import { ALL_BV_DATA_KEY, useAllBVData } from '@/queries/useAllBVData'
 import { fsService } from '@/services/fs'
 import { userService } from '@/services/user'
 import { useSetCachedUrl } from '@/stores/use-cached-url'
@@ -15,10 +15,10 @@ import UEmpty from '@/ui/UEmpty'
 import UImage from '@/ui/UImage'
 import useUrlState from '@ahooksjs/use-url-state'
 import { DeleteOutlined, FolderOpenOutlined, MoreOutlined } from '@ant-design/icons'
-import { useIsFetching, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useIsFetching, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { removeDir } from '@tauri-apps/api/fs'
 import { open as openShell } from '@tauri-apps/api/shell'
-import { Button, Dropdown, Input, Modal, Pagination } from 'antd'
+import { App, Button, Dropdown, Input, Modal, Pagination } from 'antd'
 import QueryString from 'qs'
 import * as R from 'ramda'
 import { useEffect, useState } from 'react'
@@ -27,6 +27,7 @@ import { useNavigate, useParams } from 'react-router-dom'
 const PAGE_SIZE = 24
 
 export default function SpacePage() {
+  const { message } = App.useApp()
   const rootDirPath = useRootDirPath()
   const { data: allData } = useAllBVData(rootDirPath)
   const isLoading = useIsFetching() > 0
@@ -96,16 +97,26 @@ export default function SpacePage() {
   const navigate = useNavigate()
   const queryClient = useQueryClient()
 
-  const removeOwnerFolder = async () => {
-    const matched = ownerDirs?.find((v) => v.mid === id)
-    if (matched?.path) {
-      await removeDir(matched?.path, { recursive: true })
+  const removeMutation = useMutation({
+    mutationFn: async () => {
+      const matched = ownerDirs?.find((v) => v.mid === id)
+      if (matched?.path) {
+        await removeDir(matched?.path, { recursive: true })
+      } else {
+        throw new Error('no path')
+      }
+    },
+    onError() {
+      message.error('删除失败')
+    },
+    onSuccess() {
+      message.success('UP主删除成功')
       setOpenRemove(false)
-      queryClient.invalidateQueries({ queryKey: ['bv', 'all-in-one'] })
+      queryClient.invalidateQueries({ queryKey: ALL_BV_DATA_KEY })
       queryClient.invalidateQueries({ queryKey: ['bv', 'all'] })
       navigate('/home/space')
     }
-  }
+  })
 
   return (
     <>
@@ -189,7 +200,12 @@ export default function SpacePage() {
         </footer>
       </div>
 
-      <Modal title='删除文件夹' open={openRemove} onCancel={() => setOpenRemove(false)} onOk={removeOwnerFolder}>
+      <Modal
+        title='删除文件夹'
+        open={openRemove}
+        onCancel={() => setOpenRemove(false)}
+        onOk={() => removeMutation.mutateAsync()}
+      >
         <p>确定要删除文件夹吗？</p>
         <p>这个 Up 所有的视频都会被删除哦</p>
       </Modal>

src/queries/useAllBVData.ts

@@ -1,11 +1,14 @@
 import { fsService } from '@/services/fs'
 import { useQuery } from '@tanstack/react-query'
 
+// allBVDataKey to uppercase
+export const ALL_BV_DATA_KEY = ['bv', 'all-in-one']
+
 // 将 UP 主列表和 BV 列表整合在一起
 export function useAllBVData(rootDirPath?: string) {
   const { data } = useQuery({
     enabled: !!rootDirPath,
-    queryKey: ['bv', 'all-in-one', rootDirPath],
+    queryKey: ALL_BV_DATA_KEY.concat(rootDirPath || ''),
     queryFn: () => fsService.getAllBVData(rootDirPath || '')
   })