Skip to content

Commit da93f5d

Browse files
martinwq997martinwq997
authored
Dependents page,versions page.search and sort functions in those pages (crates-pro#163)
1 parent 367c171 commit da93f5d

File tree

8 files changed

+706
-175
lines changed

8 files changed

+706
-175
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const CratePage = () => {
4949

5050
return (
5151
<div className="min-h-screen bg-white flex flex-col">
52-
<div className="flex justify-center w-full py-8">
52+
<div className="flex justify-center w-full py-4">
5353
<div className="w-[1500px] px-8">
5454
<DependencyTable data={results?.data} />
5555
</div>

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

+65-18
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
//Dependents页面
22
"use client";
33
import React, { useEffect, useState } from 'react';
4-
4+
import { useParams } from 'next/navigation';
5+
import Image from 'next/image';
56
import DependentTable from '@/components/DependentTable';
67
import { dependentsInfo } from '@/app/lib/all_interface';
7-
import { useParams } from 'next/navigation';
8-
9-
8+
import Link from 'next/link';
109

1110
const CratePage = () => {
1211
const [results, setResults] = useState<dependentsInfo | null>(null);
1312
const [loading, setLoading] = useState(true);
14-
const [error, setError] = useState(null);
13+
const [error, setError] = useState<string | null>(null);
1514

1615
const params = useParams();
1716

18-
19-
2017
useEffect(() => {
2118
const fetchCrateData = async () => {
2219
try {
20+
setError(null);
2321
const response = await fetch(`/api/crates/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependents`);
2422

2523
if (!response.ok) {
@@ -28,29 +26,78 @@ const CratePage = () => {
2826

2927
const data = await response.json();
3028

31-
3229
setResults(data); // 设置获取的数据
33-
3430
} catch (error) {
35-
setError(null);
3631
console.log('Error fetching data:', error);
32+
setError("Failed to fetch data.");
3733
} finally {
3834
setLoading(false); // 完成加载
3935
}
4036
};
4137
fetchCrateData(); // 调用函数来获取数据
4238
}, [params.name, params.version, params.nsfront, params.nsbehind]); // 依赖项数组，确保在 crateName 或 version 改变时重新获取数据
4339

44-
if (loading) return <div>Loading...</div>;
45-
if (error) return <div className="text-red-500">Error: {error}</div>;
46-
47-
40+
if (loading) return <div className="flex justify-center items-center min-h-screen">Loading...</div>;
41+
if (error) return <div className="flex justify-center items-center min-h-screen text-red-500">Error: {error}</div>;
4842

4943
return (
50-
<div>
51-
52-
<DependentTable data={results?.data} />
53-
44+
<div className="min-h-screen bg-white flex flex-col">
45+
<div className="flex justify-center w-full py-4">
46+
<div className="w-[1500px] px-8">
47+
<DependentTable data={results?.data} />
48+
</div>
49+
</div>
50+
51+
{/* 页脚 */}
52+
<footer className="bg-[#002851] text-white py-12 mt-auto">
53+
<div className="flex justify-center w-full">
54+
<div className="w-[1500px] px-8">
55+
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
56+
<div>
57+
<Image
58+
src="/images/homepage/logo-footer.png"
59+
alt="CratesPro Logo"
60+
width={180}
61+
height={60}
62+
className="mb-4"
63+
/>
64+
</div>
65+
66+
<div>
67+
<h4 className="text-lg font-semibold mb-4">Resources</h4>
68+
<ul className="space-y-2">
69+
<li><Link href="#" className="hover:text-blue-300">Documentation</Link></li>
70+
<li><Link href="#" className="hover:text-blue-300">About</Link></li>
71+
<li><Link href="#" className="hover:text-blue-300">Blog</Link></li>
72+
<li><Link href="#" className="hover:text-blue-300">FAQ</Link></li>
73+
</ul>
74+
</div>
75+
76+
<div>
77+
<h4 className="text-lg font-semibold mb-4">API</h4>
78+
<ul className="space-y-2">
79+
<li><Link href="#" className="hover:text-blue-300">API</Link></li>
80+
<li><Link href="#" className="hover:text-blue-300">BigQuery Dataset</Link></li>
81+
<li><Link href="#" className="hover:text-blue-300">GitHub</Link></li>
82+
</ul>
83+
</div>
84+
85+
<div>
86+
<h4 className="text-lg font-semibold mb-4">Legal</h4>
87+
<ul className="space-y-2">
88+
<li><Link href="#" className="hover:text-blue-300">Legal</Link></li>
89+
<li><Link href="#" className="hover:text-blue-300">Privacy</Link></li>
90+
<li><Link href="#" className="hover:text-blue-300">Terms</Link></li>
91+
</ul>
92+
</div>
93+
</div>
94+
95+
<div className="border-t border-gray-700 mt-8 pt-8 text-center text-sm">
96+
<p>Copyright © 2023 jp21.com.cn All Rights Reserved(@ICPBH180237号)</p>
97+
</div>
98+
</div>
99+
</div>
100+
</footer>
54101
</div>
55102
);
56103
};

‎app/[nsfront]/[nsbehind]/[name]/[version]/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function Layout({
1212
const params = useParams();
1313

1414
return (
15-
<div>
15+
<div className="mb-0">
1616
<CrateNav
1717
nsfront={params.nsfront as string}
1818
nsbehind={params.nsbehind as string}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ const CratePage = () => {
188188
return (
189189
<div className="min-h-screen bg-white flex flex-col">
190190
<div className="flex justify-center">
191-
<div className="w-[1500px] px-8 py-6">
191+
<div className="w-[1500px] px-8 py-4">
192192
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
193193
{/* 左侧内容区域 - 占据2列 */}
194194
<div className="lg:col-span-2 space-y-6">

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

+71-28
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,109 @@
1-
//Dependents页面
1+
//Versions页面
22
"use client";
33
import React, { useEffect, useState } from 'react';
4-
5-
import VersionsTable from '@/components/VersionsTable';
6-
// import { VersionsInfo } from '@/app/lib/all_interface';
74
import { useParams } from 'next/navigation';
5+
import Image from 'next/image';
6+
import Link from 'next/link';
7+
import VersionsTable from '@/components/VersionsTable';
88

99
interface VersionInfo {
1010
version: string;
11-
// publishDay: string;
12-
dependents_number: number;
11+
updated_at: string;
12+
downloads: string;
13+
dependents: number;
1314
}
1415

15-
// interface VersionsTableProps {
16-
// data: VersionInfo[] | undefined;
17-
18-
// }
19-
2016
const CratePage = () => {
2117
const [results, setResults] = useState<VersionInfo[] | undefined>(undefined);
18+
console.log(results);
2219
const [loading, setLoading] = useState(true);
23-
24-
const [error, setError] = useState(null);
20+
const [error, setError] = useState<string | null>(null);
2521

2622
const params = useParams();
2723

28-
29-
3024
useEffect(() => {
3125
const fetchCrateData = async () => {
3226
try {
27+
setError(null);
3328
const response = await fetch(`/api/crates/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/versions`);
3429

3530
if (!response.ok) {
3631
throw new Error(`HTTP error! status: ${response.status}`);
3732
}
3833

3934
const data = await response.json();
40-
41-
4235
setResults(data); // 设置获取的数据
43-
4436
} catch (error) {
45-
setError(null);
4637
console.log('Error fetching data:', error);
38+
setError("Failed to fetch data.");
4739
} finally {
4840
setLoading(false); // 完成加载
4941
}
5042
};
5143
fetchCrateData(); // 调用函数来获取数据
52-
}, [params.name, params.version, params.nsfront, params.nsbehind]); // 依赖项数组，确保在 crateName 或 version 改变时重新获取数据
53-
console.log('results in versionsssssss', results);
54-
if (loading) return <div>Loading...</div>;
55-
if (error) return <div className="text-red-500">Error: {error}</div>;
56-
44+
}, [params.name, params.version, params.nsfront, params.nsbehind]); // 依赖项数组，确保在参数改变时重新获取数据
5745

46+
if (loading) return <div className="flex justify-center items-center min-h-screen">Loading...</div>;
47+
if (error) return <div className="flex justify-center items-center min-h-screen text-red-500">Error: {error}</div>;
5848

5949
return (
60-
<div>
61-
62-
<VersionsTable />
63-
50+
<div className="min-h-screen bg-white flex flex-col">
51+
<div className="flex justify-center w-full py-4">
52+
<div className="w-[1500px] px-8">
53+
<VersionsTable />
54+
</div>
55+
</div>
56+
57+
{/* 页脚 */}
58+
<footer className="bg-[#002851] text-white py-12 mt-auto">
59+
<div className="flex justify-center w-full">
60+
<div className="w-[1500px] px-8">
61+
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
62+
<div>
63+
<Image
64+
src="/images/homepage/logo-footer.png"
65+
alt="CratesPro Logo"
66+
width={180}
67+
height={60}
68+
className="mb-4"
69+
/>
70+
</div>
71+
72+
<div>
73+
<h4 className="text-lg font-semibold mb-4">Resources</h4>
74+
<ul className="space-y-2">
75+
<li><Link href="#" className="hover:text-blue-300">Documentation</Link></li>
76+
<li><Link href="#" className="hover:text-blue-300">About</Link></li>
77+
<li><Link href="#" className="hover:text-blue-300">Blog</Link></li>
78+
<li><Link href="#" className="hover:text-blue-300">FAQ</Link></li>
79+
</ul>
80+
</div>
81+
82+
<div>
83+
<h4 className="text-lg font-semibold mb-4">API</h4>
84+
<ul className="space-y-2">
85+
<li><Link href="#" className="hover:text-blue-300">API</Link></li>
86+
<li><Link href="#" className="hover:text-blue-300">BigQuery Dataset</Link></li>
87+
<li><Link href="#" className="hover:text-blue-300">GitHub</Link></li>
88+
</ul>
89+
</div>
90+
91+
<div>
92+
<h4 className="text-lg font-semibold mb-4">Legal</h4>
93+
<ul className="space-y-2">
94+
<li><Link href="#" className="hover:text-blue-300">Legal</Link></li>
95+
<li><Link href="#" className="hover:text-blue-300">Privacy</Link></li>
96+
<li><Link href="#" className="hover:text-blue-300">Terms</Link></li>
97+
</ul>
98+
</div>
99+
</div>
100+
101+
<div className="border-t border-gray-700 mt-8 pt-8 text-center text-sm">
102+
<p>Copyright © 2023 jp21.com.cn All Rights Reserved(@ICPBH180237号)</p>
103+
</div>
104+
</div>
105+
</div>
106+
</footer>
64107
</div>
65108
);
66109
};

‎components/CrateNav.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const CrateNav: React.FC<CrateNavProps> = ({ nsfront, nsbehind, name, version })
6565
<NewHeader />
6666
</div>
6767
</div>
68-
<div className="flex justify-center py-6">
68+
<div className="flex justify-center py-3">
6969
<div className="w-[1440px] h-[120px] bg-white rounded-2xl shadow-[0_0_12px_0_rgba(43,88,221,0.09)] px-8">
7070
<div className="flex items-center justify-between h-16">
7171
<div className="flex items-center space-x-4">

0 commit comments

Comments
 (0)