Skip to content

Commit 95ed087

Browse files
martinwq997martinwq997
authored
aaa (#66)
1 parent 53c6367 commit 95ed087

File tree

8 files changed

+287
-319
lines changed

8 files changed

+287
-319
lines changed

‎app/context/CrateContext.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// context/HeaderContext.tsx
2+
"use client";
3+
import React, { createContext, useContext, useState } from 'react';
4+
5+
// 定义 cratesInfo 接口
6+
export interface CratesInfo {
7+
crate_name: string;
8+
description: string;
9+
dependencies: {
10+
direct: number;
11+
indirect: number;
12+
};
13+
dependents: {
14+
direct: number;
15+
indirect: number;
16+
};
17+
cves: {
18+
cve_id: string;
19+
url: string;
20+
description: string;
21+
}[];
22+
versions: string[];
23+
}
24+
25+
// 定义 HeaderContext 的类型
26+
interface CrateData {
27+
crateName: string | undefined;
28+
crateVersion: string | string[] | undefined;
29+
results: CratesInfo | null; // 存储 cratesInfo 数据
30+
}
31+
32+
interface HeaderContextType {
33+
crateData: CrateData;
34+
setCrateData: React.Dispatch<React.SetStateAction<CrateData>>;
35+
}
36+
37+
// 创建上下文，并设置默认值为 undefined
38+
const HeaderContext = createContext<HeaderContextType | undefined>(undefined);
39+
40+
// 创建提供者组件
41+
export const HeaderProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
42+
const [crateData, setCrateData] = useState<CrateData>({
43+
crateName: undefined,
44+
crateVersion: undefined,
45+
results: null,
46+
});
47+
48+
// 这里可以添加一些副作用，例如在 crateData 更新时执行某些操作
49+
50+
return (
51+
<HeaderContext.Provider value={{ crateData, setCrateData }}>
52+
{children}
53+
</HeaderContext.Provider>
54+
);
55+
};
56+
57+
// 创建一个自定义 Hook 用于使用上下文
58+
export const useHeaderContext = (): HeaderContextType => {
59+
const context = useContext(HeaderContext);
60+
if (context === undefined) {
61+
throw new Error('useHeaderContext must be used within a HeaderProvider');
62+
}
63+
return context;
64+
};

‎app/homepage/[nsfront]/[nsbehind]/[name]/[version]/dependencies/page.tsx‎

Lines changed: 7 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1+
//Dependencies页面
12
"use client";
23
import React, { useEffect, useState } from 'react';
34
import { useParams } from 'next/navigation'
4-
import Link from 'next/link';
5+
56
import DependencyTable from '../../../../../../../components/DependencyTable';
67
import { dependenciesInfo } from '@/app/lib/all_interface';
78

