fix

crustio · Dec 23, 2024 · acee96e · acee96e
1 parent c0a6d99
commit acee96e
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 21 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -14,5 +14,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    "@typescript-eslint/no-explicit-any": "off"
   },
 }
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "axios": "^1.7.2",
     "classnames": "^2.5.1",
     "dotenv": "^16.4.5",
+    "file-saver": "^2.0.5",
     "qrcode": "^1.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -22,6 +23,7 @@
     "sonner": "^1.3.1"
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
     "@types/node-telegram-bot-api": "^0.61.4",
     "@types/qrcode": "^1.5.0",
     "@types/react": "^18.3.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ATable.tsx b/src/components/ATable.tsx
@@ -1,44 +1,60 @@
-import { FC, useEffect } from "react";
+import classNames from "classnames";
+import FileSaver from 'file-saver';
+import React, { useRef } from "react";
 import { data } from "../pages/files";
 import { copyTextToClipboard, formatBytes, timestampToDateTime, truncateMiddle } from "../utils/utils";
 import { Loading } from "./ALoading";
-import classNames from "classnames";
 type ATableProps = {
     header: { name: string, className?: string }[]
     data?: data[]
     loading?: boolean
     className?: string
 }
 
-const ATable: FC<ATableProps> = ({ header = [], data = [], loading, className }) => {
+export type ATableRef = { scroll: (to: 'start' | 'end') => void }
+const ATable = React.forwardRef(({ header = [], data = [], loading, className }: ATableProps, ref?: React.ForwardedRef<ATableRef>) => {
 
     const fileHost = (item: data) => {
         const cru_host = 'https://gw.crust-gateway.xyz/ipfs'
         const ton_host = 'https://ton-gateway.crust.network/gateway'
-        let host = `${item.bagId ? ton_host : cru_host}/${item.cid || item.bagId}?filename=${encodeURI(item.fileName)}`
+        const host = `${item.bagId ? ton_host : cru_host}/${item.cid || item.bagId}?filename=${encodeURI(item.fileName)}`
         return host
     }
 
     const onDownloadFile = (item: data) => {
         const host = fileHost(item)
-        const link = document.createElement("a");
-        link.href = host || '';
-        link.click();
-        URL.revokeObjectURL(link.href);
-        window.open()
+        // const link = document.createElement("a", {});
+        // link.download = item.fileName;
+        // link.target = "_blank"
+        // link.href = host || '';
+        // link.click();
+        FileSaver.saveAs(host, item.fileName)
     }
-
     const onShare = (item: data) => {
         return fileHost(item)
     }
-
+    const refFirst = useRef<HTMLElement>(null)
+    const refEnd = useRef<HTMLElement>(null)
+    if (ref) {
+        const refData = {
+            scroll: (to: 'start' | 'end') => {
+                if (to == 'start') {
+                    refFirst.current?.scrollIntoView({ block: 'start', behavior: 'smooth' })
+                } else {
+                    refEnd.current?.scrollIntoView({ block: 'end', behavior: 'smooth' })
+                }
+            }
+        }
+        typeof ref == 'function' ? ref(refData) : ref.current = refData
+    }
 
     return <>
 
         <table className={classNames(" mb-[5px]", className)}>
             <tr className=" bg-[#FAFAFA] rounded-lg h-[50px] w-[200px] border-b-[#FFFFFF]  ">
                 {header.map((item, i) => {
-                    return <th key={`table_${i}`} className={classNames(`${data.length && !loading && ' w-full'} th`, item.className)}>{item.name}</th>
+                    const itemRef = (i == 0 ? refFirst : i == header.length - 1 ? refEnd : () => { })
+                    return <th ref={itemRef as any} key={`table_${i}`} className={classNames(`${data.length && !loading && ' w-full'} th`, item.className)}>{item.name}</th>
                 })}
             </tr>
             {!loading && data.length > 0 && data.map((item, i) => {
@@ -80,6 +96,6 @@ const ATable: FC<ATableProps> = ({ header = [], data = [], loading, className })
         {loading && <Loading className="mt-[100px]" />}
 
     </>;
-};
+});
 
 export default ATable
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react'
-import ReactDOM from 'react-dom/client'
 import './index.css'
 import { TonConnectUIProvider } from '@tonconnect/ui-react'
-import App from './App'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import "react-tooltip/dist/react-tooltip.css"
 import { Toaster } from 'sonner'
-import "react-tooltip/dist/react-tooltip.css";
+import App from './App'
 import { InitToolTip } from './utils/tooltip'
 
 

diff --git a/src/pages/files.tsx b/src/pages/files.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { BiChevronLeftCircle, BiChevronRightCircle } from 'react-icons/bi';
 import '../App.css';
-import ATable from '../components/ATable';
+import ATable, { ATableRef } from '../components/ATable';
 import { Pagination } from '../components/Pagination';
 import {
     copyTextToClipboard,
@@ -72,7 +73,7 @@ const Files = () => {
     useEffect(() => {
         getCurrentUserInfo();
     }, [add?.address, pgNum]);
-
+    const ref = useRef<ATableRef>(null)
     return (
         <div className="h-full min-h-[584px] w-full text-black text-left flex flex-col ">
             {
@@ -91,10 +92,15 @@ const Files = () => {
                     <div className=" flex w-full gap-5  flex-wrap mt-[10px] text-black">
                         <div>Files Stored: {userData?.pagination?.totalRecords || ''}</div>
                         <div>Space Usage: {userData?.countFileSize}</div>
+                        <div className='flex items-center text-2xl text-black gap-2 ml-auto'>
+                            <BiChevronLeftCircle className='hover:text-black/80 cursor-pointer' onClick={() => ref.current?.scroll('start')} />
+                            <BiChevronRightCircle className='hover:text-black/80 cursor-pointer' onClick={(() => ref.current?.scroll('end'))} />
+                        </div>
                     </div>
 
-                    <div className="mt-5  w-full flex-1  overflow-auto pb-2.5">
+                    <div className="mt-5  w-full flex-1  overflow-auto pb-2.5" >
                         <ATable
+                            ref={ref}
                             className='w-[57.8125rem]'
                             loading={loading}
                             header={[
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,5 +14,6 @@ module.exports = { @@
           'warn',
           { allowConstantExport: true },
         ],
+        "@typescript-eslint/no-explicit-any": "off"
       },
     }