Merge pull request #180 from ssoda01/feature/add-index-download-btn

Author: GalvinGao

src/components/OperationCard.tsx

@@ -1,4 +1,5 @@
 import {
+  Button,
   Card,
   Drawer,
   DrawerSize,
@@ -11,6 +12,7 @@ import {
 import { Tooltip2 } from '@blueprintjs/popover2'
 
 import { useState } from 'react'
+import { handleCopyShortCode, handleDownloadJSON } from 'services/operation'
 
 import { RelativeTime } from 'components/RelativeTime'
 import { OperationRating } from 'components/viewer/OperationRating'
@@ -32,6 +34,7 @@ export const OperationCard = ({
 }) => {
   const levels = useLevels()?.data?.data || []
   const [drawerOpen, setDrawerOpen] = useState(false)
+
   return (
     <>
       <Drawer
@@ -52,9 +55,37 @@ export const OperationCard = ({
         onClick={() => setDrawerOpen(true)}
       >
         <div className="flex items-start">
-          <H4 className="inline-block pb-1 border-b-2 border-zinc-200 border-solid mb-2">
+          <H4 className="inline-block pb-1 border-b-2 border-zinc-200 border-solid mb-2 mr-2">
             {operationDoc.doc.title}
           </H4>
+          <Tooltip2
+            placement="bottom"
+            content={<div className="max-w-sm">下载原 JSON</div>}
+          >
+            <Button
+              small
+              className="mr-2 mb-2"
+              icon="download"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleDownloadJSON(operationDoc)
+              }}
+            />
+          </Tooltip2>
+          <Tooltip2
+            placement="bottom"
+            content={<div className="max-w-sm">复制神秘代码</div>}
+          >
+            <Button
+              small
+              className="mb-2"
+              icon="clipboard"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleCopyShortCode(operation)
+              }}
+            />
+          </Tooltip2>
           <div className="flex-1" />
           <div className="flex flex-col items-end">
             <div className="w-full flex justify-end text-zinc-500">

src/components/Toaster.tsx

@@ -2,4 +2,5 @@ import { Position, Toaster } from '@blueprintjs/core'
 
 export const AppToaster = Toaster.create({
   position: Position.BOTTOM_LEFT,
+  className: '!fixed',
 })

src/components/viewer/OperationViewer.tsx

@@ -22,6 +22,7 @@ import { useAtom } from 'jotai'
 import { noop } from 'lodash-es'
 import { ComponentType, FC, useEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
+import { handleCopyShortCode, handleDownloadJSON } from 'services/operation'
 
 import { FactItem } from 'components/FactItem'
 import { Paragraphs } from 'components/Paragraphs'
@@ -141,39 +142,6 @@ export const OperationViewer: ComponentType<{
       }
     }, [error])
 
-    const handleCopyShortCode = () => {
-      const shortCode = toShortCode(operation.id)
-      navigator.clipboard.writeText(shortCode)
-
-      AppToaster.show({
-        message: '已复制神秘代码，前往 MAA 粘贴即可使用~',
-        intent: 'success',
-      })
-    }
-
-    const handleDownloadJSON = () => {
-      // pretty print the JSON
-      const json = JSON.stringify(
-        snakeCaseKeysUnicode(operationDoc, { deep: true }),
-        null,
-        2,
-      )
-      const blob = new Blob([json], {
-        type: 'application/json',
-      })
-      const url = URL.createObjectURL(blob)
-      const link = document.createElement('a')
-      link.href = url
-      link.download = `MAACopilot_${operationDoc.doc.title}.json`
-      link.click()
-      URL.revokeObjectURL(url)
-
-      AppToaster.show({
-        message: '已下载作业 JSON 文件，前往 MAA 选择即可使用~',
-        intent: 'success',
-      })
-    }
-
     const handleRating = async (decision: OpRatingType) => {
       // cancel rating if already rated by the same type
       if (decision === operation.ratingType) {
@@ -220,15 +188,15 @@ export const OperationViewer: ComponentType<{
               className="ml-4"
               icon="download"
               text="下载原 JSON"
-              onClick={handleDownloadJSON}
+              onClick={() => handleDownloadJSON(operationDoc)}
             />
 
             <Button
               className="ml-4"
               icon="clipboard"
               text="复制神秘代码"
               intent="primary"
-              onClick={handleCopyShortCode}
+              onClick={() => handleCopyShortCode(operation)}
             />
           </>
         }

src/services/operation.ts

@@ -0,0 +1,39 @@
+import { AppToaster } from 'components/Toaster'
+
+import { CopilotDocV1 } from '../models/copilot.schema'
+import { OperationListItem } from '../models/operation'
+import { toShortCode } from '../models/shortCode'
+import { snakeCaseKeysUnicode } from '../utils/object'
+
+export const handleDownloadJSON = (operationDoc: CopilotDocV1.Operation) => {
+  // pretty print the JSON
+  const json = JSON.stringify(
+    snakeCaseKeysUnicode(operationDoc, { deep: true }),
+    null,
+    2,
+  )
+  const blob = new Blob([json], {
+    type: 'application/json',
+  })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `MAACopilot_${operationDoc.doc.title}.json`
+  link.click()
+  URL.revokeObjectURL(url)
+
+  AppToaster.show({
+    message: '已下载作业 JSON 文件，前往 MAA 选择即可使用~',
+    intent: 'success',
+  })
+}
+
+export const handleCopyShortCode = (operation: OperationListItem) => {
+  const shortCode = toShortCode(operation.id)
+  navigator.clipboard.writeText(shortCode)
+
+  AppToaster.show({
+    message: '已复制神秘代码，前往 MAA 粘贴即可使用~',
+    intent: 'success',
+  })
+}