9+
810
const CratePage = () => {
911
const params = useParams();
1012

1113
const [results, setResults] = useState<dependenciesInfo | null>(null);
12-
const [searchQuery, setSearchQuery] = useState('');
14+
1315

1416
const [loading, setLoading] = useState(true);
1517
const [error, setError] = useState(null);
1618

17-
const crateName = params.name; // 从 URL 中获取 crate_name 参数
18-
const version = params.version; // 从 URL 中获取 version 参数
19+
1920

2021
useEffect(() => {
2122
const fetchCrateData = async () => {
@@ -45,100 +46,12 @@ const CratePage = () => {
4546
if (error) return <div className="text-red-500">Error: {error}</div>;
4647
// console.log('dependencyyyyyyyyyyyyyyy', results?.data);
4748
return (
48-
<div>
49+
<>
4950
{/* Existing header and search */}
50-
<header className="bg-white shadow p-4">
51-
<div className="flex justify-between items-center">
52-
<div className="text-xl font-bold flex flex-col items-start space-y-1">
53-
<Link href="/homepage">
54-
<div className="flex items-center space-x-1">
55-
<span>open</span>
56-
<span className="text-green-500">/</span>
57-
<span>source</span>
58-
<span className="text-green-500">/</span>
59-
<span>insights</span>
60-
</div>
61-
</Link>
62-
<div className="flex items-center space-x-2 mt-15">
63-
<span>{crateName}</span>
64-
<div className="relative">
65-
<button className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-100">
66-
{version}
67-
<svg
68-
className="ml-2 w-4 h-4"
69-
viewBox="0 0 20 20"
70-
fill="currentColor"
71-
>
72-
<path
73-
fillRule="evenodd"
74-
d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
75-
clipRule="evenodd"
76-
/>
77-
</svg>
78-
</button>
79-
{/* 这里可以添加版本选择的下拉菜单 */}
80-
</div>
81-
</div>
82-
</div>
83-
<div className="flex items-center mb-4">
84-
<input
85-
type="text"
86-
placeholder="Search for open source crates"
87-
className="p-2 border-none rounded-md text-gray-800 w-80 max-w-2xl"
88-
value={searchQuery}
89-
onChange={(e) => setSearchQuery(e.target.value)} // 更新搜索内容
90-
/>
91-
<Link href={{
92-
pathname: '/homepage/search',
93-
query: {
94-
crate_name: searchQuery, // 将搜索内容作为参数传递给新页面
95-
},
96-
}}>
97-
<button className="bg-teal-600 text-white rounded-md p-2 ml-2 hover:bg-teal-700">Search</button>
98-
</Link>
99-
</div>
100-
</div>
101-
102-
{/* 导航栏 */}
103-
<nav className="mt-4">
104-
<ul className="flex space-x-4 text-gray-500 relative">
105-
<li className="cursor-pointer relative">
106-
<Link
107-
href={`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}`}
108-
>
109-
<div className="block py-2 relative z-10">Overview</div>
110-
</Link>
111-
</li>
112-
<li className="cursor-pointer relative">
113-
<Link
114-
href={
115-
`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependencies`}
116-
>
117-
<div className="block py-2 relative z-10">Dependencies</div>
118-
</Link>
119-
<div className="absolute bottom-0 left-0 w-full h-1 bg-blue-500"></div>
120-
</li>
121-
122-
<Link
123-
href={`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependents`}
124-
>
125-
<li className="cursor-pointer relative">
126-
<div className="block py-2 relative z-10">Dependents</div>
127-
</li>
128-
</Link>
129-
{/* <li className="cursor-pointer relative">
130-
<a href="#" className="block py-2 relative z-10">Compare</a>
131-
</li>
132-
<li className="cursor-pointer relative">
133-
<a href="#" className="block py-2 relative z-10">Versions</a>
134-
</li> */}
135-
</ul>
136-
</nav>
137-
</header>
13851

13952
<DependencyTable data={results?.data} />
53+
</>
14054

141-
</div>
14255
);
14356
};
14457

‎app/homepage/[nsfront]/[nsbehind]/[name]/[version]/dependents/page.tsx‎

Lines changed: 5 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1+
//Dependents页面
12
"use client";
23
import React, { useEffect, useState } from 'react';
3-
import Link from 'next/link';
4+
45
import DependentTable from '../../../../../../../components/DependentTable';
56
import { dependentsInfo } from '@/app/lib/all_interface';
67
import { useParams } from 'next/navigation';
78

89

10+
911
const CratePage = () => {
1012
const [results, setResults] = useState<dependentsInfo | null>(null);
1113
const [loading, setLoading] = useState(true);
1214
const [error, setError] = useState(null);
1315

1416
const params = useParams();
1517

16-
const crateName = params.name; // 从 URL 中获取 crate_name 参数
17-
const version = params.version; // 从 URL 中获取 version 参数
18+
1819

1920
useEffect(() => {
2021
const fetchCrateData = async () => {
@@ -43,95 +44,10 @@ const CratePage = () => {
4344
if (loading) return <div>Loading...</div>;
4445
if (error) return <div className="text-red-500">Error: {error}</div>;
4546

46-
//console.log('dependencyyyyyyyyyyyyyyy', results?.data);
47+
4748

4849
return (
4950
<div>
50-
{/* Existing header and search */}
51-
<header className="bg-white shadow p-4">
52-
<div className="flex justify-between items-center">
53-
<div className="text-xl font-bold flex flex-col items-start space-y-1">
54-
<Link href="/homepage">
55-
<div className="flex items-center space-x-1">
56-
<span>open</span>
57-
<span className="text-green-500">/</span>
58-
<span>source</span>
59-
<span className="text-green-500">/</span>
60-
<span>insights</span>
61-
</div>
62-
</Link>
63-
<div className="flex items-center space-x-2 mt-15">
64-
<span>{crateName}</span>
65-
<div className="relative">
66-
<button className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-100">
67-
{version}
68-
<svg
69-
className="ml-2 w-4 h-4"
70-
viewBox="0 0 20 20"
71-
fill="currentColor"
72-
>
73-
<path
74-
fillRule="evenodd"
75-
d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
76-
clipRule="evenodd"
77-
/>
78-
</svg>
79-
</button>
80-
{/* 这里可以添加版本选择的下拉菜单 */}
81-
</div>
82-
</div>
83-
</div>
84-
<div className="flex items-center space-x-4">
85-
<input
86-
type="text"
87-
className="p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
88-
placeholder="Search..."
89-
/>
90-
<button className="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
91-
Search
92-
</button>
93-
</div>
94-
</div>
95-
96-
{/* 导航栏 */}
97-
<nav className="mt-4">
98-
<ul className="flex space-x-4 text-gray-500 relative">
99-
<li className="cursor-pointer relative">
100-
<Link
101-
href={`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}`}
102-
>
103-
<div className="block py-2 relative z-10">Overview</div>
104-
</Link>
105-
106-
</li>
107-
<li className="cursor-pointer relative">
108-
<Link
109-
href={
110-
`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependencies`}
111-
>
112-
<div className="block py-2 relative z-10">Dependencies</div>
113-
</Link>
114-
</li>
115-
116-
<Link
117-
href={`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependents`}
118-
>
119-
<li className="cursor-pointer relative">
120-
<div className="block py-2 relative z-10">Dependents</div>
121-
<div className="absolute bottom-0 left-0 w-full h-1 bg-blue-500"></div>
122-
</li>
123-
</Link>
124-
{/* <li className="cursor-pointer relative">
125-
<a href="#" className="block py-2 relative z-10">Compare</a>
126-
</li>
127-
<li className="cursor-pointer relative">
128-
<a href="#" className="block py-2 relative z-10">Versions</a>
129-
</li> */}
130-
</ul>
131-
</nav>
132-
133-
</header>
134-
13551

13652
<DependentTable data={results?.data} />
13753

0 commit comments

Comments
 (0)