update denpendency & fix eslints (#19)

benjamin-747 · web-flow · commit 390e045c97b6 · 2024-11-05T06:17:41.000Z
* update denpendency

* update denpendency

* fix eslints
diff --git a/app/api/crates/[name]/[version]/route.ts b/app/api/crates/[name]/[version]/route.ts
@@ -15,6 +15,8 @@ interface Dependency {
   version: string;
 }
 
+type Params = Promise<{ name: string, version: string }>
+
 function generateRandomVulnerabilities(): Vulnerability[] {
   const severities: Vulnerability['severity'][] = ['low', 'medium', 'high'];
   const randomVulnerabilities: Vulnerability[] = [];
@@ -34,7 +36,8 @@ function generateRandomVulnerabilities(): Vulnerability[] {
   return randomVulnerabilities;
 }
 
-export async function GET(req: NextRequest, { params }: { params: { name: string, version: string } }) {
+export async function GET(req: NextRequest, props: { params: Params }) {
+  const params = await props.params
   const { name, version } = params;
   const nameAndVersion = `${name}/${version}`;
 
@@ -58,7 +61,7 @@ export async function GET(req: NextRequest, { params }: { params: { name: string
     }
 
     const versionInfo = versionRes.rows[0];
-    const dependencies = dependenciesRes.rows.map((row: any) => ({
+    const dependencies = dependenciesRes.rows.map((row) => ({
       name: row.dependency_name,
       version: row.dependency_version,
     }));
diff --git a/app/api/crates/[name]/route.ts b/app/api/crates/[name]/route.ts
@@ -2,7 +2,11 @@ import { NextRequest, NextResponse } from 'next/server';
 import pool from '../../../lib/db';
 import { CrateInfo } from '@/app/lib/crate_info';
 
-export async function GET(req: NextRequest, { params }: { params: { name: string } }) {
+type Params = Promise<{ name: string }>
+
+export async function GET(req: NextRequest, props: { params: Params }) {
+  const params = await props.params
+
   const { name } = params;
 
   try {
@@ -27,7 +31,7 @@ export async function GET(req: NextRequest, { params }: { params: { name: string
       [name]
     );
 
-    const versions = versionsRes.rows.map((row: any) => row.version);
+    const versions = versionsRes.rows.map((row) => row.version);
 
     client.release();
 
diff --git a/app/api/crates/route.ts b/app/api/crates/route.ts
@@ -1,6 +1,6 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextResponse } from 'next/server';
 
-export async function GET(req: NextRequest) {
+export async function GET() {
   try {
     // 发送 HTTP 请求获取外部数据
     const externalApiUrl = 'http://210.28.134.203:6888/crates'; // 替换为你的外部 API URL
diff --git a/app/api/cves/route.ts b/app/api/cves/route.ts
@@ -34,7 +34,7 @@ export async function GET() {
   try {
     const randomCVEs = Array.from({ length: 7 }, generateRandomCVE);
     return NextResponse.json(randomCVEs);
-  } catch (error) {
+  } catch {
     return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
   }
 }
diff --git a/app/api/submit/route.ts b/app/api/submit/route.ts
@@ -1,6 +1,6 @@
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 
-export async function POST(request: { json: () => any; }) {
+export async function POST(request: NextRequest) {
     const apiUrl = process.env.API_URL; // 读取环境变量，获取后端服务的基础 URL
     const body = await request.json(); // 解析请求体
 
@@ -19,7 +19,7 @@ export async function POST(request: { json: () => any; }) {
         //解析成功的响应
         const result = await response.json();
         return NextResponse.json({ message: 'Submission successful', data: result });
-    } catch (error) {
+    } catch {
         return NextResponse.json({ error: 'An error occurred while submitting data.' }, { status: 500 });
     }
 }
diff --git a/app/programs/[name]/[version]/page.tsx b/app/programs/[name]/[version]/page.tsx
@@ -2,15 +2,15 @@
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
-import Header from '../../../../components/Header';
-import Footer from '../../../../components/Footer';
-import CrateInfoCard from '../../../../components/CrateInfoCard';
-import DependenciesList, { Dependency } from '../../../../components/DependenciesList';
-import DependencyGraph, { GraphDependency } from '../../../../components/DependencyGraph';
-import VulnerabilitiesList, { Vulnerability } from '../../../../components/VulnerabilitiesList';
-import SecurityAdvisories from '../../../../components/SecurityAdvisories';
-import BenchmarkResults from '../../../../components/BenchmarkResults';
-import VersionsSelector from '../../../../components/VersionsSelector';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import CrateInfoCard from '@/components/CrateInfoCard';
+import DependenciesList, { Dependency } from '@/components/DependenciesList';
+import DependencyGraph from '@/components/DependencyGraph';
+import VulnerabilitiesList, { Vulnerability } from '@/components/VulnerabilitiesList';
+import SecurityAdvisories from '@/components/SecurityAdvisories';
+import BenchmarkResults from '@/components/BenchmarkResults';
+import VersionsSelector from '@/components/VersionsSelector';
 import { CrateInfo } from '@/app/lib/crate_info';
 //异步获取依赖树
 async function fetchDependencyTree(name: string, version: string) {
@@ -36,7 +36,7 @@ const CratePage = () => {
     const [crateInfo, setCrateInfo] = useState<CrateInfo | null>(null);
     const [versions, setVersions] = useState<string[]>([]);
     const [dependencies, setDependencies] = useState<Dependency[]>([]);
-    const [graphDependencies, setGraphDependencies] = useState<GraphDependency>();
+    // const [graphDependencies, setGraphDependencies] = useState<GraphDependency>();
     const [vulnerabilities, setVulnerabilities] = useState<Vulnerability[]>([]);
     const [benchmarks, setBenchmarks] = useState<{ name: string; value: string }[]>([]);
     const { name, version } = useParams<{ name: string; version: string }>();
@@ -74,15 +74,15 @@ const CratePage = () => {
             });
 
 
-    }, [crateName, currentVersion]);
+    }, [crateName, currentVersion, name, version]);
 
 
     useEffect(() => {
         async function loadDependencies() {
             try {
                 const graphDep = await fetchDependencyTree(crateName, currentVersion);
                 console.log(graphDep);
-                setGraphDependencies(graphDep);
+                // setGraphDependencies(graphDep);
             } catch (error) {
                 console.error('Error fetching dependency tree:', error);
             }
@@ -121,12 +121,14 @@ const CratePage = () => {
                         <VersionsSelector
                             versions={versions}
                             currentVersion={version}
-                            crateName={crateInfo.name}
+                            // crateName={crateInfo.name}
                             onVersionChange={handleVersionChange}
                         />
 
                         <DependenciesList dependencies={dependencies} onDependencyClick={handleDependencyClick} />
-                        <DependencyGraph crateName={name} currentVersion={version} dependencies={graphDependencies} />
+                        <DependencyGraph crateName={name} currentVersion={version}
+                        // dependencies={graphDependencies}
+                        />
                     </div>
                 </div>
             </main>
diff --git a/app/programs/cves/[id]/page.tsx b/app/programs/cves/[id]/page.tsx
@@ -29,16 +29,20 @@ async function fetchCVE(id: string): Promise<CVE> {
   };
 }
 
-export default function CVEDetail({ params }: { params: { id: string } }) {
+type Params = Promise<{ id: string }>
+
+export default function CVEDetail({ params }: { params: Params }) {
+  const { id } = React.use(params);
+
   const [cve, setCve] = useState<CVE | null>(null);
 
   useEffect(() => {
     const getCVE = async () => {
-      const data = await fetchCVE(params.id);
+      const data = await fetchCVE(id);
       setCve(data);
     };
     getCVE();
-  }, [params.id]);
+  }, [id]);
 
   if (!cve) {
     return <div>Loading...</div>;
diff --git a/app/ui/programs/nav-links.tsx b/app/ui/programs/nav-links.tsx
@@ -1,9 +1,7 @@
 
 'use client';
 import {
-  UserGroupIcon,
   HomeIcon,
-  DocumentDuplicateIcon,
 } from '@heroicons/react/24/outline';
 import { PaperAirplaneIcon } from '@heroicons/react/24/outline';
 import { useState } from 'react';
@@ -62,7 +60,7 @@ const NavLinks: React.FC = () => {
       } else {
         messageApi.error('提交失败,请重试', 2);
       }
-    } catch (error) {
+    } catch {
       messageApi.error('提交失败，请检查网络连接');
       //console.log('提交失败，请检查网络连接。', error);
     }
diff --git a/components/DependencyGraph.tsx b/components/DependencyGraph.tsx
@@ -21,10 +21,15 @@ interface DependencyLink extends d3.SimulationLinkDatum<DependencyNode> {
 export interface DependencyGraphProps {
     crateName: string;
     currentVersion: string;
-    dependencies?: GraphDependency;
+    // dependencies?: GraphDependency;
 }
 
-const DependencyGraph: React.FC<DependencyGraphProps> = ({ crateName, currentVersion, dependencies }) => {
+interface SubDep {
+    name: string;
+    version: string;
+}
+
+const DependencyGraph: React.FC<DependencyGraphProps> = ({ crateName, currentVersion }) => {
     const [graphDependencies, setGraphDependencies] = useState<GraphDependency | null>(null);
     const d3Container = useRef<HTMLDivElement | null>(null);
     const router = useRouter();
@@ -33,10 +38,10 @@ const DependencyGraph: React.FC<DependencyGraphProps> = ({ crateName, currentVer
         async function fetchDependencyTree(name: string, version: string): Promise<GraphDependency> {
             const response = await fetch(`/api/crates/${name}/${version}`);
             const versionData = await response.json();
-            
+
             const dependencies = versionData.dependencies || [];
-            
-            const dependenciesDetails = await Promise.all(dependencies.map(async (subDep: any) => {
+
+            const dependenciesDetails = await Promise.all(dependencies.map(async (subDep: SubDep) => {
                 return fetchDependencyTree(subDep.name, subDep.version);
             }));
 
@@ -65,25 +70,25 @@ const DependencyGraph: React.FC<DependencyGraphProps> = ({ crateName, currentVer
         d3.select(d3Container.current).select('svg').remove();
 
         const svg = d3.select(d3Container.current).append('svg')
-        .attr('width', '100%')
-        .attr('height', '100%')
-        .attr('viewBox', `0 0 ${width} ${height}`)
-        .attr('preserveAspectRatio', 'xMidYMid meet');
+            .attr('width', '100%')
+            .attr('height', '100%')
+            .attr('viewBox', `0 0 ${width} ${height}`)
+            .attr('preserveAspectRatio', 'xMidYMid meet');
 
         svg.append('defs').append('marker')
-        .attr('id', 'arrowhead')
-        .attr('viewBox', '0 -5 10 10')
-        .attr('refX', 20) // 增加 refX 以使箭头远离节点
-        .attr('refY', 0)
-        .attr('orient', 'auto')
-        .attr('markerWidth', 7)
-        .attr('markerHeight', 7)
-        .append('path')
-        .attr('d', 'M 0,-5 L 10,0 L 0,5')
-        .attr('fill', '#333')
-        .style('stroke', 'none');
-    
-    
+            .attr('id', 'arrowhead')
+            .attr('viewBox', '0 -5 10 10')
+            .attr('refX', 20) // 增加 refX 以使箭头远离节点
+            .attr('refY', 0)
+            .attr('orient', 'auto')
+            .attr('markerWidth', 7)
+            .attr('markerHeight', 7)
+            .append('path')
+            .attr('d', 'M 0,-5 L 10,0 L 0,5')
+            .attr('fill', '#333')
+            .style('stroke', 'none');
+
+
 
         const nodesMap = new Map<string, DependencyNode>();
         const links: DependencyLink[] = [];
@@ -108,12 +113,12 @@ const DependencyGraph: React.FC<DependencyGraphProps> = ({ crateName, currentVer
         const nodes = Array.from(nodesMap.values());
 
         const simulation = d3.forceSimulation<DependencyNode>(nodes)
-        .force('link', d3.forceLink<DependencyNode, DependencyLink>(links).id(d => d.id).distance(100)) // 增加距离
-        .force('charge', d3.forceManyBody().strength(-500)) // 增加排斥力
-        .force('center', d3.forceCenter(width / 2, height / 2))
-        .force('collide', d3.forceCollide().radius(50)); // 增加碰撞半径
+            .force('link', d3.forceLink<DependencyNode, DependencyLink>(links).id(d => d.id).distance(100)) // 增加距离
+            .force('charge', d3.forceManyBody().strength(-500)) // 增加排斥力
+            .force('center', d3.forceCenter(width / 2, height / 2))
+            .force('collide', d3.forceCollide().radius(50)); // 增加碰撞半径
 
-            const link = svg.append('g')
+        const link = svg.append('g')
             .selectAll('line')
             .data(links)
             .enter().append('line')
diff --git a/components/VersionsSelector.tsx b/components/VersionsSelector.tsx
@@ -4,11 +4,11 @@ import React from 'react';
 interface VersionsSelectorProps {
     versions: string[];
     currentVersion: string;
-    crateName: string;
+    // crateName: string;
     onVersionChange: (version: string) => void;
 }
 
-const VersionsSelector: React.FC<VersionsSelectorProps> = ({ versions, currentVersion, crateName, onVersionChange }) => {
+const VersionsSelector: React.FC<VersionsSelectorProps> = ({ versions, currentVersion, onVersionChange }) => {
     return (
         <div className="bg-white p-4 mb-2 shadow-lg rounded-lg">
             <div className="flex items-center mb-0">
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export async function GET() {`
`34`	`34`	`try {`
`35`	`35`	`const randomCVEs = Array.from({ length: 7 }, generateRandomCVE);`
`36`	`36`	`return NextResponse.json(randomCVEs);`
`37`		`- } catch (error) {`
	`37`	`+ } catch {`
`38`	`38`	`return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });`
`39`	`39`	`}`
`40`	`40`	`}`